1

src/api/modules/exctab/exceltab.js

@@ -86,4 +86,12 @@ export default {
             data: form,
         })
     },
+    //清表模板树节点排序
+    async excTabSort(ids) {
+        return HcApi({
+            url: '/api/blade-manager/exceltab/tab-sort',
+            method: 'post',
+            params: { ids },
+        })
+    },
 }

src/views/exctab/modules/template.vue

@@ -65,7 +65,9 @@
             </hc-card>
         </hc-body>
         <!-- 新增清表 -->
-        <HcAddExcel v-model="addExcelShow" :info="addExcelInfo" :type="addExcelType" @finish="addExcelFinish" />
+        <HcAddExcel v-model="addExcelShow" :info="addExcelInfo" :type="addExcelType" @finish="pseudoRefresh" />
+        <!-- 调整排序 -->
+        <HcTreeSort v-model="treeSortShow" :data="treeSortData" @finish="pseudoRefresh" />
     </hc-drawer>
 </template>
 
@@ -73,8 +75,10 @@
 import { ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import screenfull from 'screenfull'
+import { HcDelMsg } from 'hc-vue3-ui'
 import { getArrValue, getObjValue, getRandom, isNullES } from 'js-fast-way'
 import HcAddExcel from './add-excel.vue'
+import HcTreeSort from './tree-sort.vue'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -180,7 +184,7 @@ const treeDataMenu = ({ node, item, level }, resolve) => {
 }
 
 //菜单被点击
-const treeMenuClick = ({ key, data }) => {
+const treeMenuClick = ({ key, data, node }) => {
     console.log(key)
     if (key === 'add') {
         addExcelInfo.value = getObjValue(data)
@@ -190,6 +194,25 @@ const treeMenuClick = ({ key, data }) => {
         addExcelInfo.value = getObjValue(data)
         addExcelType.value = '编辑'
         addExcelShow.value = true
+    } else if (key === 'sort') {
+        treeSortData.value = {
+            parentId: node?.parent?.data?.id ?? '',
+            modeId: dataInfo.value.id,
+        }
+        treeSortShow.value = true
+    } else if (key === 'del') {
+        if (data.hasChildren) {
+            window.$message.warning('该节点下有子节点，无法删除')
+            return false
+        }
+        HcDelMsg(async (resolve) => {
+            const { code } = await mainApi.del(data.id)
+            resolve() //关闭弹窗的回调
+            if (code === 200) {
+                window.$message.success('删除成功')
+                pseudoRefresh()
+            }
+        })
     }
 }
 
@@ -197,7 +220,13 @@ const treeMenuClick = ({ key, data }) => {
 const addExcelShow = ref(false)
 const addExcelInfo = ref({})
 const addExcelType = ref('')
-const addExcelFinish = () => {
+
+//调整排序
+const treeSortShow = ref(false)
+const treeSortData = ref({})
+
+//伪刷新
+const pseudoRefresh = () => {
     const val = isTreeMode.value
     isTreeMode.value = 4
     tableTempExcelProps.value = {}

src/views/exctab/modules/tree-sort.vue

@@ -0,0 +1,95 @@
+<template>
+    <hc-dialog v-model="isShow" title="调整排序" widths="800px" is-table @close="dialogClose">
+        <hc-table
+            ref="tableRef" :column="tableColumn" :datas="tableData" is-row-drop is-sort
+            quick-sort @row-drop="rowDropTap" @row-sort="rowSortTap"
+        />
+        <template #footer>
+            <el-button hc-btn @click="dialogClose">取消</el-button>
+            <el-button hc-btn type="primary" :disabled="tableData.length <= 0" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { arrToId, getArrValue, getObjValue } from 'js-fast-way'
+import mainApi from '~api/exctab/exceltab'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听可否编辑
+const datas = ref(props.data)
+watch(() => props.data, (val) => {
+    datas.value = getObjValue(val)
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) getDataApi()
+})
+
+//表格
+const tableRef = ref(null)
+const tableColumn = [{ key: 'name', name: '表名' }]
+const tableData = ref([])
+
+//处理数据
+const getDataApi = async () => {
+    const { data } = await mainApi.tabLazyTree(datas.value)
+    tableData.value = getArrValue(data)
+}
+
+// 行拖拽
+const rowDropTap = (rows) => {
+    tableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableRef.value?.setData(rows)
+    })
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    tableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableData.value = rows
+    })
+}
+
+//提交
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    submitLoading.value = true
+    const rows = tableData.value
+    const ids = arrToId(rows)
+    const { code } = await mainApi.excTabSort(ids)
+    submitLoading.value = false
+    if (code === 200) {
+        window.$message.success('保存成功')
+        dialogClose()
+        emit('finish')
+    }
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false
+    submitLoading.value = false
+    tableData.value = []
+    datas.value = {}
+    emit('close')
+}
+</script>