feat(ledger): 优化日志列表组件功能

src/views/ledger/components/table-list.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hc-table-list-content">
-        <HcNewCard>
+        <HcNewCard v-if="listShow">
             <template #header>
                 <div class="w-64">
                     <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
@@ -43,48 +43,28 @@
                         <span>批量废除</span>
                     </el-button>
                 </HcTooltip>
-                <HcTooltip keys="ledger_query_delete">
-                    <el-button
-                        :disabled="tableCheckedKeys.length <= 0"
-                        :loading="deleteLoading"
-                        hc-btn
-                        color="#e03997"
-                        @click="batchDeleteClick"
-                    >
-                        <HcIcon name="delete-bin" />
-                        <span>批量删除</span>
-                    </el-button>
-                </HcTooltip>
-                <HcTooltip keys="ledger_query_print">
-                    <el-button
-                        :disabled="tableCheckedKeys.length <= 0"
-                        :loading="previewPrintLoading"
-                        hc-btn
-                        color="#567722"
-                        @click="previewAndPrintClick"
-                    >
-                        <HcIcon name="printer" />
-                        <span>批量预览/打印</span>
-                    </el-button>
-                </HcTooltip>
-                <el-button
-                    :disabled="tableCheckedKeys.length <= 0"
-                    :loading="signLoading"
-                    hc-btn
-                    type="primary"
-                    @click="resignClick"
-                >
-                    re-sign
-                </el-button>
-                <HcTooltip keys="ledger_query_save_again">
-                    <el-button
-                        :disabled="tableCheckedKeys.length <= 0" :loading="saveAgainLoading" hc-btn
-                        color="#e03997" @click="saveAgainClick"
-                    >
-                        <HcIcon name="save" />
-                        <span>save-again</span>
+   
+  
+           
+                
+                <el-dropdown trigger="click">
+                    <el-button hc-btn type="success">
+                        <span>更多操作</span>
+                        <hc-icon name="arrow-down-s" />
                     </el-button>
-                </HcTooltip>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item 
+                                v-for="item in visibleMoreSMenu" 
+                                :key="item.key"
+                                :disabled="isItemDisabled(item)" 
+                                @click="moreSMenuClick(item)"
+                            >
+                                {{ item.name }}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
             </template>
             <HcTable
                 ref="tableListRef"
@@ -98,7 +78,7 @@
                 @selection-change="tableSelectionChange"
             >
                 <template #taskApproveUserNamesList="{ row }">
-                    <template v-for="item in row.taskApproveUserNamesList">
+                    <template v-for="(item, index) in row.taskApproveUserNamesList" :key="index">
                         <el-tag
                             v-if="item.taskUserName"
                             :type="`${item.evisaStatus === 2 ? 'success' : item.evisaStatus === 3 ? 'warning' : item.evisaStatus === 999 ? 'danger' : 'info'}`" class="mx-1" effect="dark"
@@ -131,7 +111,38 @@
                 <HcPages :pages="searchForm" @change="pageChange" />
             </template>
         </HcNewCard>
-
+        <HcNewCard v-else>
+            <template #extra>
+                <el-button type="primary" @click="listShow = true">
+                    <HcIcon name="arrow-go-back" />
+                    <span>返回日志列表</span>
+                </el-button>
+            </template>
+            <HcTable
+                :column="tableListColumnMonth"
+                :datas="tableListDataMonth"
+                :loading="tableLoadingMonth"
+                is-new
+                :index-style="{ width: 60 }"
+                is-check
+            >
+                <template #action="{ row }">
+                    <el-button plain size="small" type="primary">
+                        查看
+                    </el-button>
+                    <el-button
+                        plain
+                        size="small"
+                        type="danger"
+                    >
+                        删除
+                    </el-button>
+                </template>
+            </HcTable>
+            <template #action>
+                <HcPages :pages="searchFormMonth" @change="pageChangeMonth" />
+            </template>
+        </HcNewCard>
         <!-- 批量上报审批 -->
         <HcReportModal
             :contract-id="contractId"
@@ -166,15 +177,41 @@
                 </el-radio-group>
             </div>
         </hc-new-dialog>
