drp-ui/src/views/purchase/apply/edit/index.vue

<script>
  import useColumns from "./columns";
  import {EXIST} from "@/api/business/purchase/catalogue";
  import {ITEM, SAVE} from "@/api/business/purchase/apply";
  import {tax, unit, currency} from "@/components/popover-select-v2/fetch";
  // 用于回显参照框数据
  import {getRefer} from '@/api/purchase/basic.js'

  const fetchExist = async (prop) => {
    try {
      // try
      const {code, data} = await EXIST(prop);
      if (code === 200) return data;
    } catch (err) {
      // catch
      console.error(err);
    } finally {
      // finally
    }
  };

  export default {
    name: "EditDrawer",
    props: {
      dict: {
        type: Object,
      },
      selectData: {
        type: [Array],
        require: true,
      },
    },
    components: {
      ElSuperForm: () => import("@/components/super-form/index.vue"),
      ElSuperTable: () => import("@/components/super-table/index.vue"),
      ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
      ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    },
    data() {
      const {
        TabColumns,
        TableColumns,
        TabColumns: [
          {
            item: {key: tabName},
          },
        ],
      } = useColumns();
      const rules = this.$init.rules([...TabColumns, ...TableColumns]);
      const params = this.$init.params([...TabColumns, ...TableColumns]);
      return {
        title: "编 辑",
        width: "100%",
        visible: false,
        loading: false,
        rules: rules,
        params: params,
        tabName: tabName,
        TabColumns: TabColumns,
        TableColumns: TableColumns,
        delDemandItemList: [],
      };
    },
    computed: {
      disabled: {
        get() {
          const {
            selectData,
            selectData: [{status} = {}],
          } = this.$props;
          if (selectData.length !== 1) {
            return true;
          }
          if (selectData.length === 1 && status === "1") {
            return true;
          }
          if (selectData.length === 1 && status === "2") {
            return true;
          }
        },
        set() {
        },
      },
      priceApply: {
        get() {
          this.params.priceApplyItems = this.params.priceApplyItems.map(
            (item, index) => ({
              ...item,
              $index: index,
            })
          );
          return {
            priceApplyItems: this.params.priceApplyItems.filter(
              ({delFlag}) => delFlag !== "2"
            ),
          };
        },
        set() {
        },
      },
    },
    watch: {},
    methods: {
      //
      async changeMaterialName(prop) {
        console.log('prop', prop);
        const {selectData} = prop;
        const {
          puOrg,
          customer,
          customerName,
          supplier,
          currency,
          currencyCode,
          currencyName,
        } = this.params;
        console.log('selectData', selectData)
        const {nickName: createByName} = this.$store.state.user;
        if (selectData.length) {
          this.params[this.tabName].splice(-1);
        }
        for (const item of selectData) {
          console.log('item', item)
          this.loading = true;
          const {tax: taxName, unitName, code: materialCode} = item;
          // task 1
          const {ntaxrate} = await tax(taxName);
          // task 2
          const {
            id: puUnit,
            code: puUnitCode,
            name: puUnitName,
          } = await unit(unitName);
          // task 3
          const {
            recentlyPrice = "0",
            isApprovalFirst = "N",
            purchasequantity,
            recentlyPriceDate
          } = await fetchExist({puOrg, customer, supplier, materialCode, customerName: "",priceType: prop.row.priceType});
          this.loading = false;
          await this.onRowAdd(this.tabName, {
            ...item,
            currency: currency,
            currencyCode: currencyCode,
            currencyName: currencyName,
            unit: puUnit,
            unitCode: puUnitCode,
            unitName: puUnitName,
            puUnit: puUnit,
            puUnitCode: puUnitCode,
            puUnitName: puUnitName,
            recentlyPrice,
            isApprovalFirst,
            recentlyPriceDate: recentlyPriceDate,
            yPurchaseQuantity: purchasequantity,
            tax: Number(ntaxrate === "0E-8" ? 0 : ntaxrate),
            createByName: createByName,
            updateByName: createByName,
            id: null,
          });
        }
      },
      //
      async changeCustomerName(prop) {
        console.log("prop", prop)
        const {
          puOrg,
          supplier,
          currency,
          currencyCode,
          currencyName,
        } = this.params;
        const {
          recentlyPrice,
          isApprovalFirst,
          purchasequantity,
          recentlyPriceDate
          } = await fetchExist({
            puOrg,
            supplier,
            materialCode: prop.row.materialCode,
            customer: prop.row.customerName ? prop.row.customer : '',
            customerName: prop.row.customerName,
            priceType: prop.row.priceType
          });
          prop.row.yPurchaseQuantity = purchasequantity
          prop.row.recentlyPrice = recentlyPrice
          prop.row.isApprovalFirst = isApprovalFirst
          prop.row.recentlyPriceDate = recentlyPriceDate
      },
      //
      async fetchItem(prop) {
        try {
          // try
          this.loading = true;
          const {tabName, TabColumns} = this;
          const {TableColumns} = TabColumns.find(
            ({item: {key}}) => key === tabName
          );
          const {code, data} = await ITEM(prop, false);
          if (code === 200) {
            this.params = data;
            this.params.priceApplyItems = data.priceApplyItems.map((item) => ({
              ...this.$init.params(TableColumns),
              ...item,
            }));
            return true;
          } else {
            return false;
          }
        } catch (err) {
          // catch
          console.error(err);
        } finally {
          // finally
          this.loading = false;
        }
      },
      //
      async onOpen() {
        const {
          selectData: [{id}],
        } = this.$props;
        this.visible = await this.fetchItem(id);
      },
      //
      async onHide() {
        const {TabColumns, TableColumns} = useColumns();
        this.visible = false;
        this.params = this.$init.params([...TabColumns, ...TableColumns]);
        this.$emit("success");
      },
      //
      async onRowAdd(prop, pushParams = {}) {
        this.$refs.superForm.validate(async (valid) => {
          if (valid) {
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            this.params[prop].push({
              delFlag: "0",
              ...this.$init.params(TableColumns),
              ...pushParams,
            });
          }
        });
      },
      //
      async onRowRemove(prop, scope) {
        console.log('prop', prop)
        console.log('scope', scope)
        // const {
        //   row: {$index},
        // } = scope;
        // this.params[prop] = this.params[prop].map((item, index) => ({
        //   ...item,
        //   delFlag: index === $index ? "2" : item.delFlag,
        // }));
        scope.row.delFlag = '2'
        let delList = []
        delList = this.params[prop].filter(item => {
          return item.delFlag == '2'
        })
        this.params[prop] = this.params[prop].filter(item => {
          return item.delFlag == '0'
        })
        this.delDemandItemList.push(...delList)
        console.log('删除的数组',this.delDemandItemList)
        console.log('this.params[prop]', this.params[prop])
      },
      //
      async useSubmit(prop) {
        this.$refs[prop].validate(async (valid) => {
          console.log(this.params);
          if (valid) {
            try {
              this.loading = true;
              let list = []
              list.push(...this.params.priceApplyItems, ...this.delDemandItemList)
              this.params.priceApplyItems = this.params.priceApplyItems.filter(
                (item) => item.materialName
              );
              // 深拷贝一下参数对象
              let param = JSON.parse(JSON.stringify(this.params))
              console.log('深拷贝对象',param);
              param.priceApplyItems = list
              const {msg, code} = await SAVE(param);
              if (code === 200) {
                this.onHide();
                this.$emit("success");
                this.$notify.success(msg);
                this.delDemandItemList = []
              }
            } catch (err) {
              // catch
              console.error(err);
            } finally {
              // finally
              this.loading = false;
            }
          } else {
            return false;
          }
        });
      },
      // 粘贴
      async pasteMe(e, scope, index, prop) {
        this.$modal.loading("正在处理数据...");
        e.preventDefault() //阻止默认粘贴事件
        let source = e.clipboardData.getData("Text");
        console.log('scope', scope.column.property)
        console.log('index', index)
        // 首先对源头进行解析
        let rows = source.split("\r\n"); // 拆成一个数组
        // 数组去除空字符串
        rows = rows.filter(item => {
          return item && item.trim()
        })
        if (rows.length < 100) {
          if(scope.column.property == 'materialCode') {
            let rowList = []
            let newLine = []
            await getRefer({ type: 'MATERIAL_PARAM', materialCodeList: rows }).then(res => {
              if (res.code === 200) {
                rowList = res.rows
              }
            })
            const {
              puOrg,
              customer,
              customerName,
              supplier,
              currency,
              currencyCode,
              currencyName,
            } = this.params;
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            // console.log('kk', TableColumns)
            // console.log('this.$init.params(TableColumns)', this.$init.params(TableColumns))
            for (let i = 0; i<rowList.length; i++) {
              let line = {...this.$init.params(TableColumns)}
              console.log('line',line)
              const {nickName: createByName} = this.$store.state.user;
              const {ntaxrate} = await tax(rowList[i].materialRateName);
              // task 2
              const {
                id: puUnit,
                code: puUnitCode,
                name: puUnitName,
              } = await unit(rowList[i].unitIdName);
              // task 3
              const {
                recentlyPrice = "0",
                isApprovalFirst = "N",
                purchasequantity,
                recentlyPriceDate
              } = await fetchExist({puOrg, customer, supplier, materialCode: rowList[i].code, customerName: "", priceType: line.priceType});
              line.delFlag = '0'
              line.materialCode = rowList[i].code
              line.material = rowList[i].id
              line.materialName = rowList[i].name
              line.specification = rowList[i].specification
              line.model = rowList[i].model
              line.manufacturerName = rowList[i].manufacturerIdName
              line.unit = puUnit,
              line.unitCode = puUnitCode,
              line.unitName = puUnitName,
              line.puUnit  = puUnit,
              line.puUnitCode = puUnitCode,
              line.puUnitName = puUnitName,
              line.recentlyPrice = recentlyPrice
              line.isApprovalFirst = isApprovalFirst
              line.recentlyPriceDate = recentlyPriceDate,
              line.yPurchaseQuantity = purchasequantity,
              line.tax = Number(ntaxrate === "0E-8" ? 0 : ntaxrate),
              line.createByName = createByName,
              line.updateByName = createByName,
              line.currency = currency
              line.currencyCode = currencyCode
              line.currencyName = currencyName
              newLine.push(line)
              console.log('临时数组', newLine)
            }
            // 删除指定下标
            this.params[prop].splice(index,this.params[prop].length - index,...newLine)
            this.$modal.closeLoading();
            this.$modal.notifySuccess("共粘贴" + rowList.length + '条数据');

          } else if(scope.column.property == 'taxPrice') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.taxPrice = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].taxPrice = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'supplierName') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.supplierName = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].supplierName = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'bidPrice') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.bidPrice = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].bidPrice = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'unitPrice') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.unitPrice = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].unitPrice = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'supplierName1') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.supplierName1 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].supplierName1 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'bidPrice1') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.bidPrice1 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].bidPrice1 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'unitPrice1') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.unitPrice1 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].unitPrice1 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'supplierName2') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.supplierName2 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].supplierName2 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'bidPrice2') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.bidPrice2 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].bidPrice2 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } else if(scope.column.property == 'unitPrice2') {
            console.log('复制内容：', rows)
            let newLine = []
            const {TabColumns} = this;
            const {TableColumns} = TabColumns.find(
              ({item: {key}}) => key === prop
            );
            if(this.params[prop].length <= 1) {
              for (let i = 0; i<rows.length; i++) {
                let line = {...this.$init.params(TableColumns)}
                line.unitPrice2 = rows[i]
                newLine.push(line)
              }
              // 删除指定下标
              this.params[prop].splice(index,this.params[prop].length - index,...newLine)
              this.$modal.notifySuccess("共粘贴" + rows.length + '条数据');
              // this.$refs.table.doLayout()
              this.$modal.closeLoading();
            } else {
              for(let i = index , j = 0; i < this.params[prop].length; i++, j++) {
                this.params[prop][i].unitPrice2 = rows[j]
              }
              // this.$refs.table.doLayout()
              console.log(this.params[prop])
              this.$modal.closeLoading();
            }
          } 

        } else {
          this.$modal.notifyWarning("复制长度不能超过100!");
          this.$modal.closeLoading();
        }
      },
    },
    created() {
    },
    mounted() {
    },
    destroyed() {
    },
  };
