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';
import { getCurrentUser, setCurrentUser } from '@/utils/token-util';

const def = {
  name: '',
  relationCode: '',
  relationType: '',
  relationName: '',
  relationTypeName: '',
  relationId: '',
  formCreateUserId: '',
  detailList: [],
  currentUser: '',
  businessId: ''
};
export default {
  mixins: [dictMixins],
  components: {
    processSubmitDialog,
    bpmDetail,
    sendConfirmDialog,
    receiveTListDialog
  },
  props: {
    // 1： 销售订单， 2： 采购订单
    relationType: {
      default: 1
    }
  },
  created() {
    this.currentUser = getCurrentUser();
    console.log(this.currentUser);
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        { key: 'main', name: '处置详情' },
        { key: 'bpm', name: '流程详情' }
      ],
      title: '',
      addOrEditDialogFlag: false,
      fullscreen: false,
      processSubmitDialogFlag: false,

      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'
        },
        {
          width: 120,
          prop: 'productBrand',
          label: '牌号',
          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
        }
      ];
    },
    options() {
      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 }
          ];
    },
    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;
      console.log(row);
      if (row && row?.id) {
        await this.getById(row?.id);
      } else {
        this.form.relationType = this.relationType;
        this.form.relationTypeName = relationTypeOption[this.relationType];
      }
    },
    async changeParent(data) {
      console.log('data~~~~~~', this.relationType, 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;
          return item;
        });

        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.formCreateUserId = this.currentUser.currentRoleId;
        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.businessId = res;
            console.log(this.businessId);
            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(() => {
        console.log(this.businessId);
        let params = {
          businessId: this.form.id || this.businessId || '',
          businessKey: 'eom_exception_approve',
          formCreateUserId:
            this.form.createUserId || this.currentUser?.currentRoleId || '',
          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>