kd-aiot-frontend-wt/src/views/bpm/handleTask/components/inquiryManage/inquiryTable.vue

<template>
  <el-form :model="form" ref="form">
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      max-height="500px"
      :span-method="objectSpanMethod"
      :datasource="form.resultList"
      cache-key="systemRoleTable17"
      class="time-form"
    >
      <!-- 表头工具栏 -->

      <template v-slot:toolbar>
        <el-row type="flex" justify="end" align="middle">
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="removeSupplier"
            v-if="status !== 'Detail'"
          >
            <template v-slot:reference>
              <el-link
                type="danger"
                title="删除供应商"
                :underline="false"
                icon="el-icon-delete"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </el-row>
      </template>
      <template v-slot:supplierName="{ row, $index }">
        {{ form.supplierName }}
      </template>
      <template v-slot:supplierTotalPrice="{ row, $index }">
        {{ form.totalPrice }}
      </template>
      <template v-slot:preferentialPrice="{ row, $index }">
        <el-form-item
          prop="preferentialPrice"
          :rules="{
            required: true,
            message: '请输入优惠价',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="form.preferentialPrice"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:settlementMode="{ row, $index }">
        <el-form-item
          prop="settlementMode"
          :rules="{
            required: true,
            message: '请输入优惠价',
            trigger: 'change'
          }"
        >
          <DictSelection
            dictName="结算方式"
            clearable
            v-model="form.settlementMode"
            @itemChange="chaengMode"
            :disabled="status == 'Detail'"
          >
          </DictSelection>
        </el-form-item>
      </template>
      <template v-slot:deliveryDate="{ row, $index }">
        <el-form-item
          prop="deliveryDate"
          :rules="{
            required: true,
            message: '请选择交货日期',
            trigger: 'change'
          }"
        >
          <el-date-picker
            style="width: 100%"
            clearable
            type="date"
            :disabled="status == 'Detail'"
            v-model="form.deliveryDate"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <template v-slot:taxRate="{ row, $index }">
        <el-form-item prop="taxRate">
          <el-input
            v-model="form.taxRate"
            style="width: 100%"
            :disabled="status == 'Detail'"
          >
            <template slot="suffix">%</template>
          </el-input>
        </el-form-item>
      </template>
      <template v-slot:files="{ row, $index }">
        <el-form-item prop="files">
          <fileMain
            v-model="form.files"
            :type="status == 'Detail' ? 'view' : ''"
          ></fileMain>
          <!--          <fileUpload-->
          <!--            v-if="status != 'Detail'"-->
          <!--            v-model="form.files"-->
          <!--            module="main"-->
          <!--            :showLib="false"-->
          <!--            :limit="5"-->
          <!--          />-->
          <!--          <div-->
          <!--            v-if=" form.files && form.files?.length && status == 'Detail' ">-->
          <!--            <el-link-->
          <!--              v-for="link in form.files"-->
          <!--              :key="link.id"-->
          <!--              type="primary"-->
          <!--              :underline="false"-->
          <!--              @click="downloadFile(link)"-->
          <!--            >-->
          <!--              {{ link.name }}-->
          <!--            </el-link-->
          <!--            >-->
          <!--          </div>-->
        </el-form-item>
      </template>

      <template v-slot:isWinner="{ row, $index }">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + $index + '.isWinner'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-select v-model="row.isWinner" :disabled="status == 'Detail'">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:supplierProductName="{ row, $index }">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + $index + '.supplierProductName'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-input
            v-model="row.supplierProductName"
            placeholder="请输入"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:supplierProductCode="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.supplierProductCode'"
          :rules="{
            required: false,
            message: '请输入',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="scope.row.supplierProductCode"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:deliveryDays="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.deliveryDays'"
        >
          <el-input
            v-model="scope.row.deliveryDays"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:guaranteePeriod="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.guaranteePeriod'"
        >
          <el-input
            v-model="scope.row.guaranteePeriod"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:guaranteePeriodUnitCode="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.guaranteePeriodUnitCode'"
        >
          <DictSelection
            dictName="质保期单位"
            clearable
            v-model="scope.row.guaranteePeriodUnitCode"
            :disabled="status == 'Detail'"
            @itemChange="chaengUnitCode"
          >
          </DictSelection>
        </el-form-item>
      </template>
      <template v-slot:singlePrice="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.singlePrice'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-input
            @blur="changeGetPrice(scope.row)"
            v-model="scope.row.singlePrice"
            :disabled="status == 'Detail'"
            type="number"
          >
            <template slot="suffix">元</template>
          </el-input>
        </el-form-item>
      </template>
      <template v-slot:totalCount="scope">
        <el-form-item
          :prop="'resultList.' + scope.$index + '.totalCount'"
          :rules="{
            required: true,
            pattern: numberReg,
            message: '请输入数字',
            trigger: 'blur'
          }"
        >
          <el-input
            @blur="changeGetPrice(scope.row)"
            v-model="scope.row.totalCount"
            :disabled="status == 'Detail'"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:totalPrice="scope">
        <span>{{
          totalPrice(scope.row.totalCount, scope.row.singlePrice, scope.row)
        }}</span>
      </template>

      <template v-slot:modelType="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.modelType'"
        >
          <el-input
            v-model="scope.row.modelType"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>

      <template v-slot:specification="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.specification'"
        >
          <el-input
            v-model="scope.row.specification"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <!--      <template v-slot:measuringUnit="scope">-->
      <!--        <el-form-item-->
      <!--          style="margin-bottom: 20px"-->
      <!--          :prop="'resultList.' + scope.$index + '.measuringUnit'"-->
      <!--          :rules="{-->
      <!--            required: false,-->
      <!--            message: '请输入',-->
      <!--            trigger: 'blur'-->
      <!--          }"-->
      <!--        >-->
      <!--          <el-input-->
      <!--            v-model="scope.row.measuringUnit"-->
      <!--            placeholder="请输入"-->
      <!--            :disabled="true"-->
      <!--          ></el-input>-->
      <!--        </el-form-item>-->
      <!--      </template>-->

      <template v-slot:remark="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.remark'"
        >
          <el-input
            v-model="scope.row.remark"
            type="textarea"
            placeholder="请输入"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:isRequired="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
      <!-- <template v-slot:files="scope">
        <el-form-item prop="files">
          <fileUpload
            v-model="scope.row.files"
            module="main"
            :showLib="false"
            :limit="5"
          />
        </el-form-item>
      </template> -->
    </ele-pro-table>
  </el-form>
