排版页面优化，接口还未完善

src/api/modules/scheduling.js

@@ -6,7 +6,7 @@ export function getScheduleList(params) {
     return service({
         method: "get",
         url: `${API_BASE_URL}/${params.timeQuantumId}`,
-        params: params
+        data: params
     });
 }
 
@@ -20,19 +20,19 @@ export function addSchedule(params) {
 }
 
 // 修改排班
-export function updateSchedule(params) {
-    return service({
-        method: "put",
-        url: `${API_BASE_URL}`,
-        data: params,
-    });
-}
-
-// 删除排班
-export function delSchedule(params) {
-    return service({
-        method: "delete",
-        url: `${API_BASE_URL}`,
-        data: params,
-    });
-}
+// export function updateSchedule(params) {
+//     return service({
+//         method: "put",
+//         url: `${API_BASE_URL}`,
+//         data: params,
+//     });
+// }
+//
+// // 删除排班
+// export function delSchedule(params) {
+//     return service({
+//         method: "delete",
+//         url: `${API_BASE_URL}`,
+//         data: params,
+//     });
+// }

src/views/scheduling/reconnaissance.vue

@@ -1,71 +1,43 @@
 <template>
   <el-card>
 
-    <el-row :gutter="10">
+    <el-col :span="4">
+      <el-button type="success" @click="drawer = true">
+        <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+        创建排班
+      </el-button>
+    </el-col>
 
-      <el-col :span="4">
-        <el-button type="success" @click="drawer = true">
-          <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-          创建排班
-        </el-button>
-      </el-col>
-      <el-form :inline="true" :model="queryData" style="flex: 1">
+    <el-form :inline="true" :model="queryData"  class="mt20">
+      <el-form-item label="排班日期">
+        <el-date-picker
+            v-model="queryData.date"
+            type="date"
+            placeholder="请选择排班日期"
+        />
+      </el-form-item>
 
-        <el-col :span="6">
-          <div class="block">
-            <el-date-picker
-                v-model="queryData.date"
-                type="date"
-                format="yyyy-MM-dd"
-                placeholder="请选择排班日期"
-            />
-          </div>
-        </el-col>
+      <el-form-item label="时段">
+        <el-select
+            v-model="queryData.timeQuantumId"
+            placeholder="请选择排班时段"
+            onchange="handleCurrentChange"
+            style="min-width: 150px"
+        >
+          <el-option
+              v-for="item in timeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
 
-        <el-col :span="10">
-          <el-select
-              v-model="queryData.timeQuantumId"
-              style="max-width: 300px"
-              placeholder="请选择排班时段"
-              onchange="handleCurrentChange"
-          >
-            <el-option
-                v-for="item in timeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-col>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentChange">搜索</el-button>
+      </el-form-item>
 
-        <el-col :span="10" v-if="false">
-          <el-select
-              v-model="queryData.roleId"
-              style="max-width: 300px"
-              placeholder="请选择排班岗位"
-              class="input-with-select"
-              onchange="handleCurrentChange"
-          >
-            <el-option
-                v-for="item in postOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-col>
-        <el-col :span="2">
-          <el-button type="success"  @click="handleCurrentChange">查询</el-button>
-        </el-col>
-        <el-col :span="2">
-          <el-button type="success"  @click="handleCurrentChange">时段管理</el-button>
-        </el-col>
-        <el-col :span="2">
-          <el-button type="success"  @click="handleCurrentChange">排班管理</el-button>
-        </el-col>
-
-      </el-form>
-    </el-row>
+    </el-form>
 
     <el-drawer
         v-model:visible="timeItem"
@@ -110,7 +82,7 @@
         </div>
       </el-form>
     </el-drawer>
-    <el-drawer v-model="drawer" :direction="direction">
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
       <template #header>
         <h4>创建排班</h4>
       </template>
@@ -134,24 +106,24 @@
                   style="width: 240px"
               >
                 <el-option
-                    v-for="item in timeOptions"
+                    v-for="item in timeList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
-                />
+                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="排班人员">
               <el-checkbox-group v-model="scheduleForm.userids" size="large">
-                <el-checkbox-button v-for="item in userList" :key="item.label" :value="item.label">
-                  {{ item.label }}
+                <el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
+                  {{ item.nickName }}
                 </el-checkbox-button>
               </el-checkbox-group>
             </el-form-item>
 
           <div style="display: flex;justify-content: center;margin-top: 50px">
-            <el-button  @click="drawer = false">取消</el-button>
+            <el-button  @click="handleCancelSchedule">取消</el-button>
            <el-button type="success" @click="handleSaveSchedule">确认</el-button>
           </div>
         </el-form>
@@ -296,7 +268,7 @@
 </template>
 <script setup>
 import {listQuantum, addQuantum, updateQuantum, delQuantum} from "../../api/modules/schedulingTime";
-import {getScheduleList, addSchedule, updateSchedule, delSchedule} from "../../api/modules/scheduling";
+import {getScheduleList, addSchedule} from "../../api/modules/scheduling";
 import {listSurveyorsUser, listMaintenanceUser} from "../../api/modules/schedulingUser";
 import {nextTick, onMounted, reactive, ref, watch } from 'vue'
 
