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 * 36 + 120
            : 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++;
      },
    },
    "params.isBack": {
      handler(nVal, oVal) {
        console.log(nVal, "val");
        if (nVal === "Y") {
          this.rules.retReasonName = [
            { required: true, message: "退换原因不能为空", trigger: "change" },
          ];
          this.rules.processTypeName = [
            { required: true, message: "处理方式不能为空", trigger: "change" },
          ];
        } else {
          this.rules.retReasonName = null;
          this.rules.processTypeName = 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") {
            if (key === "puOrderItemList") {
              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") {
        if (key === "puOrderItemList") {
          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();
      }
      this.$refs.puOrderItemList[0].updateFooter();
      // this.$refs.puOrderExecuteList[0].updateFooter();

      // 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 20px 10px',
          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"
                :rows="column.rows"
                :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"
          >
            <ux-grid
              border
              use-virtual
              keep-source
              show-summary
              show-overflow
              beautify-table
              :ref="column.key"
              :size="'mini'"
              :height="tabHeight"
              style="width: 100%"
              :data="params[column.key]"
              :summary-method="getSummaries"
              :header-row-style="{
                color: '#515a6e',
              }"
            >
              <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
              >
                <template slot="header" slot-scope="scope">
                  <span v-if="cColumn.require" style="color: #ff4949">*</span>
                  <span>
                    {{ cColumn.title }}
                  </span>
                </template>

                <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]"
                      :disabled="cColumn.disabled"
                      :clearable="cColumn.clearable"
                      :precision="cColumn.precision"
                      :placeholder="cColumn.placeholder"
                      :controls-position="cColumn.controlsPosition"
                      :min="cColumn.key === 'reservedQty' ? 0 : -Infinity"
                      size="mini"
                      style="width: 100%"
                      @change="handleInputChange(scope.row, cColumn.key)"
                    ></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>
          </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: 5px;
}
::v-deep .singleTable .el-form-item {
  margin-bottom: 0px;
}
::v-deep.uxbeautifyTableClass
  .elx-header--column
  .elx-resizable.is--line:before {
  height: 100%;
  background-color: #dfe6ec;
}
</style>