报修订单加图片

杨泽宇
1 parent cc9fdf14
Showing 2 changed files with 53 additions and 13 deletions
src/components/Photowall/index.vue
src/views/repair/edit.vue
@@ -67,7 +67,7 @@ const uploadSettings = reactive({
  * @param {UploadFile} file 文件对象
  */
 const handlePictureCardPreview = (file: UploadFile) => {
-  dialogImageUrl.value = file?.response?.data;
+  dialogImageUrl.value = file?.url;
   dialogVisible.value = true;
 };
 /**
@@ -2,11 +2,11 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { getTableList } from "@/api/community/residence";
-import { getTableList as getProject } from '@/api/notify/maintain';
+import { getTableList as getProject } from "@/api/notify/maintain";
 import { repairAdd, repairDetail } from "@/api/notify/repair";
 import { back } from "@/utils/tool";
-// import * as store from "@/pinia/index";
-import { useLoginStore } from '@/pinia/login';
+import Photowall from "@/components/Photowall/index.vue";
+import { useLoginStore } from "@/pinia/login";
 import type { ElForm } from "element-plus";
 let instance: ComponentInternalInstance | null = getCurrentInstance();
 let form = reactive({
@@ -20,7 +20,9 @@ let form = reactive({
     intentEndTime: "",
     remark: "",
     id: null,
+    img: "",
   },
+  publicityPic: [],
   neighborhoods: [],
   projects: [],
   loading: false,
@@ -31,12 +33,14 @@ const ruleFormRef = ref&lt;InstanceType&lt;typeof ElForm&gt;&gt;();
  * 结束时间要在开始时间之后
  */
 const checkTime = (rules, value, callback) => {
-  if(new Date(value).getTime() >= new Date(form.data.intentBeginTime).getTime()) {
-    callback()
+  if (
+    new Date(value).getTime() >= new Date(form.data.intentBeginTime).getTime()
+  ) {
+    callback();
   } else {
-    callback(new Error('结束时间要在开始时间之后'))
+    callback(new Error("结束时间要在开始时间之后"));
   }
-}
+};
 /**
  * 表单验证规则
  */
@@ -88,7 +92,7 @@ const rules = reactive({
       required: true,
       message: "请选择晚于开始时间的意向上门结束时间",
       trigger: "blur",
-      validator: checkTime
+      validator: checkTime,
     },
   ],
 });
@@ -97,6 +101,7 @@ const rules = reactive({
  */
 const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return;
+  form.publicityPic = [];
   formEl.resetFields();
 };
 /**
@@ -105,9 +110,9 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   form.loading = true;
   if (!formEl) return;
+  form.data.img = form.publicityPic.map((item) => item.url).join(",");
   formEl.validate((valid) => {
     if (valid) {
-      console.log(form.data);
       repairAdd(form.data)
         .then((res) => {
           if (res) {
@@ -156,7 +161,6 @@ const getProjects = async (pageSize: number = 20) =&gt; {
     const res = await getProject({
       page: 1,
       pageSize: pageSize,
-      // oid:store?.family?.loginStore()?.organizationId??0
       oid: useLoginStore()?.getOid ?? 0,
     });
     form.projects = res?.data?.data?.list;
@@ -166,7 +170,22 @@ const getProjects = async (pageSize: number = 20) =&gt; {
   } catch (e) {
     console.log(e);
   }
-}
+};
+/**
+ * 多图上传组件回调
+ * @param {string} images 回调的图片urls
+ * @param {string} tagName 标签
+ */
+const handleFinish = (images) => {
+  form.publicityPic = [];
+  setTimeout(() => {
+    images.map((item) => {
+      form.publicityPic.push({
+        url: item,
+      });
+    });
+  }, 500);
+};
 onMounted(() => {
   getNeighborhoods();
   getProjects();
@@ -177,6 +196,15 @@ onMounted(() =&gt; {
     form.dataType = "edit";
     form.data.neighboorHoodId = ~~useRoute().query.neighboorHoodId;
     form.data.repairProject = ~~useRoute().query.repairProject;
+    if (useRoute().query.img) {
+      useRoute()
+        .query.img.split(",")
+        .map((item) => {
+          form.publicityPic.push({
+            url: item,
+          });
+        });
+    }
   }
 });
 </script>
@@ -235,7 +263,10 @@ onMounted(() =&gt; {
         </el-form-item>
         <el-form-item label="报修项目" prop="repairProject" style="width: 100%">
           <!-- 启用状态的报修项目可选 -->
-          <el-select v-model="form.data.repairProject" placeholder="请选择报修项目">
+          <el-select
+            v-model="form.data.repairProject"
+            placeholder="请选择报修项目"
+          >
             <el-option
               v-for="(item, index) in form.projects"
               :key="index"
@@ -270,6 +301,15 @@ onMounted(() =&gt; {
             placeholder="请选择意向上门结束时间"
           ></el-date-picker>
         </el-form-item>
+        <el-form-item label="报修图片" prop="img" style="width: 100%">
+          <Photowall
+            @finish="handleFinish"
+            moduleName="repair"
+            :limit="3"
+            tip="最多可以上传3张图片，单张图片大小不可超过1MB"
+            :fileList="form.publicityPic"
+          ></Photowall>
+        </el-form-item>
         <el-form-item label="备注" prop="remark" style="width: 100%">
           <el-input
             v-model.trim="form.data.remark"