kd-aiot-frontend-mes/src/views/exceptionManagement/components/create.vue

<template>
  <ele-modal :visible.sync="visible" :title="title" width="45vw" append-to-body @close="cancel">
    <div class="switch" v-if="type=='detail'">
      <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"
      :rules="rules"
      label-width="100px"
      class="create-form"
      v-if="activeComp=='main'"
    >
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="类型:" prop="type">
            <DictSelection
              dictName="异常类型"
              v-model="form.type"
              :disabled="type == 'detail'"
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 24 } : { span: 8 }">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 16, md: 24 } : { span: 16 }">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" :disabled="type == 'detail'" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 16, md: 24 } : { span: 16 }">
          <el-form-item label="异常描述:">
            <el-input
              v-model="form.describes"
              type="textarea"
              :rows="2"
              :disabled="type == 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 16, md: 24 } : { span: 16 }">
          <el-form-item label="关联:" prop="relationType">
            <el-select
              :disabled="type == 'detail'"
              v-model="form.relationType"
              placeholder="请选择"
              style="width: 100%"
              clearable
              @input="addProduct"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="accessory" label="上传附件">
            <fileUpload
              v-model="form.accessory"
              module="main"
              :limit="5"
              :disabled="type == 'detail'"
              :showLib="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle
        v-if="form.relationJson.code"
        style="margin-top: 15px"
        :title="getTitle() + '信息'"
      ></headerTitle>
      <el-row :gutter="15" v-if="form.relationJson.code">
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item :label="'生产' + getTitle() + '号'">
            <el-input v-model="form.relationJson.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="计划编号">
            <el-input v-model="form.relationJson.productionPlanCode" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="计划类型">
            <el-input v-model="form.relationJson.planTypeName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="工艺路线">
            <el-input v-model="form.relationJson.produceRoutingName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="工序">
            <el-input v-model="form.relationJson.produceVersionName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="产品编码">
            <el-input v-model="form.relationJson.productCode" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="产品名称">
            <el-input v-model="form.relationJson.productName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="牌号">
            <el-input v-model="form.relationJson.brandNo" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="型号">
            <el-input v-model="form.relationJson.model" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="批号">
            <el-input v-model="form.relationJson.batchNo" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="要求生产数量">
            <el-input v-model="form.relationJson.requiredFormingNum" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="要求生产重量">
            <el-input v-model="form.relationJson.sumOrderWeight" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="计划开始时间">
            <el-input v-model="form.relationJson.reqMoldTime" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="已生产数量">
            <el-input v-model="form.relationJson.formedNum" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="已生产重量">
            <el-input v-model="form.relationJson.formedWeight" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="计划结束时间">
            <el-input v-model="form.relationJson.deliveryTime" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="状态">
            <el-input v-model="form.relationJson.status" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="班组">
            <el-input v-model="form.relationJson.teamName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="优先级">
            <el-input v-model="form.relationJson.priority" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="创建人">
            <el-input v-model="form.relationJson.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="创建时间">
            <el-input v-model="form.relationJson.createTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle
        v-if="form.approvalProcess.length > 0"
        title="异常判定结果"
        style="margin-top: 15px"
      ></headerTitle>
      <el-row
        :gutter="15"
        v-for="(item, index) in form.approvalProcess"
        :key="index"
      >
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="审核人:">
            <el-input :value="item.auditor" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="异常判定:">
            <el-input :value="item.exceptionDetermine" disabled />
          </el-form-item>
        </el-col>
        <el-col
          v-if="item.exceptionDispose"
          v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }"
        >
          <el-form-item label="异常处置:">
            <el-input :value="item.exceptionDispose" disabled />
          </el-form-item> </el-col
      ></el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading"
        v-if="type != 'detail'"
      >
        确定
      </el-button>
    </template>
    <detail  v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"></detail>
    <productionPlan ref="productionPlanRef" @choose="choose" />
    <workOrder ref="workOrderRef" @choose="choose" />
    <produceOrder ref="produceOrderRef" @choose="choose" />
  </ele-modal>
</template>

<script>
import { save } from '@/api/exceptionManagement/index';
import { transitionData } from './transition';
import productionPlan from './productionPlan';
import workOrder from './workOrder';
import produceOrder from './produceOrder';
import fileUpload from '@/components/upload/fileUpload';
import detail from '@/views/bpm/processInstance/detail.vue';
const defaultForm = function () {
  return {
    accessory: [],
    images: [],
    code: '',
    type: '',
    relationType: '', //关联类型 1 计划 2订单 3工单
    relationId: '', //关联id
    relationCode: '',
    exceptionDetermine: '', //异常判定
    exceptionDispose: '', //异常处置
    approvalStatus: '', //审批状态
    approvalOpinion: '', //审批意见
    exceptionClose: '', //异常关闭 0否 1 是
    createUserName: '', //创建人名称
    id: '',
    describes: '',
    createTime: '',
    relationJson: [],
    approvalProcess:[]
  };
};
export default {
  components: { fileUpload, productionPlan, workOrder, produceOrder, detail },
  data() {
    return {
      visible: false,
      loading: false,
      activeComp: 'main',
      tabOptions: [
        { key: 'main', name: '异常详情' },
        { key: 'bpm', name: '流程详情' }
      ],
      form: { ...defaultForm() },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      type: '',
      title: '创建',
      options: [
        { label: '生产计划', value: 1 },
        { label: '生产订单', value: 2 },
        { label: '生产工单', value: 3 }
      ],
      planType: [
        { label: '所有计划类型', value: null },
        { label: '内销计划', value: '1' },
        { label: '外销计划', value: '2' },
        { label: '预制计划', value: '3' }
      ]
    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {},
  methods: {
    getTitle() {
      return this.form.relationType == 1
        ? '计划'
        : this.form.relationType == 2
        ? '订单'
        : '工单';
    },
    open(type, row) {
      this.visible = true;
      
      this.activeComp= 'main',
      this.type = type;
      if (type != 'add') {
        this.form = JSON.parse(JSON.stringify(row));
        this.form.relationJson = this.form.relationJson[0];
        this.form.type = this.form.type + '';
      }
      this.title = type == 'add' ? '新增' : type == 'edit' ? '修改' : '详情';
    },

    addProduct() {
      if (this.form.relationType == 1) {
        this.$refs.productionPlanRef.open();
      } else if (this.form.relationType == 2) {
        this.$refs.workOrderRef.open();
      } else if (this.form.relationType == 3) {
        this.$refs.produceOrderRef.open();
      }
    },
    cancel() {
      this.form = { ...defaultForm() };
      this.visible = false;
    },
    choose(data) {
      this.form.relationJson = JSON.parse(
        JSON.stringify(transitionData(data, this.form.relationType))
      );
      this.form.relationId = data.relationId;
      this.form.relationCode = data.code;
    },

    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (!this.form.relationJson.code) {
          this.$message.error('请选择' + this.getTitle());
          return;
        }
        // for (let key in this.form) {
        //   if (key.includes('create')) {
        //     this.form[key] = '';
        //   }
        // }
        this.loading = true;
        let data = JSON.parse(JSON.stringify(this.form));
        data.relationJson = [data.relationJson];
        save(data)
          .then((res) => {
            this.loading = false;
            this.$message.success('成功');
            this.cancel();
            this.$emit('refresh');
          })
          .catch((e) => {
            this.loading = false;
          });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.basic-details-title {
  margin: 10px 0;
}

.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.create-form .el-form-item {
  margin-bottom: 15px !important;
}
</style>