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

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

    <!-- 明细抽屉 -->
    <el-drawer
      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%">
        <!-- 前端分页 -->
        <elTable
          style="height:calc(100% - 50px)"
          :tableData="state.infoTableData"
          :tableColumns="state.infoTableColumns"
          :columnWidth="state.columnWidth"
        ></elTable>
        <elPager
          v-if="state.infoType == 2"
          style="margin-top: 15px;float:right"
          :pager="state.infoPager"
          @pageSizeChange="pageSizeChange"
          @pageCurrentChange="pageCurrentChange"
          :isHideOnlyOne="true"
        ></elPager>
      </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 } 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:'创建时间'},
    ],
    leftOperation:[
      {label:'查看详情',name:'showInfo',link:true,type:'primary'},
      {label:'下载JSON',name:'downloadJSON',link:true,type:'warning'},
    ],
    // 查看详情相关数据
    drawerShow:false,
    infoTableData:null,
    infoTableColumns:[],
    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.infoType = 1
      let _arr1 = [
        '整车月度生产计划1','整车月度生产计划2','M+6月物料需求计划','日物料需求计划',
        '计划协议','采购订单','过焊装未过总装','过涂装未过总装','排序供货','看板配送单',
        '退货单','奇瑞RDC共享库存','日MRP状态监控','日MRP预警推移'
      ]
      // 应答格式：获取list字段 state.infoType = 2
      let _arr2 = [
        '来料检验数据','排产数据','供应商基础信息','人员资质信息','BOM主数据',
        '过程控制项质量数据','生产过程数据','产品一次合格率','工位一次合格率',
        '缺陷业务数据','物料主数据','附件类数据','工艺装备','工艺','供应商共享库存',
        'M+6月物料需求计划风险确认','日物料需求计划风险确认','采购订单风险确认'
      ]
      state.loading = true
      getLogJsonList(scope.row.uId)
        .then(res=>{
          if(_arr1.indexOf(scope.row.taskName) >= 0){
            state.columnWidth = null
            state.infoType = 1
            state.infoTableData = [JSON.parse(res.message)]
            state.infoTableColumns = [
              {prop:'date',title:'date'},
              {prop:'pageSize',title:'pageSize'},
              {prop:'pageNum',title:'pageNum'},
              {prop:'isForce',title:'isForce'},
            ]
          }
          if(_arr2.indexOf(scope.row.taskName) >= 0){
            state.columnWidth = 120
            state.infoType = 2
            state.infoAllData = JSON.parse(res.message).list
            state.infoPager.total = state.infoAllData.length
            state.infoTableColumns = getColoumsByServeName(scope.row.taskName,'taskName',true)
            initInfoType2Pagedata()
          }
          nextTick(() => {
            state.drawerShow = true
          })
        })
        .finally(() => (state.loading = false))
    }
    // 下载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,
    }
  }
  
</script>
<style scope lang="scss">
.taskSubPage{
  height: 100%;
  display: flex;
  width:100%;
  
  .el-drawer__header {
    margin-bottom:0 !important
  }
}
</style>