yos_web/src/SDrpManagement/salerExpenditure/detail/modules/income/add.vue

<template>
  <div>
    <el-button size="small" :type="data.status == '审核'?'':'primary'"  @click="addShow" :disabled="data.status == '审核'">添 加</el-button>
    <el-drawer
        title="添加收入明细"
        :visible.sync="drawerVisible"
        size="70%"
        direction="rtl"
        append-to-body
        @close="onClose">
      <div class="drawer__panel" style="margin-bottom: 0!important;">
        <el-input  style="width:200px;margin-bottom: 10px" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
        </el-input>
        <tableNewLayout :layout="tablecols" :data="list" :opwidth="200" height="calc(100vh - 235px)" :width="true" :custom="true" :checkbox="true" @selectionChange="selectionChange">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'amount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'orderExpectedamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'¥ 0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'orderprice'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'orderamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'price'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'rewardamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'payapplyamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'unpayapplyamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'rate'">
              {{scope.column.data[[scope.column.columnname]]?Math.round(tool.formatAmount(scope.column.data[[scope.column.columnname]]*100)*100)/100 + '%':scope.column.data[[scope.column.columnname]] == 0?'0%':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'allocation_rate'">
              {{scope.column.data[[scope.column.columnname]]?Math.round(tool.formatAmount(scope.column.data[[scope.column.columnname]]*100)*100)/100 + '%':scope.column.data[[scope.column.columnname]] == 0?'0%':'--'}}
            </div>
            <div v-else-if="scope.column.columnname === 'afterrebateprice'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'¥ 0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'afterrebateamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'¥ 0.00'}}
            </div>
            <div v-else-if="scope.column.columnname === 'subhrcashbilldetailamount'">
              {{scope.column.data[[scope.column.columnname]]?'¥ '+tool.formatAmount(scope.column.data[[scope.column.columnname]],2):scope.column.data[[scope.column.columnname]] == 0?'¥ 0.00':'¥ 0.00'}}
            </div>
            <div v-else>
              {{scope.column.data[[scope.column.columnname]] || scope.column.columnname === 'operation'?scope.column.data[[scope.column.columnname]]:'--'}}
            </div>
          </template>
        </tableNewLayout>
        <div  class="container normal-panel" style="text-align:right">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[50, 100, 150, 200]"
              :page-size="100"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary"  @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "add",
  props:['data'],
  data(){
    return {
      drawerVisible:false,
      param:{
        "id": 20240111143204,
        "content": {
          "hrid": "",
          "sa_hraccountclassid":"",
          "sa_hrcashbillid":"",
          "pageNumber": 1,
          "pageSize": 100,
          "where": {
            "condition": ""
          }
        }
      },
      currentPage:0,
      total:0,
      selectData:[],
      tablecols:'',
      list:[],
    }
  },
  methods:{
    addShow(){
      this.drawerVisible = true
      this.listData(this.param.content.pageNumber = 1)
    },
    async listData(){
      this.param.content.hrid = this.data.hrid
      this.param.content.sa_hraccountclassid = this.data.sa_hraccountclassid
      this.param.content.sa_hrcashbillid = this.data.sa_hrcashbillid
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    async onSubmit(){
      const res = await this.$api.requested({
        "id": 20240111131204,
        "content": {
          "sa_hrcashbillid": this.$route.query.id,
          "hrcashbilldetail": this.selectData
        }
      })
      this.tool.showMessage(res,()=>{
        this.drawerVisible = false
        this.listData(this.param.content.pageNumber = 1)
        this.$emit('onSuccess')
      })
    },
    onClose(){

    },
    selectionChange(data){
      this.selectData = data.map(item=>{
        return {
          "sa_hrcashbilldetailid": 0,
          "allocation_rate": item.allocation_rate,
          "ownerid": item.sa_hrcashbilldetailid,
          "rate": item.rate,
          "price": item.price,
          "sa_orderitemsid": item.sa_orderitemsid,
          "sa_orderid": item.sa_orderid,
          "remarks": '',
          "orderprice": item.orderprice,
          "amount": item.amount
        }
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).incomeSelectTable.tablecols
  }
}
</script>

<style scoped>

</style>