feat: 新增灵活跟班设置

guzijian
1 parent 9aeb947a
Showing 2 changed files with 246 additions and 26 deletions
src/api/expand/expand.js
src/views/expand/expand/index.vue
@@ -42,3 +42,29 @@ export function delExpand(id) {
     method: 'delete'
   })
 }
+
+export function addSmartExpand(data) {
+  return request({
+    url: '/expand/expand/addSmartExpand',
+    method: 'post',
+    data
+  })
+}
+
+
+export function querySmartExpand(params) {
+  return request({
+    url: '/expand/expand/querySmartExpand',
+    method: 'get',
+    params
+  })
+}
+
+
+export function updateSmartExpand(data) {
+  return request({
+    url: '/expand/expand/updateSmartExpand',
+    method: 'put',
+    data
+  })
+}
@@ -18,33 +18,31 @@
         <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['expand:expand:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
-          v-hasPermi="['expand:expand:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
-          v-hasPermi="['expand:expand:remove']">删除</el-button>
+        <el-button type="primary" plain icon="Plus" @click="handleSmartAdd"
+          v-hasPermi="['expand:expand:smart:add']">灵活跟班</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-    <el-table v-loading="loading" border :data="expandList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" max-height="600" border :data="expandList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="驾驶员" align="center" prop="master" width="120" />
       <el-table-column label="跟班人" align="center" prop="slave" width="120" />
-      <el-table-column label="开始日期" align="center" prop="startDate" width="180">
+      <el-table-column label="时间范围" align="center" width="260">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
+          <span>
+            {{ parseTime(scope.row.startDate, '{y}-{m}-{d}') + "到"
+      + parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="结束日期" align="center" prop="endDate" width="180">
+      <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column label="类型" align="center" prop="type" width="180">
         <template #default="scope">
-          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          <dict-tag :options="expand_type" :value="scope.row.type" />
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
@@ -58,8 +56,8 @@
       </el-table-column>
     </el-table>
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
     <!-- 添加或修改跟班设置对话框 -->
     <el-dialog :title="title" v-loading="openLoading" v-model="open" width="500px" append-to-body>
@@ -67,7 +65,7 @@
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label
-            }}</el-radio>
+              }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="驾驶员" prop="masterJobCode">
@@ -101,18 +99,106 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 添加或修改跟班设置对话框 -->
+    <el-dialog v-loading="openLoading" v-model="smartOpen" width="800px" append-to-body draggable>
+      <div style="display: flex; justify-content: space-between;">
+        <!-- el-timeline 时间线控制 -->
+        <div>
+          <div>
+            <h3> 跟班计划 </h3>
+          </div>
+          <div
+            style="height: 600px;padding-right: 20px;padding-top: 20px; width: 400px; overflow: auto; border: 2px solid #dcdfe6;">
+            <el-timeline style="max-width: 400px">
+              <el-timeline-item v-for="(activity) in smartFrom.activities" placement="top" :key="activity.uuId"
+                :timestamp="activity.timestamp">
+                <el-card style="max-width: 260px">
+                  <template #header>
+                    <div style="display: flex; justify-content: flex-end; align-items: center;">
+                      <el-icon @click="deleteActivity(activity)" style="cursor: pointer">
+                        <CloseBold />
+                      </el-icon>
+                    </div>
+                  </template>
+                  <p>工号：{{ activity.masterJobCode }}</p>
+                  <h4>驾驶员：{{ activity.name }}</h4>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </div>
+        <!-- 新增时间线 -->
+        <div style="flex: 1; padding-left: 20px;">
+          <!-- 选着驾驶员 -->
+          <div style="width: 190px;display: flex; align-items: center; ">
+            <p style="white-space: nowrap; margin-right: 5px; ">驾驶员</p>
+            <el-select v-model="masterTimeLine.master" filterable placeholder="选择驾驶员">
+              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.label" />
+            </el-select>
+          </div>
+          <!-- 新增时间线 -->
+          <div style="margin:20px 0;">
+            <el-date-picker value-format="YYYY-MM-DD" clearable v-model="masterTimeLine.dateRange" type="daterange"
+              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+          </div>
+          <div style="margin-bottom: 20px;">
+            <el-text class="mx-1" size="small" type="info">设置好的时间线点击新增，该时间线的驾驶员会在左边时间线显示，对应时间段的跟班人员会切换驾驶员进行跟班。</el-text>
+          </div>
+
+          <el-button type="primary" @click="addSmartTimeLine">新增时间线</el-button>
+          <!-- 备注 -->
+          <div style="margin-top: 20px;">
+            <el-input v-model="smartFrom.remark" clearable type="textarea" placeholder="备注" />
+          </div>
+        </div>
+
+      </div>
+      <template #header>
+        <div class="dialog-header" style="display: flex;justify-content: space-around;align-items: center;">
+          <div style="max-width: 190px; display: flex; align-items: center;">
+            <!-- 不换行 -->
+            <p style=" white-space: nowrap;margin-right: 5px;">跟班人</p>
+            <el-select v-model="smartFrom.slaveJobCode" filterable placeholder="选择跟班人员">
+              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div>
+            <p>{{ smartTitle }}</p>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitSmartExpand">确 定</el-button>
+          <el-button @click="cancelSmart">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup name="Expand">
 import { getPeopleInfo } from '@/api/attendance/attendance';
