drp-ui/src/views/purchase/purchase-order/add/index.vue

<script>
import orderApi from "@/api/business/purchase/purchase-order";
import { initColumns, initDicts, initRules, initParams } from "@/utils/init/index.js";
// import { Columns, TabColumns } from "./column";
import judgeColumns from "./column";
import { tax, currency } from "@/components/popover-select-v2/fetch";
import VirtualScroll from 'el-table-virtual-scroll';
import { VirtualColumn } from 'el-table-virtual-scroll';

const {Columns,TabColumns} = judgeColumns();
    
const NewColumns = initColumns(Columns);
const NewTabColumns = TabColumns.map((element) => ({
  ...element,
  tableColumns: initColumns(element.tableColumns),
}));

const SelectColumns = NewColumns.filter(
  (column) => column.inputType === "Select"
);
NewTabColumns.forEach((column) => {
  SelectColumns.push(
    ...column.tableColumns.filter((cColumn) => cColumn.inputType === "Select")
  );
});

export default {
  name: "AddPurchaseOrderDrawer",
  props:{
    // roles:{
    //   type:[Array,String,Object],
    //   require:true,
    // }
  },
  dicts: initDicts(SelectColumns),
  components: {
    'virtual-scroll':VirtualScroll,VirtualColumn,
    FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
    popDialog: () => import("@/components/PopDialog/index.vue"),
    BatchImport: () => import("@/components/BatchImport/index.vue"),
  },
  

  data() {

    return {
      visible: false,
      loading:false,
      tabLoading:false,
      columns: NewColumns,
      rules: initRules(NewColumns),
      count:0,
      params: {
        ...initParams(NewColumns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      },
      tabColumns: NewTabColumns,
      tabName: "puOrderItemList",
      isCopy:false,
      tableData:[],  //虚拟滚动加载显示的数据
      rowHeight: 60,
    };
  },
  computed: {
    role:{
      get(){
        let {roles} = this.$store.state.user;
        return roles.find(item => item === "syfz-purchaseorder") || "procurementManager";
        
      },
      set(){}
    },
    tabHeight:{
      get(){
        return `${this.params['puOrderItemList'].length ? 
                  (this.params['puOrderItemList'].length > 8 ? 500 :
                   (this.params['puOrderItemList'].length *60) +170)
                : 120}px`
      },
      set(){}
    },
  },
  watch: {
    "params.puOrderItemList": {
      handler(nVal, oVal) {
        this.visible &&  
          this.handleSynchronousMaterial(
            "puOrderItemList",
            "puOrderExecuteList"
          );
      },
      deep: true,
    },
    "params.puOrderExecuteList": {
      handler(nVal, oVal) {
        this.visible &&
          this.handleSynchronousMaterial(
            "puOrderExecuteList",
            "puOrderItemList"
          );
      },
      deep: true,
    },
    "params.billType":{
      handler(nVal, oVal){

        // let billList = ['21-Cxx-02','21-Cxx-04','21-Cxx-10','21-Cxx-14','21-Cxx-09','21-Cxx-17','21-Cxx-18'];
        let billList = ['21-Cxx-02','21-Cxx-04','21-Cxx-10', '21-Cxx-14'];

        this.params.warehouse = '';
        this.params.warehouseName = '';
        this.params.goodsAllocation = '';
        this.params.goodsAllocationName = '';
        
        if(billList.find(item => item === nVal)){
          this.rules.warehouseName = [
            { required: true, message: "WMS入库仓库不能为空", trigger: "change" },
          ];
        }else{
          this.rules.warehouseName = null;
        }
        this.rules.goodsAllocationName = null;

        this.count++;
      }
    }
  },
  methods: {
    beforeOpen() {
      if(!this.isCopy){

        const { deptName, deptId, name, nickName, orgName, orgId } = this.$store.state.user;
        this.params.puOrg = orgId;
        this.params.puOrgName = orgName;
        this.params.buyer = name;
        this.params.buyerName = nickName;
        this.params.puDept = deptId;
        this.params.puDeptName = deptName;
        this.params.billDate = new Date().Format('yyyy-MM-dd');
        this.params.createTime = new Date().Format('yyyy-MM-dd HH:mm:ss');
        console.log(this.params,'this.params');
        // this.addTableRow();
      }
    },
    setVisible(prop,iscopy) {
      this.visible = prop;

      this.isCopy = iscopy;

      if(!this.visible){
        this.$refs['orderAddForm'].clearValidate();
      }
    },
    // 复制赋值
    async setCopyParams(id) {

      try {
        this.loading = true;
        const { code, msg, data } = await orderApi.details(id);

        if (code === 200) {

          this.params = {
            ...data,
            id: "",
            code: "",
            isEnd:'N',
            status: "0",
            source: "3",
            isClose:'N',
            billDate: new Date().Format('yyyy-MM-dd'),
            createTime : new Date().Format('yyyy-MM-dd HH:mm:ss'),
            closeTime:'',
            oaDemandNo:'',
            isInvoice:'N',
            isSendWms:'N',
            rebateMoney:'',
            invoiceMoney:'',
            paymentMoney:'',
            applyPaymentMoney:'',
            erpOrderCode:'',

          };

          try {
            const { code, rows} = await orderApi.REFER(
              {
                type:'WAREHOUSE_PARAM',
                search:  this.params.warehouseName,
                isPage: true,
              }, {pageNum: 1 , pageSize: 10} );

              if(code ==200){
                this.judgeGoodsAllocation(rows[0].csFlag);
              }


          } catch (error) {
            
          }

          for (const key in this.params) {
            // if (Array.isArray(this.params[key])) {
            if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
              this.params[key].forEach((v) => {
                v.id = "";
                v.demandCode = "";
                v['isInvoice'] && (v['isInvoice'] = 'N');
                v['isStorage'] && (v['isStorage'] = 'N');
                v['isArrival'] && (v['isArrival'] = 'N');
                v['isPayment'] && (v['isPayment'] = 'N');
              });

            }
          }
          // 清空   累计本币开票金额、
          // 累计付款金额、累计付款申请金额、累计开票主数量、最终关闭时间
          // 、最终关闭、已同步WMS 、订单抵扣余额金额、订单使用返利金额、 发票标识
          

        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 增行
    addTableRow(prop) {
      for (const key in this.params) {

        // if (Array.isArray(this.params[key])) {
        if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {

          const arr = this.tabColumns.find(

            (element) => element.key === key

          ).tableColumns;

          let rowData = initParams(arr, "key", "value");
         

          "rowno" in rowData &&
            (rowData["rowno"] = this.params[key].length ? 
              this.params[key][this.params[key].length - 1]['rowno'] +1 :
               this.params[key].length + 1
            );

            // 物料
            if("rowNo" in rowData){
              
              rowData["rowNo"] = this.params[key].length ? 
              this.params[key][this.params[key].length - 1]['rowNo'] +1 :
               this.params[key].length + 1;
              // 扣税类别
              rowData["taxDeductClassify"] = '1';
              // 折本汇率
              rowData["exchangeRate"] = '1';
              // 价格类型
              rowData["priceType"] = 'order';
              // 币种
              rowData["currency"] = '1002Z0100000000001K1';
              rowData["currencyName"] = '人民币';
            }
            rowData['insertId'] = new Date().getTime();
          

          // 是否完成询价，新增明细行需默认明细为false
          // rowData["whetherCompleteInquiry"] = false;
          this.params[key].push(rowData);
        }
      }

      // const arr = this.tabColumns.find(
      //   (element) => element.key === this.tabName
      // ).tableColumns;
      // prop.push(initParams(arr, "key", "value"));
    },
    // 删行
    // 删除行
    async delTableRow(prop, row, name) {

      let delNo = name  === 'puOrderItemList' ? 'rowNo' :'rowno';

      if(prop.length === 1){
        this.$alert('订单行不允许为空', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      }else{
        for (const key in this.params) {
        

          if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {

            this.params[key].forEach((item,index) =>{

              let flag = key === 'puOrderItemList' ? 'rowNo' :'rowno';

              // if(item.id && item.id === row.id){
              //   console.log('删除已有ID的');
              //   item['delFlag'] = '2';
              // }

              if(item[flag] && item[flag] === row[delNo]){

                item.id ? (item['delFlag'] = '2'):
                this.params[key].splice(index, 1);
              }

            })

            // this.params[key][index].id ? 
            //   (this.params[key][index]['delFlag'] = '2') :
            //   this.params[key].splice(index, 1);

            
          }
        }


        await this.handleGetPrice();
      }
    },
    // 同步子表物料
    handleSynchronousMaterial(tableOne, tableTwo) {
      let _this = this;
      // this.params[tableOne]-- -> this.params[tableTwo]
      this.params[tableOne] &&

        this.params[tableOne].forEach((item, index) => {

          for (const key in item) {

            if(!_this.params[tableTwo][index]){

               const arr = _this.tabColumns.find(
                  (element) => element.key === tableTwo
                ).tableColumns;

                _this.params[tableTwo].push(initParams(arr, "key", "value"));
            }
            
            if (key in _this.params[tableTwo][index]) {

              _this.params[tableTwo][index].material = item.material;

              key !== 'id' && ( _this.params[tableTwo][index][key] = item[key]);

            }
          }
        });
    },
    // 取消
    handleCancel() {
      this.params = {
        ...initParams(this.columns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      };
      this.setVisible(false);
    },
    // 判断保存条件
    judgeSaveCondition(cb){
      this.$refs['orderAddForm'].validate(async (valid) => {
        if (valid) {

          if(!this.params['puOrderItemList'].length || !this.params['puOrderExecuteList'].length){
            this.$notify.error({
              title: '错误',
              message: '请填写订单行！'
            });
            return false;
          }

          // puOrderItemList
        //  let isPrice =  this.params.puOrderItemList.filter(item => !item.whetherCompleteInquiry);

         

        //  if(isPrice.length && this.role === 'procurementManager'){

        //     this.$notify.error({
        //       title: '错误',
        //       message: '询价失败！'
        //     });
        //     return false

        //  }
        //  console.log(isPrice,'isPrice');
          cb();
        } else {
          this.$notify.error({
              title: '错误',
              message: '存在必填项未填写'
            });
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 保存
     handleSava() {
     console.log(this.params,'this.params---------');
      this.judgeSaveCondition(async()=>{
        try {
            this.loading = true;
            const { code, msg } = await orderApi.create(this.params);
            if (code === 200) {
              this.handleCancel();
            }
          } catch (err) {
            //
          } finally {
            this.loading = false;
          }
      })
    },
    judgeGoodsAllocation(porp){
      if(porp === 'Y'){
        this.rules.goodsAllocationName = [
          { required: true, message: "货位不能为空", trigger: "change" },
        ];
      } else{ 
        this.rules.goodsAllocationName = null;
      }
      this.count++;
   },
    // 主表参照改变之后
   async handleReferChange(val, type, source){
     let page = { pageNum: 1 , pageSize: 10 };
      // 供应商选择  
      if( type === 'SUPPLIER_PARAM' ){


        let relevanceRefer = [
          {
            // 供应商联系人
            key:'supplierContacts',
            params:{
              type:'SUPPLIERCONTACTS_PARAM',
              supplierId:val.id,
            }
          },
          {
            // 供应商业务员
            key:'supplierPersonal',
            params:{
              type:'PSNLICENSE_PARAM',
              supplierId:val.id,
              pkOrg: source.puOrg,
            }
          }
        ]
        
        try {

          let promiseArr =  relevanceRefer.map( (refer) =>{

            return new Promise((resolve,reject)=>{

               orderApi.REFER(
                {
                  ...refer.params,
                  search: "",
                  isPage: true,
                }, page ).then(res=>{

                  let {code,rows} = res;
                  if (code === 200) {
                    
                    source[refer.key] = rows[0]? rows[0].id :'';
                    
                    source[`${refer.key}Name`] = rows[0] ? rows[0].name :'';
                    
                    resolve();
                  }
              })
            })
          })

          Promise.all(promiseArr).then(async()=>{
            // 明细不为空的情况下进行询价
            let detailList = this.params['puOrderItemList'].filter(item => (
                item.material && item.material != '' 
              ))
              
              if(detailList.length){

                await this.handleGetPrice();
              }
          })
        } catch (error) {}
      }

      // 组织
      if(type === 'ORG_PARAM'){

          for (const key in this.params) {

            // if (Array.isArray(this.params[key])) {
            if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {

              this.params[key] = [];

            }
            else if(key === 'sysFileRecordList'){
              this.params[key] = [];
            }
             else if (
              key != "puOrg" &&
              key != "puOrgName" &&
              key != "buyer" &&
              key != "buyerName" &&
              key != "puDept" &&
              key != "puDeptName" &&
              key != "status" &&
              key != "billDate" &&
              key != "createTime" 
            ) {
              this.params[key] = "";
            } else {
            }
          }
        

      }

      // WMS仓库
      if(type === 'WAREHOUSE_PARAM'){
        this.judgeGoodsAllocation(val.csFlag);
        source.goodsAllocation = ''
        source.goodsAllocationName = ''
        // this.count++
      }
    },

    // 下拉框选择改变
    handleSelectChange(val,typeName){

      if(val === 'billType'){

      this.params['billTypeName'] = this.dict.type[typeName].find(item => item.value == this.params[val]).label;

      }

    },


    // 子表参照改变之后
    async handleTabReferChange(val,  type, source) {

      // console.log(val,'val');
      // 触发物料参照询价 
      if (type == "MATERIAL_PARAM" && source.qty && source.qty != "") {

        source['qty'] = 0;

        // source['whetherCompleteInquiry'] = false;

        source['taxPrice'] = 0;

        source['money'] = 0;

        source['taxDeductMoneya'] = 0;

        source['price'] = 0;
        
        source['notaxMoney'] = 0;

        source['tax'] = 0;

        this.params['qty'] = 0;
        this.params['originalQty'] = 0;
        this.params['money'] = 0;
        this.params['originalMoney'] = 0;
        this.params['notaxMoney'] = 0;
        source.isDrug = val.materialMedcine.isDrug  == '0' ? 'Y' : 'N';

        // await this.handleGetPrice();

      }

      // 物料触发税率
      if( type == "MATERIAL_PARAM"){
        let {rateCode} = source;
        try {
          // try
          this.loading = true;
          const { ntaxrate } = await tax(rateCode);
          source.tax = ntaxrate === "0E-8" ? 0 : ntaxrate;
        } catch (err) {
          // catch
          console.error(err);
        } finally {
          // finally
          this.loading = false;
        }
      }

      

    },

    // 子表下拉框改变
    async handleTabSelectChange(type,row){
     
      if(type == 'priceType' && row.material && row.qty && row.qty != ""){

        // row['whetherCompleteInquiry'] = false;

        await this.handleGetPrice();
      }
    },

    // 子表inputNumber
    handleInputChange(row, type) {
      // 物料数量变化----询价
      if ((type == "qty" || type == "taxPrice" || type == 'taxDeductMoneya')&& row.material) {

        // row['whetherCompleteInquiry'] = false;

        
       this.handleGetPrice();

      }

      // if(this.role === 'syfz-purchaseorder' && row.material && (type == "qty" ||type === "taxPrice" )){

      //   row.money = row.qty * row.taxPrice;
      // }

    },

    // 子表多选框改变
    handleTabCheckbox(type,source){

      // 勾选赠品，价税合计更新为0，含税单价、无税单价更新为0
      if(type === 'isGift' && source.material && source.qty && source.qty != ""){

        // source['whetherCompleteInquiry'] = false;

        this.handleGetPrice()
      }

    },
    // 询价 getPrice
    async handleGetPrice() {

        try {
          
          // action:insert(新增)、revise(修订)、update(编辑)
          let { code, data } = await orderApi.getPrice({ ...this.params,action: 'insert' });
  
          if (code == 200) {
            // console.log(data,'data*----------******');
            
            this.params = {...data};
            // console.log(this.params,'this.params----------------------');
          }
  
        } catch (error) {} 
      
    },

    async handelImport(fileList){

      try {

        let formData = new FormData();

        formData.append('file',fileList[0].raw);

        
        let tabList = {
          puOrderItemList: [...this.params.puOrderItemList],
          puOrderExecuteList: [...this.params.puOrderExecuteList],
        }

        const blob = new Blob([JSON.stringify(tabList)], {
            type: 'application/json'
        })

        formData.append('tabList',blob);
        
        
        this.$modal.loading("正在上传文件，请稍候...");

        let {code,data} = await orderApi.orderImport(formData);

        if(code == 200) {
          // this.tabLoading = true;
          // puOrderExecuteList puOrderItemList

          // let size = 20;
          // let num = 1;
          // let total = Math.ceil(data['puOrderItemList'].length / size);

          // let resultData = {...data};
          
          // let intervalPush = setInterval(()=>{

          //   if(num > total){
              
          //     clearInterval(intervalPush);

          //     this.tabLoading = false;
            
          //     this.handleGetPrice();
          //   } 
    
          //   for (const key in resultData) {

          //     resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
            

          //       this.params[key].push(item);

          //     })

          //   }

          //   num++;

          // },200);

          for (const key in data) {

            this.params[key].push(...data[key]);

          }

          
          let {setVisible} =  this.$refs.batchImport;
          
          setVisible(false);

          this.handleGetPrice();
          
            
          
        }
        
      } catch (error) {
        
      }finally{
        this.$modal.closeLoading();
        
      }
      
    },
    
    async handleTemDownload(){

      this.download('/pu/order/downloadFailData',{}, `采购订单物料信息模板${new Date().getTime()}.xlsx`);
    },

    // judgeRole(){
    //   let {roles} = this.$store.state.user;
    //   let role =  roles.find(item => item === "syfz-purchaseorder") || "procurementManager";
    //   return role;
    // },
    getSummaries({ columns, data }){
      
      const means = [] // 合计
      let { tabColumns, tabName } = this;
      columns.forEach((column, columnIndex) => {
          if (columnIndex === 0) {
              means.push('合计')
          } else {
              const values = data.map(item => Number(item[column.property]));
              
              let sumColumn = tabColumns.find(tab => tab.key === tabName).tableColumns.filter(({key,isSummary}) => isSummary && key === column.property);

              // 合计
              // if (!values.every(value => isNaN(value))) {
              if (sumColumn.length) {
                  means[columnIndex] = values.reduce((prev, curr) => {
                      const value = Number(curr);
                      if (!isNaN(value)) {
                          return prev + curr;
                      } else {
                          return prev;
                      }
                  }, 0);
                  means[columnIndex] = means[columnIndex].toFixed(2); 
              } else {
                  means[columnIndex] = '';
              }
            }
      })
      // sums[index] = sums[index] && sums[index].toFixed(2); // 保留2位小数，解决小数合计列
      return [means]
			
    }
    

  },
  created() {
    console.log("ADD CREATED", this.params);
  },
  mounted() {},
  updated() {
    this.$nextTick(()=>{
     this.$refs.puOrderExecuteList && this.$refs.puOrderExecuteList[0].doLayout();
     this.$refs.puOrderItemList && this.$refs.puOrderItemList[0].doLayout();
    })
  },
  destroyed() {},
};
</script>
<template>
  <el-drawer
    direction="btt"
    size="100%"
    :with-header="false"
    :visible.sync="visible"
    @open="beforeOpen"
    @close="$emit('close')"
    v-loading="loading"
  >
    <el-form
      size="mini"
      label-position="right"
      ref="orderAddForm"
      class="orderAddForm"
      label-width="140px"
      :model="params"
      :rules="rules"
      :key="count"
    >
      <el-card
        :body-style="{
          padding: '20px',
          display: 'flex',
          'flex-wrap': 'wrap',
        }"
        style="margin: 10px"
      >
        <div
          slot="header"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <h3>新增</h3>
          <div style="text-align: right">
            <el-button 
              size="mini" 
              type="primary"
              @click="handleSava"
            >保存</el-button>
            <el-button size="mini" @click="handleCancel">取消</el-button>
          </div>
        </div>
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col
            v-for="(column, index) in columns"
            :key="index"
            :span="column.span || 6"
          >
            <el-form-item
              :prop="column.key"
              :label="column.title"
              v-if="column.isShow"
            >
              <el-input
                v-if="column.inputType === 'Input'"
                v-model="params[column.key]"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                style="width: 100%;"
              >
              </el-input>
              <dr-popover-select
                v-if="column.inputType === 'PopoverSelect'"
                v-model="params[column.key]"
                :value-key="column.valueKey"
                :source.sync="params"
                :title="column.title"
                :type="column.referName"
                :disabled="column.disabled"
                :multiple="column.multiple"
                :placeholder="column.placeholder"
                :data-mapping="column.dataMapping"
                :query-params="column.queryParams"
                @change="handleReferChange"
              ></dr-popover-select>

              <el-input
                v-if="column.inputType === 'Textarea'"
                v-model="params[column.key]"
                type="textarea"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                style="width: 100%"
              ></el-input>

              <el-input-number
                v-if="column.inputType === 'InputNumber'"
                v-model="params[column.key]"
                :precision="column.precision"
                :controls-position="column.controlsPosition"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                style="width: 100%"
              >
              </el-input-number>
              <el-select
                v-if="column.inputType === 'Select'"
                v-model="params[column.key]"
                :disabled="column.disabled"
                :clearable="column.clearable"
                :placeholder="column.placeholder"
                style="width: 100%"
                filterable
                @change="handleSelectChange(column.key,column.referName)"
              >
                <el-option
                  v-for="item in dict.type[column.referName]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-if="column.inputType === 'TagSelect'"
                v-model="params[column.key]"
                multiple
                clearable
                collapse-tags
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                style="width: 100%"
              >
                <template #prefix>
                  <el-icon
                    class="el-icon-view"
                    style="cursor: pointer"
                    @click.stop="$message.info(234)"
                  >
                  </el-icon>
                </template>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-date-picker
                v-if="column.inputType === 'DatePicker'"
                v-model="params[column.key]"
                :type="column.type"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :picker-options="column.pickerOptions"
                style="width: 100%"
              ></el-date-picker>
              <el-checkbox
                v-if="column.inputType === 'Checkbox'"
                v-model="params[column.key]"
                :disabled="column.disabled"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
              <file-upload-center
                v-if="column.inputType === 'Upload'"
                v-model="params[column.key]"
                :file-type="column.fileType"
              ></file-upload-center>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        :body-style="{
          padding: '20px',
          display: 'flex',
          'flex-wrap': 'wrap',
          position: 'relative',
        }"
        style="margin: 10px"
      >
        <el-tabs v-model="tabName" style="width: 100%" v-loading="tabLoading">
          <el-tab-pane
            v-for="(column, index) in tabColumns"
            :key="index"
            :label="column.title"
            :name="column.key"
          >

          <!-- <virtual-scroll 
            :data="params[column.key]" 
            :item-size="53" 
            :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
            @change="(virtualList) => tableData = virtualList" 
            :virtualized="true"
          >
              <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }"> -->

                <!-- :headerCellStyle="headerCellFixedStyle"
                :cellStyle="cellFixedStyle"
                  -->
              <ux-grid 
                border
                use-virtual
                show-summary
                show-overflow
                keep-source
                :ref="column.key"
                :height="tabHeight"
                style="width: 100%"
                :data="params[column.key]" 
                :summary-method="getSummaries"
                >
                <!-- :edit-config="{trigger: 'click', mode: 'cell'}" -->
                <!-- :row-height="rowHeight" -->
                <!-- :row-key="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" -->
                
                <template slot="empty">
                  暂无数据
                </template>

                <ux-table-column
                  v-for="(cColumn, cIndex) in column.tableColumns"
                  :key="cIndex"
                  :title="cColumn.title"
                  :width="cColumn.width || 80"
                  :field="cColumn.key"
                  resizable
                  >
                  <!-- :edit-render="!cColumn.disabled" -->
                  <template slot="header" slot-scope="scope">
                    <span v-if="cColumn.require" style="color: #ff4949">*</span>
                    <span>
                      {{ cColumn.title }}
                    </span>
                  </template>
  
                  <!-- v-slot:edit="scope" -->
                  <template slot-scope="scope">
                    <el-form-item label-width="0">
                      <el-tag v-if="cColumn.key === 'index'" >
                        {{ scope.$index + 1 }}
                      </el-tag>
                      <el-input
                        v-if="cColumn.inputType === 'Input'"
                        v-model="scope.row[cColumn.key]"
                        :placeholder="cColumn.placeholder"
                        :clearable="cColumn.clearable"
                        :disabled="cColumn.disabled"
                        size="mini"
                        style="width: 100%"
                      ></el-input>
  
                      <!-- copy -->
                      <dr-popover-select
                        v-if="cColumn.inputType === 'PopoverSelect'"
                        v-model="scope.row[cColumn.key]"
                        :source.sync="scope.row"
                        :title="cColumn.title"
                        :value-key="cColumn.valueKey"
                        :type="cColumn.referName"
                        :disabled="cColumn.disabled"
                        :multiple="cColumn.multiple"
                        :placeholder="cColumn.placeholder"
                        :data-mapping="cColumn.dataMapping"
                        :query-params="cColumn.queryParams"
                        @change="handleTabReferChange"
                      >
                      </dr-popover-select>
  
                      <el-input-number
                        v-if="cColumn.inputType === 'InputNumber'"
                        v-model="scope.row[cColumn.key]"
                        :precision="cColumn.precision"
                        :controls-position="cColumn.controlsPosition"
                        :placeholder="cColumn.placeholder"
                        @change="handleInputChange(scope.row, cColumn.key)"
                        :clearable="cColumn.clearable"
                        :disabled="cColumn.disabled"
                        :min="cColumn.key === 'reservedQty' ? 0 : -Infinity"
                        size="mini"
                        style="width: 100%"
                      ></el-input-number>
  
                      <el-select
                        v-if="cColumn.inputType === 'Select'"
                        v-model="scope.row[cColumn.key]"
                        filterable
                        size="mini"
                        :disabled="cColumn.disabled"
                        :clearable="cColumn.clearable"
                        :placeholder="cColumn.placeholder"
                        style="width: 100%"
                        @change="handleTabSelectChange(cColumn.key,scope.row)"
                      >
                        <el-option
                          v-for="item in dict.type[cColumn.referName]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
  
                      <el-checkbox
                        v-if="cColumn.inputType === 'Checkbox'"
                        v-model="scope.row[cColumn.key]"
                        :disabled="cColumn.disabled"
                        true-label="Y"
                        false-label="N"
                        @change="handleTabCheckbox(cColumn.key,scope.row)"
                      ></el-checkbox>
                    </el-form-item>
                  </template>

                </ux-table-column>
  
                <ux-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="delTableRow(params[tabName],  scope.row,tabName)"
                      type="text"
                      size="small"
                    >
                      删行
                    </el-button>
                  </template>
                </ux-table-column>
              </ux-grid>
            <!-- </template>
          </virtual-scroll> -->


            
          </el-tab-pane>
        </el-tabs>
        <el-row style="position: absolute; top: 20px; right: 20px">
          <el-button size="mini" @click="addTableRow(params[tabName])"
            >增行</el-button>
         
            <!-- v-if="role === 'procurementManager'" -->
          <BatchImport
            ref="batchImport"
            @import="handelImport"
            @temDownload="handleTemDownload"
            :fileSize="2"
          ></BatchImport>
        </el-row>
      </el-card>
    </el-form>
  </el-drawer>
</template>

<style scoped>
  .orderAddForm>>>.el-form-item{
    margin-bottom: 12px;
  }
::v-deep .singleTable .el-form-item{
  margin-bottom: 0px;
}

</style>