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

<template>
  <el-form :model="form" ref="form">
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="margin-top: 20px; margin-bottom: 10px"
    >
      <el-row type="flex" align="middle">
        <h4>供应商:{{ form.supplierName }}</h4>
      </el-row>
      <el-row type="flex" align="end">
        <el-radio
          v-model="radio1"
          @input="changeValue"
          :label="form.supplierId"
          style="margin-right;: 10px"
          :disabled="status == 'Detail'"
          >是否中标</el-radio
        >
        <el-popconfirm
          class="ele-action"
          title="确定要删除吗？"
          @confirm="removeSupplier"
          :disabled="status == 'Detail'"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </el-row>
    </el-row>
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      :datasource="form.resultList"
      cache-key="systemRoleTable17"
      class="time-form"
    >
      <!-- 表头工具栏 -->

      <template v-slot:toolbar>
        <div class="headbox">
          <div>
            <el-row>
              <!-- <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  label="供应商"
                  prop="supplierName"
                  label-width="120px"
                >
                  <el-input disabled v-model="form.supplierName"></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  prop="supplierCode"
                  label="编码"
                  label-width="120px"
                >
                  <el-input v-model="form.supplierCode" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  label-width="120px"
                  prop="settlementMode"
                  label="结算方式"
                  :rules="{
                    required: true,
                    message: '请选择结算方式',
                    trigger: 'blur'
                  }"
                >
                  <DictSelection
                    dictName="结算方式"
                    clearable
                    v-model="form.settlementMode"
                    @itemChange="chaengMode"
                    :disabled="status == 'Detail'"
                  >
                  </DictSelection>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  label-width="120px"
                  prop="totalPrice"
                  label="总价"
                  :rules="{
                    required: true,
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="form.totalPrice" disabled>
                    <template slot="suffix">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  label-width="120px"
                  prop="preferentialPrice"
                  style="margin-bottom: 22px"
                  label="优惠价"
                  :rules="{
                    required: true,
                    message: '请输入优惠价',
                    trigger: 'blur'
                  }"
                >
                  <el-input
                    v-model="form.preferentialPrice"
                    :disabled="status == 'Detail'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item prop="taxRate" label="税率" label-width="120px">
                  <el-input
                    v-model="form.taxRate"
                    style="width: 100%"
                    :disabled="status == 'Detail'"
                  >
                    <template slot="suffix">%</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item
                  label-width="120px"
                  prop="deliveryDate"
                  label="交货日期"
                  :rules="{
                    required: true,
                    message: '请选择日期',
                    trigger: 'blur'
                  }"
                >
                  <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>
              </el-col>

              <el-col :span="12" style="margin-bottom: 22px">
                <el-form-item label-width="120px" prop="files" label="附件">
                  <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>
              </el-col>
            </el-row>
          </div>
        </div>
      </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:productCode="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.productCode'"
          :rules="{
            required: true,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <el-input v-model="scope.row.productCode" disabled></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
            v-model="scope.row.singlePrice"
            :disabled="status == 'Detail'"
          ></el-input>
        </el-form-item>
      </template>
      <template v-slot:totalCount="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'resultList.' + scope.$index + '.totalCount'"
          :rules="{
            required: true,
            pattern: numberReg,
            message: '请输入数字',
            trigger: 'blur'
          }"
        >
          <el-input
            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: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 headList from '@/views/saleManage/businessOpportunity/components/headList.vue';
  const defaultColumns = [
    {
      width: 45,
      type: 'index',
      columnKey: 'index',
      align: 'center',
      fixed: 'left'
    },

    {
      width: 140,
      prop: 'productCode',
      label: '编码',
      slot: 'productCode',
      fixed: 'left'
    },
    {
      width: 200,
      prop: 'productName',
      label: '产品名称',
      slot: 'productName',
      fixed: 'left'
    },
    {
      width: 240,
      prop: 'supplierProductCode',
      label: '供应商产品编码',
      slot: 'supplierProductCode'
    },
    {
      width: 200,
      prop: 'supplierProductName',
      label: '供应商产品名称',
      slot: 'supplierProductName'
    },

    {
      width: 130,
      prop: 'modelType',
      label: '型号',
      slot: 'modelType'
    },

    {
      width: 120,
      prop: 'specification',
      label: '规格',
      slot: 'specification'
    },
    {
      width: 80,
      prop: 'totalCount',
      label: '购买数量',
      slot: 'totalCount'
    },
    {
      width: 120,
      prop: 'singlePrice',
      label: '销售单价（元）',
      slot: 'singlePrice'
    },
    {
      width: 150,
      prop: 'totalPrice',
      label: '销售金额（元）',
      slot: 'totalPrice'
    },
    {
      width: 100,
      prop: 'measuringUnit',
      label: '计量单位',
      slot: 'measuringUnit'
    },


    // {
    //   width: 130,
    //   prop: 'brand',
    //   label: '品牌',
    //   slot: 'brand'
    // },
    {
      width: 80,
      prop: 'deliveryDays',
      label: '交期(天)',
      slot: 'deliveryDays'
    },
    {
      width: 120,
      prop: 'guaranteePeriod',
      label: '质保期',
      slot: 'guaranteePeriod'
    },
    {
      width: 120,
      prop: 'guaranteePeriodUnitCode',
      label: '质保期单位',
      slot: 'guaranteePeriodUnitCode'
    },

    {
      width: 220,
      prop: 'remark',
      label: '备注',
      slot: 'remark'
    }
  ];
  export default {
    mixins: [dictMixins],
    components: {
      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: '',
              remark: '',
              singlePrice: '',
              specification: '',
              supplierProductName: '',
              technicalAnswerName: '',
              technicalParams: '',
              totalCount: '',
              totalPrice: ''
            }
          ]
        },
        dataList: [],

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

    created() {
      this.form = copyObj(this.obj);
      this.radio1 = this.radio;
      // this.dataList=copyObj(this.list)
    },
    methods: {
      changeValue() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('setSupplierId', {
              supplierName: this.form.supplierName,
              supplierId: this.form.supplierId
            });
          }else{
            this.radio1=''
          }
        });
      },
      //计算销售金额
      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;
        });
        this.form.totalPrice = parseFloat(num.toFixed(2));
        // this.form.preferentialPrice = parseFloat(num.toFixed(2));
        // console.log(this.form.resultList,'dasdasd')
      },
      // 返回列表数据
      getTableValue() {
        console.log(this.form, 'this.form');
        return this.form;
      },
      chaengMode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      chaengUnitCode(data) {
        this.form.settlementModeName = data.dictValue;
      },
      //修改回显
      putTableValue(data) {
        this.form.resultList = copyObj(data);
      },

      remove(productCode) {
        let index = this.form.resultList.findIndex(
          (item) => item.productCode == productCode
        );
        this.form.resultList.splice(index, 1);
        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;
  }
</style>