值班表、上传

src/components/FileUpload/index.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
-    <van-uploader
-        multiple
-        :accept="fileType.toString()"
-        :max-count="limit"
-        :max-size="fileSize * 1024 * 1024"
-        @oversize="onOversize"
-        :before-read="beforeRead"
-        :after-read="afterRead">
-      <van-button icon="plus" type="primary" class="button">上传文件</van-button>
-    </van-uploader>
+    <div class="flex-box">
+      <van-uploader
+          multiple
+          :accept="fileType.toString()"
+          :max-count="limit"
+          :max-size="fileSize * 1024 * 1024"
+          @oversize="onOversize"
+          :before-read="beforeRead"
+          :after-read="afterRead">
+        <van-button icon="plus" type="primary" class="button">上传文件</van-button>
+      </van-uploader>
+      <slot></slot>
+    </div>
     <div v-if="isShowTip" class="upload-tip">
       <div v-if="fileType">1、支持{{ fileType.join('、') }}文件</div>
       <div v-if="limit">2、最多支持上传{{limit}}个文件</div>
@@ -255,4 +258,8 @@ const handleDownload = (file: any) => {
     }
   }
 }
+.flex-box {
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/duty/rota.vue

@@ -35,6 +35,8 @@
           @confirm="onConfirm"
       />
     </van-popup>
+    <!--上传值班表-->
+    <upload-rota v-model:show="showPicker2" />
   </div>
 </template>
 
@@ -44,6 +46,7 @@ import {ArrowLeft, ArrowRight} from "@element-plus/icons-vue";
 import {ElIcon} from "element-plus";
 import dayjs from "dayjs";
 import {download2} from "@/utils/request";
+import UploadRota from "@/views/duty/uploadRota.vue";
 
 const columns = [
   { text: '茂名市', value: 'mm' }
@@ -57,14 +60,6 @@ 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;
@@ -91,9 +86,17 @@ const getList = () => {
 const handleDownload = (url, name) => {
   download2(baseUrl + '/file/download/' + url, name);
 }
+// 选择区域
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  fieldValue.value = selectedOptions[0].text;
+  queryParams.area = selectedOptions[0].value;
+  getList();
+};
+let showPicker2 = ref(false);
 // 上传弹窗
 const handleShowUpload = () => {
-
+  showPicker2.value = true;
 };
 onMounted(() => {
   getList();

src/views/duty/uploadRota.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <van-popup v-model:show="showPicker">
+      <van-form @submit="onSubmit">
+        <div class="van-doc-block__title">上传值班表</div>
+        <van-field
+            v-model="formLabel.area"
+            is-link
+            readonly
+            name="area"
+            label="区划"
+            placeholder="请选择"
+            :rules="[{ required: true, message: '请选择区划', trigger: 'change' }]"
+            @click="showPicker2 = true"
+        />
+        <van-field
+            v-model="form.year"
+            is-link
+            readonly
+            name="year"
+            label="年份"
+            placeholder="请选择"
+            :rules="[{ required: true, message: '请选择年份', trigger: 'change' }]"
+            @click="showPicker3 = true"
+        />
+        <van-field
+            v-model="form.month"
+            is-link
+            readonly
+            name="month"
+            label="月份"
+            placeholder="请选择"
+            :rules="[{ required: true, message: '请选择月份', trigger: 'change' }]"
+            @click="showPicker4 = true"
+        />
+        <van-field
+            name="files"
+            label="值班表"
+            label-align="top"
+            :rules="[{ validator: validatorFile, message: '请上传值班表', trigger: 'change' }]"
+        >
+          <template #input>
+            <FileUpload v-model="form.files" :limit="1" :fileType="['xls', 'xlsx']" :isShowTip="false">
+              <van-button type="primary" class="button" @click="handleDownload">模板下载</van-button>
+            </FileUpload>
+          </template>
+        </van-field>
+        <div class="popup-footer">
+          <van-button @click="handleCancel" class="cancel-btn">取 消</van-button>
+          <van-button type="primary" native-type="submit" class="confirm-btn">确 定</van-button>
+        </div>
+      </van-form>
+    </van-popup>
+    <van-popup v-model:show="showPicker2" round position="bottom">
+      <van-picker
+          title="选择区划"
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="showPicker2 = false"
+      />
+    </van-popup>
+    <van-popup v-model:show="showPicker3" round position="bottom">
+      <van-date-picker
+          v-model="formLabel.year"
+          title="选择年份"
+          :columns-type="['year']"
+          @confirm="onConfirm2"
+          @cancel="showPicker3 = false"
+      />
+    </van-popup>
+    <van-popup v-model:show="showPicker4" round position="bottom">
+      <van-date-picker
+          v-model="formLabel.month"
+          title="选择月份"
+          :columns-type="['month']"
+          @confirm="onConfirm3"
+          @cancel="showPicker4 = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="uploadRota">
+import {computed, ref} from "vue";
+import dayjs from "dayjs";
+import FileUpload from "@/components/FileUpload/index.vue";
+import {download2} from "@/utils/request";
+
+const emits = defineEmits(['update:show']);
+const props = defineProps({
+  show: Boolean,
+});
+const showPicker = computed( {
+  get() {
+    return props.show
+  },
+  set(newValue) {
+    emits('update:show', newValue);
+  }
+})
+const columns = [
+  { text: '茂名市', value: 'mm' }
+];
+let showPicker2 = ref(false);
+let showPicker3 = ref(false);
+let showPicker4 = ref(false);
+let formLabel = ref({
+  area: '',
+  year: [dayjs().year()],
+  month: [dayjs().month() + 1]
+})
+let form = ref({
+  area: '',
+  year: '',
+  month: '',
+  files: []
+});
+
+// 选择区域
+const onConfirm = ({ selectedOptions }) => {
+  showPicker2.value = false;
+  formLabel.value.area = selectedOptions[0].text;
+  form.value.area = selectedOptions[0].value;
+};
+
+// 选择年份
+const onConfirm2 = ({ selectedValues }) => {
+  showPicker3.value = false;
+  form.value.year = selectedValues.toString();
+};
+
+// 选择月份
+const onConfirm3 = ({ selectedValues }) => {
+  showPicker4.value = false;
+  form.value.month = selectedValues.toString();
+};
+
+// 下载模板
+const handleDownload = () => {
+  download2(import.meta.env.VITE_BASE_API + '/file/download/' + '', '值班表模板');
+}
+const validatorFile = () => {
+
+  return !!form.value.files && form.value.files.length > 0;
+}
+const reset = () => {
+  formLabel.value = {
+    area: '',
+    year: [dayjs().year()],
+    month: []
+  };
+  form.value = {
+    area: '',
+    year: '',
+    month: '',
+    files: []
+  };
+}
+const handleCancel = () => {
+  reset();
+  showPicker.value = false
+}
+const onSubmit = () => {
+  console.log('提交', form.value);
+  handleCancel();
+}
+</script>
+
+<style  lang="scss" scoped>
+.button {
+  padding: 0 10px;
+  height: 26px;
+  background: #2C81FF;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  margin-left: 10px;
+}
+</style>

src/views/event/UploadEventCasualtiesDialog.vue

@@ -25,7 +25,7 @@
       />
       <van-field name="fileNames" label="总结报告" label-align="top">
         <template #input>
-          <FileUpload v-model="form.fileNames" :fileType="['pdf', 'word', 'excel']"/>
+          <FileUpload v-model="form.fileNames" :fileType="['pdf', 'doc', 'docx', 'xls', 'xlsx']"/>
         </template>
       </van-field>
       <div class="popup-footer">