换班、值班表

src/views/duty/index.vue

@@ -7,8 +7,9 @@
       </div>
     </div>
     <div class="content">
-      <duty-calendar v-show="activeIndex === 'calendar'" @changIndex="handleClickTab" />
-      <shift-change v-show="activeIndex === 'shiftChange'" />
+      <DutyCalendar v-if="activeIndex === 'calendar'" @changIndex="handleClickTab" />
+      <ShiftChange v-else-if="activeIndex === 'shiftChange'" />
+      <Rota v-else-if="activeIndex === 'rota'" />
     </div>
   </div>
 </template>
@@ -17,6 +18,7 @@
 import { ref } from "vue";
 import DutyCalendar from "@/views/duty/dutyCalendar.vue";
 import ShiftChange from "@/views/duty/shiftChange.vue";
+import Rota from "@/views/duty/rota.vue";
 
 let activeIndex = ref('calendar');
 let tabs = ref([

src/views/duty/rota.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="rota-container">
+    <div class="field-box">
+      <van-field
+          v-model="fieldValue"
+          is-link
+          readonly
+          placeholder="请选择"
+          @click="showPicker = true"
+      />
+    </div>
+    <div class="rota-list">
+      <div class="rota-header">
+        <el-icon class="hand" @click="nextYear(-1)"><ArrowLeft /></el-icon>
+        <div class="calendar-header__center">{{ queryParams.year }}年</div>
+        <el-icon class="hand" @click="nextYear(1)"><ArrowRight /></el-icon>
+      </div>
+      <div class="rota-content">
+        <div v-for="(item, index) in dataList" :key="index" class="rota-item">
+          <div class="item-header">
+            <div class="text1">{{item.name}}</div>
+            <div class="text2">{{item.time}}</div>
+          </div>
+          <div class="img" @click="handleDownload(item.url, item.name2)"></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="confirm-btn" @click="handleShowUpload">上传值班表</div>
+    </div>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="rota">
+import {onMounted, reactive, ref} from "vue";
+import {ArrowLeft, ArrowRight} from "@element-plus/icons-vue";
+import {ElIcon} from "element-plus";
+import dayjs from "dayjs";
+import {download2} from "@/utils/request";
+
+const columns = [
+  { text: '茂名市', value: 'mm' }
+];
+const fieldValue = ref('茂名市');
+const queryParams = reactive({
+  area: 'mm',
+  year: dayjs().year()
+})
+const dataList = ref([]);
+const showPicker = ref(false);
+const baseUrl = import.meta.env.VITE_BASE_API;
+
+// 选择区域
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  fieldValue.value = selectedOptions[0].text;
+  queryParams.area = selectedOptions[0].value;
+  getList();
+};
+
+// 上下一年
+const nextYear = (number: number) => {
+  queryParams.year  = queryParams.year + number;
+  getList();
+};
+// 获取数据
+const getList = () => {
+  dataList.value = [
+    { name: '一月份排班表', name2: '一月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '二月份排班表', name2: '二月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '三月份排班表', name2: '三月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '四月份排班表', name2: '四月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '五月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '六月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '七月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '八月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '九月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '十月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '十一月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+    { name: '十二月份排班表', name2: '五月份排班表.xlsx', time: '01-01 12:31', url: ''},
+  ]
+}
+// 下载
+const handleDownload = (url, name) => {
+  download2(baseUrl + '/file/download/' + url, name);
+}
+// 上传弹窗
+const handleShowUpload = () => {
+
+};
+onMounted(() => {
+  getList();
+})
+</script>
+
+<style lang="scss" scoped>
+.rota-container {
+  .field-box {
+    width: 100%;
+    padding: 10px 15px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #eeeeee;
+    .van-field {
+      border: 1px solid #eeeeee;
+      padding: 5px 15px;
+    }
+  }
+  .rota-list {
+    .rota-header {
+      height: 45px;
+      background-color: #ffffff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 15px;
+    }
+    .rota-content {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 15px;
+      background-color: #ffffff;
+      .rota-item {
+        width: 167.5px;
+        background-color: #f2f2f2;
+        margin-bottom: 10px;
+        padding: 6px;
+        &:nth-child(odd) {
+          margin-right: 10px;
+        }
+        .item-header {
+          display: flex;
+          justify-content: space-between;
+          .text1 {
+            font-size: 14px;
+          }
+          .text2 {
+            font-size: 12px;
+          }
+        }
+        .img {
+          width: 100%;
+          height: 80px;
+          background-color: #9d9d9d;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.footer {
+  position: fixed;
+  bottom: 55px;
+  left: 0;
+  width: 100%;
+  height: 55px;
+  background: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .confirm-btn {
+    width: 110px;
+    height: 40px;
+    background: #2C81FF;
+    border-radius: 2px;
+    font-size: 16px;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/views/duty/shiftChange.vue

@@ -31,17 +31,20 @@
         v-model:show="show"
         class="custom-dialog"
         :title="eventKey === '1' ? '新增提醒事项' : '新增待办事项'"
-        confirmButtonText="确认点名"
+        show-cancel-button
+        @cancel="handleCancel"
         @confirm="handleConfirm"
     >
-      <van-field v-model="content" :placeholder="eventKey === '1' ? '请输入提醒事项' : '请输入待办事项'" />
+      <van-field v-model="content" :placeholder="eventKey === '1' ? '请输入提醒事项' : '请输入待办事项'"  type="textarea" rows="5" />
     </van-dialog>
   </div>
 </template>
 
 <script lang="ts" setup name="shiftChange">
 import {ref} from "vue";
+import {showConfirmDialog} from "vant";
 
+const emits = defineEmits(['confirm']);
 let show = ref(false);
 let eventKey = ref('');
 let content = ref('');
@@ -62,12 +65,27 @@ const handleShowAdd = (key) => {
   show.value = true;
 }
 const handleToShiftChange = () => {
-
+  showConfirmDialog({
+    title: '提示',
+    message: '是否确认交班',
+  }).then(() => {
+    // on confirm
+  })
+}
+// 编辑
+const handleCancel = () => {
+  show.value = false;
+  content.value = '';
 }
 // 新增
 const handleConfirm = () => {
-
-}
+  // let method = eventKey.value === '1' ? 'method1' : 'method2';
+  // method().then((res) => {
+  //   show.value = false;
+  //   content.value = false;
+  //   emits('confirm');
+  // })
+};
 </script>
 
 <style lang="scss" scoped>