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

<template>
  <DialogCom
    :title="title"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @close="cancel"
  >
    <div class="page-body">
      <el-descriptions
        :column="2"
        class="margin-top"
        size="medium"
        border
        :label-style="labelStyle"
        :contentStyle="content_style"
      >
        <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="标准依据">
          <pre>{{ data.checkContent }}</pre>
        </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 HH:mm")
          }}</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="margin-top"
        size="medium"
        border
        :label-style="labelStyle"
        :contentStyle="content_style"
        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="margin-top"
        size="medium"
        border
        :label-style="labelStyle"
        :contentStyle="content_style"
        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="margin-top"
        size="medium"
        border
        :label-style="labelStyle"
        :contentStyle="content_style"
        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>
    </div>
    <div slot="footer" class="dialog-footer" v-if="type != 'detail'">
      <el-button type="primary" @click="submitForm"
        >确定</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
    <div slot="footer" class="dialog-footer" style="margin-top:40px" v-else>
      <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 {
      labelStyle: {
        color: "#000",
        "text-align": "center",
        height: "40px",
        "width": "150px",
        "word-break": "keep-all",
      },
      content_style: {
        "text-align": "left",
        "width": "300px",
        "word-break": "break-all",
      },
      // 弹出层标题
      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>
.margin-top{
    margin-bottom: -21px;
  }
.form {
  padding-top: 20px;
}
.imageList div {
  margin-left: 5px;
  margin-right: 5px;

  ::v-deep .el-image__error {
    display: none !important;
  }
}
.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>