image.png
    现在要加个出库按钮，打开出库页模态框

    1. <template>
    2.   <div class="query-view-detail">
    3.     <DetailHeader
    4.       @saveModalHandleOpen="saveModalHandleOpen"
    5.       @powerModalHandleOpen="powerModalHandleOpen"
    6.       @deleteModalHandleOpen="deleteModalHandleOpen"
    7.       @handleSelectWarnTypes="handleSelectWarnTypes"
    8.       @exportExcel="exportExcel"
    9.     />
    10.     <main>
    11.       <SearchBar
    12.         ref="searchBarRef"
    13.         @handleSearch="handleSearch"
    14.         @updateFilter="updateFilter"
    15.         :filter="filter"
    16.         :frameFilters="frameFilters"
    17.         :currentTab="currentTab"
    18.       />
    19.       <!-- <ResidualQuantityWarn @handleClickWatchQuantityWarn="handleClickWatchQuantityWarn" /> -->
    20.       <TableList
    21.         ref="tableListRef"
    22.         :loading="refreshTable.loading"
    23.         @changeTab="changeTab"
    24.         @changePagination="changePagination"
    25.         :currentTab="currentTab"
    26.         :tableListData="tableListData"
    27.         @openStockInModal="openStockInModal"
    28.         @openStockOutModal="openStockOutModal"  
    29.       />
    30.     </main>
    31.     <!-- Modals -->
    32.     <SaveModal
    33.       ref="saveModalRef"
    34.       :filter="filter"
    35.       @saveModalMakeViewHandleOk="saveModalMakeViewHandleOk"
    36.       @saveModalUpdateViewHandleOk="saveModalUpdateViewHandleOk"
    37.     />
    38.     <PowerModal ref="powerModalRef" @powerModalHandleOk="powerModalHandleOk" />
    39.     <DeleteModal ref="deleteModalRef" @deleteModalHandleOk="deleteModalHandleOk" />
    40.     <StockInModal v-model:visible="stockInModalVisible" @refreshCurrentTabTable="refreshCurrentTabTable" />
    41.     <!-- 出库组件，通过v-model控制显隐--> 
    42.     <StockOutModal v-model:visible="stockOutModalVisible" @refreshCurrentTabTable="refreshCurrentTabTable" />  
    43.   </div>
    44. </template>
    46. <script lang="ts">
    47.   export type FrameFilter = {
    48.     fieldId: string | null
    49.     fieldKey?: string
    50.     fieldName: string
    51.     fieldType: FilterOriginType
    52.     filterType: TableColsTypeEnum
    53.     preDefinedValues: string[]
    54.   }
    55. </script>
    57. <script setup lang="ts">
    58.   //components
    59.   import TableList, { MaterialData } from './components/TableList.vue'
    60.   import DetailHeader from './components/DetailHeader.vue'
    61.   import SaveModal from './components/SaveModal.vue'
    62.   import PowerModal from './components/PowerModal.vue'
    63.   import DeleteModal from './components/DeleteModal.vue'
    64.   import SearchBar from './components/SearchBar.vue'
    65.   import { Message } from '@arco-design/web-vue'
    66.   // import ResidualQuantityWarn from './components/ResidualQuantityWarn.vue'
    67.   import StockInModal from './components/stockInModal/index.vue'
    68.   import StockOutModal from './components/stockOutModal/index.vue'
    70.   //utils
    71.   import { ref, reactive, computed, inject, toRaw, shallowRef, provide } from 'vue'
    72.   import {
    73.     initSearchInfo,
    74.     TabsEnum,
    75.     buildColumns,
    76.     TreeNodeTypeEnum,
    77.     deBuildColumns,
    78.     SaveViewModeEnmu
    79.   } from '@/views/register/registration-and-batch-info-query/utils'
    80.   import { useFetch } from '@/hooks'
    82.   //api
    83.   import {
    84.     searchBatchInfoList,
    85.     searchProductInfoList,
    86.     updateSearchView,
    87.     saveSearchView,
    88.     deleteSearchView,
    89.     getProductFrameFilters,
    90.     getExportColumnsData,
    91.     getExportProd
    92.   } from '@/api/material'
    94.   //types
    95.   import { Filter, FilterOriginType, SearchInfo, TableColsTypeEnum } from '../types'
    96.   import { exportExcelModeEnum } from '@/views/register/registration-and-batch-info-query/types'
    97.   import { SearchTypeEnmu } from '@/common/enum'
    99.   //plugin
    100.   import { useI18n } from 'vue-i18n'
    101.   import _, { cloneDeep } from 'lodash'
    103.   const { t } = useI18n()
    104.   const RootData = inject('rootData')
    105.   const { treeNodeData } = RootData as any
    107.   const Emiter = defineEmits(['saveView', 'updateView', 'deleteView', 'powerModalHandleOk'])
    109.   const globalSearchInfo = ref(initSearchInfo())
    110.   const setGlobalSearchInfo = (searchInfo) => (globalSearchInfo.value = searchInfo)
    111.   const tableListRef = ref()
    113.   const stockInModalVisible = ref<boolean>(false)
    114.   const stockOutModalVisible = ref<boolean>(false)
    115.   const materialDataList = shallowRef<MaterialData[] | undefined>(void 0)
    116.   provide('materialDataList', materialDataList)
    117.   const openStockInModal = (data: MaterialData[]) => {
    118.     stockInModalVisible.value = true
    119.     materialDataList.value = data
    120.   }
    121.   const openStockOutModal = (data: MaterialData[]) => {
    122.     stockOutModalVisible.value = true
    123.     materialDataList.value = data
    124.   }
    126.   const searchBarRef = ref()
    127.   /**
    128.    * DetailHeader 相关业务
    129.    */
    130.   const saveModalRef = ref()
    131.   const powerModalRef = ref()
    132.   const deleteModalRef = ref()
    134.   const saveModalHandleOpen = () => {
    135.     saveModalRef.value.saveModalHandleOpen(SaveViewModeEnmu.CREATE_VIEW, {})
    136.   }
    137.   const powerModalHandleOpen = () => {
    138.     powerModalRef.value.powerModalHandleOpen()
    139.   }
    140.   const deleteModalHandleOpen = () => {
    141.     deleteModalRef.value.deleteModalHandleOpen()
    142.   }
    143.   const handleSelectWarnTypes = async (selectWarnTypes) => {
    144.     const newFilter = Object.assign(globalSearchInfo.value.filter, { alarmTypes: selectWarnTypes })
    145.     const searchInfo = globalSearchInfo.value
    146.     await refreshAllTabTable({ searchInfo })
    147.   }
    148.   /**
    149.    * 根据不同的tab，映射不同的接口
    150.    */
    151.   const refreshTabTableMaps = {
    152.     [TabsEnum.REGISTER]: async ({ searchInfo, allColumns }: { searchInfo: SearchInfo; allColumns?: any[] }) => {
    153.       let ProductTableInfo = await searchProductInfoList(searchInfo)
    154.       //拼接展示列的信息
    155.       // if (!isEmpty(allColumns)) {
    156.       //   ProductTableInfo.allColumns = buildColumns(TabsEnum.REGISTER, allColumns as any[])
    157.       //   ProductTableInfo.showColumns = buildColumns(TabsEnum.REGISTER, searchInfo.productShowCols)
    158.       // } else {
    159.       //   ProductTableInfo.allColumns = buildColumns(TabsEnum.REGISTER, searchInfo.productShowCols)
    160.       //   ProductTableInfo.showColumns = buildColumns(TabsEnum.REGISTER, searchInfo.productShowCols)
    161.       // }
    162.       ProductTableInfo.allColumns = buildColumns(TabsEnum.REGISTER, searchInfo.productShowCols)
    163.       ProductTableInfo.data = parseCustomParams(ProductTableInfo.data)
    164.       tableListData[TabsEnum.REGISTER] = ProductTableInfo
    165.       setGlobalSearchInfo(cloneDeep(toRaw(searchInfo)))
    166.       filter.value = cloneDeep(toRaw(searchInfo.filter))
    167.     },
    168.     [TabsEnum.BATCH]: async ({ searchInfo, allColumns }: { searchInfo: SearchInfo; allColumns?: any[] }) => {
    169.       let BatchTableInfo = await searchBatchInfoList(searchInfo)
    170.       //拼接展示列的信息
    171.       BatchTableInfo.allColumns = buildColumns(TabsEnum.BATCH, searchInfo.batchShowCols)
    172.       BatchTableInfo.data = parseCustomParams(BatchTableInfo.data)
    173.       tableListData[TabsEnum.BATCH] = BatchTableInfo
    174.       setGlobalSearchInfo(cloneDeep(toRaw(searchInfo)))
    175.       filter.value = cloneDeep(toRaw(searchInfo.filter))
    176.     }
    177.   }
    179.   //将一些自定义字段解析到每个 dataItem 的外部
    180.   function parseCustomParams(data) {
    181.     return data.map((row, index) => {
    182.       let batchParams = row?.batchParams || []
    183.       let productParams = row?.productParams || []
    184.       const params = [...batchParams, ...productParams]
    185.       params.map((v) => {
    186.         row[v.fieldId] = v
    187.       })
    188.       //标记序号
    189.       row.index = index + 1
    190.       return row
    191.     })
    192.   }
    194.   /**
    195.    * 刷新所有tab数据
    196.    */
    197.   const refreshAllTabTable = async ({ searchInfo, allColumns }: { searchInfo: SearchInfo; allColumns?: any[] }) => {
    198.     refreshTable.value.loading.value = true
    199.     tableListRef.value.clearCacheData() //清除之前表单的缓存数据
    200.     await Promise.all(
    201.       Object.values(refreshTabTableMaps).map((refreshFunc) => refreshFunc({ searchInfo, allColumns }))
    202.     ).finally(() => {
    203.       refreshTable.value.loading.value = false
    204.     })
    205.     //回显对应的 keyword
    206.     searchBarRef.value.setKeywrod(searchInfo.keyword)
    207.   }
    209.   /**
    210.    * 刷新当前tab数据
    211.    */
    212.   const refreshCurrentTabTable = () => {
    213.     refreshTabTableMaps[currentTab.value]({ searchInfo: globalSearchInfo.value })
    214.     tableListRef.value.initialSelectedRowKeys()
    215.   }
    217.   /**
    218.    * tab 相关
    219.    */
    220.   const currentTab = reactive<{ value: TabsEnum }>({ value: TabsEnum.REGISTER })
    222.   // computed返回的是ref，之后访问时需要通过value
    223.   const refreshTable = computed(() => {
    224.     return useFetch(refreshTabTableMaps[currentTab.value], {
    225.       isLazy: true
    226.     })
    227.   })
    229.   // 切换tab事件
    230.   const changeTab = async ({ type, paginationInfo }) => {
    231.     currentTab.value = Number(type)
    232.     const { pageNum, pageSize } = paginationInfo
    233.     await refreshTable.value.fetchResource({ searchInfo: Object.assign(globalSearchInfo.value, { pageNum, pageSize }) })
    234.   }
    236.   //表单总数
    237.   const tableListData = reactive({
    238.     [TabsEnum.REGISTER]: {},
    239.     [TabsEnum.BATCH]: {}
    240.   })
    242.   const filter = ref<Filter>({})
    243.   /**
    244.    * 搜索按钮事件
    245.    *  TODO
    246.    * 根据筛选条件进行搜索
    247.    */
    248.   const handleSearch = ({ keyword = '' }: { keyword: string }) => {
    249.     // console.log('搜索', keyWord, tableListRef.value.selectedKeys)
    250.     //根据不同的节点类型，拿到正确的frameId
    251.     let frameId
    252.     switch (treeNodeData.value.nodeType) {
    253.       case TreeNodeTypeEnum.PRODUCT_FRAM: {
    254.         frameId = treeNodeData.value.id
    255.       }
    256.       case TreeNodeTypeEnum.VIEW: {
    257.         frameId = treeNodeData.value.parentId
    258.       }
    259.       default: {
    260.         frameId = treeNodeData.value.id
    261.       }
    262.     }
    263.     //初始化分页数据
    264.     tableListRef.value.initialPresetPagination()
    265.     const pageNum = tableListRef.value.paginationInfo.pageNum
    266.     //刷新列表
    267.     const targetParams = { ...globalSearchInfo.value, keyword, pageNum }
    268.     refreshTable.value.fetchResource({ searchInfo: targetParams })
    269.     //清空选择列
    270.     tableListRef.value.initialSelectedRowKeys()
    271.   }
    273.   /**
    274.    * 筛选条件更新到globalSearchInfo
    275.    */
    276.   const updateFilter = (filter: Filter) => {
    277.     Object.assign(globalSearchInfo.value.filter, filter)
    278.   }
    280.   /**
    281.    * 导出接口
    282.    */
    283.   const exportInfo = {
    284.     [TabsEnum.REGISTER]: {
    285.       method: getExportProd,
    286.       prefixName: t('register.registrationAndBatchInfoQuery.queryViewDetail.product')
    287.     },
    288.     [TabsEnum.BATCH]: {
    289.       method: getExportColumnsData,
    290.       prefixName: t('register.registrationAndBatchInfoQuery.queryViewDetail.batch')
    291.     }
    292.   }
    294.   /**
    295.    * 导出
    296.    */
    297.   const exportExcel = async (mode, callback: Function) => {
    298.     let condition = {}
    299.     let seletCols: {
    300.       productShowCols: any[]
    301.       batchShowCols: any[]
    302.     } = {
    303.       productShowCols: [],
    304.       batchShowCols: []
    305.     }
    306.     switch (mode) {
    307.       case exportExcelModeEnum.CURRENT_SHOW: {
    308.         const { productShowCols, batchShowCols } = tableListRef.value.showCols
    309.         seletCols.productShowCols = deBuildColumns(productShowCols)
    310.         seletCols.batchShowCols = deBuildColumns(batchShowCols)
    311.         condition = Object.assign({}, globalSearchInfo.value, seletCols)
    312.         break
    313.       }
    314.       default: {
    315.         condition = Object.assign({}, globalSearchInfo.value, tableListRef.value.currentAllCols)
    316.         break
    317.       }
    318.     }
    319.     const { data } = await exportInfo[currentTab.value].method(condition)
    320.     callback(data, { fileName: `${exportInfo[currentTab.value].prefixName}_${treeNodeData.value.name}` })
    321.   }
    323.   /**
    324.    * 改变分页
    325.    */
    326.   const changePagination = async ({ paginationInfo }) => {
    327.     const { pageNum, pageSize } = paginationInfo
    328.     // const { productShowCols, batchShowCols } = tableListRef.value.showCols
    329.     await refreshTable.value.fetchResource({
    330.       searchInfo: Object.assign(globalSearchInfo.value, {
    331.         pageNum,
    332.         pageSize
    333.       })
    334.     })
    336.     // const targetColsPropName = currentTab.value === TabsEnum.REGISTER ? 'productShowCols' : 'batchShowCols'
    337.     // const allColumns = cloneDeep(globalSearchInfo.value[targetColsPropName])
    339.     // await refreshTable.value.fetchResource({
    340.     //   searchInfo: Object.assign(globalSearchInfo.value, {
    341.     //     pageNum,
    342.     //     pageSize,
    343.     //     productShowCols: deBuildColumns(productShowCols),
    344.     //     batchShowCols: deBuildColumns(batchShowCols)
    345.     //   }),
    346.     //   allColumns
    347.     // })
    348.   }
    350.   /**
    351.    * Modal相关
    352.    */
    354.   //打包主要的视图信息
    355.   const buildViewMainInfo = ({ viewInfo }) => {
    356.     //保存的视图信息
    357.     const { viewName, viewDesc } = viewInfo
    358.     //筛选条件
    359.     const { productShowCols, batchShowCols } = tableListRef.value.showCols
    360.     globalSearchInfo.value.productShowCols = deBuildColumns(productShowCols)
    361.     globalSearchInfo.value.batchShowCols = deBuildColumns(batchShowCols)
    362.     const condition = globalSearchInfo.value
    364.     return { viewName, viewDesc, condition }
    365.   }
    367.   //保存视图
    368.   const saveModalMakeViewHandleOk = async (info, closeSaveModal, extraData) => {
    369.     const { viewName, viewDesc, condition } = buildViewMainInfo({ viewInfo: info })
    370.     //其他信息
    371.     const searchType = SearchTypeEnmu.PRODUCT_INFO
    372.     const frameId = extraData?.frameId
    373.     let referenceId
    374.     if (treeNodeData.value.nodeType === TreeNodeTypeEnum.PRODUCT_FRAM) {
    375.       referenceId = frameId || treeNodeData.value.key
    376.     }
    377.     if (treeNodeData.value.nodeType === TreeNodeTypeEnum.VIEW) {
    378.       referenceId = frameId || treeNodeData.value.parentId
    379.     }
    380.     //传递的总数居
    381.     const data = { viewName, viewDesc, condition, searchType, referenceId }
    382.     // console.log('保存时，传递的总数居', data)
    383.     await saveSearchView(data)
    385.     //告知外部，让其刷新树列表
    386.     Emiter('saveView', referenceId)
    387.     closeSaveModal()
    388.   }
    390.   //更新视图
    391.   const saveModalUpdateViewHandleOk = async (info, closeSaveModal) => {
    392.     const { viewName, viewDesc, condition } = buildViewMainInfo({ viewInfo: info })
    393.     //其他信息
    394.     const searchType = SearchTypeEnmu.PRODUCT_INFO
    395.     const frameId = treeNodeData.value.parentId
    397.     const id = treeNodeData.value.key
    398.     //传递的总数居
    399.     const data = { viewName, viewDesc, condition, searchType, id }
    400.     // console.log('更新时，传递的总数居', data)
    401.     try {
    402.       await updateSearchView(data)
    403.     } catch (error) {
    404.       /**
    405.        * 若保存失败，则要回溯对 globalSearchInfo 的更改
    406.        * （buildViewMainInfo中，操作了globalSearchInfo）
    407.        * */
    408.       const { productShowCols, batchShowCols } = tableListRef.value.allCols
    409.       globalSearchInfo.value.productShowCols = deBuildColumns(productShowCols)
    410.       globalSearchInfo.value.batchShowCols = deBuildColumns(batchShowCols)
    411.     }
    413.     //告知外部，让其刷新树列表
    414.     Emiter('updateView', { frameId, viewName, viewDesc, condition })
    415.     closeSaveModal()
    416.   }
    418.   //删除视图
    419.   const deleteModalHandleOk = async (closeDeleteModal) => {
    420.     await deleteSearchView(treeNodeData.value.id)
    421.     Message.success('删除成功！')
    422.     closeDeleteModal()
    423.     const frameId = treeNodeData.value.parentId
    424.     Emiter('deleteView', frameId)
    425.   }
    427.   //保存视图权限
    428.   const powerModalHandleOk = () => {
    429.     //权限相关信息
    430.     Emiter('powerModalHandleOk')
    431.   }
    433.   const frameFilters = ref<FrameFilter[]>([])
    435.   const getFrameFilters = async (frameId: string) => {
    436.     const res = await getProductFrameFilters(frameId)
    437.     frameFilters.value = res.data
    438.   }
    440.   /**
    441.    * 查看余量告警信息
    442.    */
    443.   // async function handleClickWatchQuantityWarn() {
    444.   //   const newFilter = Object.assign(globalSearchInfo.value.filter, { alarmOn: SystemYesNoEnum.YES })
    445.   //   const searchInfo = globalSearchInfo.value
    446.   //   await refreshAllTabTable(searchInfo)
    447.   // }
    449.   /**
    450.    * 暴露给外部的state
    451.    * */
    452.   const exposeSaveHandleOpen = computed(() => saveModalRef.value?.saveModalHandleOpen)
    453.   const initialTablePresetPagination = computed(() => tableListRef.value?.initialPresetPagination)
    454.   const initialTableSelectedRowKeys = computed(() => tableListRef.value?.initialSelectedRowKeys)
    455.   defineExpose({
    456.     refreshAllTabTable,
    457.     getFrameFilters,
    458.     saveModalHandleOpen: exposeSaveHandleOpen,
    459.     initialTablePresetPagination,
    460.     initialTableSelectedRowKeys
    461.   })
    462. </script>
    464. <style scoped lang="scss">
    465.   .query-view-detail {
    466.     background-color: #fff;
    467.     main {
    468.       padding: 0px 20px 24px;
    469.     }
    470.   }
    471.   .pointer {
    472.     cursor: pointer;
    473.   }
    474. </style>

    image.png

    1. <template>
    2.   <div class="table-list-wrapper">
    3.     <div class="tabs-bar">
    4.       <div
    5.         class="tab-btn pointer"
    6.         :class="currentTab.value === Number(type) ? 'tab-active' : ''"
    7.         v-for="(item, type) in TabOptions"
    8.         :key="type"
    9.         @click="changeTab(item, type)"
    10.       >
    11.         {{ item.title }}（{{ item.totalSum }}）
    12.       </div>
    13.     </div>
    14.     <div class="table-wrapper">
    15.       <BasicTable
    16.         ref="tableRef"
    17.         rowKey="id"
    18.         v-model:columns="TabMapDataSource[currentTab.value].showColumns"
    19.         :data="showData"
    20.         :isShowFliter="true"
    21.         :columnsAll="currentAllCols"
    22.         :row-selection="rowSelection"
    23.         v-model:selectedRowKeys="selectedRowKeys"
    24.         :pagination="pagination"
    25.         :scroll="{ y: 600 }"
    26.         @select="handleSelected"
    27.         @selectAll="handleSelectAll"
    28.         column-resizable
    29.         :bordered="{ headerCell: true }"
    30.         :loading="loading"
    31.       >
    32.         <template #customTitle>
    33.           <a-space>
    34.             <span>已选定 {{ selectedRowKeys.length }} 个</span>
    35.             <a-button @click="openStockInModal" size="mini">入库</a-button>
    36.             <a-button @click="openStockOutModal" size="mini">出库</a-button>
    37.             <!-- <a-button size="mini">出库</a-button> -->
    38.           </a-space>
    39.         </template>
    40.         <!-- 序号列 -->
    41.         <template #cell-serialNumber="{ item }">
    42.           <a-tooltip :mini="true" :position="toolTipPosition" content-class="tool-tip-content">
    43.             <template #content>
    44.               <span v-for="msg in item.record.alarmMsgs" :key="msg">{{ msg }}</span>
    45.             </template>
    46.             <icon-exclamation-circle-fill v-if="item.record.alarmOn === 1" :style="{ color: '#ff7d00' }" />
    47.             {{ computedShowSerialNumber(item.record.index) }}
    48.           </a-tooltip>
    49.         </template>
    50.         <!-- 产品/批次附加字段 -->
    51.         <template #cell-customParams="{ item }">
    52.           <a-tooltip :mini="true" :position="toolTipPosition" content-class="tool-tip-content">
    53.             <template #content>
    54.               <p
    55.                 v-for="(filed, filedKey) in showAdditionalFields(item.record[item.column.dataIndex], 'array')"
    56.                 :key="filedKey"
    57.                 class="tool-tip-content-item"
    58.               >
    59.                 {{ filed }}
    60.               </p>
    61.             </template>
    62.             <a-tag v-if="!isShowEmpty(showAdditionalFields(item.record[item.column.dataIndex], 'string'))">
    63.               <span class="pointer">{{ showAdditionalFields(item.record[item.column.dataIndex], 'string') }}</span>
    64.             </a-tag>
    65.           </a-tooltip>
    66.         </template>
    67.         <!-- 以 link 形式展示的字段 -->
    68.         <template #cell-link="{ item }">
    69.           <a-link v-if="item.column.dataIndex === 'batchNum'">
    70.             批次数：
    71.             {{ customShowByColType(item.column.type, item.column.paramType, item.record[item.column.dataIndex]) }}
    72.           </a-link>
    73.           <a-link v-else>
    74.             {{ customShowByColType(item.column.type, item.column.paramType, item.record[item.column.dataIndex]) }}
    75.           </a-link>
    76.         </template>
    77.         <!-- 以 tag 形式展示的字段 -->
    78.         <template #cell-inStockNum="{ item }">
    79.           <a-tooltip
    80.             :position="toolTipPosition"
    81.             :popup-visible="!stockDetialLoading && item.record.id === mouseenterStockInfoCellId"
    82.           >
    83.             <template #content>
    84.               <a-spin :loading="stockDetialLoading" @mouseenter="showStock" @mouseleave="hideStock">
    85.                 <span class="col-stock-detial-title">库存信息</span>
    86.                 <p v-for="(str, key) in stockDetialInfoArr" :key="key" class="col-stock-detial-item">{{ str }}</p>
    87.                 <a-link class="col-stock-detial-item">跳转至库存</a-link>
    88.               </a-spin>
    89.             </template>
    90.             <a-tag class="pointer" @mouseenter="getStockInfo(item.record)" @mouseout="initMouseenterStockInfoCellId">
    91.               在库数量：
    92.               {{ customShowByColType(item.column.type, item.column.paramType, item.record[item.column.dataIndex]) }}
    93.             </a-tag>
    94.           </a-tooltip>
    95.         </template>
    96.         <template #cell-default="{ item }">
    97.           {{ customShowByColType(item.column.type, item.column.paramType, item.record[item.column.dataIndex]) }}
    98.         </template>
    99.       </BasicTable>
    100.     </div>
    101.   </div>
    102. </template>
    104. <script lang="ts">
    105.   type TabMapDataSource = {
    106.     [key in TabsEnum]: {
    107.       //展示的cols
    108.       showColumns: any[]
    109.       //编辑的cols信息 (dataIndexArr)
    110.       selectShowColumns: string[]
    111.     }
    112.   }
    114.   interface StockDetialInfo {
    115.     inStockNum: string | number
    116.     inStockAmount: string | number
    117.     totalNum: string | number
    118.     totalAmount: string | number
    119.   }
    120. </script>
    121. <script setup lang="ts">
    122.   //api
    123.   import { getStockDetialInfo } from '@/api/material'
    124.   //components
    125.   import BasicTable from '@/components/BasicTable/index.vue'
    126.   //utils
    127.   import { ref, computed, Ref, watch, toRaw, reactive, nextTick, ShallowRef, shallowRef } from 'vue'
    128.   import _, { isEmpty } from 'lodash'
    129.   import moment from 'moment'
    130.   import { SERIAL_NUMBER } from '@/common/constant'
    131.   import { useFetch, useSelectedRows } from '@/hooks'
    132.   import { debounce } from '@/util/tools/index'
    133.   //types
    134.   import { TableRowSelection } from '@arco-design/web-vue'
    135.   import { TabsEnum } from '@/views/register/registration-and-batch-info-query/utils'
    136.   import { TableColsTypeEnum } from '@/views/register/registration-and-batch-info-query/types'
    137.   import { ParameterType } from '@/common/enum'
    139.   export type MaterialData = {
    140.     id: string
    141.     frameId: string
    142.     frameName: string
    143.     batchName?: string
    144.     productName: string
    145.     productId: string
    146.     batchNum: number
    147.     [key: string]: any
    148.   }
    149.   // const RootData = inject('rootData')
    150.   // const { productFrameInfo } = RootData as any
    151.   // const getProductFrameName = computed(() => productFrameInfo.value?.name)
    153.   const { currentTab, tableListData, loading } = defineProps<{
    154.     currentTab: { value: number }
    155.     tableListData: any
    156.     loading: Ref<boolean>
    157.   }>()
    158.   const Emiter = defineEmits(['changeTab', 'changePagination', 'openStockInModal', 'openStockOutModal'])
    160.   const tableRef = ref()
    162.   const rowSelection: TableRowSelection = reactive({
    163.     type: 'checkbox',
    164.     showCheckedAll: true
    165.   })
    166.   // tab信息
    167.   const TabOptions = computed(() => {
    168.     return {
    169.       [TabsEnum.REGISTER]: {
    170.         title: '注册信息',
    171.         totalSum: tableListData[TabsEnum.REGISTER].totalRecords || 0
    172.       },
    173.       [TabsEnum.BATCH]: {
    174.         title: '批次信息',
    175.         totalSum: tableListData[TabsEnum.BATCH].totalRecords || 0
    176.       }
    177.     }
    178.   })
    180.   //组件内部维护的不同 tab 对应的信息
    181.   let TabMapDataSource = reactive<TabMapDataSource>({
    182.     [TabsEnum.REGISTER]: {
    183.       //展示的cols
    184.       showColumns: [],
    185.       //编辑的cols信息 (dataIndexArr)
    186.       selectShowColumns: []
    187.     },
    188.     [TabsEnum.BATCH]: {
    189.       showColumns: [],
    190.       selectShowColumns: []
    191.     }
    192.   })
    194.   const isChangeTabMapDataSource = ref(true)
    195.   watch(
    196.     TabMapDataSource,
    197.     () => {
    198.       if (isChangeTabMapDataSource.value) {
    199.         if (TabMapDataSource[TabsEnum.REGISTER].showColumns[0]) {
    200.           ;(TabMapDataSource[TabsEnum.REGISTER].showColumns[0] as any).customTitle = true
    201.         }
    202.         isChangeTabMapDataSource.value = false
    203.       }
    204.       nextTick(() => {
    205.         isChangeTabMapDataSource.value = true
    206.       })
    207.     },
    208.     {
    209.       immediate: false
    210.     }
    211.   )
    213.   const showData = computed(() => {
    214.     return _.isEmpty(TabMapDataSource[currentTab.value].selectShowColumns) ? ([] as []) : (data.value as [])
    215.   })
    216.   /**
    217.    * 索引当前的列表信息
    218.    * */
    219.   const data = computed<MaterialData[]>(() => {
    220.     refreshTableScroll()
    221.     return tableListData[currentTab.value].data
    222.   })
    224.   //当前总的cols
    225.   const currentAllCols = computed(() => tableListData[currentTab.value].allColumns)
    226.   //map形式的缓存
    227.   const currentAllColsToMap = ref({})
    228.   //初始化缓存
    229.   watch(currentAllCols, (newCurrentCols) => {
    230.     currentAllColsToMap.value = {}
    231.     newCurrentCols.map((v) => {
    232.       currentAllColsToMap.value[v.dataIndex] = v
    233.     })
    234.   })
    236.   //初始化展示的 cols
    237.   watch(currentAllCols, () => {
    238.     // 所有tab一起初始化，因为如果没有进入某个tab（未编辑），外面在保存时也能拿到该tab所有的列
    239.     for (const type in TabMapDataSource) {
    240.       if (_.isEmpty(TabMapDataSource[type].showColumns)) {
    241.         TabMapDataSource[type].showColumns = tableListData[type].allColumns
    242.       }
    243.     }
    244.   })
    246.   /**
    247.    * 设置展示列相关
    248.    */
    250.   //初始化选项（选中全部）
    251.   watch(currentAllCols, (newCurrentCols) => {
    252.     if (_.isEmpty(TabMapDataSource[currentTab.value].selectShowColumns)) {
    253.       TabMapDataSource[currentTab.value].selectShowColumns = newCurrentCols.map((v) => v.dataIndex)
    254.     }
    255.   })
    256.   //(编辑展示列) newSelectShowColumns 就是一个 dataIndexArray
    257.   watch(
    258.     () => TabMapDataSource[currentTab.value].selectShowColumns,
    259.     (newSelectShowColumns) => {
    260.       TabMapDataSource[currentTab.value].showColumns = newSelectShowColumns.map((v) => currentAllColsToMap.value[v])
    261.       addFixedCol()
    262.     }
    263.   )
    264.   //追加固定列
    265.   const addFixedCol = () => {
    266.     TabMapDataSource[currentTab.value].showColumns.unshift({
    267.       title: '序号',
    268.       dataIndex: SERIAL_NUMBER,
    269.       customTitle: true,
    270.       isShowFliter: false
    271.     })
    272.   }
    274.   /**
    275.    * 选择表格数据相关
    276.    */
    277.   const selectedRowKeys: ShallowRef<string[]> = shallowRef([])
    278.   const { selectedRaws: selectedMaterial, handleSelected, handleSelectAll } = useSelectedRows<MaterialData>(data)
    279.   const initialSelectedRowKeys = () => {
    280.     selectedRowKeys.value = []
    281.     selectedMaterial.value = []
    282.     tableRef.value.clearSelectedKeysCache()
    283.   }
    284.   const openStockInModal = () => {
    285.     Emiter('openStockInModal', selectedMaterial.value)
    286.   }
    287.   const openStockOutModal = () => {
    288.     Emiter('openStockOutModal', selectedMaterial.value)
    289.   }
    290.   /**
    291.    *
    295.    * 切换tab
    296.    */
    297.   const changeTab = (item, type) => {
    298.     initialPresetPagination()
    299.     initialSelectedRowKeys()
    300.     Emiter('changeTab', { type, paginationInfo })
    301.     /**
    302.      * TODO
    303.      * 发送网络请求、刷新列表（可以在外部做）
    304.      */
    305.   }
    307.   /**
    308.    * 分页相关
    309.    */
    310.   let paginationInfo = reactive({
    311.     pageNum: 1,
    312.     pageSize: 10
    313.   })
    315.   const pagination = computed(() => {
    316.     const { pageNum, pageSize } = paginationInfo
    317.     return {
    318.       total: tableListData[currentTab.value].totalRecords,
    319.       showPageSize: true,
    320.       current: pageNum,
    321.       pageSize,
    322.       //页码改变时触发
    323.       onChange: (current) => {
    324.         paginationInfo.pageNum = current
    325.         Emiter('changePagination', { paginationInfo })
    326.       },
    327.       //数据条数改变时触发
    328.       onPageSizeChange: (pageSize) => {
    329.         paginationInfo.pageNum = 1
    330.         paginationInfo.pageSize = pageSize
    331.         Emiter('changePagination', { paginationInfo })
    332.       }
    333.     }
    334.   })
    336.   const initialPresetPagination = () => {
    337.     paginationInfo.pageNum = 1
    338.     paginationInfo.pageSize = 10
    339.   }
    341.   /**
    342.    * 附加信息的合理展示
    343.    */
    344.   function showAdditionalFields(fieldArray, type) {
    345.     fieldArray = fieldArray || []
    346.     const array = fieldArray.map((field) => {
    347.       const name = field.fieldName
    348.       const values = customShowByColType(666, field.fieldType, field)
    349.       return `${name}：${values}`
    350.     })
    352.     return type === 'string' ? array.join('、') : array
    353.   }
    355.   /**
    356.    * 根据当前列的字段种类合理展示字段
    357.    */
    358.   function customShowByColType(type: TableColsTypeEnum, paramType, data) {
    359.     //基础列，直接展示
    360.     if (type === TableColsTypeEnum.BASIC_BATCH || type === TableColsTypeEnum.BASIC_Product) {
    361.       return data
    362.     }
    363.     /**
    364.      * 自定义字段
    365.      */
    366.     let paramValues = data?.paramValues
    367.     paramValues = _.isEmpty(paramValues) ? [] : paramValues
    368.     const filterValues = paramValues.map((v) => v.showName)
    370.     switch (paramType) {
    371.       //时间类型
    372.       case ParameterType.MOMENT: {
    373.         const showValues = filterValues.map((v) => moment(v).format('YYYY-MM-DD')).join('、')
    374.         return showValues
    375.       }
    376.       default: {
    377.         const showValues = filterValues.join('、')
    378.         return showValues
    379.       }
    380.     }
    381.   }
    383.   const isShowEmpty = (content) => {
    384.     return isEmpty(content)
    385.   }
    387.   /**
    388.    * 合理展示序号列
    389.    */
    390.   function computedShowSerialNumber(num) {
    391.     const { pageNum, pageSize } = paginationInfo
    392.     const showNum = (pageNum - 1) * pageSize + num
    393.     return showNum
    394.   }
    396.   /**
    397.    * 切换 tab 后，更新滚动条位置
    398.    */
    399.   watch(
    400.     () => currentTab.value,
    401.     () => {
    402.       refreshTableScroll()
    403.     }
    404.   )
    405.   function refreshTableScroll() {
    406.     nextTick(() => {
    407.       const tableBody = document.querySelector('.arco-table-body')
    408.       tableBody?.scroll({ left: 1, behavior: 'smooth' })
    409.     })
    410.   }
    412.   /**
    413.    * 判断是否展示 table 自带的 tooltip
    414.    */
    415.   type Postion = 'left' | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'right' | 'lt' | 'lb' | 'rt' | 'rb' | undefined
    416.   const toolTipPosition: Postion = 'left'
    417.   // const isShowTableToolTip = (col) => {
    418.   //   // col.dataIndex !== 'productCustomParams' ? { position: 'bottom' } :false
    419.   //   return col.dataIndex !== 'productCustomParams' && col.dataIndex !== 'batchCustomParams'
    420.   //     ? { position: toolTipPosition, mini: true }
    421.   //     : false
    422.   // }
    424.   /**
    425.    * 鼠标 hover 到库存信息列时 getStockInfo
    426.    */
    427.   const {
    428.     loading: stockDetialLoading,
    429.     fetchResource: getStockDetialInfoFetchHook,
    430.     result: stockDetialRes
    431.   } = useFetch(getStockDetialInfo, {
    432.     isLazy: true
    433.   })
    434.   const stockDetialInfoArr = ref<string[]>()
    436.   //记录当前 hover 的库存信息 cell
    437.   const mouseenterStockInfoCellId = ref<string>()
    438.   const initMouseenterStockInfoCellId = debounce(() => {
    439.     if (showFlag == false) {
    440.       mouseenterStockInfoCellId.value = ''
    441.     }
    442.   }, 600)
    444.   //获取库位详情信息
    445.   const getStockInfo = debounce(async (record) => {
    446.     await getStockDetialInfoFetchHook(record.id)
    447.     updateStockDetialInfoArr(stockDetialRes.value.data)
    448.     mouseenterStockInfoCellId.value = record.id
    449.   }, 500)
    451.   // 停留展示Stock信息
    452.   let showFlag: boolean
    453.   const showStock = () => {
    454.     showFlag = true
    455.   }
    456.   const hideStock = () => {
    457.     showFlag = false
    458.     initMouseenterStockInfoCellId()
    459.   }
    461.   //构建展示库位详情信息的array
    462.   const updateStockDetialInfoArr = (data: StockDetialInfo) => {
    463.     const propNameMapPrefix = {
    464.       inStockNum: '在库数量：',
    465.       inStockAmount: '在库总量：',
    466.       totalNum: '入库数量：',
    467.       totalAmount: '入库总量：'
    468.     }
    469.     const detialItems = Object.entries(propNameMapPrefix).map(([key, prefix]) => `${prefix}${data[key] || 0}`)
    470.     stockDetialInfoArr.value = detialItems
    471.   }
    472.   /**
    473.    * 暴露给外部的state
    474.    */
    476.   const initTabMapDataSource = () => {
    477.     for (const key in TabMapDataSource) {
    478.       TabMapDataSource[key].showColumns = []
    479.       TabMapDataSource[key].selectShowColumns = []
    480.     }
    481.   }
    483.   const clearCacheData = () => {
    484.     initTabMapDataSource()
    485.   }
    487.   const showCols = computed(() => {
    488.     return {
    489.       productShowCols: toRaw(TabMapDataSource[TabsEnum.REGISTER].showColumns),
    490.       batchShowCols: toRaw(TabMapDataSource[TabsEnum.BATCH].showColumns)
    491.     }
    492.   })
    494.   const allCols = computed(() => {
    495.     return {
    496.       productShowCols: toRaw(tableListData[TabsEnum.REGISTER].allColumns),
    497.       batchShowCols: toRaw(tableListData[TabsEnum.BATCH].allColumns)
    498.     }
    499.   })
    501.   defineExpose({
    502.     selectedRowKeys,
    503.     showCols,
    504.     allCols,
    505.     clearCacheData,
    506.     currentAllCols,
    507.     //分页相关
    508.     paginationInfo,
    509.     initialPresetPagination,
    510.     //初始化选择项
    511.     initialSelectedRowKeys
    512.   })
    513. </script>
    515. <style scoped lang="scss">
    516.   .table-list-wrapper {
    517.     margin-top: 25px;
    518.     background-color: #fff;
    519.     .tabs-bar {
    520.       margin: 16px 0px 8px 0px;
    521.       display: flex;
    522.       .tab-btn {
    523.         width: 142px;
    524.         height: 32px;
    525.         display: flex;
    526.         justify-content: center;
    527.         align-items: center;
    528.         background-color: #fff;
    529.         border-radius: 32px;
    530.       }
    531.       .tab-active {
    532.         color: #3358ff;
    533.         background-color: #f2f3f5;
    534.       }
    535.     }
    537.     .table-wrapper {
    538.       position: relative;
    539.       .editor-show-columns-btn {
    540.         position: absolute;
    541.         top: 0px;
    542.         right: 0px;
    543.         z-index: 1;
    544.         display: flex;
    545.         justify-content: center;
    546.         align-items: center;
    547.         width: 40px;
    548.         height: 40px;
    549.         font-size: 15px;
    550.         border: 1px solid #e5e6eb;
    551.         background-color: #f2f3f5;
    552.       }
    553.     }
    554.   }
    556.   .tool-tip-content-item {
    557.     margin: 2px 0px;
    558.   }
    559.   .col-stock-detial-title {
    560.     font-size: 15px;
    561.   }
    562.   .col-stock-detial-item {
    563.     font-size: 13px;
    564.   }
    565.   .pointer {
    566.     cursor: pointer;
    567.   }
    569.   .arco-tag.arco-tag-size-medium.arco-tag-checked {
    570.     display: inline-block;
    571.     max-width: 100%;
    572.     span {
    573.       width: 100%;
    574.       display: inline-block;
    575.       overflow: hidden;
    576.       text-overflow: ellipsis;
    577.       white-space: nowrap;
    578.     }
    579.   }
    580. </style>
    582. <style lang="scss">
    583.   .tool-tip-content {
    584.     display: flex;
    585.     flex-direction: column;
    586.   }
    587. </style>