src/views/emergency/schedule-add-or-update.vue

@@ -2,7 +2,7 @@
   <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
       <el-form-item label="员工姓名" prop="employeeIds">
-            <el-select v-model="dataForm.employeeIds" placeholder="员工姓名" multiple collapse-tags collapse-tags-tooltip>
+            <el-select v-model="dataForm.employeeIds" placeholder="员工姓名" multiple collapse-tags collapse-tags-tooltip clearable>
               <el-option v-for="item in employeeOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option>
           </el-select>
       </el-form-item>
@@ -36,7 +36,7 @@ const visible = ref(false);
 const dataFormRef = ref();
 
 const dataForm = reactive({
-  id: '',yearMonth: '', scheduleDate:'', employeeIds: [] as string[], employeeNames:'', employeeId: 0, employeeName: '', filePath: '',  status: '',  creator: '',  createDate: '',  updater: '',  updateDate: '',  remark: ''});
+  id: '',yearMonth: '', scheduleDate:'', employeeIds: [] as string[], employeeNames:[] as string[], employeeId: 0, employeeName: '', filePath: '',  status: '',  creator: '',  createDate: '',  updater: '',  updateDate: '',  remark: ''});
 
 const rules = ref({
           employeeIds: [
@@ -50,7 +50,7 @@ const rules = ref({
 const props = defineProps<{ defaultDate?: string }>();
 
 const multipleDates = ref<string[]>([]);
-const init = (id?: number, date?: string, dates?: string[]) => {
+const init =async  (id?: number, date?: string, dates?: string[]) => {
   visible.value = true;
   dataForm.id = "";
   dataForm.scheduleDate = date || '';
@@ -58,7 +58,8 @@ const init = (id?: number, date?: string, dates?: string[]) => {
   if (dataFormRef.value) {
     dataFormRef.value.resetFields();
   }
-  fetchEmployeeOptions();
+  await fetchEmployeeOptions();
+  
   multipleDates.value = dates || [];
   if (id) {
     getInfo(id);
@@ -90,9 +91,16 @@ const dataFormSubmitHandle = () => {
     const baseDate = dataForm.scheduleDate || multipleDates.value[0] || '';
     const yearMonth = baseDate.slice(0, 7);
     const dates = multipleDates.value.length > 0 ? multipleDates.value : [dataForm.scheduleDate];
+    
+    const selectedNames = dataForm.employeeIds
+      .map(id => {
+        const match = employeeOptions.value.find(emp => emp.id === id);
+        return match ? match.name : `未知(id:${id})`;
+      });
     const scheduleDTOs = dates.map(date => ({
       scheduleDate: date,
       employeeIds: dataForm.employeeIds,
+      employeeNames: selectedNames,
     }));
 
     const payload = {

src/views/emergency/schedule.vue

@@ -27,25 +27,38 @@
     <!-- <el-calendar v-model="calendarValue" /> -->
     <el-calendar v-model="calendarValue">
       <template #date-cell="{ data }">
-        <div
-          class="calendar-cell"
-          @dblclick="handleDayDblClick(data.day)"
-        >
-        <el-checkbox
-          :label="formatMonthDay(data.day)"
-          :value="data.day"
-          v-model="selectedDates"
-          @click.stop 
-        />
-        <div class="employee-names">
-          <div v-for="(name, index) in (scheduleMap[data.day]?.names || [])" :key="index" class="employee-name" @dblclick.stop>
-            {{ name }}
+        <div class="calendar-cell" @dblclick="handleDayDblClick(data.day)">
+          <div class="checkbox-status">
+            <el-checkbox
+              :label="formatMonthDay(data.day)"
+              :checked="selectedDates.includes(data.day)"
+              @change="(val) => handleDateToggle(data.day, val)"
+              @click.stop
+            />
+            <el-tag
+              v-if="scheduleMap[data.day]?.status !== undefined"
+              :type="scheduleMap[data.day].status == '0' ? 'warning' : 'success'"
+              size="small"
+              class="status-tag"
+            >
+              {{ scheduleMap[data.day].status == '0' ? '未确认' : '已确认' }}
+            </el-tag>
+          </div>
+
+          <div class="employee-names">
+            <div
+              v-for="(name, index) in (scheduleMap[data.day]?.names || [])"
+              :key="index"
+              class="employee-name"
+              @dblclick.stop
+            >
+              {{ name }}
+            </div>
           </div>
-        </div>
         </div>
       </template>
-    </el-calendar>
 
+    </el-calendar>
     <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update ref="addOrUpdateRef" @refreshDataList="refreshAfterAdd">确定</add-or-update>
@@ -65,11 +78,13 @@ const view = reactive({
   getDataListURL: "/emergency/schedule/page",
   getDataListIsPage: true,
   exportURL: "/emergency/schedule/export",
-  deleteURL: "/emergency/schedule"
+  deleteURL: "/emergency/schedule",
+
 });
 
 const state = reactive({ ...useView(view), ...toRefs(view) });
 
+
 //日历
 const calendarValue = ref(new Date())
 const selectedDates = ref<string[]>([]);
@@ -78,48 +93,33 @@ const formatMonthDay = (fullDate: string): string => {
   return `${parts[1]}-${parts[2]}`;
 };
 
-const employeeOptions = ref<{ id: string; name: string }[]>([]);
-// id->姓名
-const employeeIdMap = ref<Record<string, string>>({});
-// 日期->员工姓名数组
-const scheduleMap = ref<Record<string, { id: number; names: string[] }>>({});
+const scheduleMap = ref<Record<string, { id: number; names: string[]; status:string }>>({});
 
-// 构建id->姓名映射
-const fetchEmployeeOptions = async () => {
-  const res = await baseService.get("/emergency/employee/page");
-  employeeOptions.value = res.data.list || [];
-  
-  employeeIdMap.value = {};
-  for (const item of employeeOptions.value) {
-    employeeIdMap.value[item.id] = item.name;
-  }
-};
 const buildScheduleMap = (list: any[]) => {
   scheduleMap.value = {};
   for (const item of list) {
     const day = item.scheduleDate; 
-    //保存的ids
-    const ids = item.employeeIds || [];
-    const names = ids.map((id: string) => employeeIdMap.value[id] || `员工姓名未知,id为${id}`);
-    scheduleMap.value[day] = { id: item.id, names};
-    console.log(list);
-    console.log(scheduleMap.value);
+    scheduleMap.value[day] = { 
+      id: item.id,
+      names: item.employeeNames || [],
+      status: item.status
+    };
+    
   }
 };
 import { onMounted } from 'vue'
 onMounted(async () => {
-  await fetchEmployeeOptions();
   await state.getDataList();
   buildScheduleMap(state.dataList || []);
   
-
+  console.log(state.dataList);
 });
 
 // 新增按钮
 const addHandle = () => {
   if (!selectedDates.value || selectedDates.value.length === 0) {
     ElMessage({
-      message: '请先选择一个或多个日期再新增排班',
+      message: '请选择操作项',
       type: 'warning',
       duration: 500,
     });
@@ -128,12 +128,14 @@ const addHandle = () => {
   // 批量添加
   addOrUpdateHandle(undefined, undefined, selectedDates.value);
 };
-//新增后清除已选中
+
 const refreshAfterAdd = async () => {
-  await fetchEmployeeOptions();
-  await state.getDataList(); 
-  buildScheduleMap(state.dataList || []);       
   selectedDates.value = [];  
+  await state.getDataList(); 
+  
+  console.log(state.dataList);
+  buildScheduleMap(state.dataList || []);   
+  console.log(scheduleMap.value);
 };
 
 const addOrUpdateRef = ref();
@@ -153,6 +155,15 @@ const handleDayDblClick = (day: string) => {
   }
 };
 
+const handleDateToggle = (day: string, checked: boolean) => {
+  const index = selectedDates.value.indexOf(day);
+  if (checked && index === -1) {
+    selectedDates.value.push(day);
+  } else if (!checked && index !== -1) {
+    selectedDates.value.splice(index, 1);
+  }
+};
+
 // 审阅
 const reviewHandle = (id?: string) => {
   if (!id && state.dataListSelections && state.dataListSelections.length <= 0) {
@@ -205,6 +216,21 @@ const reviewHandle = (id?: string) => {
   -webkit-user-select: none;
   -moz-user-select: none;
 }
+.checkbox-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 2px;
+}
+
+.status-tag {
+  font-size: 10px;
+  padding: 0 4px;
+  height: 20px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
 
 
 ::v-deep(.el-calendar-day) {