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

<template>
  <ele-modal
    width="80%"
    :visible="visible"
    append-to-body
    custom-class="ele-dialog-form"
    :title="title"
    :close-on-click-modal="false"
    :before-close="handleBeforeClose"
    maxable
  >
    <header-title title="基本信息"></header-title>
    <el-form
      :model="addForm"
      :rules="formRules"
      ref="ruleFormRef"
      label-width="120px"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="类型" required prop="itemType">
            <DictSelection
              dictName="记录规则事项类型"
              clearable
              v-model="addForm.itemType"
              disabled
            >
            </DictSelection>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="执行方式" required prop="executeMethod">
            <DictSelection
              dictName="记录规则执行方式"
              clearable
              v-model="addForm.executeMethod"
              disabled
            >
            </DictSelection>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="关联任务">
            <el-input
              v-model="addForm.itemTaskName"
              placeholder="请输入任务名称"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="modal-footer">
        <el-button
          v-if="type != 'detail'"
          :loading="butLoading"
          type="primary"
          @click="submit('submit')"
          :disabled="productionInfo && productionInfo.executeStatus == 2"
        >
          一键报工
        </el-button>

        <el-button v-if="productionInfo" @click="handleBeforeClose">
          关闭
        </el-button>
      </div>
    </template>
  </ele-modal>
</template>

<script>
  import DictSelection from '@/components/Dict/DictSelection.vue';
  import SelectUser from '@/components/select/SelectUser/index.vue';
  import { saveRuleRecord } from '@/api/producetaskrulerecord/index.js';

  export default {
    components: { SelectUser },
    emits: ['reload'],
    props: {
      isTempRecord: {
        type: Number,
        default: 0
      }
    },
    data() {
      const formDate = {
        id: null,
        workshopArea: '',
        checkFinishTime: '',
        checkValidity: null,
        checkValidityUnit: '',
        conclusion: null,
        isTempRecord: this.isTempRecord,
        details: [],
        planList: [],
        deviceId: 0,
        deviceName: '',
        batchNo: '',
        brandNo: '',
        executeMethod: 0,
        formingNum: 0,
        itemType: 0,
        produceRoutingId: 0,
        produceRoutingName: '',
        produceTaskConfigId: 0,
        produceTaskId: 0,
        produceTaskName: '',
        productCode: '',
        productModel: '',
        productName: '',
        recordRulesClassify: null,
        ruleId: 0,
        ruleName: '',
        reportWorkType: 0,
        specification: '',
        workOrderCode: '',
        workOrderId: 0,
        itemTaskName: ''
      };

      return {
        visible: false,
        formDate,
        addForm: JSON.parse(JSON.stringify(formDate)),
        formRules: {
          checkFinishTime: [
            { required: true, message: '请选择检查完成时间', trigger: 'blur' },
            { required: true, message: '请选择检查完成时间', trigger: 'change' }
          ],
          conclusion: [
            { required: true, message: '请选择结论', trigger: 'blur' },
            { required: true, message: '请选择结论', trigger: 'change' }
          ],
          checkValidity: [
            { required: true, message: '请输入检查有效期', trigger: 'blur' },
            { required: true, message: '请输入检查有效期', trigger: 'change' }
          ],
          checkValidityUnit: [
            {
              required: true,
              message: '请选择检查有效期单位',
              trigger: 'blur'
            },
            {
              required: true,
              message: '请选择检查有效期单位',
              trigger: 'change'
            }
          ]
        },
        productionInfo: null,
        list: [],
        ruleInfo: null,
        showSelectUser: false,
        currentRow: null,
        butLoading: false,
        // 工艺路线
        workOrderInfo: null,
        // 加载中 loading
        loading: false,
        title: '任务确认',
        // 编辑 或者是  详情 edit detila
        type: 'edit'
      };
    },
    computed: {},
    methods: {
      openView(productionInfo, workOrderInfo) {
        this.type = 'detail';
        this.open(productionInfo, workOrderInfo);
      },
      open(productionInfo, workOrderInfo) {
        console.log(
          'productionInfo, workOrderInfo',
          productionInfo,
          workOrderInfo
        );
        this.visible = true;
        this.productionInfo = productionInfo;
        this.workOrderInfo = workOrderInfo;

        this.addForm.batchNo = workOrderInfo.batchNo;
        this.addForm.executeMethod = productionInfo.executeMethod;
        this.addForm.formingNum = workOrderInfo.formingNum;
        this.addForm.itemType = productionInfo.itemType;
        this.addForm.produceRoutingId = workOrderInfo.produceRoutingId;
        this.addForm.produceRoutingName = workOrderInfo.produceRoutingName;
        this.addForm.produceTaskConfigId = productionInfo.produceTaskConfigId;
        this.addForm.produceTaskId = productionInfo.produceTaskId;
        this.addForm.produceTaskName = productionInfo.produceTaskName;
        this.addForm.productCode = workOrderInfo.productCode;
        this.addForm.productModel = workOrderInfo.model;
        this.addForm.productName = workOrderInfo.productName;
        this.addForm.reportWorkType = productionInfo.reportWorkType;
        this.addForm.specification = workOrderInfo.specification;
        this.addForm.workOrderCode = workOrderInfo.code;
        this.addForm.workOrderId = workOrderInfo.id;
        this.addForm.itemTaskName = productionInfo.itemTaskName;
        this.addForm.ruleId = productionInfo.ruleId;
        this.addForm.brandNo = productionInfo.brandNo;

        console.log('this.productionInfo', this.productionInfo);
        console.log('this.addForm', this.addForm);
      },
      handleBeforeClose() {
        this.type = 'edit';
        this.addForm = JSON.parse(JSON.stringify(this.formDate));
        console.log('this.$refs.ruleFormRef', this.addForm);
        this.$refs.ruleFormRef?.clearValidate();
        this.$nextTick(() => {
          this.visible = false;
        });
      },
      // 提交
      submit(type) {
        console.log('this.addForm', this.addForm);

        // 验证表单
        this.$refs.ruleFormRef.validate(async (valid) => {
          if (!valid) {
            return;
          }

          // 提交
          this.butLoading = true;
          try {
            await saveRuleRecord(this.addForm);
            this.$message.success('报工成功！');

            this.butLoading = false;

            // 返回
            this.$emit('reload');

            this.handleBeforeClose();
          } catch (error) {
            this.butLoading = false;
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .modal-body {
    padding: 16px;
    min-height: 100px;
  }
  .modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .el-form-item .el-form-item {
    margin-bottom: -5px;
  }
</style>