绩效管理模块调整

zouyu

2026-04-20 df3902e7eae5dd38a2d47aa63e5f27131f701db9

 src/views/system/user/index.vue

@@ -47,7 +47,7 @@
            </div>
          </div>
          <el-col>
            <el-table v-loading="loading" :data="userList" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
            <el-table row-id="userId" ref="dragTable" v-loading="loading" :data="userList" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
              <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 +75,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 +300,8 @@
  uploadFile,
  selectRoleList,
  selectCustomEnum,
  addDepartment
  addDepartment,
  updateUserSort
} from "@/api/system/user";
import {optionSelect} from '@/api/system/post'
import { getToken } from "@/utils/auth";
@@ -307,6 +309,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 +381,7 @@
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pageSize: 20,
        nickName: undefined,
        phonenumber: undefined,
        status: undefined,
@@ -467,6 +470,7 @@
        fatherId: 10001,
        nickName: '',
      },
      sortTable: null,
    };
  },
  watch: {
@@ -482,7 +486,52 @@
      this.initPassword = response.msg;
    });
  },
  mounted(){
    // 挂载后初始化拖拽
    this.initDrag()
  },
  methods: {
    //表格行拖拽排序
    initDrag() {
      // 获取 el-table 的 tbody 元素（拖拽的目标容器）
      const tbody = this.$refs.dragTable.$el.querySelector(
        '.el-table__body-wrapper tbody'
      )

      // 初始化 Sortable
      this.sortable = Sortable.create(tbody, {
        animation: 150, // 拖拽动画过渡时长
        ghostClass: 'sortable-ghost', // 拖拽占位符样式
        chosenClass: 'sortable-chosen', // 选中行样式
        dragClass: 'sortable-drag', // 拖拽元素样式
        // 拖拽结束触发（核心逻辑）
        onEnd: ({ oldIndex, newIndex }) => {
          // oldIndex：原索引，newIndex：新索引
          const defNum = (this.queryParams.pageNum-1)*this.queryParams.pageSize
          // const row = this.userList[oldIndex]
          // let sort = newIndex+defNum;//排序下标
          const row = this.userList.splice(oldIndex, 1)[0]
          this.userList.splice(newIndex, 0, row)
          const data = this.userList.map(item=>{return {userId:item.userId,userName:item.userName}})
          console.log(data)
          console.log(this.userList)
          // 调用接口更新排序
          // let data = {
          //   userId:row.userId,
          //   sort: sort
          // }
          // updateUserSort(data).then(res=>{
          //   if(res.code===200){
          //     this.$message.success("更新成功")
          //     this.$nextTick(()=>{
          //       this.getList()
          //     })
          //   }
          // })

        },
      })
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
@@ -909,6 +958,14 @@
</script>

<style scoped lang="scss">
:deep(.sortable-ghost) {
  opacity: 0.8;
  background: #f0f9eb;
}
:deep(.sortable-chosen) {
  cursor: move;
  background: #e1f3d8;
}
.search_form {
  display: flex;
  justify-content: space-between;