soc_web/src/views/question/list/dialog.vue

<template>
  <DialogCom :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
    <div class="question-dialog-body">
      <el-descriptions :column="2" class="contentArea">
      <el-descriptions-item label="隐患所属机构">{{
        data.orgName
      }}</el-descriptions-item>
      <el-descriptions-item label="来源任务">{{
        data.srcTaskName
      }}</el-descriptions-item>
      <el-descriptions-item label="检查项">{{
        data.checkItem
      }}</el-descriptions-item>
      <el-descriptions-item label="检查内容">
        {{ data.checkContent }}
      </el-descriptions-item>
      <el-descriptions-item label="隐患描述">
        {{ data.questionDesc }}</el-descriptions-item
      >
      <el-descriptions-item label="提出人">
        {{ data.submitorName }}</el-descriptions-item
      >
      <el-descriptions-item label="发现日期">
        {{ dayjs(data.submitTime).format("YYYY-MM-DD") }}</el-descriptions-item
      >
      <el-descriptions-item label="整改期限">
        {{
          dayjs(data.reformDeadline).format("YYYY-MM-DD")
        }}</el-descriptions-item
      >
      <el-descriptions-item label="隐患图片">
        <div class="imageList">
          <el-image
            style="width: 100px"
            v-for="url in data.images"
            :src="url"
            :preview-src-list="data.images"
          >
          </el-image></div
      ></el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" class="contentArea" v-if="data.confirm">
      <el-descriptions-item label="确认结果">{{
        data.confirm.executeStatus == 0 ? "确认" : "提出异议"
      }}</el-descriptions-item>
      <el-descriptions-item label="确认人">{{
        data.confirm.executorName
      }}</el-descriptions-item>
      <el-descriptions-item label="异议内容" :span="2" v-if="data.confirm.executeStatus==1">{{
        data.confirm.description
      }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" class="contentArea" v-if="data.confirmDissent">
      <el-descriptions-item label="审核结果">{{
        data.confirmDissent.executeStatus == 0 ? "同意" : "不同意"
      }}</el-descriptions-item>
      <el-descriptions-item label="审核人">{{
        data.confirmDissent.executorName
      }}</el-descriptions-item>
      <el-descriptions-item label="描述" :span="2" v-if="data.confirmDissent.executeStatus==1">{{
        data.confirmDissent.description
      }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" class="contentArea" v-if="data.reform">
      <el-descriptions-item label="整改时间">{{
        dayjs(data.reform.executeTime).format("YYYY-MM-DD")
      }}</el-descriptions-item>
      <el-descriptions-item label="整改状态">{{
        data.reform.executeStatus == 0 ? "已整改" : "未整改"
      }}</el-descriptions-item>
      <el-descriptions-item label="描述" :span="2">{{
        data.reform.description
      }}</el-descriptions-item>
      <el-descriptions-item label="整改图片" :span="2">
        <div class="imageList">
          <el-image
            style="width: 100px; height: 100px"
            v-for="url in data.reform.images"
            :src="url"
            :preview-src-list="data.reform.images"
          >
          </el-image></div
      ></el-descriptions-item>
    </el-descriptions>

    <el-form
      ref="confirmForm"
      :model="confirmData"
      label-width="100px"
      class="form"
      v-if="type == 'confirm'"
      :rules="confirmRule"
    >
      <el-form-item label="确认结果" prop="status">
        <el-radio-group v-model="confirmData.status">
          <el-radio :label="0">确认</el-radio>
          <el-radio :label="1">提出异议</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="异议内容"
        prop="description"
        v-if="confirmData.status == 1"
      >
        <el-input
          v-model="confirmData.description"
          maxlength="255"
          placeHolder="请输入异议内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form
      ref="confirmDissentForm"
      :model="confirmDissentData"
      label-width="100px"
      class="form"
      v-if="type == 'confirmDissent'"
      :rules="confirmDissentRule"
    >
      <el-form-item label="审核结果" prop="status">
        <el-radio-group v-model="confirmDissentData.status">
          <el-radio :label="0">同意</el-radio>
          <el-radio :label="1">不同意</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="原因"
        prop="description"
        v-if="confirmDissentData.status == 1"
      >
        <el-input
          v-model="confirmDissentData.description"
          placeHolder="请输入原因"
          maxlength="255"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form
      ref="reformForm"
      :model="reformData"
      label-width="100px"
      class="form"
      v-if="type == 'reform'"
      :rules="reformRule"
    >
      <el-form-item label="整改时间" prop="reformDate">
        <el-date-picker
          v-model="reformData.reformDate"
          type="date"
          placeholder="选择日期"
          :pickerOptions="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="整改描述" prop="description">
        <el-input
          v-model="reformData.description"
          maxlength="255"
          placeHolder="请输入整改描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="整改图片" prop="images">
        <imgUpload
          type="more"
          :value="reformData.images"
          @input="imageListChanged"
        ></imgUpload>
      </el-form-item>
    </el-form>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-if="type!='detail'">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
 </DialogCom>
</template>
<script>
import {
  getQuestion,
  confirm,
  confirmDissent,
  reform,
} from "@/api/question/list.js";
import dayjs from "dayjs";
import imgUpload from "@/components/ImageUpload/index.vue";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      row: null,
      type: null,
      data: {},
      confirmData: {
        id: null,
        status: 0,
        description: null,
      },
      confirmDissentData: {
        id: null,
        status: 0,
        description: null,
      },
      reformData: {
        id: null,
        reformDate: null,
        description: null,
        images: null,
      },
      confirmRule: {
        description: [
          { required: true, message: "请输入异议内容", trigger: "blur" },
        ],
      },

      confirmDissentRule: {
        description: [
          { required: true, message: "请输入原因", trigger: "blur" },
        ],
      },
      reformRule: {
        reformDate: [
          { required: true, message: "请选择整改日期", trigger: "blur" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  components: { imgUpload },
  methods: {
    dayjs,
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    show(row, type) {
      this.row = row;
      this.type = type;
      this.setTitle(type);
      getQuestion(row.id).then((r) => {
        this.data = r.data;
        this.data.confirmDissent = r.data.flows.find((d) => d.executeStep == 2);
        this.data.confirm = r.data.flows.find((d) => d.executeStep == 1);
        this.data.reform = r.data.flows.find((d) => d.executeStep == 11);
        if(this.data.reform && this.data.reform.images)     {
          this.data.reform.images=this.data.reform.images.split(",")
        }
        this.open = true;
      });
    },
    setTitle(type) {
      switch (type) {
        case "detail":
          this.title = "详情";
          break;
        case "confirm":
          this.title = "隐患确认";
          break;
        case "confirmDissent":
          this.title = "异议审批";
          break;
        case "reform":
          this.title = "隐患整改";
          break;
      }
    },
    // 表单重置
    reset() {
      this.confirmData = {
        id: null,
        status: 0,
        description: null,
      };
      this.confirmDissentData = {
        id: null,
        status: 0,
        description: null,
      };
      this.reformData = {
        id: null,
        reformDate: null,
        description: null,
        images: null,
      };
      this.resetForm("confirmForm");
      this.resetForm("confirmDissentForm");
      this.resetForm("reformForm");
    },
    imageListChanged(value) {
      this.reformData.images = value;
    },
    /** 提交按钮 */
    submitForm() {
      if (this.type == "confirm") {
        this.submitConfirm();
      } else if (this.type == "confirmDissent") {
        this.submitConfirmDissent();
      } else if (this.type === "reform") {
        this.submitReform();
      }
    },
    submitConfirm() {
      this.$refs["confirmForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let data = { ...this.confirmData, id: this.data.id };
        confirm(data).then((r) => {
          if (r.data) {
            this.$message.info("确认成功");
            this.$emit("success");
            this.open = false;
          }
        });
      });
    },
    submitConfirmDissent() {
      this.$refs["confirmDissentForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let data = { ...this.confirmDissentData, id: this.data.id };
        confirmDissent(data).then((r) => {
          if (r.data) {
            this.$message.info("异议审批成功");
            this.$emit("success");
            this.open = false;
          }
        });
      });
    },
    submitReform() {
      this.$refs["reformForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let data = { ...this.reformData, id: this.data.id };
        reform(data).then((r) => {
          if (r.data) {
            this.$message.info("整改成功");
            this.$emit("success");
            this.open = false;
          }
        });
      });
    },
    // handleConfirmStatusChange(value) {
    //   if (value == 1) {
    //     this.confirmRule["description"].required = true;
    //   } else {
    //     this.confirmRule["description"].required = false;
    //   }
    // },
    // handleConfirmDissentStatusChange(value) {
    //   if (value == 1) {
    //     this.confirmDissentRule["description"].required = true;
    //   } else {
    //     this.confirmRule["description"].required = false;
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
.form {
  padding-top: 20px;
}
.imageList div {
  margin-left: 5px;
  margin-right: 5px;
}
.question-dialog-body{
  max-height: 500px;
  overflow-y: auto;
  padding-right: 20px;
}

.question-dialog-body>div{
  border-bottom: 1px solid #606266;
  padding-bottom: 20px;

  ::v-deep .el-descriptions-item__label {
    width: 100px;
    text-align: right;
    display: inline-block;
  }
}

.question-dialog-body>div:not(:first-child){
  padding-top: 20px;
}
.question-dialog-body>div:last-child{
  border: none;
}
</style>