扫描

src/views/alter/collection/scan.vue

@@ -1,7 +1,7 @@
 <template>
     <hc-card>
         <template #header>
-            1
+            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
@@ -9,12 +9,32 @@
                 <span>新增</span>
             </el-button>
         </template>
-        1111
+        <div class="relative h-full flex">
+            <div id="hc_tree_card">
+                <hc-card-item scrollbar>
+                    <hc-data-tree :h-props="treeProps" :datas="treeLoadNode" :menus="treeMenus" default-expand-all />
+                </hc-card-item>
+            </div>
+            <div id="hc_table_card" class="flex-1">
+                <hc-card-item>
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
+                        <template #action="{ row }">
+                            <el-link type="primary">扫描</el-link>
+                            <el-link type="success">修改</el-link>
+                            <el-link type="danger">删除</el-link>
+                        </template>
+                    </hc-table>
+                    <template #action>
+                        <hc-pages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-card-item>
+            </div>
+        </div>
     </hc-card>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 
 defineOptions({
     name: 'AlterCollectionScan',
@@ -22,10 +42,79 @@ defineOptions({
 
 //渲染完成
 onMounted(() => {
-
+    setSplitRef()
 })
-</script>
 
-<style scoped lang="scss">
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card', '#hc_table_card'], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
+//数据格式
+const treeProps = {
+    label: 'label',
+    children: 'children',
+}
+
+//数据
+const treeLoadNode = ref([
+    {
+        label: '变更归档目录',
+        children: [
+            { label: '归档目录1-1' },
+            { label: '归档目录2-1' },
+            { label: '归档目录2-2' },
+            { label: '归档目录3-1' },
+            { label: '归档目录3-2' },
+        ],
+    },
+])
+
+const treeMenus = [
+    { icon: 'add', label: '新增归档', key: 'add' },
+    { icon: 'pencil', label: '修改归档', key: 'edit' },
+    { icon: 'close', label: '删除归档', key: 'del' },
+]
 
-</style>
+//类型tab数据和相关处理
+const tabKey = ref('key1')
+const tabTab = ref([
+    { key: 'key1', name: '普通变更' },
+    { key: 'key2', name: '工区变更' },
+])
+
+const tabChange = (item) => {
+    tabKey.value = item?.key
+    console.log(item)
+}
+
+//搜索表单
+const searchForm = ref({ current: 1, size: 10, total: 0 })
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'key1', name: '文件编号' },
+    { key: 'key2', name: '文件名称' },
+    { key: 'key3', name: '编制单位' },
+    { key: 'key4', name: '扫描状态' },
+    { key: 'key5', name: '归集状态' },
+    { key: 'action', name: '操作', width: 130 },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+</script>