kd-aiot-frontend-mes/src/views/produce/components/createError.vue

<template>
  <ele-modal
    :visible.sync="visible"
    v-if="visible"
    :title="title"
    width="45vw"
    append-to-body
    @close="cancel"
  >
    <div class="switch" v-if="type == 'detail'" :maxable="true">
      <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>
  </ele-modal>
</template>

<script>
  import { save } from '@/api/exceptionManagement/index';
  import { transitionData } from '../../exceptionManagement/components/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';
  import { workorderPage } from '@/api/workOrderList';
  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, 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 + '';
        }

        console.log(type, row, 'type,row');
        this.title = type == 'add' ? '新增' : type == 'edit' ? '修改' : '详情';
        this.choose(row);
      },

      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');
              this.visible = false;
            })
            .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>