排序

src/api/modules/tasks/flow.js

@@ -81,5 +81,14 @@ export default {
             data: form,
         }, msg)
     },
-
+    //排序
+    async batchUpdateSort(form) {
+        return HcApi({
+            url: '/api/blade-business/fixedFlow/remove',
+            method: 'post',
+            data: {
+                list: form,
+            },
+        }, false)
+    },
 }

src/views/tasks/flow.vue

@@ -8,6 +8,9 @@
                         <span>新建流程</span>
                     </el-button>
                 </HcTooltip>
+                <hc-tooltip keys="tasks_flow_add">
+                    <el-button hc-btn type="warning" @click="tableSortClick">排序</el-button>
+                </hc-tooltip>
             </template>
             <template #extra>
                 <el-alert
@@ -52,6 +55,38 @@
                 </div>
             </template>
         </el-dialog>
+        <!-- 排序 -->
+        <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 text-xl ml-2" @click="downSortClick(index)">
+                            <hc-icon name="arrow-down" fill />
+                        </span>
+                    </template>
+                </hc-table>
+            </div>
+            <template #footer>
+                <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>
     </div>
 </template>
 
@@ -60,7 +95,7 @@ import { onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
 import { getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
-import { HcDelMsg } from 'hc-vue3-ui'
+
 //变量
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId)
@@ -177,7 +212,7 @@ const saveFormClick = async () => {
         if (!error && code === 200) {
             showEditModal.value = false
             window?.$message?.success('保存成功')
-            getTableData()
+            getTableData().then()
         }
     } else {
         sevaLoading.value = true
@@ -191,7 +226,7 @@ const saveFormClick = async () => {
         if (!error && code === 200) {
             showEditModal.value = false
             window?.$message?.success('保存成功')
-            getTableData()
+            getTableData().then()
         }
     }
 }
@@ -212,9 +247,96 @@ const removeFixedFlowData = async (row) => {
     //处理数据
     if (!error && code === 200) {
         window.$message?.success('删除成功')
-        getTableData()
+        getTableData().then()
+    }
+}
+
+//表格排序
+const sortModal = ref(false)
+//显示
+const tableSortClick = () => {
+    sortModal.value = true
+    getSortTableData()
+}
+
+//表格数据
+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 sortTableRowDrop = (rows) => {
+    sortTableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        sortTableData.value = rows
+    })
+}
+
+//向下
+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>
 
 <style lang="scss" scoped>