111

src/views/project/tree.vue

@@ -11,12 +11,15 @@
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
+        <!-- 配置规则 -->
+        <HcDrawerTemp v-model="isDrawerTempShow" :data="tableInfo" @close="getTableData" />
     </hc-card>
 </template>
 
 <script setup>
 import { onActivated, ref } from 'vue'
 import { getArrValue } from 'js-fast-way'
+import HcDrawerTemp from './tree/drawer-temp.vue'
 import mainApi from '~api/project/tree'
 
 defineOptions({
@@ -61,7 +64,10 @@ const getTableData = async () => {
 }
 
 //配置规则
+const tableInfo = ref({})
+const isDrawerTempShow = ref(false)
 const tableRowClick = (row) => {
-    console.log(row)
+    tableInfo.value = row
+    isDrawerTempShow.value = true
 }
 </script>

src/views/project/tree/drawer-temp.vue

@@ -0,0 +1,195 @@
+<template>
+    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
+        <hc-body split>
+            <template #left>
+                <hc-card scrollbar>
+                    <template #header>
+                        <hc-search-input v-model="searchTreeName" placeholder="请输入关键字" @search="searchTreeNameClick" />
+                    </template>
+                    <template v-if="isTreeMode === 1">
+                        <hc-lazy-tree
+                            v-if="isShow" :root-menu="treeMenuRoot" is-load-menu :h-props="treeProps" tree-key="id"
+                            @load-menu="treeLazyMenu" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
+                        >
+                            <template #name="{ data }">
+                                <span class="text-16px font-400">{{ data.name }}</span>
+                            </template>
+                        </hc-lazy-tree>
+                    </template>
+                    <template v-if="isTreeMode === 2">
+                        <hc-data-tree
+                            ref="treeRef" :root-menu="treeMenuRoot" is-load-menu :h-props="treeProps" tree-key="id" :datas="treeData"
+                            @load-menu="treeDataMenu" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
+                        >
+                            <template #name="{ data }">
+                                <span class="text-16px font-400">{{ data.name }}</span>
+                            </template>
+                        </hc-data-tree>
+                    </template>
+                </hc-card>
+            </template>
+            <hc-card>
+                1111
+            </hc-card>
+        </hc-body>
+    </hc-drawer>
+</template>
+
+<script setup>
+import { getArrValue, isNullES } from 'js-fast-way'
+import { ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import mainApi from '~api/exctab/exceltab'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['close'])
+const store = useAppStore()
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = data
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) getDataApi()
+})
+
+//处理相关数据
+const getDataApi = () => {
+
+}
+
+//树搜索
+const isTreeMode = ref(1) //1懒加载，2全加载
+const searchTreeName = ref('')
+const searchTreeNameClick = async () => {
+    if (isNullES(searchTreeName.value)) {
+        isTreeMode.value = 1
+    } else {
+        isTreeMode.value = 2
+        await getTreeAllData()
+        treeRef.value?.treeRef?.filter(searchTreeName.value)
+    }
+}
+
+//树配置
+const treeRef = ref(null)
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: (item) => {
+        return !item.hasChildren
+    },
+}
+
+//树菜单根节点
+const treeMenuRoot = [
+    { icon: 'add-circle', label: '新增', key: 'add' },
+    { icon: 'delete-bin', label: '删除', key: 'del' },
+]
+
+//懒加载树的菜单
+const treeLazyMenu = ({ item, level }, resolve) => {
+    let newMenu = []
+    if (item.fileType !== 3) {
+        newMenu.push({ icon: 'add-circle', label: '新增', key: 'add' })
+    }
+    if (item.fileType !== 1) {
+        newMenu.push({ icon: 'draft', label: '编辑', key: 'edit' })
+    }
+    if (level !== 1) {
+        newMenu.push({ icon: 'sort-asc', label: '排序', key: 'sort' })
+    }
+    if (item.fileType !== 3) {
+        newMenu.push({ icon: 'file-upload', label: '上传', key: 'upload' })
+    }
+    newMenu.push({ icon: 'delete-bin', label: '删除', key: 'del' })
+    resolve(newMenu)
+}
+
+
+//全加载树的菜单
+const treeDataMenu = ({ node, item, level }, resolve) => {
+    const { isLeaf } = node
+    let newMenu = []
+    if (item.fileType !== 3) {
+        newMenu.push({ icon: 'add-circle', label: '新增', key: 'add' })
+    }
+    if (item.fileType !== 1) {
+        newMenu.push({ icon: 'draft', label: '编辑', key: 'edit' })
+    }
+    if (isLeaf) {
+        newMenu.push({ icon: 'sort-asc', label: '排序', key: 'sort' })
+    }
+    if (level !== 1) {
+        newMenu.push({ icon: 'file-upload', label: '上传', key: 'upload' })
+    }
+    newMenu.push({ icon: 'delete-bin', label: '删除', key: 'del' })
+    resolve(newMenu)
+}
+
+//菜单被点击
+const treeMenuClick = ({ key, data, node }) => {
+    console.log(key)
+}
+
+//伪刷新
+const pseudoRefresh = () => {
+    const val = isTreeMode.value
+    isTreeMode.value = 4
+    setTimeout(()=> {
+        isTreeMode.value = val
+    }, 500)
+}
+
+//全加载树
+const treeData = ref([])
+const getTreeAllData = async () => {
+    const { data } = await mainApi.tabLazyTreeAll({
+        modeId: dataInfo.value.id,
+        name: '',
+    })
+    treeData.value = getArrValue(data)
+}
+
+//懒加载树
+const treeLoadNode = async ({ item, level }, resolve) => {
+    const parentId = level === 0 ? 0 : item.id
+    const { data } = await mainApi.tabLazyTree({
+        parentId: parentId,
+        modeId: dataInfo.value.id,
+    })
+    resolve(getArrValue(data))
+}
+
+//树节点被点击
+const nodeInfo = ref({})
+const treeNodeTap = ({ data }) => {
+    nodeInfo.value = data
+}
+
+//关闭抽屉
+const drawerClose = () => {
+    isShow.value = false
+    dataInfo.value = {}
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>