</script>
<template>
  <el-button
    v-bind="$attrs"
    v-on="$listeners"
    :disabled="disabled"
    @click="onOpen"
  >
    {{ title }}
    <el-drawer
      :show-close="false"
      :size="width"
      :title="title"
      :visible.sync="visible"
      append-to-body
      destroy-on-close
      @close="onHide"
    >
      <template slot="title">
        <span>{{ title }}</span>
        <el-button
          type="primary"
          :size="$attrs.size"
          :loading="loading"
          @click="useSubmit('superForm')"
        >
          确 认
        </el-button>
        <el-button :size="$attrs.size" :loading="loading" @click="onHide">
          取 消
        </el-button>
      </template>
      <el-super-form
        v-model="params"
        :dict="dict"
        :rules="rules"
        :size="$attrs.size"
        :columns="TableColumns"
        ref="superForm"
        label-width="auto"
        label-position="right"
        style="padding: 18px"
      >
      </el-super-form>
      <el-tabs v-model="tabName" style="padding: 0 18px 18px">
        <el-tab-pane
          v-for="({ item, TableColumns: columns }, index) in TabColumns"
          :key="index"
          :label="item.title"
          :name="item.key"
          lazy
        >
          <div v-loading="loading" style="height: 250px; display: flex">
            <el-super-ux-table
              v-model="priceApply[item.key]"
              :dict="dict"
              :ref="tabName"
              height="250"
              :columns="columns"
              :size="$attrs.size"
            >
              <template slot="materialName" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @change="changeMaterialName({ ...scope, selectData: $event })"
                >
                </component>
              </template>
              <template slot="materialCode" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="taxPrice" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="supplierName" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="bidPrice" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="unitPrice" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="supplierName1" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="bidPrice1" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="unitPrice1" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="supplierName2" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="bidPrice2" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="unitPrice2" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @paste.native="pasteMe($event, scope, scope.rowIndex, tabName)"
                >
                </component>
              </template>
              <template slot="customerName" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @input="changeCustomerName({ ...scope, selectData: $event })"
                >
                </component>
              </template>
              <ux-table-column fixed="right" title="操作" width="100">
                <template slot="header" slot-scope="scope">
                  <el-button :size="$attrs.size" @click="onRowAdd(tabName)">
                    新增
                  </el-button>
                </template>
                <template slot-scope="scope">
                  <el-button
                    :size="$attrs.size"
                    @click.native.prevent="onRowRemove(tabName, scope)"
                  >
                    删除
                  </el-button>
                </template>
              </ux-table-column>
            </el-super-ux-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </el-button>
</template>

<style scoped>
  ::v-deep .el-table__row.is-hidden {
    display: none;
  }
</style>