From 748c466f53ff5062cf3c1fbdc7ead627a9c42e7e Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 31 Dec 2021 15:03:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E7=BA=A6=E4=BA=8B=E9=A1=B9=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityService/dqfwzx/cpts/edit.vue     | 238 +++++++++++++-----
 1 file changed, 176 insertions(+), 62 deletions(-)

diff --git a/src/views/modules/communityService/dqfwzx/cpts/edit.vue b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
index 74772f22..90ebcff9 100644
--- a/src/views/modules/communityService/dqfwzx/cpts/edit.vue
+++ b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
@@ -173,67 +173,95 @@
               :key="'staff' + index"
               v-for="(item, index) in dataForm.matterList"
             >
-              <el-input
-                class="item_width_1"
-                maxlength="50"
-                show-word-limit
-                placeholder="事项名"
-                v-model="item.matterName"
-                :disabled="item.matterId != undefined"
-              />
-
-              <el-select
-                style="margin-left: 10px"
-                v-model="item.appointmentType"
-                filterable
-                placeholder="预约类型"
-                :disabled="item.matterId != undefined"
-              >
-                <el-option
-                  v-for="item in appointmentTypeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+              <div class="item-info">
+                <el-input
+                  class="item_width_1"
+                  maxlength="50"
+                  show-word-limit
+                  placeholder="事项名"
+                  v-model="item.matterName"
+                  :disabled="item.matterId != undefined"
+                />
+
+                <el-select
+                  style="margin-left: 10px"
+                  v-model="item.appointmentType"
+                  filterable
+                  placeholder="预约类型"
+                  :disabled="item.matterId != undefined"
                 >
-                </el-option>
-              </el-select>
-
-              <el-time-select
-                style="margin-left: 10px"
-                v-model="item.startTime"
-                :picker-options="{
-                  start: '00:00',
-                  step: '00:30',
-                  end: '24:00',
-                }"
-                placeholder="开始时间"
-                :disabled="item.matterId != undefined"
-              >
-              </el-time-select>
-              <span style="margin: 0 5px">至</span>
-              <el-time-select
-                v-model="item.endTime"
-                :picker-options="{
-                  start: '00:00',
-                  step: '00:30',
-                  end: '24:00',
-                  minTime: item.startTime,
-                }"
-                placeholder="结束时间"
-                :disabled="item.matterId != undefined"
-              >
-              </el-time-select>
-
-              <el-button
-                style="margin-left: 10px"
-                size="small"
-                @click="handleDelStaff(index)"
-                >删除</el-button
-              >
+                  <el-option
+                    v-for="item in appointmentTypeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+
+                <el-time-select
+                  style="margin-left: 10px"
+                  v-model="item.startTime"
+                  :picker-options="{
+                    start: '00:00',
+                    step: '00:30',
+                    end: '24:00',
+                  }"
+                  placeholder="开始时间"
+                  :disabled="item.matterId != undefined"
+                >
+                </el-time-select>
+                <span style="margin: 0 5px">至</span>
+                <el-time-select
+                  v-model="item.endTime"
+                  :picker-options="{
+                    start: '00:00',
+                    step: '00:30',
+                    end: '24:00',
+                    minTime: item.startTime,
+                  }"
+                  placeholder="结束时间"
+                  :disabled="item.matterId != undefined"
+                >
+                </el-time-select>
+              </div>
+              <div class="item-pic">
+                <el-upload
+                  :disabled="item.matterId != undefined"
+                  class="avatar-uploader"
+                  :action="uploadUlr"
+                  :data="{ customerId: customerId }"
+                  :show-file-list="false"
+                  :on-success="
+                    (response, file, fileList) =>
+                      handleImgSuccess(index, response, file, fileList)
+                  "
+                  :before-upload="beforeImgUpload"
+                >
+                  <img
+                    v-if="item.matterImg"
+                    :src="item.matterImg"
+                    style="width: 50px; height: 50px"
+                    class="function-icon"
+                  />
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+
+                <div class="hint">（事项封面，图片小于1M）</div>
+
+                <el-button
+                  style="margin-left: auto"
+                  size="small"
+                  @click="handleDelStaff(index)"
+                  >删除</el-button
+                >
+              </div>
             </div>
 
             <div class="item-add">
-              <el-button size="small" @click="handleAddStaff">添加</el-button>
+              <el-button size="small" type="warning" @click="handleAddStaff"
+                >添加</el-button
+              >
             </div>
           </div>
         </el-form-item>
@@ -266,6 +294,9 @@ let loading; // 加载动画
 export default {
   data() {
     return {
+      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      customerId: "",
+
       formType: "add", //表单操作类型 add新增，edit编辑，detail详情
 
       btnDisable: false,
@@ -342,14 +373,39 @@ export default {
   watch: {},
 
   async mounted() {
+    this.customerId = localStorage.getItem("customerId");
     this.initMap();
   },
 
   methods: {
+    handleImgSuccess(index, res, file) {
+      if (res.code === 0 && res.msg === "success") {
+        console.log("res.data.url", res.data.url);
+        this.dataForm.matterList[index].matterImg = res.data.url;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+
+    beforeImgUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1;
+
+      if (!isLt1M) {
+        this.$message.error("上传图片大小不能超过 1MB!");
+      }
+      return isLt1M;
+    },
+
     handleAddStaff() {
       this.dataForm.matterList = [
         ...this.dataForm.matterList,
-        { matterName: "", appointmentType: "", startTime: "", endTime: "" },
+        {
+          matterName: "",
+          appointmentType: "",
+          matterImg: "",
+          startTime: "",
+          endTime: "",
+        },
       ];
     },
     handleDelStaff(index) {
@@ -482,9 +538,28 @@ export default {
         this.dataForm.partyServiceCenterId = this.partyServiceCenterId;
       }
 
+      const matterList = this.dataForm.matterList.filter(
+        (item) => !item.matterId
+      );
+      if (
+        matterList.some(
+          (item) =>
+            !item.matterImg ||
+            !item.matterName ||
+            !item.appointmentType ||
+            !item.startTime ||
+            !item.endTime
+        )
+      ) {
+        return this.$message({
+          type: "warning",
+          message: "请补充完整可预约事项信息",
+        });
+      }
+
       const { data, code, msg } = await requestPost(url, {
         ...this.dataForm,
-        matterList: this.dataForm.matterList.filter((item) => !item.matterId),
+        matterList,
       });
 
       if (code === 0) {
@@ -580,9 +655,48 @@ export default {
   width: 650px;
 
   .item {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 7px;
+    .item-info {
+      display: flex;
+      justify-content: space-around;
+      margin-bottom: 7px;
+    }
+    .item-pic {
+      display: flex;
+      align-items: center;
+      .hint {
+        font-size: 14px;
+        color: #999999;
+        margin-left: 10px;
+      }
+      .avatar-uploader {
+        ::v-deep .el-upload {
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+        }
+        img {
+          object-fit: cover;
+        }
+        .el-upload:hover {
+          border-color: #409eff;
+        }
+        .avatar {
+          width: 50px;
+          height: 50px;
+          display: block;
+        }
+        .avatar-uploader-icon {
+          border: 1px dashed #d9d9d9;
+          border-radius: 6px;
+          font-size: 28px;
+          color: #8c939d;
+          width: 50px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+        }
+      }
+    }
   }
   .item-add {
   }