1

src/views/emergency/attendance-add-or-update.vue

@@ -2,7 +2,6 @@
   <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
           <el-form-item label="考勤日期" prop="date">
-        <!-- <el-input v-model="dataForm.date" placeholder="考勤日期"></el-input> -->
         <el-date-picker
           v-model="dataForm.date"
           type="date"        
@@ -12,7 +11,6 @@
         ></el-date-picker>
       </el-form-item>
           <el-form-item label="签到时间" prop="checkInTime">
-        <!-- <el-input v-model="dataForm.checkInTime" placeholder="签到时间"></el-input>    -->
         <el-date-picker
           v-model="dataForm.checkInTime"
           type="datetime"
@@ -22,7 +20,6 @@
         ></el-date-picker>
       </el-form-item>
           <el-form-item label="签退时间" prop="checkOutTime">
-        <!-- <el-input v-model="dataForm.checkOutTime" placeholder="签退时间"></el-input> -->
         <el-date-picker
           v-model="dataForm.checkOutTime"
           type="datetime"
@@ -37,22 +34,18 @@
           </el-select>
         </el-form-item>
           <el-form-item label="照片存储路径" prop="photoPath">
-            <div class="flex items-center">
-              <el-input v-model="dataForm.photoPath" placeholder="照片存储路径" readonly>
-                <template #append>
-                  <el-button slot="append" size="small" @click="fileInput?.click()">选择文件</el-button>
-                </template>
-              </el-input>
-              <input 
-                type="file" 
-                ref="fileInput" 
-                @change="handleFileChange" 
-                style="display: none"
-                accept="image/*"
-              >
-            </div>
+            <el-upload
+              class="avatar-uploader"
+              :action="action"
+              :headers="headers"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
           </el-form-item>
-        <!-- <el-input v-model="dataForm.photoPath" placeholder="照片存储路径"></el-input> -->
                   <el-form-item label="备注" prop="remark">
         <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
       </el-form-item>
@@ -65,14 +58,22 @@
 </template>
 
 <script lang="ts" setup>
+import app from "@/constants/app";
+import { getToken } from "@/utils/cache";
 import { reactive, ref } from "vue";
 import { parseTime } from '@/utils/ruoyi'
 import baseService from "@/service/baseService";
 import { ElMessage } from "element-plus";
+import { Plus } from '@element-plus/icons-vue'
+import type { UploadProps } from 'element-plus'
 const emit = defineEmits(["refreshDataList"]);
-const fileInput = ref<HTMLInputElement | null>(null);
+
+const action = `${app.api}/sys/oss/upload`;
+const headers = {token:  getToken() }
+const imageUrl = ref('');
 const visible = ref(false);
 const dataFormRef = ref();
+
 import useView from "@/hooks/useView";
 const state = reactive({ ...useView({}) });
 const dataForm = reactive({
@@ -90,12 +91,7 @@ const rules = ref({
     ],
           status: [
       { required: true, message: '必填项不能为空', trigger: 'blur' }
-    ],
-          photoPath: [
-      { required: true, message: '必填项不能为空', trigger: 'blur' }
-    ],
-          remark: []
-    
+    ]
   });
 
 const init = (id?: number) => {
@@ -111,6 +107,24 @@ const init = (id?: number) => {
     getInfo(id);
   }
 };
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+  uploadFile
+) => {
+  if(response.code!==0) return ElMessage.error(response.msg);
+  imageUrl.value = response?.data?.src;
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (!['image/jpeg','image/png','image/jpp'].includes(rawFile.type)) {
+    ElMessage.error('请上传jpg/png格式的图片!')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('图片大小不能超过10MB!')
+    return false
+  }
+  return true
+}
 
 // 获取信息
 const getInfo = (id: number) => {
@@ -124,9 +138,10 @@ const dataFormSubmitHandle = () => {
     if (!valid) {
       return false;
     }
+    if(!imageUrl.value) return ElMessage.error('请上传图片');
     dataForm.checkInTime = dataForm.checkInTime ? parseTime(new Date(dataForm.checkInTime), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
     dataForm.checkOutTime = dataForm.checkOutTime ? parseTime(new Date(dataForm.checkOutTime), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
-    dataForm.status = dataForm.status ? Number(dataForm.status) : null;
+    dataForm.photoPath = imageUrl.value;
     (!dataForm.id ? baseService.post : baseService.put)("/emergency/attendance", dataForm).then((res) => {
       ElMessage.success({
         message: '成功',
@@ -140,16 +155,38 @@ const dataFormSubmitHandle = () => {
   });
 };
 
-const handleFileChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  if (target?.files && target.files[0]) {
-    // 保存文件名
-    dataForm.photoPath = target.files[0].name;
-  } else {
-    dataForm.photoPath = '';
-  }
-};
+
 defineExpose({
   init
 });
 </script>
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

src/views/emergency/attendance.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="mod-demo__attendance">
     <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
+      <el-form-item>
+        <el-date-picker
+          v-model="state.dataForm.date"
+          type="date"        
+          placeholder="考勤日期"
+          value-format="YYYY-MM-DD" 
+          style="width: 100%;"
+          clearable
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="state.getDataList()">查询</el-button>
+      </el-form-item>
       <el-form-item>
         <el-button v-if="state.hasPermission('emergency:attendance:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
@@ -14,7 +27,7 @@
     <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
       <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
               <el-table-column prop="id" label="记录ID" header-align="center" align="center"></el-table-column>
-              <el-table-column prop="date" label="出勤日期" header-align="center" align="center"></el-table-column>
+              <el-table-column prop="date" label="考勤日期" header-align="center" align="center"></el-table-column>
               <el-table-column prop="checkInTime" label="签到时间" header-align="center" align="center"></el-table-column>
               <el-table-column prop="checkOutTime" label="签退时间" header-align="center" align="center"></el-table-column>
               <el-table-column prop="status" label="出勤状态" header-align="center" align="center">