打卡

ruoyi-vue/src/views/care/clocks/index.vue

@@ -58,9 +58,6 @@
     <!-- 添加或修改护理任务打卡对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="clocksRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="护理任务记录表id" prop="nursingRecordId">
-          <el-input v-model="form.nursingRecordId" placeholder="请输入护理任务记录表id" />
-        </el-form-item>
         <el-form-item label="护理时间" prop="nursingTime">
           <el-date-picker clearable
             v-model="form.nursingTime"
@@ -70,14 +67,20 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="图片路径" prop="imgPaths">
-          <el-input v-model="form.imgPaths" placeholder="请输入图片路径" />
-        </el-form-item>
-        <el-form-item label="图片数量" prop="imgNum">
-          <el-input v-model="form.imgNum" placeholder="请输入图片数量" />
-        </el-form-item>
-        <el-form-item label="删除标志" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
+          <el-upload
+              v-model:file-list="fileList"
+              :action="uploadImgUrl"
+              :headers="uploadHeaders"
+              list-type="picture-card"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-upload="beforeUpload"
+              :on-success="handleSuccess"
+          >
+            <el-icon><Plus /></el-icon>
+          </el-upload>
         </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -98,7 +101,9 @@
 </style>
 <script setup name="Clocks">
 import { listClocks, getClocks, delClocks, addClocks, updateClocks } from "@/api/care/clocks";
-
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { getToken } from '@/utils/auth'
 const { proxy } = getCurrentInstance();
 
 const clocksList = ref([]);
@@ -110,7 +115,12 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const uploadHeaders={Authorization: 'Bearer ' + getToken()};
+const fileList =ref([]);
 
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
 // 定义 props
 const props = defineProps({
   applyId: {
@@ -124,15 +134,12 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    nursingRecordId: null,
+    nursingRecordId: props.applyId,
     nursingTime: null,
     imgPaths: null,
     imgNum: null,
   },
   rules: {
-    nursingRecordId: [
-      { required: true, message: "护理任务记录表id不能为空", trigger: "blur" }
-    ],
     nursingTime: [
       { required: true, message: "护理时间不能为空", trigger: "blur" }
     ],
@@ -167,7 +174,7 @@ function cancel() {
 function reset() {
   form.value = {
     clockId: null,
-    nursingRecordId: null,
+    nursingRecordId: props.applyId,
     nursingTime: null,
     imgPaths: null,
     imgNum: null,
@@ -220,6 +227,14 @@ function handleUpdate(row) {
 
 /** 提交按钮 */
 function submitForm() {
+  form.value.imgNum=0;
+
+  fileList.forEach(item => {
+    console.info(item);
+    form.value.imgNum++;
+    form.value.imgPaths+=item.url;
+  });
+
   proxy.$refs["clocksRef"].validate(valid => {
     if (valid) {
       if (form.value.clockId != null) {
@@ -257,5 +272,34 @@ function handleExport() {
   }, `clocks_${new Date().getTime()}.xlsx`)
 }
 
+
+
+function handlePreview(file) {
+  console.log('预览文件:', file);
+}
+function handleRemove(file, fileList) {
+  console.log('移除文件:', file, '剩余文件:', fileList);
+}
+function beforeUpload(file) {
+  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
+  const isLt500K = file.size / 1024 < 500;
+
+  if (!isJPGOrPNG) {
+    this.$message.error('只能上传 JPG 或 PNG 格式的图片!');
+  }
+  if (!isLt500K) {
+    this.$message.error('图片大小不能超过 500KB!');
+  }
+
+  return isJPGOrPNG && isLt500K;
+}
+function handleSuccess(response, file, fileList)
+{
+  if(response.code==200){
+    console.log('上传成功:', response, file, fileList);
+    fileList.value = fileList;
+  }
+
+}
 getList();
 </script>