扫描页

src/test/index copy.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="hc-page-box">
+        <hc-new-card title="测试签章">
+            <template #extra> 
+                <el-button v-if="isBatch" type="primary" @click="BatchClick(false)">不批量</el-button> 
+                <el-button v-else type="primary" @click="BatchClick(true)">批量</el-button> 
+            </template>
+            <HcSignPdf v-if="pdfUrl" :batch="isBatch" :dom="hcSignImageArr" :sign="logoName" :src="pdfUrl" :img-width="imgWidth" :img-height="imgHeight" @change="pdfChange" />
+        </hc-new-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import HcSignPdf from './hc-pdf1.vue'
+
+const isBatch = ref(false)
+const BatchClick = (val) => {
+    console.log(111111111111)
+    
+    isBatch.value = val
+}
+const pdfUrl = ref('https://blade-oss-chongqing.oss-cn-shenzhen.aliyuncs.com//upload/20250317/bc112743d3fd74da4347d25b7caeea99.pdf')
+
+const hcSignImageArr = ref([])
+const logoName = ref('https://blade-oss-chongqing.oss-cn-shenzhen.aliyuncs.com//upload/20250317/d0b11313e9bb1f0de41b165282215a72.png')
+
+const pdfChange = (data) => {
+    console.log('签章数据', data)
+}
+</script>

src/test/index.vue

@@ -1,31 +1,379 @@
 <template>
     <div class="hc-page-box">
-        <hc-new-card title="测试签章">
-            <template #extra> 
-                <el-button v-if="isBatch" type="primary" @click="BatchClick(false)">不批量</el-button> 
-                <el-button v-else type="primary" @click="BatchClick(true)">批量</el-button> 
+        <hc-page-split>
+            <template #left>
+                <hc-card>
+                    <!-- Element Plus 菜单组件 -->
+                    <ElMenu
+                        default-active="1-1"
+                        class="custom-menu"
+                        :collapse="isCollapse"
+                        @open="handleOpen"
+                        @close="handleClose"
+                        @select="handleSelect"
+                    >
+                        <!-- 给父菜单添加动态激活类 -->
+                        <ElSubMenu 
+                            index="1"
+                            :class="{ 'parent-active': isParentActive('1') }"
+                        >
+                            <template #title>
+                                <span :class="{ 'titleparent-active': isParentActive('1') }">主导航</span>
+                            </template>
+                            <ElMenuItem index="1-1">首页</ElMenuItem>
+                            <ElMenuItem index="1-2">数据统计</ElMenuItem>
+                            <ElMenuItem index="1-3">报表分析</ElMenuItem>
+                        </ElSubMenu>
+                        <ElSubMenu 
+                            index="2"
+                            :class="{ 'parent-active': isParentActive('2') }"
+                        >
+                            <template #title>
+                                <span :class="{ 'titleparent-active': isParentActive('2') }">系统设置</span>
+                            </template>
+                            <ElMenuItem index="2-1">用户管理</ElMenuItem>
+                            <ElMenuItem index="2-2">权限设置</ElMenuItem>
+                            <ElMenuItem index="2-3">系统配置</ElMenuItem>
+                        </ElSubMenu>
+                        <ElMenuItem index="3">
+                            <span>帮助中心</span>
+                        </ElMenuItem>
+                    </ElMenu>
+                </hc-card>
             </template>
