hhz_restructure/src/views/inspection/all-task/components/TaskDetail.vue

<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="updateVisible">
    <n-drawer-content closable title="详情">
      <div id="detail_container" class="card_box">
        <div class="card_head">
          <span>任务基本信息</span>
        </div>
        <n-divider />
        <div class="message_box">
          <div v-for="(item, index) in basicData" :key="index" class="message_item">
            <span class="message_label">{{ item.name }}</span>
            <div class="message_value">
              <span v-for="($item, $index) in item.value" :key="$index">{{ $item === ',' ? ', ' : taskDetailList[$item] }}</span>
            </div>
          </div>
          <div class="message_item">
            <span class="message_label">进度状态：</span>
            <ul class="status_icons">
              <li v-for="(item,index) in iconList" :key="index" class="status_item">
                <img class="icon_img" :src="item.src" alt="">
                <span class="status_text" :class="item.class">{{ item.text }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 审核信息 -->
        <div v-if="inspectionCheckList.length > 0" class="approve_container">
          <div class="card_head">
            <span>审核记录</span>
            <n-button type="error" @click="openRecords">历史记录</n-button>
          </div>
          <n-divider />
          <div class="message_box">
            <div v-for="(item, index) in approveData" :key="index" class="message_item">
              <span class="message_label">{{ item.name }}</span>
              <div class="message_value">
                <span v-for="($item, $index) in item.value" :key="$index">{{ aprroveCurrent[$item] }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 打印以及退出 -->
      <div class="detail_btns">
        <n-button class="printer_btn" type="primary" @click="printPage">打印</n-button>
        <n-button type="default" @click="updateVisible">关闭</n-button>
      </div>
    </n-drawer-content>
  </n-drawer>

  <iframe id="printf" src="" width="0" height="0" frameborder="0" />
</template>
<script>
import { reactive, computed, toRefs, watch } from 'vue'
import { taskDetail } from '@/api/inspection/alltask.js'
import { TASK_STATUS } from '@/utils/dictionary.js'
import { filterData } from '@/utils/filter.js'
import { statusList, taskMessage, approveMessage, resultsList } from '../tools/data.js'
export default {
  name: 'TaskLive',
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      showRecords: false,
      taskStatusList: TASK_STATUS,
      basicData: taskMessage,
      approveData: approveMessage,
      taskDetailList: {},
      inspectionCheckList: [],
      aprroveCurrent: {},
      iconList: [],
      statusObj: statusList,
      resultList: resultsList

    })

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '89%',
        placement: 'right'
      }
    })

    watch(() => props.visible, (value) => {
      if (value) {
        if (props.data) {
          getTaskDetail(props.data.id)
        }
      }
    })

    /* 获取任务详情 */
    const getTaskDetail = async function(id) {
      const res = await taskDetail(id)
      if (res.code === 0) {
        data.taskDetailList = res.data
        data.statusObj.forEach(item => {
          if (item.status.includes(data.taskDetailList.status)) {
            data.iconList = item.iconList
          }
        })
        if (res.data.thInspectionCheckList.length) {
          data.inspectionCheckList = res.data.thInspectionCheckList
          data.aprroveCurrent = data.inspectionCheckList[0]
          data.aprroveCurrent.createUserName = res.data.createUserName
          data.aprroveCurrent.createTime = res.data.createTime
          console.log(filterData)
          data.aprroveCurrent.taskStatus = filterData(data.taskStatusList, res.data.status)
          // data.aprroveCurrent.result = filterData(data.resultList, data.aprroveCurrent.status)
        }
      }
    }

    /* 打印 */
    const printPage = function() {
      // // 缓存页面内容
      // const bodyHtml = window.document.body.innerHTML
      // 获取要打印的dom
      const printPage = document.getElementById('detail_container').innerHTML
      // // 替换页面内容
      // window.document.body.innerHTML = printPage
      // // 全局打印
      // window.print();
      // // 还原页面内容
      // window.document.body.innerHTML = bodyHtml
      // window.location.reload()
      var f = document.getElementById('printf')
      f.contentDocument.documentElement.innerHTML = window.document.documentElement.innerHTML
      f.contentDocument.body.innerHTML = printPage
      f.contentDocument.close()
      f.contentWindow.print()
    }

    const updateVisible = function() {
      emit('update:visible', false)
    }

    // 打开历史记录
    const openRecords = function() {
      data.showRecords = true
    }

    return {
      getDrawerOptions,
      ...toRefs(data),
      updateVisible,
      printPage,
      openRecords
    }
  }
}
</script>
<style scoped>
.card_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
  .card_head{
    width: 100%;
    display: flex;
    justify-content:space-between;
    align-items: flex-start;
    color: #333;
    font-size: 18px;
    font-weight: 600;
  }
  .message_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;

  }
  .message_item {
    width: 50%;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .status_icons {
  padding-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: -10px;
}

.status_item {
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.icon_img {
  width: 35px;
  height: 35px;
}

.status_text {
  font-size: 14px;
}
  .approve_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  /* 按钮 */
  .detail_btns {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .printer_btn {
    margin-right: 30px;
  }
</style>