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

<template>
  <div>
    <DialogCom
      :title="title + '详情'"
      :visible.sync="isShow"
      width="1200px"
      :destroy-on-close="true"
    >
      <el-table
        :data="tableData"
        row-key="itemId"
        height="441"
        style="max-height: 450px; overflow-y: auto"
        default-expand-all
      >
        <!-- align="left" -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              v-if="props.row.dataInfoList"
              :data="props.row.dataInfoList"
            >
              <el-table-column
                label="履职内容"
                align="left"
                width="250"
                prop="pointName"
              >
              </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"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.executeResult === '0'">
                    <i class="circle" style="background-color: #1890ff" />
                    <label style="color: #1890ff"> 正常</label> </span
                  ><span v-else>
                    <i class="circle" style="background-color: #f5222d" />
                    <label style="color: #f5222d"> 异常</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">
                <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-column
                label="问题描述"
                align="center"
                :show-overflow-tooltip="true"
                prop="resRemark"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="履职项"
          align="center"
          prop="itemName"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <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";
export default {
  data() {
    return {
      isShow: false,
      title: "",
      tableData: [],
    };
  },
  methods: {
    async refresh(id) {
      let detail = (await api.one(id)).data;
      if (detail && detail.length > 0) {
        this.tableData = detail;
      } else {
        this.tableData = [];
      }
    },
    async show(id, title) {
      this.title = title;
      await this.refresh(id);
      this.isShow = true;
    },
    onHide() {
      this.isShow = false;
    },
    reset() {
      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">
.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>