Merge branch 'dev-shuju' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-shuju

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 {
   }

src/views/modules/communityService/dqfwzx/cpts/order.vue

@@ -31,13 +31,22 @@
           label-width="150px"
           style="display: block"
         >
-          <el-date-picker
+          <!-- <el-date-picker
             v-model="dataForm.appointmentDate"
             placeholder="预约日期"
             value-format="yyyy-MM-dd"
             :picker-options="dateOptions"
           >
-          </el-date-picker>
+          </el-date-picker> -->
+          <el-select v-model="dataForm.appointmentDate" placeholder="请选择">
+            <el-option
+              v-for="item in dateList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option
+          ></el-select>
         </el-form-item>
 
         <el-form-item
@@ -47,18 +56,19 @@
           label-width="150px"
           style="display: block"
         >
-          <el-checkbox-group
-            style="margin-left: auto; width: 600px"
-            v-model="dataForm.timeId"
-          >
+          <div style="margin-left: auto; width: 600px">
             <el-checkbox
               :label="item.timeId"
               :key="item.timeId"
               :disabled="!item.isAppointment"
-              v-for="item in timeList"
+              v-for="(item, index) in timeList"
+              :checked="item.selected"
+              :value="item.selected"
+              @change="selectTime(index)"
+              @onChange="selectTime(index)"
               >{{ item.time }}</el-checkbox
             >
-          </el-checkbox-group>
+          </div>
         </el-form-item>
 
         <el-form-item
@@ -128,7 +138,15 @@
 import { mapGetters } from "vuex";
 import { Loading } from "element-ui"; // 引入Loading服务
 import { requestPost } from "@/js/dai/request";
+import dateFormat from "dai-js/tools/dateFormat";
 
+const deepClone = function (arg) {
+  if (typeof arg == "object" || typeof arg == "array") {
+    return JSON.parse(JSON.stringify(arg));
+  } else {
+    return arg;
+  }
+};
 var map;
 var search;
 var markers;
@@ -154,6 +172,7 @@ export default {
           );
         },
       },
+      dateList: [],
       timeList: [],
 
       dataForm: {
@@ -202,6 +221,100 @@ export default {
       if (item) {
         this.dataForm.matterId = item.matterId;
         this.info.matterName = item.matterName;
+        this.getDateList();
+      }
+    },
+
+    selectTime(index) {
+      // return console.log(index);
+      let list = deepClone(this.timeList);
+      if (!list[index].isAppointment) return false;
+
+      let startIndex = list.findIndex((item) => item.selected);
+      let endIndex = list.findIndex((item, index) => {
+        return (
+          item.selected &&
+          (index == list.length - 1 || !list[index + 1].selected)
+        );
+      });
+      // console.log(startIndex, endIndex);
+      if (startIndex == -1) {
+        list[index].selected = !list[index].selected;
+      } else if (startIndex == endIndex) {
+        let big = Math.max(startIndex, index);
+        let little = Math.min(startIndex, index);
+        if (big == little) {
+          list[index].selected = !list[index].selected;
+        } else {
+          for (let i = little; i <= big; i++) {
+            // console.log(i);
+            if (!list[i].isAppointment) {
+              this.$message({
+                type: "warning",
+                message: "请选择连续的时间",
+              });
+              return false;
+            }
+            list[i].selected = true;
+          }
+        }
+      } else {
+        if (index == startIndex || index == endIndex) {
+          list[index].selected = !list[index].selected;
+        } else if (list[index].selected) {
+          let big = index;
+          let little = index;
+          if (startIndex - index < index - endIndex) {
+            big = endIndex;
+          } else {
+            little = startIndex;
+          }
+          for (let i = little; i <= big; i++) {
+            list[i].selected = false;
+          }
+        } else {
+          let big = index;
+          let little = index;
+          if (index < startIndex) {
+            big = startIndex;
+          } else {
+            little = endIndex;
+          }
+          for (let i = little; i <= big; i++) {
+            // console.log(i);
+            if (!list[i].isAppointment) {
+              this.$message({
+                type: "warning",
+                message: "请选择连续的时间",
+              });
+              return false;
+            }
+            list[i].selected = true;
+          }
+        }
+      }
+      console.log(list);
+      this.timeList = list;
+      return false;
+    },
+
+    async getDateList() {
+      let url = "/gov/org/icpartyservicecenter/appointmenttime";
+
+      const {
+        dataForm: { matterId },
+      } = this;
+      if (!matterId) return;
+
+      const { data, code, msg } = await requestPost(url, {
+        matterId,
+        date: dateFormat(new Date(), "yyyy-MM-dd"),
+      });
+
+      if (code === 0) {
+        this.dateList = data.dateList || [];
+        // this.dataForm.appointmentDate = data.dateList[0];
+      } else {
       }
     },
 
@@ -219,8 +332,11 @@ export default {
       });
 
       if (code === 0) {
-        this.timeList = data.timeDetail || [];
-      } else {
+        let timeList = data.timeDetail || [];
+        this.timeList = timeList.map((item) => {
+          item.selected = false;
+          return item;
+        });
       }
     },