</template>
<script>
  import { numberReg } from 'ele-admin';
  import dictMixins from '@/mixins/dictMixins';
  import fileUpload from '@/components/upload/fileUpload';
  import { copyObj } from '@/utils/util';
  import { getFile } from '@/api/system/file';
  import fileMain from '@/components/addDoc/index.vue';
  // import headList from '@/views/saleManage/businessOpportunity/components/headList.vue';
  const defaultColumns = [
    {
      width: 50,
      label: '序号',
      type: 'index',
      columnKey: 'index',
      align: 'center',
      fixed: 'left'
    },
    {
      minWidth: 120,
      prop: 'supplierName',
      label: '供应商',
      slot: 'supplierName',
      align: 'center',
      showOverflowTooltip: true,
      isMerge: true,
      fixed: 'left'
    },
    {
      minWidth: 80,
      prop: 'supplierTotalPrice',
      label: '总价',
      slot: 'supplierTotalPrice',
      align: 'center',
      showOverflowTooltip: true,
      isMerge: true,
      fixed: 'left'
    },
    {
      minWidth: 120,
      prop: 'preferentialPrice',
      label: '优惠后总价',
      slot: 'preferentialPrice',
      headerSlot: 'isRequired',
      align: 'center',
      showOverflowTooltip: true,
      isMerge: true,
      fixed: 'left'
    },
    {
      minWidth: 120,
      prop: 'settlementMode',
      label: '结算方式',
      slot: 'settlementMode',
      headerSlot: 'isRequired',
      align: 'center',
      showOverflowTooltip: true,
      isMerge: true,
      fixed: 'left'
    },
    {
      minWidth: 160,
      prop: 'deliveryDate',
      label: '交货日期',
      slot: 'deliveryDate',
      headerSlot: 'isRequired',
      align: 'center',
      showOverflowTooltip: true,
      isMerge: true,
      fixed: 'left'
    },
    {
      minWidth: 100,
      prop: 'productCode',
      label: '编码',
      slot: 'productCode',
      align: 'center',
      showOverflowTooltip: true
    },
    {
      minWidth: 100,
      prop: 'productName',
      label: '产品名称',
      slot: 'productName',
      align: 'center',
      showOverflowTooltip: true
    },
    {
      minWidth: 100,
      prop: 'isWinner',
      label: '是否中标',
      slot: 'isWinner',
      align: 'center',
      headerSlot: 'isRequired',
      showOverflowTooltip: true
    },
    {
      minWidth: 140,
      prop: 'supplierProductCode',
      label: '供应商产品编码',
      slot: 'supplierProductCode',
      align: 'center'
    },
    {
      minWidth: 160,
      prop: 'supplierProductName',
      label: '供应商产品名称',
      slot: 'supplierProductName',
      headerSlot: 'isRequired',
      align: 'center'
    },

    {
      minWidth: 90,
      prop: 'totalCount',
      label: '购买数量',
      slot: 'totalCount',
      headerSlot: 'isRequired',
      align: 'center'
    },
    {
      minWidth: 80,
      prop: 'measuringUnit',
      label: '计量单位',
      slot: 'measuringUnit',
      align: 'center'
    },
    {
      minWidth: 120,
      prop: 'singlePrice',
      label: '采购单价',
      slot: 'singlePrice',
      headerSlot: 'isRequired',
      align: 'center'
    },
    {
      minWidth: 80,
      prop: 'totalPrice',
      label: '采购金额',
      slot: 'totalPrice',
      align: 'center'
    },
    {
      minWidth: 120,
      prop: 'modelType',
      label: '型号',
      slot: 'modelType',
      align: 'center'
    },

    {
      minWidth: 120,
      prop: 'specification',
      label: '规格',
      slot: 'specification',
      align: 'center'
    },

    // {
    //   width: 130,
    //   prop: 'brand',
    //   label: '品牌',
    //   slot: 'brand'
    // },
    {
      minWidth: 80,
      prop: 'deliveryDays',
      label: '交期(天)',
      slot: 'deliveryDays',
      align: 'center'
    },
    {
      minWidth: 100,
      prop: 'guaranteePeriod',
      label: '质保期',
      slot: 'guaranteePeriod',
      align: 'center'
    },
    {
      minWidth: 120,
      prop: 'guaranteePeriodUnitCode',
      label: '质保期单位',
      slot: 'guaranteePeriodUnitCode',
      align: 'center'
    },
    {
      minWidth: 220,
      prop: 'remark',
      label: '备注',
      slot: 'remark',
      align: 'center'
    },
    {
      minWidth: 90,
      prop: 'taxRate',
      label: '税率',
      slot: 'taxRate',
      align: 'center',
      isMerge: true,
      showOverflowTooltip: true
    },
    {
      minWidth: 220,
      prop: 'files',
      label: '附件',
      slot: 'files',
      align: 'center',
      isMerge: true,
      showOverflowTooltip: true
    }
  ];
  export default {
    mixins: [dictMixins],
    components: {
      fileMain,
      fileUpload
      // headList
    },
    props: {
      obj: {},
      status: {
        default: 'edit'
      },
      radio: {
        default: ''
      },
      isUpdate: {
        default: false
      }
    },
    data() {
      const defaultForm = {
        key: null,
        endTime: '',
        isFirst: 0,
        name: ''
      };

      return {
        numberReg,
        defaultForm,
        radio1: '',
        form: {
          resultList: [
            {
              supplierProductCode: '',
              deliveryDays: '',
              guaranteePeriod: '',
              guaranteePeriodUnitCode: '',
              guaranteePeriodUnitName: '',
              measuringUnit: '',
              modelType: '',
              productCode: '',
              isWinner: '',
              remark: '',
              singlePrice: '',
              specification: '',
              supplierProductName: '',
              technicalAnswerName: '',
              technicalParams: '',
              totalCount: '',
              totalPrice: ''
            }
          ]
        },
        dataList: [],
        spanArr: [],

        columns: [...defaultColumns]
      };
    },
    computed: {},
    watch: {
      radio(n, v) {
        this.radio1 = n;
      }
    },

    created() {
      this.obj.resultList.forEach((item) => {
        this.obj['deliveryDate'] =
          this.obj.deliveryDate || item.expectReceiveDate;
      });
      this.form = copyObj(this.obj);
      console.log(this.obj);
      this.radio1 = this.radio;
      this.getSpanArr();
      this.setDeliveryDays();
      this.setIsInquiry();
    },
    methods: {
      //计算交期
      setDeliveryDays() {
        this.form.resultList.forEach((item) => {
          let day =
            this.form.deliveryDate &&
            (new Date(this.form.deliveryDate).getTime() -
              new Date().getTime()) /
              1000 /
              60 /
              60 /
              24;

          item.deliveryDays = Math.ceil(day) || 1;
        });
        this.$forceUpdate();
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (this.columns[columnIndex]?.isMerge) {
          const _row = this.spanArr[rowIndex]?.supplierName || 0;
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        return {
          rowspan: 1,
          colspan: 1
        };
      },
      getSpanArr() {
        let pos = 0;
        this.spanArr = [];
        this.form.resultList.forEach((item, index) => {
          // item.guaranteePeriodUnitCode = Number(item.guaranteePeriodUnitCode);
          // console.log(item.guaranteePeriodUnitCode,'item.guaranteePeriodUnitCode')
          if (index === 0) {
            let obj = {};
            this.columns.forEach((col) => {
              if (col.isMerge) {
                obj[col.prop] = 1;
              }
            });
            this.spanArr.push(obj);
          } else {
            let nameSame =
              item.supplierName ===
              this.form.resultList[index - 1].supplierName;
            if (nameSame) {
              this.spanArr[pos].supplierName += 1;
              this.spanArr.push({
                supplierName: 0,
                supplierTotalPrice: 0,
                preferentialPrice: 0,
                settlementMode: 0,
                taxRate: 0,
                files: 0,
                deliveryDate: 0
              });
            } else {
              pos = index;
              let obj = {};
              this.columns.forEach((col) => {
                if (col.isMerge) {
                  obj[col.prop] = 1;
                }
              });
              this.spanArr.push(obj);
            }
            // let totalPriceSame = item.totalPrice === this.form.resultList[index - 1].totalPrice;
            // if (totalPriceSame) {
            //   this.spanArr[pos].totalPrice += 1;
            //   this.spanArr.push({ totalPrice: 0 });
            // } else {
            //   pos = index;
            //   this.spanArr.push({ totalPrice: 1 });
            // }
          }
        });
      },
      setIsInquiry() {
        this.$emit('setIsInquiry');
      },
      deliveryDateChange(row) {
        this.$emit('deliveryDateChange', (data) => {
          let is = false;

          if (data.length > 0) {
            data.forEach((item) => {
              if (
                new Date(this.form.deliveryDate).getTime() >
                new Date(item.expectReceiveDate).getTime()
              ) {
                is = true;
              }
            });
          }
          if (is) {
            this.$message.error('交货日期大于到货日期');
          }
        });
        this.setDeliveryDays();
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      //
      changeGetPrice(row) {
        if (row.singlePrice && row.totalCount) {
          let num = 0;
          this.form.resultList.forEach((item) => {
            num += item.totalPrice || 0;
          });
          this.form.preferentialPrice = parseFloat(num.toFixed(2));
        }
      },
      //计算销售金额
      totalPrice(a, b, row) {
        if (!a || !b) {
          return;
        }
        row.totalPrice = parseFloat((a * b).toFixed(2));
        this.totalPriceAll();
        return row.totalPrice;
      },
      //计算销售总价
      totalPriceAll() {
        let num = 0;
        this.form.resultList.forEach((item) => {
          num += item.totalPrice || 0;
        });
        this.form.totalPrice = parseFloat(num.toFixed(2));
        // this.form.preferentialPrice = parseFloat(num.toFixed(2));
        // console.log(this.form.resultList,'dasdasd')
      },
      // 返回列表数据
      getTableValue() {
        return this.form;
      },
      chaengMode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      chaengUnitCode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      //修改回显
      putTableValue(data) {
        this.form.resultList = copyObj(data);
        this.setDeliveryDays();
        this.setIsInquiry();
        
      },

      remove(productCode) {
        let index = this.form.resultList.findIndex(
          (item) => item.productCode == productCode
        );
        this.form.resultList.splice(index, 1);
        this.setIsInquiry();
        this.setSort();
      },
      removeSupplier() {
        this.$emit('removeSupplier', this.form.supplierId);
      },
      // 清空表格
      restTable() {
        this.form.resultList = [];
      },
      // 重新排序
      setSort() {
        this.form.resultList.forEach((n, index) => {
          n.key = index + 1;
        });
      },
      validateForm(callback) {
        //开始表单校验
        this.$refs.form.validate((valid) => {
          callback(valid);
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .period {
    display: flex;

    .borderleftnone {
      .el-input--medium .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .borderrightnone {
      .el-input--medium .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  ::v-deep .time-form tbody > tr:hover > td {
    background-color: transparent !important;
  }

  ::v-deep .time-form .el-table tr {
    background-color: #ffffff;
  }

  ::v-deep .el-upload-list--text {
    width: 75%;
  }
</style>