@@ -311,18 +283,14 @@ import {
   Star,
 } from '@element-plus/icons-vue'
 const tableData = ref([])
-// const dataList = ref([])
 const table = ref()
-// const tabclickIndex = ref()
-const isExpand = ref(false)
-const disabled = ref(false)
 const dialogVisible = ref(false)
 const total = ref(0)
-const scheduleForm = reactive({
-  id: '',
-  date: '2024-10-16',
-  timeQuantumId: '',
+const scheduleForm = ref({
   userids: [],
+  roleId: 2,
+  date: '',
+  timeQuantumId: '',
 });
 const setup = () => {
   const direction = 'rtl'; // 或者 'ltr', 'ttb', 'btt' 根据需要设置
@@ -407,25 +375,72 @@ const setup = () => {
   };
 };
 
+// 添加排班人员
 const handleSaveSchedule = () => {
-  // 提交表单数据
-  console.log('表单数据:', scheduleForm);
-  // 这里可以添加保存逻辑，比如调用 API
-  if(scheduleForm.id&&scheduleForm.id ===''){
-    addSchedule(scheduleForm).then((res) => {
-      ElMessage({
-        type: 'success',
-        message: '新增成功！'
-      });
-    })
-  } else {
-    updateSchedule(scheduleForm).then((res) => {
-      ElMessage({
-        type: 'success',
-        message: '修改成功！'
-      });
-    })
+
+  if(!scheduleForm.value.date){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排班日期'
+    });
+    return;
   }
+
+  if(!scheduleForm.value.timeQuantumId){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排版时段'
+    });
+    return;
+  }
+
+  if(scheduleForm.value.userids.length < 1){
+    ElMessage({
+      type: 'warning',
+      message: '请选择人员'
+    });
+    return;
+  }
+
+  // 提交表单数据
+  console.log('表单数据:', scheduleForm.value);
+
+  scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
+
+  // 添加人员
+  addSchedule(scheduleForm.value).then((res) => {
+
+    console.log('返回数据', res);
+    ElMessage({
+      type: 'success',
+      message: '新增成功！'
+    });
+
+    // initData();
+  })
+
+};
+
+// 日期格式转换
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+// 取消添加排班人员
+const handleCancelSchedule = () => {
+
+  drawer.value = false;
+
+  scheduleForm.value = {
+    userids: [],
+    roleId: 2,
+    date: '',
+    timeQuantumId: '',
+  };
 };
 
 const drawer = ref(false)
@@ -436,8 +451,8 @@ const queryData = ref({
   page: 1,
   size: 10,
 })
-
-const userList = ref([]);
+const direction = ref('rtl')
+const userList = ref([]); // 勘察人员列表
 
 const timeList = ref([]);
 const timeOptions = ref([]);
@@ -493,23 +508,38 @@ updateTimeOptions();
 // 你可以使用 watch 来监听 timeList 的变更，并自动更新 timeOptions
 
 watch(timeList, updateTimeOptions, { deep: true }); // 深度监听 timeList 的变更
+
+// 初始化数据
 const initData = () => {
+
+  // 获取时间段
   listQuantum().then((res) => {
-    timeList.value = res.data
-  })
-  if(queryData.value.roleId==='2'){
-    listSurveyorsUser().then((res)=>{
+
+    timeList.value = res.data.map(item => ({
+      value: item.id,
+      label: `${item.startTime}-${item.endTime}`
+    }));
+
+  });
+
+  // 查询勘察人员列表
+  listSurveyorsUser().then((res)=>{
       userList.value = res.data
-    });
-  }else if(queryData.value.roleId==='3'){
-    listMaintenanceUser().then((res)=>{
-      userList.value = res.data
-          .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
-            value: item.id,
-            label: item.nickName
-          }));
-    });
-  }
+  });
+
+  // if(queryData.value.roleId==='2'){
+  //   listSurveyorsUser().then((res)=>{
+  //     userList.value = res.data
+  //   });
+  // }else if(queryData.value.roleId==='3'){
+  //   listMaintenanceUser().then((res)=>{
+  //     userList.value = res.data
+  //         .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
+  //           value: item.id,
+  //           label: item.nickName
+  //         }));
+  //   });
+  // }
 }
 
 // 搜索事件
@@ -587,34 +617,6 @@ const handleDel = (item) => {
   });
 }
 
-const itemEditHanld = (item) => {
-  item.itemEdit = !item.itemEdit
-  // // console.log(JSON.stringify(item));
-  // tabclickIndex.value = item;
-}
-const handleSizeChange = (val) => {
-  console.log(val)
-}
-const handleSelectionChange = (val) => {
-}
-const handleClose = () => {
-}
-const dialogVisibleHanle = () => {
-  console.log('滑动加载')
-}
-const handleExpand = () => {
-  isExpand.value = false
-  tableData.value.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpand.value)
-  })
-}
-
-const handleOpen = () => {
-  isExpand.value = true
-  tableData.value.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpand.value)
-  })
-}
 
 onMounted(() => {
   initData();