soc_web/src/views/resumption/taskManager/dialog.detail.vue

<template>
  <div>
    <DialogCom
      title="履职任务详情"
      :visible.sync="isShow"
      width="1200px"
      @close="onClose"
    >
      <el-descriptions
        class="margin-top"
        size="medium"
        border
        :column="2"
        v-if="detail"
        style="width: 100%;"
        :label-style="labelStyle"
        :contentStyle="content_style"
      >
        <el-descriptions-item label="任务名称" labelClassName="gx_info_label">{{
          detail.taskName
        }}</el-descriptions-item>
        <el-descriptions-item label="任务进度" labelClassName="gx_info_label">{{
          getLabel(statusOptions, detail.status)
        }}</el-descriptions-item>
        <el-descriptions-item label="任务时间" labelClassName="gx_info_label"
          >{{ dayjs(detail.planStartTime).format("YYYY-MM-DD HH:mm") }}-{{
            dayjs(detail.planEndTime).format("YYYY-MM-DD HH:mm")
          }}</el-descriptions-item
        >
        <el-descriptions-item label="履职机构" labelClassName="gx_info_label"
          >{{ detail.orgName }}
        </el-descriptions-item>
        <el-descriptions-item label="履职人员" labelClassName="gx_info_label">{{
          detail.roleNames.join("、")
        }}</el-descriptions-item>
        <el-descriptions-item label="登记人" labelClassName="gx_info_label">{{
          detail.submitorName
        }}</el-descriptions-item>
        <el-descriptions-item
          label="隐患问题数"
          labelClassName="gx_info_label"
          >{{ detail.exceptionCount }}</el-descriptions-item
        >
        <el-descriptions-item label="登记时间" labelClassName="gx_info_label">{{
          dayjs(detail.submitTime).format("YYYY-MM-DD HH:mm")
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="extend_mod">
        <el-table
          size="small"
          :data="tableData"
          row-key="itemId"
          height="441"
          border
          style="max-height: 450px; overflow-y: auto"
          default-expand-all
          :show-header="false"
        >
          <!-- align="left" -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                size="small"
                v-if="props.row.dataInfoList"
                :data="props.row.dataInfoList"
              >
                <el-table-column
                  label="履职内容"
                  align="left"
                  width="250"
                  prop="pointName"
                >
                  <template slot-scope="scope">
                    <pre>{{ scope.row.pointName }}</pre>
                  </template>
                </el-table-column>
                <el-table-column
                  label="履职区域"
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="areaName"
                >
                </el-table-column>
                <el-table-column
                  label="履职点位"
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="checkName"
                >
                </el-table-column>
                <el-table-column
                  label="检查结果"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.executeResult === '0'">
                      <!-- <i class="circle" style="background-color: #1890ff" /> -->
                      <label> 正常</label> </span
                    ><span v-else>
                      <!-- <i class="circle" style="background-color: #f5222d" /> -->
                      <label> 异常</label>
                    </span>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                label="履职时间"
                align="center"
                :show-overflow-tooltip="true"
                prop="executeTime"
              >
              </el-table-column> -->
                <el-table-column
                  label="问题描述"
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="resRemark"
                >
                </el-table-column>
                <el-table-column label="异常图片" align="center">
                  <template slot-scope="scope">
                    <div
                      class="block"
                      v-for="img in scope.row.appResumptionDataImgList"
                    >
                      <el-image
                        style="width: 50px; height: 50px; margin-right: 5px"
                        :src="img.imgPath"
                        fit="fit"
                        :preview-src-list="
                          imgPreviewSrcList(scope.row.appResumptionDataImgList)
                        "
                      >
                      </el-image>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            label="履职项"
            prop="itemName"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关闭</el-button>
      </div>
    </DialogCom>
  </div>
</template>
<script>
import * as api from "@/api/resumption/taskManger.js";
import dayjs from "dayjs";
import { getLabel } from "@/views/commonOption.js";
export default {
  data() {
    return {
      isShow: false,
      labelStyle: {
        color: "#000",
        "text-align": "center",
        height: "40px",
        "min-width": "150px",
        "word-break": "keep-all",
      },
      content_style: {
        "text-align": "left",
        "min-width": "300px",
        "word-break": "break-all",
      },
      title: "",
      tableData: [],
      detail: null,
    };
  },
  props: ["statusOptions"],
  methods: {
    dayjs,
    getLabel,
    async refresh(id) {
      let detail = (await api.one(id)).data;

      if (detail && detail.items && detail.items.length > 0) {
        this.tableData = detail.items;
      } else {
        this.tableData = [];
      }
      this.detail = detail;
    },
    async show(id, title) {
      this.title = title;
      await this.refresh(id);
      this.isShow = true;
    },
    onHide() {
      this.isShow = false;
    },
    onClose() {
      this.detail = null;
      this.tableData = [];
    },
    imgPreviewSrcList(imgList) {
      let srcList = [];
      imgList.forEach((element) => {
        srcList.push(element.imgPath);
      });
      return srcList;
    },
    valueColor(v) {
      let color = "";
      switch (v) {
        case "0":
          color = "1890FF";
          break;
        case "1":
          color = "F5222D";
          break;
      }

      return "color:" + color;
    },
    valueBgColor(v) {
      let color = "";
      switch (v) {
        case "0":
          color = "1890FF";
          break;
        case "1":
          color = "F5222D";
          break;
      }

      return "background-color:" + color;
    },
  },
};
</script>

<style lang="scss">
.dialog-footer {
  margin-top: 20px;
}
.block {
  /* padding: 10px 10px; */
  text-align: center;
  /* border-right: 1px solid #eff2f6; */
  display: inline-block;
  /* width: 20%;
   vertical-align: top; */
}

.circle {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  border: none;
  margin-bottom: 3px;
}
</style>