-            <HcSignPdf v-if="pdfUrl" :batch="isBatch" :dom="hcSignImageArr" :sign="logoName" :src="pdfUrl" :img-width="imgWidth" :img-height="imgHeight" @change="pdfChange" />
-        </hc-new-card>
+            <hc-new-card>
+                <template #extra>
+                    <el-button hc-btn type="danger">开始扫描</el-button>
+                </template>
+                <template #header>
+                    <el-button hc-btn color="#12B9A7" class="text-white" @click="movesClick">移动</el-button>
+                    <el-button hc-btn color="#149BF4" class="text-white">自动识别</el-button>
+                    <el-button hc-btn class="text-white" color="#149BF4">编辑</el-button>
+                    <el-button hc-btn type="danger">删除</el-button>
+                </template>
+
+                <HcTable
+                    ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
+                    :index-style="{ width: 60 }" :loading="tableLoading" is-check is-new
+                    :cell-style="tableCellStyle"
+                    @selection-change="tableSelection"
+                >
+                    <template #name="{ row }">
+                        <span class="text-link" @click="viewPdf(row.id)">{{ row?.name }}</span>
+                    </template>
+                </HcTable>
+                <template #action>
+                    <HcPages :pages="searchForm" :sizes="[20, 50, 100, 200, 300, 500]" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </hc-page-split>
+        <!-- 移动 -->
+        <hc-new-dialog v-model="movesModal" :loading="movesModalLoading" is-table title="跨目录移动" widths="80vw" @close="movesModalClose" @save="movesModalSave">
+            <div class="hc-moves-transfer-box">
+                <div class="hc-moves-transfer-panel">
+                    <div class="panel-header">
+                        <div class="panel-header-label">
+                            <el-checkbox v-model="movesCheckAll" :indeterminate="isIndeterminate" class="space size-xl" @change="handleCheckAllChange">
+                                选择需要迁移的文件
+                            </el-checkbox>
+                        </div>
+                        <div class="panel-header-extra">{{ checkedMoves.length }}/{{ tableCheckedKeys.length }}</div>
+                    </div>
+                    <div class="panel-body">
+                        <el-scrollbar>
+                            <el-checkbox-group v-model="checkedMoves" @change="handleCheckedMovesChange">
+                                <div v-for="item in tableCheckedKeys" :key="item.id" class="hc-file-checkbox">
+                                    <el-checkbox :value="item.id" class="space size-xl">{{ item.name }}</el-checkbox>
+                                </div>
+                            </el-checkbox-group>
+                        </el-scrollbar>
+                    </div>
+                </div>
+                <div class="hc-moves-transfer-buttons">
+                    <!-- <el-button hc-btn _icon size="small"
+                               :type="tableCheckedKeys.length <= 0 || checkedMoves.length <= 0 ? '' : 'primary'"
+                               :disabled="tableCheckedKeys.length <= 0 || checkedMoves.length <= 0">
+                        <HcIcon name="arrow-right"/>
+                    </el-button> -->
+                    <HcIcon name="arrow-right-double" style="font-size: 22px;" type="primary" />
+                </div>
+                <div class="hc-moves-transfer-panel">
+                    <div class="panel-header">选择移动目录</div>
+                    <div class="panel-body">
+                        <el-scrollbar>
+                            <HcTree :contract-id="contractId" :is-show-menu="false" :project-id="projectId" id-prefix="hc-tree-moves-" is-radio @noderadio="nodeRadio" />
+                        </el-scrollbar>
+                    </div>
+                </div>
+            </div>
+        </hc-new-dialog>
     </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import HcSignPdf from './hc-pdf1.vue'
 
-const isBatch = ref(false)
-const BatchClick = (val) => {
-    console.log(111111111111)
-    
-    isBatch.value = val
+// 菜单折叠状态
+const isCollapse = ref(false)
+// 记录当前选中的完整路径
+const selectedKeyPath = ref([])
+
+// 菜单展开/关闭事件处理
+const handleOpen = (key, keyPath) => {
+    console.log(key, keyPath)
+}
+
+const handleClose = (key, keyPath) => {
+    console.log(key, keyPath)
+}
+
+// 处理菜单选择事件 - 记录完整路径
+const handleSelect = (key, keyPath) => {
+    selectedKeyPath.value = keyPath
+}
+
+// 判断父菜单是否应该激活
+const isParentActive = (parentIndex) => {
+    return selectedKeyPath.value.includes(parentIndex)
+}
+
+//搜索表单
+const searchForm = ref({
+    contractId: null, type: null, approval: null, betweenTime: null,
+    current: 1, size: 20, total: 0,
+})
+//表格数据
+const tableRef = ref(null)
+const tableColumn = ref([
+    { key: 'fileNumber', name: '数字编号' },
+    { key: 'name', name: '文件编号' },
+    { key: 'storageTimeValue', name: '文件题名' },
+    { key: 'pageN', name: '文件页数' },
+    { key: 'pageN', name: '文件日期' },
+    { key: 'pageN', name: '责任者' },
+
+])
+const tableData = ref([
+    { id: 1, fileNumber: '001', name: '合同文件-2023-001', storageTimeValue: '合同文件', pageN: 10 },
+    { id: 2, fileNumber: '002', name: '项目计划-2023-002', storageTimeValue: '项目计划', pageN: 15 },
+    { id: 3, fileNumber: '003', name: '预算报告-2023-003', storageTimeValue: '预算报告', pageN: 8 },
+    { id: 4, fileNumber: '004', name: '会议纪要-2023-004', storageTimeValue: '会议纪要', pageN: 12 },
+    { id: 5, fileNumber: '005', name: '技术文档-2023-005', storageTimeValue: '技术文档', pageN: 20 },
+    { id: 6, fileNumber: '006', name: '市场分析-2023-006', storageTimeValue: '市场分析', pageN: 18 },
+    { id: 7, fileNumber: '007', name: '用户反馈-2023-007', storageTimeValue: '用户反馈', pageN: 5 },
+    { id: 8, fileNumber: '008', name: '产品规格-2023-008', storageTimeValue: '产品规格', pageN: 22 },
+    { id: 9, fileNumber: '009', name: '销售报告-2023-009', storageTimeValue: '销售报告', pageN: 14 },
+    { id: 10, fileNumber: '010', name: '年度总结-2023-010', storageTimeValue: '年度总结', pageN: 30 },
+])
+//设置单元格的样式
+const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
+    if (row.id === 1 && column.property === 'name') {
+        return {
+            backgroundColor: '#FF7D43',
+            color: 'black',
+        }
+    }
+}
+//获取数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await tuningApi.pageByArchive({
+        ...searchForm.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
+        isArchive: 1,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+        searchForm.value.total = data['total'] || 0
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
+}
+
+//多选
+const tableCheckedKeys = ref([])
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows
+}
+//移动
+
+//跨目录移动
+const movesModal = ref(false)
+const movesClick = () => {
+    movesModal.value = true
+}
+
+//选择需要迁移的文件
+const movesCheckAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedMoves = ref([])
+
+//全选
+const handleCheckAllChange = (val) => {
+    const checked = tableCheckedKeys.value
+    const keys = rowsToIdNumArr(checked)
+    checkedMoves.value = val ? keys : []
+    isIndeterminate.value = false
+}
+
+//勾选
+const handleCheckedMovesChange = (value) => {
+
+    const keys = tableCheckedKeys.value
+    const checkedCount = value.length
+    movesCheckAll.value = checkedCount === keys.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < keys.length
 }
