排班表，为完成

2024-10-15 18:00:37 +08:00
parent 84deb1f932
commit 643f68f26c
5 changed files with 413 additions and 191 deletions
@@ -2,11 +2,11 @@ import service from "../request.js";
 const API_BASE_URL = '/schedule';

 // 添加排班
-export function getScheduleList(query) {
+export function getScheduleList(params) {
    return service({
-        method: "post",
-        url: `${API_BASE_URL}/list`,
-        data: query,
+        method: "get",
+        url: `${API_BASE_URL}/${params.timeQuantumId}`,
+        params: params
    });
 }

@@ -22,8 +22,8 @@ export function updateSchedule(params) {
 // 删除排班
 export function delSchedule(params) {
    return service({
-        method: "put",
+        method: "delete",
        url: `${API_BASE_URL}`,
        data: params,
    });
-}
+}
@@ -0,0 +1,36 @@
+import service from "../request.js";
+const API_BASE_URL = '/time/quantum';
+
+// 获取排班时段列表
+export function listQuantum() {
+    return service({
+        method: "get",
+        url: `${API_BASE_URL}`
+    });
+}
+
+// 修改排班时段
+export function addQuantum(params) {
+    return service({
+        method: "post",
+        url: `${API_BASE_URL}`,
+        data: params,
+    });
+}
+
+// 修改排班时段
+export function updateQuantum(params) {
+    return service({
+        method: "put",
+        url: `${API_BASE_URL}`,
+        data: params,
+    });
+}
+
+// 删除排班时段
+export function delQuantum(id) {
+    return service({
+        method: "delete",
+        url: `${API_BASE_URL}/`+id
+    });
+}
@@ -0,0 +1,20 @@
+import service from "../request.js";
+const API_BASE_URL = '/user';
+
+// 查询勘察人员列表
+export function listSurveyorsUser(query) {
+    return service({
+        method: "get",
+        url: `${API_BASE_URL}/`,
+        params: query
+    });
+}
+
+// 查询勘察人员列表
+export function listMaintenanceUser(query) {
+    return service({
+        method: "get",
+        url: `${API_BASE_URL}/`,
+        params: query
+    });
+}
@@ -1,86 +0,0 @@
-export const options = [
-    {
-    userId: 1,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '高永建',
-      nickname: '软件开发老高',
-      mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },
-  {
-    userId: 2,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '张三',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-10 10:11:01'
-  },
-  {
-    userId: 3,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '李四',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-13 10:11:01'
-  },
-  {
-    userId: 4,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-02 10:11:01'
-  },{
-    userId: 5,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-01 10:11:01'
-  },
-  {
-    userId: 6,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },{
-    userId: 7,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },{
-    userId: 8,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },{
-    userId: 9,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },{
-    userId: 10,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },
-  {
-    userId: 11,
-    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
-    name: '名称',
-    nickname: '软件开发老高',
-    mobile: '19136448763',
-    date: '2024-10-11 10:11:01'
-  },
-
-];
@@ -9,66 +9,101 @@
          创建排班
        </el-button>
      </el-col>
+      <el-form :inline="true" :model="queryData" style="flex: 1">

-      <el-col :span="4">
-        <div class="block">
-          <el-date-picker
-              v-model="registerDate"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="注册开始日期"
-              end-placeholder="注册截至日期"
-              :size="size"
-          />
-        </div>
-      </el-col>
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询微信昵称"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
+        <el-col :span="6">
+          <div class="block">
+            <el-date-picker
+                v-model="queryData.date"
+                type="date"
+                format="yyyy-MM-dd"
+                placeholder="请选择排班日期"
+            />
+          </div>
+        </el-col>

-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
+        <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-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询名字"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
+        <el-col :span="10">
+          <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>

-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询手机号"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
-
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
+      </el-form>
    </el-row>

+    <el-drawer
+        v-model:visible="timeItem"
+        :direction="direction"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+        :show-close="false"
+        title="创建/编辑时间段"
+    >
+      <el-form
+          :model="timeForm"
+          label-width="120px"
+          :rules="formRules"
+          ref="timeFormRef"
+          style="max-width: 600px"
+      >
+        <el-form-item label="起始时间" prop="startTime">
+          <el-time-picker
+              v-model="timeForm.startTime"
+              placeholder="请选择起始时间"
+              :picker-options="startTimeOptions"
+              format="HH:mm"
+              value-format="HH:mm"
+          ></el-time-picker>
+        </el-form-item>

+        <el-form-item label="结束时间" prop="endTime">
+          <el-time-picker
+              v-model="timeForm.endTime"
+              placeholder="请选择结束时间"
+              :picker-options="endTimeOptions"
+              format="HH:mm"
+              value-format="HH:mm"
+              @change="checkEndTime"
+          ></el-time-picker>
+        </el-form-item>
+
+        <div style="display: flex; justify-content: flex-end; margin-top: 20px">
+          <el-button @click="timeItem = false">取消</el-button>
+          <el-button type="primary" @click="handleSave">确认</el-button>
+        </div>
+      </el-form>
+    </el-drawer>
    <el-drawer v-model="drawer" :direction="direction">
      <template #header>
        <h4>创建排班</h4>
@@ -93,7 +128,7 @@
                  style="width: 240px"
              >
                <el-option
-                    v-for="item in timeList"
+                    v-for="item in timeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
@@ -121,6 +156,65 @@
  </el-card>

  <el-card class="mt10">
+    <el-button type="success" @click="timeItem = true">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建时段
+    </el-button>
+    <el-table
+        ref="timeTable"
+        :data="timeList"
+        :default-sort="{ prop: 'id', order: 'ascending' }"
+        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        border
+        stripe
+        style="width: 100%"
+    >
+
+      <el-table-column
+          label="序号"
+          prop="id"
+          width="80"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      >
+      </el-table-column>
+
+      <el-table-column
+          label="起始时间"
+          prop="startTime"
+          align="center"
+          show-overflow-tooltip
+      />
+
+      <el-table-column
+          label="结束时间"
+          prop="startTime"
+          align="center"
+          show-overflow-tooltip
+      />
+
+      <el-table-column
+          label="状态"
+          prop="flag"
+          width="80"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="操作"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+      >
+        <template v-slot:default="scope">
+          <el-button type="info" :icon="Edit" @click="handleEditQuantum(scope.row)">编辑</el-button>
+          <el-button type="danger" :icon="Delete" @click="handleDel(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <br/>
    <el-table
        ref="table"
        :data="tableData"
@@ -195,34 +289,123 @@
  </el-card>
 </template>
 <script setup>
-// import * as XLSX from 'xlsx'
-// import {
-//   Edit,
-//   Delete,
-//   InfoFilled,
-//   View,
-//   ArrowDownBold,
-//   Plus,
-// } from '@element-plus/icons-vue'
-import {nextTick, onMounted, reactive, ref} from 'vue'
+import {listQuantum, addQuantum, updateQuantum, delQuantum} from "../../api/modules/schedulingTime";
+import {getScheduleList, updateSchedule, delSchedule} from "../../api/modules/scheduling";
+import {listSurveyorsUser, listMaintenanceUser} from "../../api/modules/schedulingUser";
+import {nextTick, onMounted, reactive, ref, watch } from 'vue'

 import {options} from './options.js'
-
+import {Plus} from "@element-plus/icons-vue";
+import {ElMessage, ElMessageBox, timelineItemProps} from "element-plus";
+import {
+  Check,
+  Delete,
+  Edit,
+  Message,
+  Search,
+  Star,
+} from '@element-plus/icons-vue'
+import {approve} from "../../api/modules/postApply";
 const tableData = ref([])
 // const dataList = ref([])
 const table = ref()
 // const tabclickIndex = ref()
 const isExpand = ref(false)
-const columnData = ref(JSON.parse(JSON.stringify(options)))
 const disabled = ref(false)
 const dialogVisible = ref(false)
 const total = ref(0)
 const formInline = ref({})
 const registerDate = ref('');
 const searchName = ref('');
+const setup = () => {
+  const direction = 'rtl'; // 或者 'ltr', 'ttb', 'btt' 根据需要设置
+  const timeForm = reactive({
+    startTime: '',
+    endTime: '',
+  });
+  const timeItem = ref(false)
+  const timeItemEdit = ref(false)
+  const formRules = {
+    startTime: [
+      { required: true, message: '请输入起始时间', trigger: 'blur' },
+    ],
+    endTime: [
+      { required: true, message: '请输入结束时间', trigger: 'blur' },
+      { validator: validateEndTime, trigger: 'change' },
+    ],
+  };
+  const timeFormRef = ref(null);
+  const startTimeOptions = {
+    selectableRange: '00:00:00 - 23:59:59',
+    format: 'HH:mm',
+    valueFormat: 'HH:mm',
+  };
+  const endTimeOptions = {
+    ...startTimeOptions,
+    // 可以在这里添加额外的限制，但通常我们在验证函数中处理
+  };
+  const validateEndTime = (rule, value, callback) => {
+    const startTime = timeForm.startTime;
+    if (!value) {
+      return callback(new Error('请输入结束时间'));
+    }
+    if (new Date(`1970-01-01T${startTime}:00Z`).getTime() >= new Date(`1970-01-01T${value}:00Z`).getTime()) {
+      return callback(new Error('起始时间必须小于结束时间'));
+    }
+    callback();
+  };
+
+  const checkEndTime = (value) => {
+    timeFormRef.value.validateField('endTime');
+  };
+
+  const handleSaveQuantum = () => {
+    timeFormRef.value.validate((valid) => {
+      if (valid) {
+        // 提交表单数据
+        console.log('表单数据:', timeForm);
+        // 这里可以添加保存逻辑，比如调用 API
+        if(itemForm.id&&itemForm.id ===''){
+          addQuantum(itemForm).then((res) => {
+            ElMessage({
+              type: 'success',
+              message: '新增成功！'
+            });
+          })
+        } else {
+          updateQuantum(itemForm).then((res) => {
+            ElMessage({
+              type: 'success',
+              message: '修改成功！'
+            });
+          })
+        }
+        timeItem.value = false; // 保存后关闭抽屉
+      } else {
+        console.log('表单验证失败!');
+        return false;
+      }
+    });
+  };
+
+  return {
+    timeItem,
+    direction,
+    timeForm,
+    formRules,
+    timeFormRef,
+    startTimeOptions,
+    endTimeOptions,
+    handleSaveQuantum,
+  };
+};
+
+
 const drawer = ref(false)
 const queryData = ref({
-  keyWord: '',
+  date: '',
+  timeQuantumId: '',
+  roleId: '2',
  page: 1,
  size: 10,
 })
@@ -297,26 +480,16 @@ const userList = [

 const isTime = ref(''); // 选中时间段

-const timeList = [
-  {
-    value: '1',
-    label: '9:00-11:00',
-  },
+const timeList = ref([]);
+const timeOptions = ref([]);
+const postOptions = [
  {
    value: '2',
-    label: '11:00-12:00',
+    label: '勘察人员',
  },
  {
    value: '3',
-    label: '13:00-14:00',
-  },
-  {
-    value: '4',
-    label: '14:00-15:00',
-  },
-  {
-    value: '5',
-    label: '15:00-16:00',
+    label: '维修人员',
  },
 ];

@@ -345,19 +518,108 @@ const disablePastAndSpecificDates = (date) => {
  });
 };

+function updateTimeOptions() {
+  // 假设 timeList 是响应式的，并且已经包含了最新的数据
+  timeOptions.value = timeList.value
+      .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
+        value: item.id,
+        label: `${item.startTime}-${item.endTime}`
+      }));
+}
+
+// 初始调用或监听 timeList 变更时调用
+updateTimeOptions();
+
+// 如果 timeList 是响应式的，并且你使用的是 Vue 3 的 Composition API，
+// 你可以使用 watch 来监听 timeList 的变更，并自动更新 timeOptions
+
+watch(timeList, updateTimeOptions, { deep: true }); // 深度监听 timeList 的变更
 const initData = () => {

  // 获取当前日期
  isDate.value = new Date();

-  tableData.value = columnData.value;
-
-  // orderLists(queryData.value).then((res) => {
-  //   console.log(res.data.data)
-  //   // total.value = res.data.data.total
-  //   tableData.value = res.data.data
-  // })
+  listQuantum().then((res) => {
+    timeList.value = res.data
+  })
 }
