排班优化

klp-ui/src/views/wms/hrm/attendance/drag.vue

@@ -53,45 +53,112 @@
     </div>
 
     <!-- 创建排班弹窗 -->
-    <el-dialog title="创建排班" :visible.sync="dialogVisible" width="800px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="时间段" prop="dateRange">
-          <el-date-picker v-model="form.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%;" />
-        </el-form-item>
-        <el-form-item label="选择员工" prop="selectedEmployees">
-          <EmployeeSelector v-model="form.selectedEmployees" :multiple="true" placeholder="请点击选择员工" title="选择排班员工"
-            @change="handleEmployeeSelect" />
-        </el-form-item>
-        <el-form-item label="排班配置" v-if="form.shiftConfig.length > 0">
-          <div class="shift-config">
-            <div v-for="(item, index) in form.shiftConfig" :key="index" class="shift-config-item">
-              <div class="employee-info">
-                <el-button icon="el-icon-delete" type="default" size="mini" @click="handleDeleteEmployee(index)"></el-button>
-                <el-tag type="info">{{ item.employeeName || '员工' + (index + 1) }}</el-tag>
-              </div>
-              <template>
-                <el-select clearable v-model="item.shiftId" placeholder="选择班次" style="width: 150px;">
-                  <el-option v-for="shift in shiftList" :key="shift.shiftId" :label="shift.shiftName"
-                    :value="shift.shiftId" />
-                </el-select>
-                <div class="shift-time" v-if="item.shiftId">
-                  <span class="time-label">工作时间：</span>
-                  <span class="time-value">{{ getShiftTime(item.shiftId) }}</span>
-                </div>
+    <el-dialog title="创建排班" :visible.sync="dialogVisible" width="900px">
+      <!-- 步骤指示器 -->
+      <div class="steps">
+        <div :class="['step', { active: currentStep >= 1, done: currentStep > 1 }]">
+          <span class="step-number">1</span>
+          <span class="step-text">选择班次</span>
+        </div>
+        <div class="step-arrow">→</div>
+        <div :class="['step', { active: currentStep >= 2, done: currentStep > 2 }]">
+          <span class="step-number">2</span>
+          <span class="step-text">分配人员</span>
+        </div>
+        <div class="step-arrow">→</div>
+        <div :class="['step', { active: currentStep >= 3 }]">
+          <span class="step-number">3</span>
+          <span class="step-text">确认生成</span>
+        </div>
+      </div>
 
-                <el-select clearable v-model="item.shiftRuleId" placeholder="选择倒班规则（不倒班则不填）" style="width: 200px;">
-                  <el-option v-for="rule in shiftRuleList" :key="rule.ruleId" :label="rule.ruleName"
-                    :value="rule.ruleId" />
-                </el-select>
-              </template>
+      <!-- 步骤1：选择班次配置 -->
+      <div v-if="currentStep === 1" class="step-content">
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="时间段">
+            <el-date-picker v-model="form.dateRange" type="daterange" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期"
+              value-format="yyyy-MM-dd" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="班次配置">
+            <div class="shift-config-panel">
+              <div v-for="(item, index) in form.shiftList" :key="index" class="shift-config-row">
+                <div class="shift-config-header">
+                  <span class="config-label">班次 {{ index + 1 }}</span>
+                  <el-button icon="el-icon-plus" size="mini" @click="addShiftItem">添加班次</el-button>
+                  <el-button v-if="form.shiftList.length > 1" icon="el-icon-delete" size="mini"
+                    @click="removeShiftItem(index)">删除</el-button>
+                </div>
+                <div class="shift-config-fields">
+                  <el-select v-model="item.shiftId" placeholder="选择班次" style="width: 180px;">
+                    <el-option v-for="shift in shiftList" :key="shift.shiftId"
+                      :label="shift.shiftName" :value="shift.shiftId" />
+                  </el-select>
+                  <span v-if="item.shiftId" class="shift-time-display">
+                    {{ getShiftTime(item.shiftId) }}
+                  </span>
+                  <el-select v-model="item.ruleId" placeholder="倒班规则（可选）" style="width: 180px;">
+                    <el-option v-for="rule in shiftRuleList" :key="rule.ruleId"
+                      :label="rule.ruleName" :value="rule.ruleId" />
+                  </el-select>
+                </div>
+              </div>
             </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 步骤2：为每个班次分配人员 -->
