feat(wms/bonus): 新增奖金模板管理功能，优化奖金池页面

1. 新增奖金模板CRUD API和管理组件
2. 重构奖金池页面：替换产线输入为下拉选择，新增时间范围查询和钢卷重量自动计算
3. 优化岗位系数配置页面，仅查询当前用户创建的配置
4. 重构员工选择器组件，改用穿梭框实现多选逻辑
5. 为奖金分配页面新增模板导入导出功能

klp-ui/src/components/EmployeeSelector/index.vue

@@ -10,34 +10,56 @@
     </div>
 
     <!-- 选择对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-input v-model="searchQuery" placeholder="请输入员工姓名或部门" clearable @keyup.enter.native="handleSearch">
+    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
+      <!-- 单选模式：搜索框 -->
+      <el-input v-if="!multiple" v-model="searchQuery" placeholder="请输入员工姓名或部门" clearable @keyup.enter.native="handleSearch">
         <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
       </el-input>
 
-      <!-- 已选员工列表（多选模式） -->
-      <div v-if="multiple && selectedEmployees.length > 0" class="selected-list">
-        <div class="selected-list-title">已选员工 ({{ selectedEmployees.length }})</div>
-        <el-tag v-for="employee in selectedEmployees" :key="employee[keyField]" closable
-          @close="removeSelectedEmployee(employee)" class="selected-tag">
-          {{ employee.name }} ({{ employee.dept }})
-        </el-tag>
+      <!-- 多选模式：穿梭框 -->
+      <el-transfer
+        v-loading="loading"
+        v-if="multiple"
+        v-model="selectedIds"
+        :data="transferData"
+        :titles="['可选员工', '已选员工']"
+        :button-texts="['移除', '添加']"
+        :props="{
+          key: keyField,
+          label: 'label',
+          disabled: 'disabled'
+        }"
+        filterable
+        :filter-method="transferFilterMethod"
+        filter-placeholder="根据员工部门搜索"
+      />
+
+      <!-- 单选模式：表格 -->
+      <div v-if="!multiple" class="table-container">
+        <el-table
+          v-loading="loading"
+          :data="employeeList"
+          style="width: 100%"
+          height="400px"
+          @row-click="handleRowClick"
+          :row-class-name="rowClassName"
+          highlight-current-row
+        >
+          <el-table-column label="部门" align="center" prop="dept" />
+          <el-table-column label="姓名" align="center" prop="name" />
+          <el-table-column label="岗位工种" align="center" prop="jobType" />
+        </el-table>
       </div>
 
-      <el-table v-loading="loading" :data="employeeList" style="width: 100%" height="400px" @row-click="handleRowClick"
-        :row-class-name="rowClassName">
-        <el-table-column label="部门" align="center" prop="dept" />
-        <el-table-column label="姓名" align="center" prop="name" />
-        <el-table-column label="岗位工种" align="center" prop="jobType" />
-        <el-table-column label="联系电话" align="center" prop="phone" />
-      </el-table>
-
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" v-if="multiple">
         <el-button @click="cancelSelection">取消</el-button>
-        <el-button v-if="multiple" type="primary" @click="confirmSelection" :disabled="selectedEmployees.length === 0">
-          确认选择 ({{ selectedEmployees.length }})
+        <el-button type="primary" @click="confirmSelection">
+          确认选择
         </el-button>
       </div>
