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

<template>
  <ele-modal :visible.sync="visible" title="处置" width="45vw" append-to-body>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="create-form"
    >
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }">
          <el-form-item label="类型:" prop="type">
            <DictSelection
              dictName="异常类型"
              v-model="form.type"
              disabled
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 18, md: 24 } : { span: 16 }">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 18, md: 24 } : { span: 16 }">
          <el-form-item label="异常描述:">
            <el-input
              v-model="form.describes"
              type="textarea"
              :rows="2"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="创建人:" prop="createUserName">
            <el-input v-model="form.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="创建时间:" prop="createTime">
            <el-input v-model="form.createTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item prop="accessory" label="附件">
            <fileUpload
              v-model="form.accessory"
              module="main"
              :limit="5"
              disabled
              :showLib="false"
            />
          </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 v-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 v-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 v-value="item.exceptionDispose" disabled />
          </el-form-item> </el-col
      ></el-row>
      <el-row :gutter="15">
      <headerTitle title="异常处置" style="margin-top: 15px"></headerTitle>

        <footBtn />
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading"
      
      >
        确定
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import fileUpload from '@/components/upload/fileUpload';
import footBtn from './footBtn';
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, footBtn},
  data() {
    return {
      visible: false,
      loading: false,

      form: { ...defaultForm() },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择', trigger: 'change' }]
      },

    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {},
  methods: {
    open( row) {
      this.visible = true;
        console.log(row,'row')
      this.form = JSON.parse(JSON.stringify(row));
      this.form.relationJson = this.form.relationJson[0];
      this.form.type = this.form.type + '';
    },

   
    cancel() {
      this.form = { ...defaultForm() };
      this.visible = false;
    },
   
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (!this.form.relationJson.code) {
          this.$message.error('请选择' + this.getTitle());
          return;
        }

        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>