+
+// 搜索事件
+const handleCurrentChange = (val) => {
+  console.log("调试： queryData.value.date="+queryData.value.date);
+//  queryData.value.date = queryData.value.date === ''?'':queryData.value.date.substring(0,10)
+  console.log("调试： queryData.value.date="+queryData.value.date);
+  getScheduleList(queryData.value).then((res) => {
+    console.log(res.data)
+    // total.value = res.data.total
+    tableData.value = res.data
+  })
+}
+
+const handleEditQuantum = (item) => {
+  ElMessageBox.confirm('确定要删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 只有当用户点击确定时，才调用 delQuantum
+    delQuantum(item.id).then((res) => {
+      // 假设 res 表示删除成功，且不需要处理 res 的内容
+      ElMessage({
+        type: 'success',
+        message: '删除成功！'
+      });
+
+      // 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
+      timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
+
+      // 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
+    }).catch((error) => {
+      // 处理删除失败的情况
+      console.error('删除失败:', error);
+      ElMessage({
+        type: 'error',
+        message: '删除失败，请重试。'
+      });
+
+      // 如果需要，可以在这里恢复 item 的状态或其他操作
+    });
+  }).catch(() => {
+  });
+}
+
+const handleDel = (item) => {
+  ElMessageBox.confirm('确定要删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 只有当用户点击确定时，才调用 delQuantum
+    delQuantum(item.id).then((res) => {
+      // 假设 res 表示删除成功，且不需要处理 res 的内容
+      ElMessage({
+        type: 'success',
+        message: '删除成功！'
+      });
+
+      // 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
+      timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
+
+      // 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
+    }).catch((error) => {
+      // 处理删除失败的情况
+      console.error('删除失败:', error);
+      ElMessage({
+        type: 'error',
+        message: '删除失败，请重试。'
+      });
+
+      // 如果需要，可以在这里恢复 item 的状态或其他操作
+    });
+  }).catch(() => {
+  });
+}
+
 const itemEditHanld = (item) => {
  item.itemEdit = !item.itemEdit
  // // console.log(JSON.stringify(item));
@@ -368,11 +630,6 @@ const handleSizeChange = (val) => {
 }
 const handleSelectionChange = (val) => {
 }
-const handleCurrentChange = (val) => {
-  queryData.value.size = 10
-  queryData.value.page = val
-  initData(queryData.value)
-}
 const handleClose = () => {
 }
 const dialogVisibleHanle = () => {
@@ -392,11 +649,6 @@ const handleOpen = () => {
  })
 }

-// 搜索事件
-const searchEvnt = ()=> {
-  console.log('点击搜索');
-};
-
 onMounted(() => {
  initData();
 })