soc_web/src/views/safetycheck/task/components/detail.vue

<template>
  <div class="app-container">
    <el-descriptions title="检查任务" border>
      <el-descriptions-item label="任务名称">{{
        taskInfo.taskName
      }}</el-descriptions-item>
      <el-descriptions-item label="任务进度"
        >{{ getLabel(dict.type.safety_check_status, taskInfo.status) }}
      </el-descriptions-item>
      <el-descriptions-item label="任务时间"
        >{{ dayjs(taskInfo.planStartTime).format("YYYY-MM-DD") }}
      </el-descriptions-item>
      <el-descriptions-item label="截止日期"
        >{{ dayjs(taskInfo.planEndTime).format("YYYY-MM-DD") }}
      </el-descriptions-item>

      <el-descriptions-item label="检查主体">{{
        taskInfo.checkOrgName
      }}</el-descriptions-item>
      <el-descriptions-item label="受检机构">{{
        taskInfo.beCheckedOrgName
      }}</el-descriptions-item>
      <el-descriptions-item label="检查人员"
        >{{
          taskInfo.checkRoles
            ? taskInfo.checkRoles.map((r) => r.name).join(",")
            : ""
        }}
      </el-descriptions-item>
      <el-descriptions-item label="检查组成员"
        >{{ taskInfo.checkTeam }}
      </el-descriptions-item>
      <el-descriptions-item label="登记人"
        >{{ taskInfo.submitBy }}
      </el-descriptions-item>
      <el-descriptions-item label="隐患问题数" 
        >{{ taskInfo.exceptionCount }}
      </el-descriptions-item>
      <el-descriptions-item label="检查时间" 
        >{{
          taskInfo.submitTime
            ? dayjs(taskInfo.submitTime).format("YYYY-MM-DD")
            : ""
        }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="itemDetail">
      <el-collapse v-model="itemIds">
        <el-collapse-item
          v-for="item in taskInfo.checkList"
          :title="item.itemName"
          :value="item.itemId"
          :name="item.itemId"
        >
          <el-table :data="item.pointList" size="small">
            <el-table-column
              header-align="center"
              prop="pointName"
              label="检查内容"
            >
            </el-table-column>
            <el-table-column align="center" prop="areaName" label="检查区域">
            </el-table-column>
            <el-table-column align="center" prop="status" label="检查结果">
              <template slot-scope="r">
                {{
                  r.row.status == null
                    ? "-"
                    : r.row.status == 0
                    ? "正常"
                    : "异常"
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" label="问题描述">
              <template slot-scope="r">
                {{ r.row.remark ? r.row.remark : "-" }}
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="imgData"
              label="异常图片"
            >
              <template slot-scope="r">
                <div v-if="r.row.imgData && r.row.imgData.length > 0">
                  <el-image
                    style="width: 30px; height: 30px; margin: 0 10px"
                    v-for="img in r.row.imgData"
                    :src="img.imgPath"
                    :preview-src-list="
                      r.row.imgData ? r.row.imgData.map((r) => r.imgPath) : []
                    "
                  ></el-image>
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="dialog-footer">
      <el-button @click="onClose">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import * as api from "@/api/safetycheck/register.js";
import dayjs from "dayjs";

import { getLabel } from "@/views/commonOption.js";
import { checkPermi } from "@/utils/permission.js";
export default {
  name: "safetyCheckRegister",
  data() {
    return {
      taskInfo: {},
      itemIds:[]
    };
  },
  dicts: ["safety_check_status"],
  components: {},
  computed: {},
  mounted() {
    let id = this.$route.params.taskId;
    let mode = this.$route.query.mode;
    let request = api.appinfo;

    request(id).then((r) => {
      this.taskInfo = r.data;
      this.itemIds=r.data.checkList.map(c=>c.itemId);
    });
  },
  methods: {
    dayjs,
    getLabel,

    onClose() {
      this.$tab.closePageAndPushPrev();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row-button {
  margin-top: 20px;
}

.itemDetail {
  max-height: calc(100% - 300px);
  overflow-y: auto;
  margin-top: 20px;
}

.dialog-footer {
  width: 100%;
  text-align: right;
  border-top: #b8bdc0 1px solid;
  padding-top: 10px;
  padding-right: 30px;
  position: absolute;
  bottom: 30px;
  right: 0px;
}

.el-descriptions {
  ::v-deep .el-descriptions__body {
    background-color: transparent !important;
  }
}
</style>