kd-aiot-frontend-eom/src/views/saleManage/saleOrder/exceptionManagement/components/addOrEditDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    width="70%"
    :before-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
      ref="form"
      :model="form"
      label-width="120px"
      class="el-form-box"
      v-if="activeComp == 'main'"
      :rules="rules"
    >
      <headerTitle title="基本信息"></headerTitle>

      <el-row :gutter="12">
        <el-col :span="8" v-if="title != '新建'">
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input
              clearable
              v-model="form.name"
              :disabled="title == '详情'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源单据类型" prop="relationType">
            <el-input v-model="form.relationTypeName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源单据编码" prop="relationCode">
            <el-input
              v-model="form.relationCode"
              :disabled="title == '详情'"
              redaonly
              @click.native="openDialog"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源单据名称" prop="relationName">
            <el-input
              clearable
              v-model="form.relationName"
              :disabled="title == '详情'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="title != '新建'">
          <el-form-item label="创建人" prop="createUserName">
            <el-input
              clearable
              v-model="form.createUserName"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="title != '新建'">
          <el-form-item label="创建时间" prop="createTime">
            <el-input clearable v-model="form.createTime" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle title="物品清单" style="margin-top: 30px"></headerTitle>
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :toolkit="[]"
        :datasource="form.detailList"
        row-key="id"
        :maxHeight="400"
      >
        <template v-slot:headerExceptionDispose="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:exceptionDispose="scope">
          <el-select
            v-model="scope.row.exceptionDispose"
            :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:describes="scope">
          <el-input v-model="scope.row.describes" placeholder="请输入">
          </el-input>
        </template>
        <template v-slot:exceptionDetermine="scope">
          <el-select
            v-model="scope.row.exceptionDetermine"
            :disabled="title == '详情'"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <template v-slot:totalCount="scope">
          <el-input
            v-model="scope.row.totalCount"
            type="number"
            placeholder="请输入"
          ></el-input>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="scope" v-if="title != '详情'">
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="remove(scope.$index)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-form>

    <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>
    <bpmDetail
      :key="activeComp"
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
    <sendConfirmDialog
      ref="sendConfirmDialogRef"
      @changeParent="changeParent"
    ></sendConfirmDialog>
    <receiveTListDialog
      ref="receiveTListDialogRef"
      @changeParent="changeParent"
    ></receiveTListDialog>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getById, update, save } from '@/api/exceptionManagement/index';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import { getSendSaleOrderConfirmDetail } from '@/api/saleManage/invoiceConfirm';
  import { getReceiveConfirmDetail } from '@/api/purchasingManage/invoiceConfirm';
  import { relationTypeOption } from '@/enum/dict.js';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import sendConfirmDialog from '@/views/saleManage/saleOrder/invoiceConfirm/components/sendConfirmDialog.vue';
  import receiveTListDialog from '@/views/purchasingManage/purchaseOrder/invoiceConfirm/components/receiveTListDialog.vue';

  const def = {
    name: '',
    relationCode: '',
    relationType: '',
    relationName: '',
    relationTypeName: '',
    relationId: '',
    detailList: []
  };
  export default {
    mixins: [dictMixins],
    components: {
      processSubmitDialog,
      bpmDetail,
      sendConfirmDialog,
      receiveTListDialog
    },
    props: {
      relationType: {
        default: 1
      }
    },
    created() {

    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '处置详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        title: '',
        addOrEditDialogFlag: false,
        fullscreen: false,
        processSubmitDialogFlag: false,
        options: [
          { label: '退货出库', value: 1 },
          { label: '返工返修', value: 2 },
          { label: '报损', value: 3 },
          { label: '报废', value: 4 }
        ],

        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'change' }],

          relationCode: [
            { required: true, message: '请选择来源', trigger: 'change' }
          ]
        },
        form: { ...def }
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },

          {
            width: 220,
            prop: 'exceptionDetermine',
            label: '异常类型',
            slot: 'exceptionDetermine',
            fixed: 'left',
            align: 'center',
            headerSlot: 'headerExceptionDispose'
          },
          {
            width: 220,
            prop: 'exceptionDispose',
            label: '处置方式',
            slot: 'exceptionDispose',
            fixed: 'left',
            align: 'center',
            headerSlot: 'headerExceptionDispose'
          },
          {
            minWidth: 160,
            prop: 'productCode',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'productName',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },

          // {
          //   minWidth: 100,
          //   prop: 'saleCount',
          //   label: '发货数量',
          //   showOverflowTooltip: true,
          //   align: 'center'
          // },
          {
            minWidth: 100,
            prop: 'totalCount',
            slot: 'totalCount',
            label: '异常数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'batchNo',
            label: '批次号',
            showOverflowTooltip: true,
            slot: 'batchNo',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'barcodes',
            label: '发货条码',
            showOverflowTooltip: true,
            slot: 'barcodes',
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'materielDesignation',
            label: '物料代号',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'clientCode',
            label: this.relationType == 1 ? '客户代号' : '供应商代号',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'engrave',
            label: '刻码',
            showOverflowTooltip: true,
            align: 'center'
          },
          // {
          //   minWidth: 160,
          //   prop: 'packageNo',
          //   align: 'center',
          //   label: '包装编码',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 100,
          //   prop: 'packingQuantity',
          //   align: 'center',
          //   label: '包装数量',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 120,
          //   prop: 'packingUnit',
          //   align: 'center',
          //   label: '包装单位',
          //   showOverflowTooltip: true
          // },

          {
            minWidth: 150,
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'modelKey',
            label: '机型',
            showOverflowTooltip: true,
            align: 'center',

          },
          {
            minWidth: 120,
            prop: 'colorKey',
            showOverflowTooltip: true,
            label: '颜色',
            align: 'center',

          },

          {
            width: 220,
            prop: 'describes',
            label: '描述',
            slot: 'describes',
            align: 'center'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right',
            showOverflowTooltip: true
          }
        ];
      },
      options1() {
        return this.relationType == 1
          ? [
              { label: '多发', value: 1 },
              { label: '少发', value: 2 },
              { label: '错发', value: 3 },
              { label: '损坏', value: 4 }
            ]
          : [
              { label: '多收', value: 1 },
              { label: '少收', value: 2 },
              { label: '错收', value: 3 },
              { label: '损坏', value: 4 }
            ];
      }
    },

    methods: {
      openDialog() {
        let ref =
          this.relationType == 1
            ? 'sendConfirmDialogRef'
            : 'receiveTListDialogRef';
        this.$refs[ref].open();
      },
      //打开新增编辑弹框
      async open(type, row) {
        this.title = type == 'edit' ? '处置' : type == 'add' ? '新建' : '详情';

        this.addOrEditDialogFlag = true;
        if (row && row?.id) {
          await this.getById(row?.id);
        } else {
          this.form.relationType = this.relationType;
          this.form.relationTypeName = relationTypeOption[this.relationType];
        }
      },
      async changeParent(data) {
        if (this.relationType == 1) {
          const res = await getSendSaleOrderConfirmDetail(data.id);
          this.form.relationCode = res.docNo;
          this.form.relationId = res.id;
          this.form.relationName = res.contactName + '-' + res.docNo;
          this.$set(this.form, 'detailList', res.productList);
        }
        if (this.relationType == 2) {
          const res = await getReceiveConfirmDetail(data.id);
          this.form.relationCode = res.receiveConfirmNo;
          this.form.relationId = res.id;
          res.productList = res.productList.map((item) => {
            item['clientCode'] = item.supplierMark;
          });

          this.form.relationName =
            res.supplierName + '-' + res.receiveConfirmNo;
          this.$set(this.form, 'detailList', res.productList);
        }
      },

      //获取订单详情
      async getById(id) {
        this.loading = true;
        let data = await getById(id);
        data['relationTypeName'] = relationTypeOption[data.relationType];

        this.loading = false;
        if (data) {
          this.form = data;
        }
      },
      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);
        });
      },
      async save(type) {
        try {
          await this.getValidate();
          this.loading = true;
          let isExceptionDispose = false;
          let isExceptionDetermine = false;
          this.form.detailList.forEach((item) => {
            if (!item.exceptionDispose) {
              isExceptionDispose = true;
            }

            if (!item.exceptionDetermine) {
              isExceptionDetermine = true;
            }
          });
          if (isExceptionDispose) {
            this.$message.error('处置方式不能为空');
            return;
          }
          if (isExceptionDetermine) {
            this.$message.error('异常类型不能为空');
            return;
          }
          let api = this.form.id ? update : save;
          api(this.form)
            .then((res) => {
              this.loading = false;
              this.$message.success('操作成功');
              if (type === 'sub') {
                this.submit(res);
                return;
              }
              this.cancel();
            })
            .catch((e) => {
              this.loading = false;
            });
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      remove(index) {
        this.form.detailList.splice(index, 1);
      },

      async submit() {
        this.processSubmitDialogFlag = true;

        this.$nextTick(() => {
          let params = {
            businessId: this.form.id,
            businessKey: 'eom_exception_approve',
            formCreateUserId: this.form.createUserId,
            variables: {
              businessCode: this.form.code,
              businessName: this.form.name,
              businessType: this.form.relationName
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      reload() {
        this.cancel();
      },
      cancel() {
        this.form = {
          ...def
        };
        this.addOrEditDialogFlag = false;
        this.$emit('done');
      }
    }
  };
</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>