+        <!-- 按月封装 -->
+        <hc-new-dialog
+            v-model="byMonthModal"
+            title="按月封装"
+            widths="38rem"
+            :loading="byMonthModalLoading"
+            @close="byMonthModalClose"
+            @save="byMonthModalSave"
+        >
+            <div class="text-center">
+                <span class="mr-2">日期区间</span>
+                <el-date-picker
+                    v-model="monthCheckVal"
+                    type="monthrange"
+                    range-separator="至"
+                    start-placeholder="开始月份"
+                    end-placeholder="结束月份"
+                   
+                    value-format="YYYY-MM"   
+                />
+                <div class="mt-4 text-orange">
+                    <HcIcon fill name="error-warning" />
+                    <span class="ml-1">封装完成之后请在【更多操作】中【日志月列表】中查看</span>
+                </div>
+            </div>
+        </hc-new-dialog>
     </div>
 </template>
 
 <script setup>
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import queryApi from '~api/ledger/query'
 import { eVisaTaskCheckApi } from '~api/other'
 import { arrToId, arrToKey, getArrValue, getObjValue, isString } from 'js-fast-way'
-import { toPdfPage } from '~uti/btn-auth'
+import { btnAuth, toPdfPage } from '~uti/btn-auth'
 
 //参数
 const props = defineProps({
@@ -196,6 +233,7 @@ const props = defineProps({
 const projectId = ref(props.projectId)
 const contractId = ref(props.contractId)
 const menuItem = ref(props.items)
+const listShow = ref(true)
 
 //监听
 watch(
@@ -594,6 +632,98 @@ const cancelresign = () => {
     resignModalRadio.value = 0
     resignModal.value = false
 }
+const moreSMenu = ref([
+    { key: 'byMonth', name: '按月封装', load: true, keys:'ledger_query_by_month', requiresSelection: false },
+    { key: 'del', name: '批量删除', load: true, keys:'ledger_query_delete', requiresSelection: true },
+    { key: 'print', name: '批量打印/预览', load: true, keys:'ledger_query_print', requiresSelection: true },
+    { key: 'monthList', name: '日志月列表', load: true, keys:'ledger_query_monthList', requiresSelection: false },
+    { key: 're-sign', name: 're-sign', load: true, keys:'ledger_query_re-sign', requiresSelection: true },
+    { key: 'save-again', name: 'save-again', load: true, keys:'ledger_query_save_again', requiresSelection: true },
+],  
+)
+// 根据权限过滤的菜单
+const visibleMoreSMenu = computed(() => {
+  return moreSMenu.value.filter(item => btnAuth(item.keys))
+})
+
+// 判断单项是否禁用
+// 判断单项是否禁用
+const isItemDisabled = (item) => {
+  // 如果该操作需要选择数据但没有选择任何数据，则禁用
+  if (item.requiresSelection && tableCheckedKeys.value.length <= 0) {
+    return true
+  }
+  return false
+}
+const moreSMenuClick = (item) => {
+      if (isItemDisabled(item)) return
+    switch (item.key) {
+        case 'byMonth':
+            byMonth()
+            break
+        case 'del':
+           batchDeleteClick()
+            break
+        case 'print':
+            previewAndPrintClick()
+            break
+        case 'monthList':
+            monthList()
+            break
+        case 're-sign':
+            resignClick()
+            break
+        case 'save-again':
+            saveAgainClick()
+            break
+    }
+}
+
+const byMonth = () => { 
+    byMonthModal.value = true
+
+}
+const byMonthModal = ref(false)
+const byMonthModalLoading = ref(false)
+const byMonthModalClose = () => {
+    byMonthModal.value = false
+    byMonthModalLoading.value = false
+}
+const monthCheckVal = ref([])
+const byMonthModalSave = () => {
+
+    if (monthCheckVal.value.length !== 2) {
+        window.$message?.warning('请选择开始和结束月份')
+        return
+    }
+    
+}
+
+const monthList = () => { 
+    listShow.value = false
+}
+const tableListColumnMonth = ref([
+    { key: 'key1', name: '文件名称' },
+    { key: 'key2', name: '日期' },
+    { key: 'key3', name: '责任者' },
+    { key: 'key4', name: '页数' },
+    { key: 'action', name: '操作', width: 200 },
+])
+const tableListDataMonth = ref([])
+const tableLoadingMonth = ref(false)
+//搜索表单
+const searchFormMonth = ref({
+   
+    createUser: null,
+    current: 1,
+    size: 20,
+    total: 0,
+})
+const pageChangeMonth = ({ current, size }) => {
+    searchFormMonth.value.current = current
+    searchFormMonth.value.size = size
+    // getTableDataMonth()
+}
 </script>
 
 <style lang="scss" scoped>