From df3902e7eae5dd38a2d47aa63e5f27131f701db9 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期一, 20 四月 2026 13:49:14 +0800
Subject: [PATCH] 绩效管理模块调整

---
 src/views/system/user/index.vue |  148 +++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 129 insertions(+), 19 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 5124927..f7f14d0 100644
--- a/src/views/system/user/index.vue
+++ b/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>
@@ -114,48 +115,61 @@
         </el-row>
         <el-row>
           <el-col :span="12">
+            <el-form-item label="宀椾綅">
+              <el-select style="width:100%" v-model="form.postIds" multiple placeholder="璇烽�夋嫨">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.postId"
+                  :label="item.postName"
+                  :value="item.postId"
+                  :disabled="item.status == 1"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
             <el-form-item label="瑙掕壊" prop="roleIds">
-              <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨瑙掕壊" clearable>
+              <el-select style="width:100%" v-model="form.roleIds" multiple placeholder="璇烽�夋嫨瑙掕壊" clearable>
                 <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
                   :disabled="item.status == 1"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="12">
             <el-form-item label="瀵嗙爜" prop="password">
               <el-input v-model="form.password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" type="password" maxlength="20" show-password />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="濮撳悕EN" prop="nameEn">
               <el-input v-model="form.nameEn" placeholder="璇疯緭鍏ュ鍚岴N" maxlength="50" />
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="12">
             <el-form-item label="閭" prop="email">
               <el-input v-model="form.email" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="鍗曚綅" prop="company">
               <el-select v-model="form.company" placeholder="璇烽�夋嫨鍗曚綅" style="width: 100%" clearable>
-                <el-option v-for="item in postOptions" :key="item.id" :label="item.company"
+                <el-option v-for="item in companyOptions" :key="item.id" :label="item.company"
                   :value="item.id"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="12">
             <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId">
               <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true"
-                placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" />
+                          placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="绛惧悕">
               <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
@@ -166,11 +180,13 @@
               </el-upload>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="12">
             <el-form-item label="涓汉鐓х墖">
               <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
-                :headers="upload.headers" accept=".png, .jpg, .jpeg, .gif" :on-error="handleUploadError1"
-                :on-success="handleUploadSuccess1" :before-upload="handleBeforeUpload1">
+                         :headers="upload.headers" accept=".png, .jpg, .jpeg, .gif" :on-error="handleUploadError1"
+                         :on-success="handleUploadSuccess1" :before-upload="handleBeforeUpload1">
                 <img v-if="form.pictureUrl" :src="javaApi + '/img/' + form.pictureUrl" class="avatar" alt="">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
@@ -278,13 +294,22 @@
   resetUserPwd,
   changeUserStatus,
   deptTreeSelect,
-  selectCompaniesList, selectSimpleList, addPersonUser, uploadFile, selectRoleList, selectCustomEnum, addDepartment
+  selectCompaniesList,
+  selectSimpleList,
+  addPersonUser,
+  uploadFile,
+  selectRoleList,
+  selectCustomEnum,
+  addDepartment,
+  updateUserSort
 } from "@/api/system/user";
+import {optionSelect} from '@/api/system/post'
 import { getToken } from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 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",
@@ -323,6 +348,8 @@
       dateRange: [],
       // 宀椾綅閫夐」
       postOptions: [],
+      //鍗曚綅閫夐」
+      companyOptions:[],
       // 瑙掕壊閫夐」
       roleOptions: [],
       // 琛ㄥ崟鍙傛暟
@@ -354,7 +381,7 @@
       // 鏌ヨ鍙傛暟
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
         nickName: undefined,
         phonenumber: undefined,
         status: undefined,
@@ -387,9 +414,35 @@
         roleIds: [
           { required: true, message: "璇烽�夋嫨瑙掕壊", trigger: "change" }
         ],
-        // password: [
-        //   { required: true, message: "瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" },
-        // ],
+        password: [
+          { required: false, message: "瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" },
+          { min: 8, max: 20, message: "瀵嗙爜闀垮害蹇呴』鍦�8-20涓瓧绗︿箣闂�", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback();
+                return;
+              }
+              // 妫�鏌ユ槸鍚﹀寘鍚ぇ鍐欏瓧姣�
+              const hasUpperCase = /[A-Z]/.test(value);
+              // 妫�鏌ユ槸鍚﹀寘鍚皬鍐欏瓧姣�
+              const hasLowerCase = /[a-z]/.test(value);
+              // 妫�鏌ユ槸鍚﹀寘鍚壒娈婄鍙�
+              const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
+
+              if (!hasUpperCase) {
+                callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓ぇ鍐欏瓧姣�'));
+              } else if (!hasLowerCase) {
+                callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓皬鍐欏瓧姣�'));
+              } else if (!hasSpecialChar) {
+                callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓壒娈婄鍙�'));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
         phonenumber: [
           {
             required: true,
@@ -417,6 +470,7 @@
         fatherId: 10001,
         nickName: '',
       },
+      sortTable: null,
     };
   },
   watch: {
@@ -432,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锛氬師绱㈠紩锛宯ewIndex锛氭柊绱㈠紩
+          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;
@@ -677,10 +776,11 @@
       this.reset();
       this.open = true;
       selectCustomEnum().then(res => {
-        this.postOptions = res.data;
+        this.companyOptions = res.data;
       })
       getUser().then(response => {
         this.roleOptions = response.roles;
+        this.postOptions = response.posts
         this.title = "娣诲姞鐢ㄦ埛";
       });
     },
@@ -688,7 +788,7 @@
     handleUpdate(row) {
       this.reset();
       selectCustomEnum().then(res => {
-        this.postOptions = res.data;
+        this.companyOptions = res.data;
       })
       const userId = row.userId || this.ids;
       getUser(userId).then(response => {
@@ -696,6 +796,8 @@
         this.form.password = ''
         this.roleOptions = response.roles;
         this.$set(this.form, "roleIds", response.roleIds);
+        this.postOptions = response.posts
+        this.$set(this.form, "postIds", response.postIds);
         this.open = true;
         this.title = "淇敼鐢ㄦ埛";
       });
@@ -856,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;

--
Gitblit v1.9.3