QRAPI/Web/src/views/task/productionQualityLog/index.vue

<template>
  <div class="productionQualityLogPage" v-loading="state.loading">
    <!-- 主表 -->
    <tablePage 
      :apiName="state.apiName"
      :searchOptions="state.searchOptions"
      :searchFilter="state.searchFilter"
      @leftOperationHadel="leftOperationHadel"
      :leftOperation="state.leftOperation"
      :leftOperationColumnWidth="180"
      :authName="'productionQualityLog'"
      :searchFilterOptions="state.searchFilterOptions"
      :tableCellClassName="tableCellClassName"
    ></tablePage>

    <!-- 明细抽屉 -->
    <el-drawer
      class="productionQualityLog_infoDrawerPop"
      v-if="state.drawerShow"
      v-model="state.drawerShow"
      :title="`详情 (${state.infoCurrentRow.taskName} - uId:${state.infoCurrentRow.uId})`"
      direction="rtl"
      destroy-on-close
      :size="'80%'"
      @close="resetInfo"
    >
      <div style="height: 100%;display: flex">
        <tablePage
          v-if="state.drawerShow"
          :specialPageApi='`/api/customlog/getlogreponselist`'
          :tableColumns="state.infoTableColumns"
          :specialColumnName="state.infoTableColumnsName"
          :specialLocalColumnName="state.infoTableColumnsName+'_PQLogDetail'"
          :searchFilter="state.infoSearchFilter"
          :hideSearch="true"
        ></tablePage>
      </div>
    </el-drawer>
  </div>
</template>
  
<script setup>
  defineOptions({ name: 'productionQualityLog' })
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import { reactive, ref, onMounted,nextTick  } from 'vue'
  import tablePage from '@/components/tablePage/index.vue'
  import elTable from '@/components/elTable/index.vue'
  import elPager from '@/components/elPager/index.vue'
  import { getLogJsonList } from '@/api/system/customlog'
  import { downLoadJSONByString,getColoumsByServeName,getApiByServeName } from '@/utils/common/index'
  import EnumList from '@/utils/common/enumList'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  
  const state = reactive({
    apiName:'customlog',
    loading:false,
    searchFilter: {
      taskName: null,
      creationTime:null,
      module:'生产质量'
    },
    searchOptions:[
      {type:'input',prop:'taskName',label:'任务名称'},
      {type:'datetimerange',prop:'creationTime',label:'创建时间'},
    ],
    searchFilterOptions:{ module:{action:'=='} },
    leftOperation:[
      {label:'查看详情',name:'showInfo',link:true,type:'primary'},
      {label:'下载JSON',name:'downloadJSON',link:true,type:'warning'},
    ],
    // 查看详情相关数据
    drawerShow:false,
    infoTableData:null,
    infoTableColumns:[],
    // 查看详情内部colums的名称
    infoTableColumnsName:null,
    infoSearchFilter: {},
    columnWidth:null,
    infoType:null,
    infoAllData:null,
    infoCurrentRow:null,
    infoPager:{
      page: 1,
      pageSize: 20,
      total: null,
    },
  })

  function leftOperationHadel(btn,scope) {
    // 查看详情
    if(btn.name == 'showInfo'){
      state.infoCurrentRow = scope.row
      state.infoTableColumns = getColoumsByServeName(scope.row.taskName,'taskName',true)
      state.infoTableColumnsName = getApiByServeName(scope.row.taskName,'taskName')
      if(!state.infoTableColumnsName){
        ElMessage.error(`不支持的任务名: ${scope.row.taskName}`)
        return
      }
      state.infoSearchFilter = [
        {
          logic: "And",
          column: 'Uid',
          action: '==',
          value: scope.row.uId
        },
      ]
      nextTick(() => {
        state.drawerShow = true
      })
    }
    // 下载json
    if(btn.name == 'downloadJSON'){
      state.loading = true
      getLogJsonList(scope.row.uId)
        .then(res=>{
          downLoadJSONByString(res.message,`${route.meta.title}_uid=${scope.row.uId}.json`)
        })
        .finally(() => (state.loading = false))
    }
  }

  // InfoType=2的前端分页
  function initInfoType2Pagedata() {
    state.infoTableData = state.infoAllData.slice((state.infoPager.page-1) * state.infoPager.pageSize,state.infoPager.page * state.infoPager.pageSize)
  }

  function pageSizeChange(data) {
    state.infoPager.pageSize = data
    state.infoPager.page = 1
    nextTick(() => {
      initInfoType2Pagedata()
    })
  }

  function pageCurrentChange(data) {
    state.infoPager.page = data
    nextTick(() => {
      initInfoType2Pagedata()
    })
  }

  function resetInfo(){
    state.drawerShow=false
    state.infoTableData=null
    state.infoTableColumns=[]
    state.columnWidth=null
    state.infoType=null
    state.infoAllData=null
    state.infoPager={
      page: 1,
      pageSize: 20,
      total: null,
    }
  }

  // 单元格变色
  function tableCellClassName(data){
    if(data.row.type == '错误' && data.column.property == 'type'){return 'table-danger-row'}
    else{return 'normal-tableRow'}
  }
  
</script>
<style scope lang="scss">
.productionQualityLogPage{
  height: 100%;
  display: flex;
  width:100%;
  
  .el-drawer__header {
    margin-bottom:0 !important
  }
}

.productionQualityLog_infoDrawerPop {
  .search-container{
    position: fixed;
    right: 71px;
    top: 0px;
    box-shadow: none;
    border: none;
    height: 60px;
  }
}
</style>