1

src/views/desk/system-unit/temp.vue

@@ -4,7 +4,7 @@
             <template #left>
                 <hc-card scrollbar>
                     <hc-lazy-tree
-                        v-if="isTreeMode" :root-menu="treeMenuData" :menus="treeMenuData" :h-props="treeProps"
+                        v-if="isTreeMode" :root-menu="treeMenuData" :menus="treeMenuDatas" :h-props="treeProps"
                         tree-key="id" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
                     >
                         <template #nodeName="{ data }">
@@ -58,6 +58,18 @@
                 <el-button hc-btn type="primary" :loading="addEditLoading" @click="addEditSubmit">提交</el-button>
             </template>
         </hc-dialog>
+
+        <!-- 调整排序 -->
+        <hc-dialog v-model="isSortingShow" title="调整排序" widths="600px" is-table @close="sortingClose">
+            <hc-table
+                ref="tableSortingRef" :column="tableSortingColumn" :datas="tableSortingData" is-row-drop is-sort
+                quick-sort @row-drop="sortingRowDropTap" @row-sort="sortingRowSortTap"
+            />
+            <template #footer>
+                <el-button hc-btn @click="sortingClose">取消</el-button>
+                <el-button hc-btn type="primary" :disabled="tableSortingData.length <= 0" :loading="sortingLoading" @click="sortingSubmit">提交</el-button>
+            </template>
+        </hc-dialog>
     </hc-drawer>
 </template>
 
@@ -65,7 +77,7 @@
 import { nextTick, ref, watch } from 'vue'
 import { HcDelMsg } from 'hc-vue3-ui'
 import { getDictionaryData, getDictionaryName } from '~src/utils/tools'
-import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import { arrToId, deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/desk/system-unit'
 
 const props = defineProps({
@@ -121,6 +133,11 @@ const treeLoadNode = async ({ item, level }, resolve) => {
 
 //树菜单根节点
 const treeMenuData = [
+    { icon: 'add-circle', label: '新增节点', key: 'add' },
+    { icon: 'draft', label: '编辑节点', key: 'edit' },
+    { icon: 'delete-bin', label: '删除节点', key: 'del' },
+]
+const treeMenuDatas = [
     { icon: 'add-circle', label: '新增节点', key: 'add' },
     { icon: 'draft', label: '编辑节点', key: 'edit' },
     { icon: 'arrow-up-down', label: '排序节点', key: 'rank' },
@@ -130,7 +147,6 @@ const treeMenuData = [
 //菜单被点击
 const treeMenuClick = async ({ key, data, node }) => {
     nodeInfo.value = data
-    console.log(key)
     if (key === 'add') {
         formModel.value = {}
         await nextTick()
@@ -139,6 +155,19 @@ const treeMenuClick = async ({ key, data, node }) => {
         formModel.value = deepClone(data)
         await nextTick()
         isAddEditShow.value = true
+    } else if (key === 'rank') {
+        const pid = node.parent.data.id
+        const { data } = await mainApi.getSameList({ parentId: pid })
+        tableSortingData.value = getArrValue(data)
+        isSortingShow.value = true
+    } else if (key === 'del') {
+        HcDelMsg(async (resolve) => {
+            const { code } = await mainApi.remove(data.id)
+            resolve() //关闭弹窗的回调
+            if (code !== 200) return
+            window.$message.success('删除成功')
+            setTreeMode()
+        }).then()
     }
 }
 
@@ -229,6 +258,55 @@ const setTreeMode = () => {
     }, 500)
 }
 
+//排序
+const isSortingShow = ref(false)
+const tableSortingRef = ref(null)
+
+//排序表
+const tableSortingColumn = [{ key: 'nodeName', name: '节点名称' }]
+const tableSortingData = ref([])
+
+// 行拖拽
+const sortingRowDropTap = async (rows) => {
+    // 先清空，否则排序会异常
+    tableData.value = []
+    await nextTick()
+    tableData.value = rows
+}
+
+// 点击排序
+const sortingRowSortTap = async (rows) => {
+    // 先清空，否则排序会异常
+    tableData.value = []
+    await nextTick()
+    tableData.value = rows
+}
+
+//排序提交
+const sortingLoading = ref(false)
+const sortingSubmit = async () => {
+    const arr = tableSortingData.value
+    if (arr.length <= 0) {
+        window?.$message?.warning('暂无数据')
+        return
+    }
+    sortingLoading.value = true
+    const ids = arrToId(arr)
+    const { error, code } = await mainApi.sortNode({ ids })
+    sortingLoading.value = false
+    if (!error && code === 200) {
+        window?.$message?.success('操作成功')
+        sortingClose()
+        setTreeMode()
+    }
+}
+
+//关闭排序
+const sortingClose = () => {
+    isSortingShow.value = false
+    tableData.value = []
+}
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false