-import { addExpand, delExpand, getExpand, listExpand, updateExpand } from "@/api/expand/expand";
+import { addExpand, addSmartExpand, delExpand, getExpand, listExpand, querySmartExpand, updateExpand, updateSmartExpand } from "@/api/expand/expand";
 import moment from 'moment';
+import { v4 as uuidv4 } from 'uuid';
 import { ref, watch } from "vue";
 const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict('sys_normal_disable');
-
+const { sys_normal_disable, expand_type } = proxy.useDict('sys_normal_disable', 'expand_type');
+const smartFrom = ref({
+  slaveJobCode: null,
+  type: 1,
+  remark: null,
+  activities: []
+});
+const masterTimeLine = ref({
+  master: null,
+  dateRange: null
+});
+const smartOpen = ref(false);
+const smartTitle = ref('')
 const expandList = ref([]);
 const openLoading = ref(false)
 const open = ref(false);
@@ -142,6 +228,10 @@ const data = reactive({
 const { queryParams, form, rules } = toRefs(data);
+function cancelSmart() {
+  smartOpen.value = false;
+  resetSmartFrom();
+}
 /** 查询跟班设置列表 */
 function getList() {
   loading.value = true;
@@ -184,8 +274,6 @@ function handleQuery() {
 const disabledDate = (date) => {
   const today = new Date()
-  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-
   return date < today;
 }
@@ -216,16 +304,104 @@ function handleAdd() {
   open.value = true;
   title.value = "添加跟班设置";
 }
+/** 处理时间线 */
+function addSmartTimeLine() {
+  let split = masterTimeLine.value.master.split('/');
+  if (!masterTimeLine.value.master || masterTimeLine.value.dateRange == null) {
+    proxy.$modal.msgError("驾驶员及其时间范围不能为空");
+    return
+  }
+  smartFrom.value.activities.push({
+    name: split[1],
+    masterJobCode: split[0],
+    timestamp: masterTimeLine.value.dateRange[0] + '至' + masterTimeLine.value.dateRange[1],
+    startDate: masterTimeLine.value.dateRange[0] + " 00:00:00",
+    endDate: masterTimeLine.value.dateRange[1] + " 00:00:00",
+    uuId: uuidv4().toString().replaceAll("-", "")
+  })
+  smartFrom.value.activities.sort((a, b) => new Date(a.startDate) - new Date(b.startDate));
+  console.log(smartFrom.value);
+  resetMasterTimeLine();
+}
+
+function deleteActivity(activity) {
+  let index = smartFrom.value.activities.findIndex(item => item.uuId === activity.uuId);
+  if (index !== -1) {
+    smartFrom.value.activities.splice(index, 1);
+  }
+}
+
+function resetMasterTimeLine() {
+  masterTimeLine.value = {
+    master: null,
+    dateRange: null
+  }
+}
+
+
+function resetSmartFrom() {
+  smartFrom.value = {
+    slaveJobCode: null,
+    activities: [],
+    type: 1,
+    remark: null
+  }
+}
+
+function submitSmartExpand() {
+  // 修改
+  if (smartFrom.value.id) {
+    updateSmartExpand(smartFrom.value).then(response => {
+      console.log(smartFrom.value);
+      proxy.$modal.msgSuccess("修改成功");
+      smartOpen.value = false;
+      resetSmartFrom();
+    }).catch(error => {
+      proxy.$modal.msgError(error.message);
+    })
+  }
+  // 新增
+  else {
+    addSmartExpand(smartFrom.value).then(response => {
+      proxy.$modal.msgSuccess("新增成功");
+      smartOpen.value = false;
+      resetSmartFrom();
+    }).catch(error => {
+      proxy.$modal.msgError(error.message);
+    })
+  }
+
+}
+
+
+/** 灵活跟班新增  */
+function handleSmartAdd() {
+  // resetSmart();
+  smartOpen.value = true;
+  smartTitle.value = "添加灵活跟班";
+}
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
   const _id = row.id || ids.value
-  getExpand(_id).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改跟班设置";
-  });
+  if (row.type == 0) {
+    getExpand(_id).then(response => {
+      form.value = response.data;
+      open.value = true;
+      title.value = "修改跟班设置";
+    });
+  } else {
+    querySmartExpand({ id: _id }).then(response => {
+      setTimeout(() => {
+        response.data.activities.forEach(item => {
+          item.timestamp = item.startDate.split(" ")[0] + '至' + item.endDate.split(" ")[0]
+        })
+        smartFrom.value = { ...response.data };
+      }, 0);
+      smartOpen.value = true;
+    })
+  }
 }
 /** 提交按钮 */
@@ -250,6 +426,7 @@ function submitForm() {
 }
+
 watch(open, (val1, val2) => {
   if (open.value) {
     openLoading.value = true
@@ -265,6 +442,23 @@ watch(open, (val1, val2) =&gt; {
     })
   }
 })
+watch(smartOpen, (val1, val2) => {
+  if (smartOpen.value) {
+    resetSmartFrom()
+    openLoading.value = true
+    options.value = [];
+    getPeopleInfo({ id: null }).then((res) => {
+      res.data.forEach(element => {
+        options.value.push({
+          label: element.jobCode + "/" + element.name,
+          value: element.jobCode
+        })
+      });
+      openLoading.value = false;
+    })
+  }
+})
+
 /** 删除按钮操作 */
 function handleDelete(row) {