排序

src/api/modules/tasks/flow.js

@@ -107,12 +107,21 @@ export default {
         }, false)
     },
     //获取预设流程信息
-
     async getFixedFlow(form, msg = true) {
-            return HcApi({
-                url: '/api/blade-meter/task/getFixedFlow',
-                method: 'get',
-                params: form,
-            }, msg)
+        return HcApi({
+            url: '/api/blade-meter/task/getFixedFlow',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+    //排序
+    async batchUpdateSort(form) {
+        return HcApi({
+            url: '/api/blade-business/fixedFlow/remove',
+            method: 'post',
+            data: {
+                list: form,
+            },
+        }, false)
     },
 }

src/views/tasks/flow.vue

@@ -5,16 +5,15 @@
                 <HcIcon name="add" />
                 <span>新建流程</span>
             </el-button>
-            <!-- <el-button hc-btn type="primary" @click="sortClick">
-                <HcIcon name="arrow-up-down" />
-                <span>排序</span>
-            </el-button> -->
+            <hc-tooltip keys="tasks_flow_add">
+                <el-button hc-btn type="warning" @click="tableSortClick">排序</el-button>
+            </hc-tooltip>
         </template>
         <template #extra>
             <el-alert :closable="false" title="同一合同段内，只需要设置重复岗位的流程即可，其他任务岗位，系统将自动推送，无需创建更多任务流" type="error" />
         </template>
         <hc-table
-            
+
             :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
             is-new
         >
@@ -44,29 +43,43 @@
             </template>
         </hc-new-dialog>
 
-        <!-- 排序弹框 -->
-        <hc-new-dialog v-model="sortModal" title="排序" widths="80rem">
-            <hc-table
-                ref="tableRef"
-                ui="hc-test-drop-table"
-                :column="sorttableColumn" :datas="sorttableData" :loading="tableLoading" :index-style="{ width: 80 }"
-                is-new
-                is-row-drop is-sort quick-sort
-                @row-drop="rowDropTap" @row-sort="rowSortTap"
-            />
-            
+        <!-- 排序 -->
+        <hc-new-dialog v-model="sortModal" title="调整排序" widths="80vw" is-table is-footer-center @close="sortModalClose">
+            <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="error" :closable="false" />
+            <div class="hc-table-h">
+                <hc-table
+                    ui="hc-table-row-drop" :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading"
+                    is-row-drop quick-sort is-new :index-style="{ width: 80 }" @row-drop="sortTableRowDrop" @row-sort="sortTableRowDrop"
+                >
+                    <template #key2="{ row }">
+                        <span class="text-link">{{ row?.key2 }}</span>
+                    </template>
+                    <template #action="{ index }">
+                        <span class="text-link text-xl" @click="upSortClick(index)">
+                            <hc-icon name="arrow-up" fill />
+                        </span>
+                        <span class="text-link ml-2 text-xl" @click="downSortClick(index)">
+                            <hc-icon name="arrow-down" fill />
+                        </span>
+                    </template>
+                </hc-table>
+            </div>
             <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="sortModal = false">取消</el-button>
-                    <el-button :loading="sortLoding" hc-btn type="primary" @click="saveSortClick">保存</el-button>
-                </div>
+                <el-button hc-btn @click="sortModalClose">
+                    <hc-icon name="close" />
+                    <span>取消</span>
+                </el-button>
+                <el-button type="primary" hc-btn :loading="sortModalLoading" @click="sortModalSave">
+                    <hc-icon name="check" />
+                    <span>确认</span>
+                </el-button>
             </template>
         </hc-new-dialog>
     </hc-new-card>
 </template>
 
 <script setup>
-import { nextTick, onActivated, onMounted, ref } from 'vue'
+import { nextTick, onActivated, ref } from 'vue'
 import { useAppStore } from '~src/store'
 import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
@@ -101,7 +114,7 @@ const tableColumn = ref([
 const sorttableColumn = ref([
     { key: 'fixedFlowName', name: '流程名称' },
     { key: 'linkUserJoinString', name: '流程详情' },
-  
+
 ])
 const tableData = ref([])
 const sorttableData = ref([])
@@ -117,11 +130,11 @@ const getTableData = async () => {
     if (!error && code === 200) {
         tableData.value = getArrValue(data['records'])
         searchForm.value.total = data.total || 0
-  
+
     } else {
         tableData.value = []
         searchForm.value.total = 0
-       
+
     }
 }
 
@@ -138,7 +151,7 @@ const linkUserJoinString = ref(null)
 const changeId = ref('')
 const handleTableEdit = async (row) => {
     changeId.value = row.id
-  
+
     showEditModal.value = true
     getFlowDetail()
 
@@ -148,7 +161,7 @@ const getFlowDetail = async ()=>{
     if (!error && code === 200) {
         let users = '', res = getObjValue(data)
         const list = getArrValue(res['fixedBranchVOList'])
-      
+
             const item = getObjValue(list[0])['userList']
             for (let index = 0; index < item.length; index++) {
                 const element = item[index]
@@ -157,8 +170,8 @@ const getFlowDetail = async ()=>{
                     } else {
                         users = `${element['userName']}-${element['userId']}`
                     }
-            
-      
+
+
             console.log(users, 'users')
         }
         flowFormData.value = { id: changeId.value, fixedName: res.fixedFlowName, fixedBranchList:res.fixedBranchVOList }
@@ -246,7 +259,7 @@ const handleTableDel = (row) => {
         const { error, code } = await tasksFlowApi.removeFixedFlowData({
             id:row?.id || '',
             name: row?.fixedFlowName,
-          
+
         })
         //处理数据
         if (!error && code === 200) {
@@ -255,29 +268,92 @@ const handleTableDel = (row) => {
         }
     })
 }
+
+
+//表格排序
 const sortModal = ref(false)
-const sortClick = ()=>{
+//显示
+const tableSortClick = () => {
     sortModal.value = true
-    sorttableData.value = Array.from(tableData.value)
+    getSortTableData()
 }
-const tableRef = ref(null)
-// 行拖拽
-const rowDropTap = (rows) => {
-    sorttableData.value = [] // 先清空，否则排序会异常
-    nextTick(() => {
-        tableRef.value?.setData(rows)
+
+//表格数据
+const sortTableColumn = ref([
+    { key: 'fixedFlowName', name: '流程名称' },
+    { key: 'linkUserJoinString', name: '流程详情' },
+    { key:'action', name: '排序', width: 90 },
+])
+const sortTableData = ref([])
+
+//获取数据
+const sortTableLoading = ref(false)
+const getSortTableData = async () => {
+    sortTableLoading.value = true
+    const { error, code, data } = await tasksFlowApi.getPageData({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        current: 1,
+        size: 9999,
     })
+    //处理数据
+    sortTableLoading.value = false
+    if (!error && code === 200) {
+        sortTableData.value = getArrValue(data['records'])
+    } else {
+        sortTableData.value = []
+    }
 }
 
-// 点击排序
-const rowSortTap = (rows) => {
-    sorttableData.value = [] // 先清空，否则排序会异常
+//拖动完成
+const sortTableRowDrop = (rows) => {
+    sortTableData.value = [] // 先清空，否则排序会异常
     nextTick(() => {
-        sorttableData.value = rows
+        sortTableData.value = rows
     })
 }
-const sortLoding = ref(false)
-const saveSortClick = ()=>{
 
+//向下
+const downSortClick = (index) => {
+    const indexs = index + 1
+    const data = sortTableData.value
+    if (indexs !== data.length) {
+        const tmp = data.splice(indexs, 1)
+        sortTableData.value.splice(index, 0, tmp[0])
+    } else {
+        window?.$message?.warning('已经处于置底，无法下移')
+    }
+}
+
+//向上
+const upSortClick = (index) => {
+    const data = sortTableData.value || []
+    if (index !== 0) {
+        const tmp = data.splice(index - 1, 1)
+        sortTableData.value.splice(index, 0, tmp[0])
+    } else {
+        window?.$message?.warning('已经处于置顶，无法上移')
+    }
+}
+
+//保存
+const sortModalLoading = ref(false)
+const sortModalSave = async () => {
+    sortModalLoading.value = true
+    const { error, code } = await tasksFlowApi.batchUpdateSort(sortTableData.value)
+    //判断状态
+    sortModalLoading.value = false
+    if (!error && code === 200) {
+        window.$message?.success('保存成功')
+        sortModal.value = false
+        getTableData().then()
+    } else {
+        window.$message?.error('保存失败')
+    }
+}
+
+//关闭
+const sortModalClose = () => {
+    sortModal.value = false
 }
 </script>