+      <div slot="footer" class="dialog-footer" v-else>
+        <el-button @click="cancelSelection">取消</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -75,20 +97,20 @@ export default {
   },
   data() {
     return {
-      selectedEmployee: {},
-      selectedEmployees: [],
       rawEmployeeList: [],
       open: false,
       loading: false,
-      searchQuery: ''
+      searchQuery: '',
+      selectedIds: [],
+      selectedId: '',
+      selectedEmployee: {}
     }
   },
   computed: {
-    // 显示在触发器上的文本
     displayText() {
       if (this.multiple) {
-        if (this.selectedEmployees.length > 0) {
-          return `${this.selectedEmployees.length} 人已选择`
+        if (this.selectedIds.length > 0) {
+          return `${this.selectedIds.length} 人已选择`
         } else {
           return this.placeholder
         }
@@ -96,20 +118,25 @@ export default {
         return this.selectedEmployee.name || this.placeholder
       }
     },
-    // 禁用的员工ID列表
     disabledIdList() {
       if (!this.disabledNames) {
         return []
       }
       return this.disabledNames.split(',').map(id => id.trim()).filter(id => id)
     },
-    // 处理后的员工列表，包含禁用状态
     employeeList() {
       return this.rawEmployeeList.filter(employee => {
         return employee.name?.includes(this.searchQuery) || employee.dept?.includes(this.searchQuery)
       }).map(employee => ({
         ...employee,
-        disabled: this.disabledIdList.includes(employee.infoId.toString())
+        disabled: this.disabledIdList.includes(employee[this.keyField].toString())
+      }))
+    },
+    transferData() {
+      return this.employeeList.map(employee => ({
+        [this.keyField]: employee[this.keyField],
+        label: `${employee.dept} - ${employee.name} (${employee.jobType})`,
+        disabled: employee.disabled
       }))
     }
   },
@@ -118,16 +145,16 @@ export default {
       handler(newVal) {
         if (this.multiple) {
           if (newVal) {
-            // 多选模式：根据逗号分隔的字符串查找已选员工
-            this.findSelectedEmployees(newVal.split(','))
+            this.selectedIds = newVal.split(',').map(id => id.trim()).filter(id => id).map(id => isNaN(Number(id)) ? id : Number(id))
           } else {
-            this.selectedEmployees = []
+            this.selectedIds = []
           }
         } else {
           if (newVal) {
             this.findSelectedEmployee(newVal)
           } else {
             this.selectedEmployee = {}
+            this.selectedId = ''
           }
         }
       },
@@ -135,7 +162,6 @@ export default {
     }
   },
   methods: {
-    // 切换对话框显示
     toggleDialog() {
       if (!this.open) {
         this.getEmployeeList()
@@ -143,18 +169,14 @@ export default {
       this.open = !this.open
     },
 
-    // 获取员工列表
     getEmployeeList() {
       this.loading = true
       const params = {
         pageNum: 1,
         pageSize: 9999,
-        // name: this.searchQuery || undefined,
-        // dept: this.searchQuery || undefined
       }
       return new Promise((resolve) => {
         listEmployeeInfo(params).then(response => {
-          // 前端筛选员工列表，根据姓名或部门
           this.rawEmployeeList = response.rows;
           this.loading = false
           resolve()
@@ -165,36 +187,19 @@ export default {
       })
     },
 
-    // 搜索员工
     handleSearch() {
-      this.getEmployeeList()
     },
 
-    // 选择员工
     handleRowClick(row) {
-      // 检查员工是否被禁用
       if (this.isDisabled(row)) {
         return
       }
-
-      if (this.multiple) {
-        // 多选模式：添加或移除员工
-        const index = this.selectedEmployees.findIndex(item => item[this.keyField] === row[this.keyField])
-        if (index > -1) {
-          this.selectedEmployees.splice(index, 1)
-        } else {
-          this.selectedEmployees.push(row)
-        }
-      } else {
-        // 单选模式：选择员工并关闭弹窗
-        this.selectedEmployee = row
-        this.$emit('input', row[this.keyField])
-        this.$emit('change', row)
-        this.open = false
-      }
+      this.selectedEmployee = row
+      this.$emit('input', row[this.keyField])
+      this.$emit('change', row)
+      this.open = false
     },
 
-    // 检查员工是否被禁用
     isDisabled(row) {
       const isDisabled = this.disabledIdList.includes(row[this.keyField].toString())
       if (isDisabled) {
@@ -203,61 +208,17 @@ export default {
       return isDisabled
     },
 
-    // 确认选择（多选模式）
-    confirmSelection() {
-      const selectedIds = this.selectedEmployees.map(item => item[this.keyField])
-      this.$emit('input', selectedIds.join(','))
-      this.$emit('change', this.selectedEmployees)
-      this.open = false
-    },
-
-    cancelSelection() {
-      if (this.multiple) {
-        if (this.value) {
-          // 多选模式：根据逗号分隔的字符串查找已选员工
-          this.findSelectedEmployees(this.value.split(','))
-        } else {
-          this.selectedEmployees = []
-        }
-      } else {
-        if (this.value) {
-          this.findSelectedEmployee(this.value)
-        } else {
-          this.selectedEmployee = {}
-        }
-      }
-      this.open = false
-    },
-
-    // 移除已选员工
-    removeSelectedEmployee(employee) {
-      const index = this.selectedEmployees.findIndex(item => item[this.keyField] === employee[this.keyField])
-      if (index > -1) {
-        this.selectedEmployees.splice(index, 1)
-      }
-    },
-
-    // 表格行样式
     rowClassName({ row }) {
-      // if (this.isDisabled(row)) {
-      //   return 'disabled-row'
-      // }
       if (this.isSelected(row)) {
         return 'selected-row'
       }
       return ''
     },
 
-    // 检查员工是否已选
     isSelected(row) {
-      if (this.multiple) {
-        return this.selectedEmployees.some(item => item[this.keyField] === row[this.keyField])
-      } else {
-        return this.selectedEmployee[this.keyField] === row[this.keyField]
-      }
+      return this.selectedEmployee[this.keyField] === row[this.keyField]
     },
 
-    // 根据value查找选中的员工（单选）
     findSelectedEmployee(value) {
       if (this.employeeList.length > 0) {
         const employee = this.employeeList.find(item => item[this.keyField] === value)
@@ -265,7 +226,6 @@ export default {
           this.selectedEmployee = employee
         }
       } else {
-        // 如果员工列表为空，先获取列表再查找
         this.getEmployeeList().then(() => {
           const employee = this.employeeList.find(item => item[this.keyField] === value)
           if (employee) {
@@ -275,19 +235,35 @@ export default {
       }
     },
 
-    // 根据value查找选中的员工（多选）
-    findSelectedEmployees(values) {
-      if (this.employeeList.length > 0) {
-        this.selectedEmployees = this.employeeList.filter(item => values.includes(item[this.keyField]))
-        // 因为员工可能出现重名，所以需要去重，保证selectedEmployees[i][this.keyField]是唯一的
-        this.selectedEmployees = this.selectedEmployees.filter((item, index, arr) => arr.findIndex(t => t[this.keyField] === item[this.keyField]) === index)
-      } else {
-        // 如果员工列表为空，先获取列表再查找
-        this.getEmployeeList().then(() => {
-          this.selectedEmployees = this.employeeList.filter(item => values.includes(item[this.keyField]))
-          this.selectedEmployees = this.selectedEmployees.filter((item, index, arr) => arr.findIndex(t => t[this.keyField] === item[this.keyField]) === index)
-        })
+    transferFilterMethod(query, item) {
+      return item.label.toLowerCase().includes(query.toLowerCase())
+    },
+
+    confirmSelection() {
+      if (this.multiple) {
+        this.$emit('input', this.selectedIds.join(','))
+        const selectedEmployees = this.rawEmployeeList.filter(item => this.selectedIds.includes(item[this.keyField]))
+        this.$emit('change', selectedEmployees)
       }
+      this.open = false
+    },
+
+    cancelSelection() {
+      if (this.multiple) {
+        if (this.value) {
+          this.selectedIds = this.value.split(',').map(id => id.trim()).filter(id => id).map(id => isNaN(Number(id)) ? id : Number(id))
+        } else {
+          this.selectedIds = []
+        }
+      } else {
+        if (this.value) {
+          this.findSelectedEmployee(this.value)
+        } else {
+          this.selectedEmployee = {}
+          this.selectedId = ''
+        }
+      }
+      this.open = false
     }
   }
 }
@@ -315,39 +291,44 @@ export default {
   border-color: #409eff;
 }
 
-.selected-list {
+.table-container {
+  margin-top: 15px;
+}
+
+::v-deep .el-transfer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::v-deep .el-transfer-panel {
+  width: 380px;
+}
+
+::v-deep .el-transfer-panel__body {
+  height: 450px;
+}
+
+::v-deep .el-transfer__buttons {
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+::v-deep .el-transfer__button {
   margin: 10px 0;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
 }
 
-.selected-list-title {
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: #606266;
-}
-
-.selected-tag {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-.el-table .selected-row {
+::v-deep .el-table .selected-row {
   background-color: #ecf5ff !important;
 }
 
-.el-table .selected-row:hover {
+::v-deep .el-table .selected-row:hover {
   background-color: #ecf5ff !important;
 }
 
-.el-table .disabled-row {
-  background-color: #f5f7fa !important;
-  color: #c0c4cc !important;
+::v-deep .el-transfer-panel__list.is-filterable {
+  height: calc(100% - 60px)
 }
-
-.el-table .disabled-row:hover {
-  background-color: #f5f7fa !important;
-  color: #c0c4cc !important;
-}
-</style>
+</style>