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

<template>
  <div class="app-container">
    <el-descriptions title="检查任务详情" border :labelStyle="{'width':'180px'}">
      <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="登记人"
        >{{ taskInfo.submitBy }}
      </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.beCheckedOrgName
      }}</el-descriptions-item>
      <el-descriptions-item label="检查主体">{{
        taskInfo.checkOrgName
      }}</el-descriptions-item>      
      <el-descriptions-item label="检查人员"
        >{{
          taskInfo.checkRoles
            ? taskInfo.checkRoles.map((r) => r.name).join(",")
            : ""
        }}
      </el-descriptions-item>
      <el-descriptions-item label="检查时间"
        >{{
          taskInfo.submitTime
            ? dayjs(taskInfo.submitTime).format("YYYY年MM月DD")
            : ""
        }}
      </el-descriptions-item>
       
      <el-descriptions-item label="隐患问题数"
        >{{ taskInfo.exceptionCount }}
      </el-descriptions-item>
      <el-descriptions-item label="检查组成员" :span="2"
        >{{ taskInfo.checkTeam }}
      </el-descriptions-item>
     
      
    </el-descriptions>

    <div class="itemDetail">
      <div>
        <el-table
          size="small"
          :data="taskInfo.checkList"
          row-key="itemId"
          height="500"
          border
          style=" overflow-y: auto"
          default-expand-all
          :show-header="false"
          :row-style="{'backgroundColor':'rgb(215, 215, 215)'}"
        >
          <el-table-column type="expand"  width="60">
            <template slot-scope="scope">
              <el-table :data="scope.row.pointList" class="point-table" size="small" :header-cell-style="{'backgroundColor':'rgb(255, 255, 255) !important'} ">
                <el-table-column type="index" label="序号" width="60"  align="center"/>
                <el-table-column
                  align="center"
                  prop="pointName"
                  label="检查内容"
                  min-width="600"
                >
                <template slot-scope="r">
                  <div class="text_nbsp">
                    {{r.row.pointName}}
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="areaName"
                  label="检查区域"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column align="center" prop="status" label="检查结果" min-width="150">
                  <template slot-scope="r">
                    {{
                      r.row.status == null
                        ? "-"
                        : r.row.status == 0
                        ? "正常"
                        : "异常"
                    }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="问题描述"  min-width="200">
                  <template slot-scope="r">
                    {{ r.row.remark ? r.row.remark : "-" }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="imgData" label="异常图片"  min-width="200">
                  <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"
                        :key="img"
                        :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>
            </template>
          </el-table-column>
          <el-table-column
            label="检查项"
            prop="itemName"
            :show-overflow-tooltip="true"
            ><template slot-scope="scope">
              （{{ arabicToChinese(scope.$index + 1) }}）{{
                scope.row.itemName
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </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 { arabicToChinese } from "@/utils/util.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,
    arabicToChinese,
    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;
  }
}

.point-table{
  margin-top:-10px !important;
  margin-bottom:-10px !important;
}
</style>