kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/invoiceConfirm/components/addInvoiceDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="70%"
    @close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <div class="switch" v-if="title == '详情'">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>

    <el-form
      v-show="activeComp == 'main'"
      ref="form"
      :model="form"
      :rules="rules"
      class="el-form-box"
      label-width="140px"
    >
      <headerTitle title="收货确认单信息"></headerTitle>
      <el-row :gutter="12">
        <el-col :span="12" v-if="title != '新增收货确认单'">
          <el-form-item label="收货确认单编码" prop="receiveConfirmNo">
            <el-input
              v-model="form.receiveConfirmNo"
              :disabled="true"
              placeholder=" "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货单" prop="receiveCode">
            <el-input
              clearable
              v-model="form.receiveCode"
              @click.native="handleOrderBtn"
              :disabled="title == '详情'"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="repliedFiles" label="回执附件">
            <fileMain
              v-model="form.repliedFiles"
              :type="title == '详情' ? 'view' : 'add'"
            ></fileMain>
          </el-form-item>
        </el-col>
      </el-row>

      <headerTitle title="收货信息"></headerTitle>

      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="收货单编码：" prop="receiveCode">
            <el-input v-model="form.receiveCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="orderNo" label="订单编码：">
            <el-input v-model="form.orderNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item prop="outsourceSendCode" label="委外发货单编码：">
            <el-input v-model="form.outsourceSendCode" disabled></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="form.supplierName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商联系人：" prop="linkName">
            <el-input v-model="form.linkName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商电话：" prop="linkPhone">
            <el-input v-model="form.linkPhone" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号：" prop="carNo">
            <el-input v-model="form.carNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="receiveDate" label="收货日期：">
            <el-input v-model="form.receiveDate" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" prop="receiveFiles">
            <fileMain v-model="form.receiveFiles" type="view"></fileMain>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <headerTitle title="物品清单" v-show="activeComp == 'main'"></headerTitle>
    <ele-pro-table
      v-show="activeComp == 'main'"
      ref="table"
      :needPage="false"
      :columns="columns"
      :cache-key="cacheKeyUrl"
      @columns-change="handleColumnChange"
      :datasource="form.productList"
      row-key="id"
      max-height="500px"
    >
      <template v-slot:technicalDrawings="{ row }">
        <fileMain v-model="row.technicalDrawings" type="view"></fileMain>
      </template>
      <template v-slot:isException="scope">
        <el-select
          v-model="scope.row.isException"
          :disabled="title == '详情'"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>

      <template v-slot:totalCount="scope">
        <el-input
          :disabled="title == '详情'"
          v-model="scope.row.confirmCount"
          @input="totalCountChange(scope.row, scope.$index)"
          type="number"
          placeholder="请输入"
        ></el-input>
      </template>
      <template v-slot:remark="scope">
        <el-input
          :disabled="title == '详情'"
          v-model="scope.row.remark"
          placeholder="请输入"
        ></el-input>
      </template>
    </ele-pro-table>

    <div slot="footer" class="footer">
      <el-button
        type="primary"
        @click="save"
        v-click-once
        v-if="title != '详情'"
        >保存</el-button
      >
      <el-button
        type="primary"
        @click="save('sub')"
        v-click-once
        v-if="title != '详情'"
        >提交</el-button
      >

      <el-button @click="cancel">返回</el-button>
    </div>

    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
    <sendListDialog
      ref="sendListDialogRef"
      @changeParent="getSaleOrderDetail"
    ></sendListDialog>
    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getReceiveSaleOrderrecordDetail } from '@/api/purchasingManage/purchaseorderreceive';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import sendListDialog from '@/views/purchasingManage/purchaseOrder/returnGoods/components/sendListDialog.vue';
  import { levelList } from '@/enum/dict.js';
  import {
    addReceiveConfirmInformation,
    getReceiveConfirmDetail,
    UpdateReceiveConfirmInformation
  } from '@/api/purchasingManage/invoiceConfirm';
  import { copyObj } from '@/utils/util';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';

  let formDef = {
    receiveCode: '',
    repliedFiles: '',
    supplierName: '',
    linkName: '',
    linkPhone: '',
    carNo: '',
    receiveDate: '',
    receiveFiles: '',
    receiveNo: '',
    productList: []
  };
  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      processSubmitDialog,
      sendListDialog,
      bpmDetail
    },

    data() {
      return {
        activeComp: 'main',
        billDetailDialogFlag: false,
        fullscreen: false,
        tabOptions: [
          { key: 'main', name: '确认单详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        cacheKeyUrl: 'eos-purchasingManage-invoiceConfirm-inventoryTable',
        visible: false,
        processSubmitDialogFlag: false,
        title: '',
        form: {
          ...formDef
        },

        options: [
          { value: 0, label: '无异常' },
          { value: 1, label: '有异常' }
        ],
        rules: {
          sendNo: [
            { required: true, message: '请选择发货单', trigger: 'change' }
          ],
          repliedFiles: [
            { required: true, message: '请上传回执附件', trigger: 'change' }
          ]
        },

        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        columnsVersion:1
      };
    },
    created() {
      this.requestDict('产地');
      this.requestDict('生产类型');
    },
    computed: {
      columns() {
        let columnsVersion=this.columnsVersion

        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 200,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            width: 200,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'taskName',
            label: '工序',
            slot: 'taskName',
            align: 'center'
          },
          {
            width: 110,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            align: 'center'
          },
          {
            width: 160,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },

          {
            width: 120,
            prop: 'supplierMark',
            label: '供应商代号',
            slot: 'supplierMark',
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            width: 200,
            prop: 'warehouseName',
            label: '仓库名称',
            slot: 'warehouseName',
            align: 'center'
          },

          {
            width: 80,
            prop: 'totalCount',
            label: '收货数量',
            align: 'center'
          },
          {
            width: 150,
            prop: 'confirmCount',
            label: '确认数量',
            slot: 'totalCount',
            align: 'center'
          },

          {
            width: 80,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit',
            align: 'center'
          },
          // {
          //   width: 120,
          //   prop: 'singleWeight',
          //   label: '单重',
          //   slot: 'singleWeight',
          //   align: 'center'
          // },
          // {
          //   width: 200,
          //   prop: 'sendTotalWeight',
          //   label: '发货总重',
          //   slot: 'sendTotalWeight',
          //   align: 'center',
          //   headerSlot: 'headerTotalCount'
          // },
          // {
          //   width: 100,
          //   prop: 'receiveTotalWeight',
          //   label: '收货总重',
          //   slot: 'receiveTotalWeight',
          //   align: 'center'
          // },
          // {
          //   width: 100,
          //   prop: 'increaseTotalWeight',
          //   label: '增重重量',
          //   slot: 'increaseTotalWeight',
          //   align: 'center'
          // },
          // {
          //   width: 100,
          //   prop: 'weightUnit',
          //   label: '重量单位',
          //   slot: 'weightUnit',
          //   align: 'center'
          // },
          {
            width: 120,
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'goodsLevel',
            label: '物品级别',
            formatter: (_row, _column, cellValue) => {
              return levelList.find((item) => item.value == _row.goodsLevel)
                ?.label;
            },
            align: 'center'
          },
          {
            width: 160,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            align: 'center'
          },
          {
            width: 150,
            prop: 'notaxSinglePrice',
            label: '不含税单价',
            align: 'center'
          },
          {
            width: 160,
            prop: 'discountSinglePrice',
            label: '折后单价',
            slot: 'discountSinglePrice',
            align: 'center'
          },
          {
            width: 120,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            width: 160,
            prop: 'discountTotalPrice',
            label: '折后合计',
            slot: 'discountTotalPrice',
            align: 'center'
          },
          {
            prop: 'provenance',
            label: '产地',
            slot: 'provenance',
            align: 'center',
            minWidth: 200,
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.provenance && row.provenance.length
                ? row.provenance
                    .map((item) => this.getDictValue('产地', item))
                    .join(',')
                : '';
            }
          },
          {
            prop: 'productionDate',
            label: '生产日期',
            slot: 'productionDate',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            width: 160,
            prop: 'deliveryDeadline',
            label: '交期截止日期',
            slot: 'deliveryDeadline',
            align: 'center'
          },
          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '有效期',
            slot: 'guaranteePeriod',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            }
          },
          {
            width: 160,
            prop: 'guaranteePeriodDeadline',
            label: '有效期截止日期',
            slot: 'guaranteePeriodDeadline',
            align: 'center'
          },
          {
            width: 130,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            slot: 'technicalAnswerName',
            align: 'center'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            slot: 'technicalParams',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          },
          {
            width: 120,
            slot: 'isException',
            prop: 'isException',
            label: '收货状态',
            align: 'center',
            fixed: 'right'
          }
        ];
      }
    },

    methods: {
      //选择发货单回调
      handleOrderBtn() {
        this.$refs.sendListDialogRef.open();
      },
      //发货单详情
      async getSaleOrderDetail(res) {
        this.loading = true;

        let row = await getReceiveSaleOrderrecordDetail(res.id);
        this.loading = false;

        row.productList = row.productList.map((item) => {
          delete item.id;
          item['isException'] = 0;
          item['confirmCount'] = item.totalCount;
          return item;
        });
        if (row) {
          row.receiveId = row.id;
          row.receiveCode = row.receiveNo;
          row.reviewStatus = 0;
          row.processInstanceId = '';
          let data = copyObj(row);
          delete data.id;
          if (this.isUpdate) {
            data.receiveConfirmNo = this.form.receiveConfirmNo;
            data.id = this.form.id;
            data.reviewStatus = this.form.reviewStatus;
            data.processInstanceId = this.form.processInstanceId;
          }
          this.form = data;
        }
      },

      // //发货单确认详情
      async getSendSaleOrderDetail(id) {
        this.businessId = id;
        this.loading = true;
        const data = await getReceiveConfirmDetail(id);
        this.loading = false;
        if (data) {
          this.form = data;
        }
      },

      //打开新增编辑弹框
      async open(type, row, invoiceData) {
        this.activeComp = 'main';
        this.title =
          type === 'add' ? '新增收货确认单' : type === 'view' ? '详情' : '修改';
        this.visible = true;
        if (row && row?.id) {
          await this.getSendSaleOrderDetail(row?.id);
        }
        if (invoiceData) {
          this.changeOrder(invoiceData);
        }
        this.isUpdate = type != 'add';
      },
      totalCountChange(row, index) {
        if (row.confirmCount < 0) {
          this.$set(this.form.productList[index], 'confirmCount', 0);
        }
        if (row.confirmCount && row.singlePrice) {
          this.$set(
            this.form.productList[index],
            'totalPrice',
            row.confirmCount * row.singlePrice
          );
        }
      },
      getValidate() {
        return Promise.all([
          new Promise((resolve, reject) => {
            this.$refs.form.validate((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          })
        ]).catch((e) => {
          this.$message.warning('有必填项未填写，请检查');
          return Promise.reject(e);
        });
      },
      // 添加
      handlAdd() {
        if (!this.form.sendNo) return this.$message.error('请先选择来源单据');
        this.handleSelectGoods();
      },
      async save(type) {
        try {
          await this.getValidate();
          // 表单验证通过，执行保存操作
          this.loading = true;

          if (!this.isUpdate) {
            delete this.form.id;
          }
          this.form.repliedFiles = this.form.repliedFiles || [];
          this.form.replied = this.form.repliedFiles.length > 0 ? 1 : 0;
          let commitData = Object.assign({}, this.form);
          const API = this.isUpdate
            ? UpdateReceiveConfirmInformation
            : addReceiveConfirmInformation;
          API(commitData)
            .then((res) => {
              this.loading = false;
              this.$message.success('修改成功');
              if (type === 'sub') {
                this.sendSubmit(res);
                return;
              }
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      async sendSubmit(res) {
        const data = await getSendSaleOrderConfirmDetail(
          this.businessId || res
        );
        this.processSubmitDialogFlag = true;

        this.$nextTick(() => {
          let params = {
            businessId: this.businessId || res,
            businessKey: 'purchase_receive_confirm_approve',
            formCreateUserId: data.createUserId,
            variables: {
              businessCode: data.receiveConfirmNo,
              businessName: data.supplierName,
              businessType: '收货确认单'
            }
          };

          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      remove(index) {
        this.form.productList.splice(index, 1);
      },
      reload() {
        this.cancel();
        this.$emit('done');
      },
      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          this.form = formDef;
          this.visible = false;
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  .TotalAmount {
    font-size: 16px;
    padding-right: 30px;
  }

  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
</style>