From b0d4df5f39525ae7fe252e8ee65d85fd71dca721 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 07 五月 2026 14:53:32 +0800
Subject: [PATCH] 手动下单：检验中订单撤销报错问题修复
---
src/views/system/user/index.vue | 137 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 128 insertions(+), 9 deletions(-)
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 3306ae7..7ff8d4e 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -47,7 +47,12 @@
</div>
</div>
<el-col>
- <el-table v-loading="loading" :data="userList" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
+ <el-table ref="dragTable" v-loading="loading" row-key="userId" :data="userList" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
+ <el-table-column label="鎷栨嫿" align="center" width="60">
+ <template slot-scope="scope">
+ <i class="el-icon-rank drag-handle" :data-user-id="scope.row.userId"></i>
+ </template>
+ </el-table-column>
<el-table-column label="搴忓彿" align="center" type="index" />
<el-table-column label="濮撳悕" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="璐﹀彿" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
@@ -75,6 +80,7 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+ :page-sizes="[20,50,100,200,500]"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</el-col>
</pane>
@@ -299,7 +305,8 @@
uploadFile,
selectRoleList,
selectCustomEnum,
- addDepartment
+ addDepartment,
+ updateUserSort
} from "@/api/system/user";
import {optionSelect} from '@/api/system/post'
import { getToken } from "@/utils/auth";
@@ -307,6 +314,7 @@
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
+import Sortable from "sortablejs";
export default {
nickName: "User",
@@ -378,7 +386,7 @@
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
- pageSize: 10,
+ pageSize: 20,
nickName: undefined,
phonenumber: undefined,
status: undefined,
@@ -467,6 +475,8 @@
fatherId: 10001,
nickName: '',
},
+ sortTable: null,
+ sortSaving: false,
};
},
watch: {
@@ -482,16 +492,103 @@
this.initPassword = response.msg;
});
},
+ beforeDestroy() {
+ this.destroyDrag()
+ },
methods: {
+ // 琛ㄦ牸琛屾嫋鎷芥帓搴�
+ destroyDrag() {
+ if (this.sortTable) {
+ this.sortTable.destroy()
+ this.sortTable = null
+ }
+ },
+ syncDragDisabledState() {
+ if (this.sortTable) {
+ this.sortTable.option('disabled', this.loading || this.sortSaving)
+ }
+ },
+ initDrag() {
+ this.destroyDrag()
+ if (!this.$refs.dragTable || !this.userList || this.userList.length === 0) {
+ return
+ }
+
+ // 鑾峰彇 el-table 鐨� tbody 鍏冪礌锛堟嫋鎷界殑鐩爣瀹瑰櫒锛�
+ const tbody = this.$refs.dragTable.$el.querySelector(
+ '.el-table__body-wrapper tbody'
+ )
+ if (!tbody) {
+ return
+ }
+
+ // 鍒濆鍖� Sortable
+ this.sortTable = Sortable.create(tbody, {
+ animation: 150, // 鎷栨嫿鍔ㄧ敾杩囨浮鏃堕暱
+ ghostClass: 'sortable-ghost', // 鎷栨嫿鍗犱綅绗︽牱寮�
+ chosenClass: 'sortable-chosen', // 閫変腑琛屾牱寮�
+ dragClass: 'sortable-drag', // 鎷栨嫿鍏冪礌鏍峰紡
+ handle: '.drag-handle',
+ disabled: this.loading || this.sortSaving,
+ // 鎷栨嫿缁撴潫瑙﹀彂锛堟牳蹇冮�昏緫锛�
+ onEnd: async({ oldIndex, newIndex }) => {
+ if (
+ this.loading ||
+ this.sortSaving ||
+ oldIndex === newIndex ||
+ oldIndex === undefined ||
+ newIndex === undefined
+ ) {
+ return
+ }
+
+ const previousList = [...this.userList]
+ const row = this.userList.splice(oldIndex, 1)[0]
+ if (!row) {
+ this.userList = previousList
+ return
+ }
+ this.userList.splice(newIndex, 0, row)
+
+ const pageOffset =
+ (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+ const data = this.userList.map((item, index) => ({
+ id: item.userId,
+ sort: pageOffset + index + 1
+ }))
+
+ this.sortSaving = true
+ this.syncDragDisabledState()
+ try {
+ await updateUserSort(data)
+ this.$message.success('鏇存柊鎺掑簭鎴愬姛')
+ } catch (error) {
+ this.userList = previousList
+ this.$message.error('鏇存柊鎺掑簭澶辫触')
+ } finally {
+ this.sortSaving = false
+ this.$nextTick(() => {
+ this.syncDragDisabledState()
+ })
+ }
+ }
+ })
+ },
/** 鏌ヨ鐢ㄦ埛鍒楄〃 */
getList() {
- this.loading = true;
+ this.loading = true
+ this.syncDragDisabledState()
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
- this.userList = response.rows;
- this.total = response.total;
- this.loading = false;
- }
- );
+ this.userList = response.rows
+ this.total = response.total
+ this.loading = false
+ this.$nextTick(() => {
+ this.initDrag()
+ })
+ }).catch(() => {
+ this.loading = false
+ this.destroyDrag()
+ })
},
// 鎵撳紑娣诲姞鏋舵瀯寮规
addSchema() {
@@ -909,6 +1006,28 @@
</script>
<style scoped lang="scss">
+:deep(.drag-handle) {
+ cursor: grab;
+ color: #909399;
+ font-size: 16px;
+ display: inline-block;
+ user-select: none;
+}
+:deep(.drag-handle:hover) {
+ color: #409EFF;
+ cursor: grab;
+}
+:deep(.drag-handle:active) {
+ cursor: grabbing;
+}
+:deep(.sortable-ghost) {
+ opacity: 0.8;
+ background: #f0f9eb;
+}
+:deep(.sortable-chosen) {
+ cursor: move;
+ background: #e1f3d8;
+}
.search_form {
display: flex;
justify-content: space-between;
--
Gitblit v1.9.3