zhny_ui/ems-ui/src/views/task/report/ReportForm.vue

<template>
  <!-- 添加或修改巡检报告对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="任务代码" prop="taskCode">
        <el-input v-model="form.taskCode" placeholder="请输入任务代码" />
      </el-form-item>
      <el-form-item label="结果状态" prop="resultStatus">
        <el-radio-group v-model="form.resultStatus">
          <el-radio
              v-for="dict in dict.type.inspection_result"
              :key="dict.value"
              :label="parseInt(dict.value)"
          >{{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结果描述">
        <editor v-model="form.resultMsg" :min-height="192" />
      </el-form-item>
      <el-form-item label="完成时间" prop="finishTime">
        <el-date-picker clearable
                        v-model="form.finishTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm:00"
                        :style="{width: '100%'}"
                        placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addInspectionReport, getInspectionReport, updateInspectionReport } from '@/api/task/inspectionReport';
import { Base64 } from 'js-base64';

export default {
  name: 'ReportForm',
  dicts: ['inspection_result'],
  props: {
    taskInfo: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: '添加巡检报告',
    },
    reportId: {
      type: Number,
      default: null,
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
    okCallback: {
      type: Function,
      default: () => {},
    },
  },
  watch: {
    taskInfo(val) {
      this.form.taskCode = val?.taskCode;
    },
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        taskCode: this.taskInfo?.taskCode,

      },
      // 表单校验
      rules: {
        taskCode: [
          {
            required: true,
            message: '任务代码不能为空',
            trigger: 'blur',
          },
        ],
        resultStatus: [
          {
            required: true,
            message: '结果状态不能为空',
            trigger: 'change',
          },
        ],
      },
    };
  },
  created() {

  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        taskCode: null,
        resultStatus: null,
        resultMsg: null,
        finishTime: null,
      };
      this.resetForm('form');
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      const id = this.reportId;
      getInspectionReport(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = '修改巡检报告';
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {

        if (valid) {

          if (this.form.resultMsg) {
            this.form.resultMsg = Base64.encode(this.form.resultMsg);
          }
          if (this.form.id != null) {
            updateInspectionReport(this.form).then(response => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.okCallback();
            });
          } else {
            addInspectionReport(this.form).then(response => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.okCallback();
            });
          }
        }
      });
    },
    show() {
      this.open = true;
      if (!this.isAdd) {
        this.handleUpdate();
      }
    },
  },
};
</script>