-const pdfUrl = ref('https://blade-oss-chongqing.oss-cn-shenzhen.aliyuncs.com//upload/20250317/bc112743d3fd74da4347d25b7caeea99.pdf')
 
-const hcSignImageArr = ref([])
-const logoName = ref('https://blade-oss-chongqing.oss-cn-shenzhen.aliyuncs.com//upload/20250317/d0b11313e9bb1f0de41b165282215a72.png')
+//保存
+const movesModalLoading = ref(false)
+const chnodeId = ref('')
+const movesModalSave = async () => {
+    movesModalLoading.value = true
+    console.log(checkedMoves.value, 'checkedMoves.value')
+    let ids = checkedMoves.value.join(',')
+
+    const { error, code, data, msg } = await tuningApi.moveArchive({
+        ids: ids,
+        nodeId: chnodeId.value,
+    })
+    movesModalLoading.value = false
+    if (!error && code === 200) {
+        console.log(msg, 'msg')
+        window.$message?.success(msg)
+        getTableData()
+    } else {
+        window.$message?.warning(msg)
+    }
+    movesModal.value = false
+}
 
-const pdfChange = (data) => {
-    console.log('签章数据', data)
+//关闭
+const movesModalClose = () => {
+    movesModal.value = false
 }
 </script>
+
+<style scoped lang="scss">
+/* 基础菜单样式 */
+.custom-menu {
+    width: 100%;
+    min-height: 400px;
+    border-right: none !important;
+}
+
+/* 菜单项基础样式 */
+.custom-menu .el-menu-item,
+.custom-menu .el-sub-menu__title {
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+/* 选中菜单项样式 */
+.custom-menu .el-menu-item.is-active {
+    color: #149BF4 !important;
+    background-color: #E6F7FF !important;
+}
+
+/* 选中菜单项右侧边框 */
+.custom-menu .el-menu-item.is-active::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 6px;
+    background-color: #149BF4;
+}
+
+/* 父菜单标题激活样式 */
+.titleparent-active {
+    color: #149BF4 !important;
+    font-weight: bold !important;
+}
+
+/* 父菜单激活时箭头变色 - 通过父级激活类控制 */
+.parent-active .el-sub-menu__icon-arrow {
+    color: #149BF4 !important;
+}
+
+/* 解决scoped样式穿透问题 */
+:deep(.parent-active) .el-sub-menu__icon-arrow {
+    color: #149BF4 !important;
+}
+
+/* 方
+/* 二级菜单背景色 - 保持f7f7f7 */
+.custom-menu .el-sub-menu .el-menu {
+    background-color: #F7F7F7 !important;
+}
+
+/* 二级菜单项默认样式 */
+.custom-menu .el-sub-menu .el-menu .el-menu-item {
+    background-color: #F7F7F7 !important;
+}
+
+/* 二级菜单项选中样式 */
+.custom-menu .el-sub-menu .el-menu .el-menu-item.is-active {
+    background-color: #E6F7FF !important;
+}
+
+.hc-card {
+    position: relative;
+}
+.hc-moves-transfer-box {
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    .hc-moves-transfer-panel {
+        width: 47%;
+        position: relative;
+        height: 100%;
+        background: #ffffff;
+        display: inline-block;
+        text-align: left;
+        border: 1px solid #ebeef5;
+        border-radius: 4px;
+        .panel-header {
+            position: relative;
+            background: #f5f7fa;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            padding: 0 16px;
+            border-bottom: 1px solid #ebeef5;
+            border-radius: 4px 4px 0 0;
+            .panel-header-label {
+                position: relative;
+                flex: 1;
+            }
+            .panel-header-extra {
+                color: #aaaaaa;
+            }
+        }
+        .panel-body {
+            position: relative;
+            padding: 16px;
+            height: calc(100% - 48px);
+            
+            .hc-file-checkbox {
+                position: relative;
+            }
+            .hc-file-checkbox + .hc-file-checkbox {
+                margin-top: 16px;
+            }
+        }
+    }
+    .hc-moves-transfer-buttons {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 16px;
+    }
+}
+</style>
+