任务流程排序按钮增加

src/views/tasks/flow.vue

@@ -1,12 +1,23 @@
 <template>
     <hc-new-card>
         <template #header>
-            <el-button hc-btn type="primary" @click="addFlowData">新建流程</el-button>
+            <el-button hc-btn type="primary" @click="addFlowData">
+                <HcIcon name="add" />
+                <span>新建流程</span>
+            </el-button>
+            <el-button hc-btn type="primary" @click="sortClick">
+                <HcIcon name="arrow-up-down" />
+                <span>排序</span>
+            </el-button>
         </template>
         <template #extra>
             <el-alert :closable="false" title="同一合同段内，只需要设置重复岗位的流程即可，其他任务岗位，系统将自动推送，无需创建更多任务流" type="error" />
         </template>
-        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+        <hc-table
+            
+            :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
+            is-new
+        >
             <template #action="{ row }">
                 <el-link type="success" @click="handleTableEdit(row)">修改</el-link>
                 <el-link type="danger" @click="handleTableDel(row)">删除</el-link>
@@ -32,11 +43,30 @@
                 </div>
             </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"
+            />
+            
+            <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>
+            </template>
+        </hc-new-dialog>
     </hc-new-card>
 </template>
 
 <script setup>
-import { onActivated, onMounted, ref } from 'vue'
+import { nextTick, onActivated, onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
 import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
@@ -68,8 +98,13 @@ const tableColumn = ref([
     { key: 'linkUserJoinString', name: '流程详情' },
     { key: 'action', name: '操作', width: 94 },
 ])
+const sorttableColumn = ref([
+    { key: 'fixedFlowName', name: '流程名称' },
+    { key: 'linkUserJoinString', name: '流程详情' },
+  
+])
 const tableData = ref([])
-
+const sorttableData = ref([])
 const getTableData = async () => {
     tableLoading.value = true
     const { error, code, data } = await tasksFlowApi.getPageData({
@@ -82,9 +117,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
+       
     }
 }
 
@@ -217,5 +254,30 @@ const handleTableDel = (row) => {
             getTableData().then()
         }
     })
+}
+const sortModal = ref(false)
+const sortClick = ()=>{
+    sortModal.value = true
+    sorttableData.value = Array.from(tableData.value)
+}
+const tableRef = ref(null)
+// 行拖拽
+const rowDropTap = (rows) => {
+    sorttableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableRef.value?.setData(rows)
+    })
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    sorttableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        sorttableData.value = rows
+    })
+}
+const sortLoding = ref(false)
+const saveSortClick = ()=>{
+
 }
 </script>