+      <div v-if="currentStep === 2" class="step-content">
+        <div v-for="(item, index) in form.shiftList" :key="index" class="shift-assignment">
+          <div class="assignment-header">
+            <el-tag type="primary">{{ getShiftName(item.shiftId) || '未选择班次' }}</el-tag>
+            <span class="assignment-count">
+              已分配 {{ item.employeeIds ? item.employeeIds.split(',').filter(id => id.trim()).length : 0 }} 人
+            </span>
+            <el-button icon="el-icon-copy" size="mini" @click="copyShiftItem(index)"
+              title="复制班次配置">复制</el-button>
           </div>
-        </el-form-item>
-      </el-form>
+          <EmployeeSelector
+            v-model="item.employeeIds"
+            :multiple="true"
+            :disabled-names="getExcludedIds(index)"
+            placeholder="选择该班次的员工"
+            title="选择班次员工" />
+        </div>
+        <div class="quick-actions">
+          <el-button type="success" icon="el-icon-random" @click="quickAssignByDepartment">
+            按部门自动分配
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 步骤3：确认生成 -->
+      <div v-if="currentStep === 3" class="step-content">
+        <el-table :data="previewData" border style="width: 100%;">
+          <el-table-column prop="shiftName" label="班次" />
+          <el-table-column prop="employeeNames" label="员工列表" />
+          <el-table-column prop="count" label="人数" align="center" />
+        </el-table>
+        <div class="preview-summary">
+          <span>共 {{ totalEmployeeCount }} 名员工，{{ totalScheduleCount }} 条排班记录</span>
+        </div>
+      </div>
+
+      <!-- 步骤导航按钮 -->
       <div slot="footer" class="dialog-footer">
-        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="buttonLoading" :disabled="!canSubmit">确定</el-button>
+        <el-button @click="cancel" v-if="currentStep === 1">取消</el-button>
+        <template v-else>
+          <el-button @click="prevStep">上一步</el-button>
+        </template>
+        <template v-if="currentStep < 3">
+          <el-button type="primary" @click="nextStep" :disabled="!canProceed">
+            {{ currentStep === 1 ? '下一步：分配人员' : '下一步：确认' }}
+          </el-button>
+        </template>
+        <template v-else>
+          <el-button type="primary" @click="submitForm" :loading="buttonLoading">确认生成</el-button>
+        </template>
       </div>
     </el-dialog>
 
