客户端树节点 排序

src/api/modules/other.js

@@ -83,7 +83,7 @@ export const getSameGradeNode = (form, msg = true) => httpApi({
 export const submitArchiveTreeSort = (form, msg = true) => httpApi({
     url: '/api/blade-manager/archiveTreeContract/submit-tree-sort',
     method: 'post',
-    params: form
+    data: form
 }, msg);
 
 //同步

src/views/file/collection.vue

@@ -465,6 +465,36 @@
             </template>
         </el-dialog>
 
+
+        <!--调整节点排序-->
+        <HcDialog :show="nodeSortModel" title="调整排序" widths="980px" isTable isRowFooter @close="nodeSortModalClose">
+            <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false"/>
+            <div class="hc-table-h">
+                <HcTable ui="hc-table-row-drop" :column="nodeSortTableColumn" :datas="nodeSortTableData" :loading="nodeSortTableLoading" isRowDrop @row-drop="nodeSortTableRowDrop">
+                    <template #key2="{row}">
+                        <span class="text-link">{{row?.key2}}</span>
+                    </template>
+                    <template #action="{index}">
+                    <span class="text-link text-xl" @click="nodeUpSortClick(index)">
+                        <HcIcon name="arrow-up" fill/>
+                    </span>
+                        <span class="text-link text-xl ml-2" @click="nodeDownSortClick(index)">
+                        <HcIcon name="arrow-down" fill/>
+                    </span>
+                    </template>
+                </HcTable>
+            </div>
+            <template #rightRowFooter>
+                <el-button hc-btn @click="nodeSortModalClose">
+                    <HcIcon name="close"/>
+                    <span>取消</span>
+                </el-button>
+                <el-button type="primary" hc-btn :loading="nodeSortModalLoading" @click="nodeSortModalSave">
+                    <HcIcon name="check"/>
+                    <span>确认</span>
+                </el-button>
+            </template>
+        </HcDialog>
     </div>
 </template>
 
@@ -479,7 +509,7 @@ import {getArrValue, deepClone} from "vue-utils-plus"
 import tasksApi from '~api/tasks/data';
 import ossApi from "~api/oss";
 import archiveFileApi from "~api/archiveFile/archiveFile.js";
-import {roletree,getDictionary,archiveTreeSave,remove,syncProjectTree,archiveTreeDetail,archiveTreeUpdate} from "~api/other";
+import {roletree,getDictionary,archiveTreeSave,remove,syncProjectTree,archiveTreeDetail,archiveTreeUpdate,submitArchiveTreeSort} from "~api/other";
 
 //变量
 const useAppState = useAppStore()
@@ -1395,6 +1425,7 @@ const ElTreeMenu = ref([
     {icon: 'draft', label: '编辑', key: "edit"},
     {icon: 'delete-bin', label: '删除', key: "del"},
     {icon: 'refresh', label: '同步', key: "sync"},
+    {icon: 'sort-asc', label: '排序', key: "sort"}
 ])
 
 //树菜单被点击
@@ -1420,6 +1451,9 @@ const setTreeMenuDataClick = ({key,node,data}) => {
         case 'sync':
             syncNodeMoadl(node);
             break;
+        case 'sort':
+            sortNodeMoadl(node);
+            break;
     }
 }
 
@@ -1578,6 +1612,71 @@ const syncNodeMoadl = (node)=>{
     })
 }
 
+//节点排序
+const nodeSortModel = ref(false)
+const nodeSortTableColumn = ref([
+    {key:'title', name: '节点名称'},
+    {key:'action', name: '排序', width: 90},
+])
+const nodeSortTableData = ref([])
+const nodeSortTableLoading = ref(false)
+const nodeSortModalLoading = ref(false)
+
+
+const nodeSortModalClose = () =>{
+    nodeSortModel.value = false;
+}
+
+const nodeSortTableRowDrop = (rows)=>{
+    nodeSortTableData.value = rows
+}
+//向下
+const nodeDownSortClick = (index) => {
+    const indexs = index + 1
+    const data = nodeSortTableData.value
+    if(indexs !== data.length) {
+        const tmp = data.splice(indexs,1);
+        nodeSortTableData.value.splice(index,0,tmp[0]);
+    } else {
+        window?.$message?.warning('已经处于置底，无法下移')
+    }
+}
+
+//向上
+const nodeUpSortClick = (index) => {
+    const data = nodeSortTableData.value || []
+    if(index !== 0) {
+        const tmp = data.splice(index - 1,1);
+        nodeSortTableData.value.splice(index,0,tmp[0]);
+    } else {
+        window?.$message?.warning('已经处于置顶，无法上移')
+    }
+}
+
+const sortNodeMoadl = (node)=>{
+    nodeSortModel.value = true;
+    //console.log(node)
+    let list = [];
+    if(node.parent){
+        node.parent.childNodes.forEach((element)=>{
+            list.push(element.data)
+        })
+    }
+    nodeSortTableData.value = list;
+}
+
+const nodeSortModalSave = async()=>{
+    nodeSortModalLoading.value = true;
+    const {code,data} = await submitArchiveTreeSort(nodeSortTableData.value)
+    //console.log(res);
+    nodeSortModalLoading.value = false;
+    if (code == 200) {
+        window.$message?.success('修改成功')
+        window?.location?.reload()  //刷新页面
+    }
+    
+}
+
 const ruleFormRef = ref();
 const rules = ref({
     nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],