@@ -152,11 +219,12 @@ export default {
       shiftRuleList: [],
       dialogVisible: false,
       editDialogVisible: false,
-      scheduleMode: 'single', // single: 普通排班, rotate: 倒班排班
+      currentStep: 1, // 步骤：1-选择班次，2-分配人员，3-确认
       form: {
         dateRange: [],
-        selectedEmployees: '',
-        shiftConfig: []
+        shiftList: [
+          { shiftId: '', ruleId: '', employeeIds: '' }
+        ]
       },
       editForm: {
         shiftId: ''
@@ -174,21 +242,52 @@ export default {
     }
   },
   computed: {
-    canSubmit() {
-      if (!this.form.dateRange || this.form.dateRange.length === 0) {
-        return false
-      }
-      if (!this.form.selectedEmployees) {
-        return false
-      }
-      if (this.form.shiftConfig.length === 0) {
-        return false
-      }
-      if (this.scheduleMode === 'single') {
-        return this.form.shiftConfig.every(item => item.shiftId)
-      } else {
-        return this.form.shiftConfig.every(item => item.shiftRuleId)
+    // 检查是否可以进入下一步
+    canProceed() {
+      if (this.currentStep === 1) {
+        // 步骤1：必须选择时间段和至少一个有效班次
+        if (!this.form.dateRange || this.form.dateRange.length === 0) return false
+        return this.form.shiftList.some(item => item.shiftId)
+      } else if (this.currentStep === 2) {
+        // 步骤2：至少有一个班次分配了人员
+        return this.form.shiftList.some(item => item.employeeIds && item.employeeIds.trim())
       }
+      return true
+    },
+
+    // 预览数据
+    previewData() {
+      return this.form.shiftList
+        .filter(item => item.shiftId && item.employeeIds)
+        .map(item => ({
+          shiftName: this.getShiftName(item.shiftId),
+          employeeNames: this.getEmployeeNames(item.employeeIds),
+          count: item.employeeIds.split(',').filter(id => id.trim()).length
+        }))
+    },
+
+    // 总员工数
+    totalEmployeeCount() {
+      const allIds = new Set()
+      this.form.shiftList.forEach(item => {
+        if (item.employeeIds) {
+          item.employeeIds.split(',').forEach(id => {
+            if (id.trim()) allIds.add(id.trim())
+          })
+        }
+      })
+      return allIds.size
+    },
+
+    // 总排班记录数
+    totalScheduleCount() {
+      let count = 0
+      this.form.shiftList.forEach(item => {
+        if (item.employeeIds) {
+          count += item.employeeIds.split(',').filter(id => id.trim()).length
+        }
+      })
+      return count
     },
     currentShift() {
       if (!this.editForm.shiftId) {
@@ -529,74 +628,113 @@ export default {
 
     // 重置表单
     reset() {
-      this.scheduleMode = 'single'
+      this.currentStep = 1
       this.form = {
         dateRange: [],
-        selectedEmployees: '',
-        shiftConfig: []
+        shiftList: [
+          { shiftId: '', ruleId: '', employeeIds: '' }
+        ]
       }
-      this.resetForm('form')
-    },
-
-    // 员工选择变化时自动生成配置项
-    handleEmployeeSelect(employees) {
-      if (!employees || employees.length === 0) {
-        this.form.shiftConfig = []
-        return
-      }
-
-      // 为每个选中的员工生成配置项
-      if (this.scheduleMode === 'single') {
-        this.form.shiftConfig = employees.map(employee => ({
-          employeeId: employee.infoId,
-          employeeName: employee.name,
-          shiftId: null
-        }))
-      } else {
-        this.form.shiftConfig = employees.map(employee => ({
-          employeeId: employee.infoId,
-          employeeName: employee.name,
-          shiftRuleId: null
-        }))
+      if (this.$refs['form']) {
+        this.$refs['form'].resetFields()
       }
     },
 
-    // 排班模式切换
-    handleScheduleModeChange() {
-      // 模式切换时重新生成配置项
-      if (this.form.selectedEmployees && this.form.selectedEmployees.length > 0) {
-        this.handleEmployeeSelect(this.form.selectedEmployees)
+    // 添加班次配置项
+    addShiftItem() {
+      this.form.shiftList.push({ shiftId: '', ruleId: '', employeeIds: '' })
+    },
+
+    // 移除班次配置项
+    removeShiftItem(index) {
+      this.form.shiftList.splice(index, 1)
+    },
+
+    // 复制班次配置（不复制人员）
+    copyShiftItem(index) {
+      const source = this.form.shiftList[index]
+      this.form.shiftList.push({
+        shiftId: source.shiftId,
+        ruleId: source.ruleId,
+        employeeIds: ''
+      })
+    },
+
+    // 获取排除的员工ID（避免重复分配）
+    getExcludedIds(currentIndex) {
+      const excluded = []
+      this.form.shiftList.forEach((item, index) => {
+        if (index !== currentIndex && item.employeeIds) {
+          excluded.push(...item.employeeIds.split(','))
+        }
+      })
+      return excluded.join(',').trim()
+    },
+
+    // 获取班次名称
+    getShiftName(shiftId) {
+      const shift = this.shiftList.find(s => s.shiftId === shiftId)
+      return shift ? shift.shiftName : '未知班次'
+    },
+
+    // 获取员工姓名（临时实现，实际应从API获取）
+    getEmployeeNames(employeeIds) {
+      if (!employeeIds) return '未分配'
+      return employeeIds.split(',').filter(id => id.trim()).length + ' 名员工'
+    },
+
+    // 下一步
+    nextStep() {
+      if (this.currentStep < 3) {
+        this.currentStep++
       }
     },
 
+    // 上一步
+    prevStep() {
+      if (this.currentStep > 1) {
+        this.currentStep--
+      }
+    },
+
+    // 按部门自动分配
+    quickAssignByDepartment() {
+      this.$message.info('按部门自动分配功能开发中...')
+      // 实际实现时可以调用API获取部门员工列表并分配
+    },
+
     // 提交表单
     submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          this.loading = true;
-          this.buttonLoading = true;
-          // 构建提交数据
-          const list = []
-          for (const item of this.form.shiftConfig) {
-            const payload = {
-              userId: item.employeeId,
-              shiftId: item.shiftId,
-              ruleId: item.shiftRuleId,
-              startDate: this.dateRangeParams.scheduleDateStart.split(' ')[0],
-              endDate: this.dateRangeParams.scheduleDateEnd.split(' ')[0]
-            }
-            list.push(payload)
-          }
+      this.buttonLoading = true
 
-          // 调用API
-          generateenerateSchedule(list).then(response => {
-            this.$modal.msgSuccess('生成成功')
-            this.dialogVisible = false
-            this.loading = false;
-            this.buttonLoading = false;
-            this.getScheduleList()
+      // 构建提交数据
+      const list = []
+      const startDate = this.form.dateRange[0]
+      const endDate = this.form.dateRange[1]
+
+      this.form.shiftList.forEach(shiftItem => {
+        if (!shiftItem.shiftId || !shiftItem.employeeIds) return
+
+        const employeeIds = shiftItem.employeeIds.split(',').filter(id => id.trim())
+        employeeIds.forEach(employeeId => {
+          list.push({
+            userId: employeeId,
+            shiftId: shiftItem.shiftId,
+            ruleId: shiftItem.ruleId,
+            startDate: startDate,
+            endDate: endDate
           })
-        }
+        })
+      })
+
+      // 调用API
+      generateenerateSchedule(list).then(response => {
+        this.$modal.msgSuccess('生成成功')
+        this.dialogVisible = false
+        this.buttonLoading = false
+        this.getScheduleList()
+      }).catch(() => {
+        this.buttonLoading = false
       })
     },
 
@@ -716,4 +854,151 @@ export default {
   font-size: 12px;
   color: #606266;
 }
+
+/* ===== 优化后的排班弹窗样式 ===== */
+
+/* 步骤指示器 */
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 80px;
+}
+
+.step-number {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 50%;
+  background-color: #e4e7ed;
+  color: #909399;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.step.active .step-number {
+  background-color: #409eff;
+  color: #fff;
+}
+
+.step.done .step-number {
+  background-color: #67c23a;
+  color: #fff;
+}
+
+.step-text {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #909399;
+}
+
+.step.active .step-text,
+.step.done .step-text {
+  color: #606266;
+}
+
+.step-arrow {
+  margin: 0 12px;
+  color: #c0c4cc;
+  font-size: 16px;
+}
+
+/* 步骤内容 */
+.step-content {
+  min-height: 200px;
+}
+
+/* 班次配置面板 */
+.shift-config-panel {
+  margin-top: 12px;
+}
+
+.shift-config-row {
+  margin-bottom: 16px;
+  padding: 16px;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+
+.shift-config-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.config-label {
+  font-weight: 600;
+  color: #606266;
+}
+
+.shift-config-fields {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.shift-time-display {
+  font-size: 13px;
+  color: #67c23a;
+  padding: 4px 8px;
+  background-color: #f0f9eb;
+  border-radius: 4px;
+}
+
+/* 班次分配区域 */
+.shift-assignment {
+  margin-bottom: 20px;
+  padding: 16px;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+
+.assignment-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.assignment-count {
+  font-size: 13px;
+  color: #909399;
+}
+
+/* 快速操作按钮 */
+.quick-actions {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px dashed #e4e7ed;
+}
+
+/* 预览摘要 */
+.preview-summary {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #f0f9eb;
+  border-radius: 4px;
+  text-align: center;
+  color: #67c23a;
+  font-size: 14px;
+}
+
+/* 对话框按钮 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
 </style>