From 1882771daa1e953ab0e2959625dd2a8b5efbc973 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 26 Nov 2021 17:35:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=9A=E7=BE=A4=E5=9F=BA=E6=9C=AC=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityService/dqfwzx/cpts/edit.vue     | 158 +++++++-
 .../communityService/dqfwzx/cpts/order.vue    | 341 ++++++++++++++++++
 .../dqfwzx/cpts/orderList.vue                 | 206 +++++++++++
 .../modules/communityService/dqfwzx/index.vue | 265 +++++++++++---
 .../modules/communityService/shzz/index.vue   |   1 -
 .../communityService/sqzzz/cpts/edit.vue      |   6 +-
 .../modules/communityService/sqzzz/index.vue  |   1 -
 7 files changed, 907 insertions(+), 71 deletions(-)
 create mode 100644 src/views/modules/communityService/dqfwzx/cpts/order.vue
 create mode 100644 src/views/modules/communityService/dqfwzx/cpts/orderList.vue

diff --git a/src/views/modules/communityService/dqfwzx/cpts/edit.vue b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
index df346a61..74772f22 100644
--- a/src/views/modules/communityService/dqfwzx/cpts/edit.vue
+++ b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
@@ -57,6 +57,67 @@
           </el-input>
         </el-form-item>
 
+        <el-form-item
+          label="办公时间"
+          prop="amStartTime"
+          label-width="150px"
+          style="display: block"
+        >
+          <div class="row">
+            <span>上午</span>
+            <el-time-select
+              style="margin-left: 10px"
+              v-model="dataForm.amStartTime"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '12:00',
+              }"
+              placeholder="开始时间"
+            >
+            </el-time-select>
+            <span style="margin: 0 5px">至</span>
+            <el-time-select
+              v-model="dataForm.amEndTime"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '12:00',
+                minTime: dataForm.amStartTime,
+              }"
+              placeholder="结束时间"
+            >
+            </el-time-select>
+          </div>
+
+          <div class="row" style="margin-top: 5px">
+            <span>下午</span>
+            <el-time-select
+              style="margin-left: 10px"
+              v-model="dataForm.pmStartTime"
+              :picker-options="{
+                start: '12:00',
+                step: '00:30',
+                end: '24:00',
+              }"
+              placeholder="开始时间"
+            >
+            </el-time-select>
+            <span style="margin: 0 5px">至</span>
+            <el-time-select
+              v-model="dataForm.pmEndTime"
+              :picker-options="{
+                start: '12:00',
+                step: '00:30',
+                end: '24:00',
+                minTime: dataForm.pmStartTime,
+              }"
+              placeholder="结束时间"
+            >
+            </el-time-select>
+          </div>
+        </el-form-item>
+
         <el-form-item
           label="位置坐标"
           prop="longitude"
@@ -68,7 +129,7 @@
               class="item_width_4"
               maxlength="50"
               placeholder="请输入关键字"
-              v-model="dataForm.address"
+              v-model="dataForm.locationAddress"
             >
             </el-input>
             <el-button
@@ -116,18 +177,52 @@
                 class="item_width_1"
                 maxlength="50"
                 show-word-limit
-                placeholder="成员姓名"
-                v-model="item.personName"
+                placeholder="事项名"
+                v-model="item.matterName"
+                :disabled="item.matterId != undefined"
               />
 
-              <el-input
+              <el-select
                 style="margin-left: 10px"
-                class="item_width_1"
-                maxlength="50"
-                show-word-limit
-                placeholder="办公电话"
-                v-model="item.personPhone"
-              />
+                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"
+                >
+                </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"
@@ -176,6 +271,22 @@ export default {
       btnDisable: false,
 
       partyServiceCenterId: "",
+
+      appointmentTypeOptions: [
+        {
+          label: "每天",
+          value: "everyDay",
+        },
+        {
+          label: "工作日",
+          value: "workDay",
+        },
+        {
+          label: "周末",
+          value: "weekend",
+        },
+      ],
+
       dataForm: {
         centerName: "",
         address: "",
@@ -187,6 +298,8 @@ export default {
         longitude: "",
         latitude: "",
         matterList: [],
+        delMatterList: [],
+        locationAddress: "",
       },
     };
   },
@@ -236,12 +349,20 @@ export default {
     handleAddStaff() {
       this.dataForm.matterList = [
         ...this.dataForm.matterList,
-        { personName: "", personPhone: "" },
+        { matterName: "", appointmentType: "", startTime: "", endTime: "" },
       ];
     },
     handleDelStaff(index) {
       const { matterList } = this.dataForm;
-      matterList.splice(index, 1);
+      let delItem = matterList.splice(index, 1);
+      console.log(delItem);
+      if (delItem[0].matterId) {
+        this.dataForm.delMatterList = [
+          ...this.dataForm.delMatterList,
+          delItem[0].matterId,
+        ];
+      }
+
       this.dataForm.matterList = matterList;
     },
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
@@ -294,7 +415,7 @@ export default {
       // 在地图显示范围内以给定的关键字搜索地点
       search
         .searchRectangle({
-          keyword: this.dataForm.address,
+          keyword: this.dataForm.locationAddress,
           bounds: map.getBounds(),
         })
         .then((result) => {
@@ -361,7 +482,10 @@ export default {
         this.dataForm.partyServiceCenterId = this.partyServiceCenterId;
       }
 
-      const { data, code, msg } = await requestPost(url, this.dataForm);
+      const { data, code, msg } = await requestPost(url, {
+        ...this.dataForm,
+        matterList: this.dataForm.matterList.filter((item) => !item.matterId),
+      });
 
       if (code === 0) {
         this.$message({
@@ -394,6 +518,8 @@ export default {
         longitude: "",
         latitude: "",
         matterList: [],
+        delMatterList: [],
+        locationAddress: "",
       };
     },
     // 开启加载动画
@@ -450,7 +576,9 @@ export default {
 }
 
 .m-staffs {
-  width: 468px;
+  margin-left: auto;
+  width: 650px;
+
   .item {
     display: flex;
     justify-content: space-around;
diff --git a/src/views/modules/communityService/dqfwzx/cpts/order.vue b/src/views/modules/communityService/dqfwzx/cpts/order.vue
new file mode 100644
index 00000000..ec777b77
--- /dev/null
+++ b/src/views/modules/communityService/dqfwzx/cpts/order.vue
@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <div>
+      <el-form
+        ref="ref_form"
+        :inline="true"
+        :model="dataForm"
+        :rules="dataRule"
+        :disabled="formType === 'detail'"
+        class="form"
+      >
+        <el-form-item
+          label="事项名称"
+          prop="matterName"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            v-model="info.matterName"
+            disabled
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="预约日期"
+          prop="appointmentDate"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-date-picker
+            v-model="dataForm.appointmentDate"
+            placeholder="预约日期"
+            value-format="yyyy-MM-dd"
+            :picker-options="dateOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item
+          v-if="timeList.length > 0"
+          label="预约时段"
+          prop="timeId"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-checkbox-group
+            style="margin-left: auto; width: 600px"
+            v-model="dataForm.timeId"
+          >
+            <el-checkbox
+              :label="item.timeId"
+              :key="item.timeId"
+              :disabled="item.isAppointment"
+              v-for="item in timeList"
+              >{{ item.time }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </el-form-item>
+
+        <el-form-item
+          label="预约人"
+          prop="appointmentName"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入预约人"
+            v-model="dataForm.appointmentName"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="联系方式"
+          prop="appointmentPhone"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入联系方式"
+            v-model="dataForm.appointmentPhone"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="备注"
+          prop="remark"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            type="textarea"
+            maxlength="1000"
+            show-word-limit
+            :rows="3"
+            placeholder="请输入备注，不超过1000字"
+            v-model="dataForm.remark"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="div_btn">
+      <el-button @click="handleCancle">取 消</el-button>
+      <el-button
+        v-if="formType != 'detail'"
+        type="primary"
+        :disabled="btnDisable"
+        @click="handleComfirm"
+        >确 定</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { Loading } from "element-ui"; // 引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+var map;
+var search;
+var markers;
+var infoWindowList;
+let loading; // 加载动画
+
+export default {
+  data() {
+    return {
+      formType: "add", //表单操作类型 add新增，edit编辑，detail详情
+
+      btnDisable: false,
+
+      info: {
+        matterName: "",
+      },
+
+      dateOptions: {
+        disabledDate(time) {
+          return (
+            time.getTime() < Date.now() - 3600 * 24 * 1 * 1000 ||
+            time.getTime() > Date.now() + 3600 * 24 * 6 * 1000
+          );
+        },
+      },
+      timeList: [],
+
+      dataForm: {
+        matterId: "",
+        appointmentDate: "",
+        timeId: [],
+        appointmentName: "",
+        appointmentPhone: "",
+        remark: "",
+      },
+    };
+  },
+  components: {},
+  computed: {
+    dataRule() {
+      return {
+        appointmentName: [
+          { required: true, message: "预约人不能为空", trigger: "blur" },
+        ],
+        appointmentPhone: [
+          { required: true, message: "预约人电话不能为空", trigger: "blur" },
+        ],
+        appointmentDate: [
+          { required: true, message: "预约日期不能为空", trigger: "blur" },
+        ],
+        timeId: [
+          { required: true, message: "预约时段不能为空", trigger: "blur" },
+        ],
+      };
+    },
+  },
+  props: {},
+  watch: {
+    "dataForm.appointmentDate": function () {
+      this.getTimeList();
+    },
+  },
+
+  async mounted() {},
+
+  methods: {
+    async initForm(type, row, index) {
+      this.$refs.ref_form.resetFields();
+
+      let item = row.matterList[index];
+      if (item) {
+        this.dataForm.matterId = item.matterId;
+        this.info.matterName = item.matterName;
+      }
+    },
+
+    async getTimeList() {
+      let url = "/gov/org/icpartyservicecenter/appointmenttime";
+
+      const {
+        dataForm: { matterId, appointmentDate },
+      } = this;
+      if (!matterId || !appointmentDate) return;
+
+      const { data, code, msg } = await requestPost(url, {
+        matterId,
+        date: appointmentDate,
+      });
+
+      if (code === 0) {
+        this.timeList = data.timeDetail || [];
+      } else {
+      }
+    },
+
+    async handleComfirm() {
+      this.btnDisable = true;
+      setTimeout(() => {
+        this.btnDisable = false;
+      }, 10000);
+      this.$refs["ref_form"].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj);
+          this.btnDisable = false;
+        } else {
+          this.submit();
+        }
+      });
+    },
+
+    async submit() {
+      let url = "";
+      if (this.formType === "add") {
+        url = "/gov/org/icpartyservicecenter/appointment";
+        // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
+      }
+
+      const { data, code, msg } = await requestPost(url, {
+        ...this.dataForm,
+        timeId: this.dataForm.timeId.join(","),
+      });
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "操作成功",
+        });
+        this.resetData();
+        this.$emit("dialogOk");
+        this.btnDisable = false;
+      } else {
+        this.btnDisable = false;
+        this.$message.error(msg);
+      }
+    },
+
+    handleCancle() {
+      this.resetData();
+      this.$emit("dialogCancle");
+    },
+    resetData() {
+      this.dataForm = {
+        matterId: "",
+        appointmentDate: "",
+        timeId: [],
+        appointmentName: "",
+        appointmentPhone: "",
+        remark: "",
+      };
+      this.timeList = [];
+    },
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: "正在加载……", // 加载中需要显示的文字
+        background: "rgba(0,0,0,.7)", // 背景颜色
+      });
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.item_width_1 {
+  width: 500px;
+}
+.item_width_2 {
+  width: 400px;
+}
+.item_width_3 {
+  margin-left: 10px;
+  width: 200px;
+}
+.item_width_4 {
+  width: 200px;
+}
+
+.div_map {
+  margin-top: 10px;
+}
+
+.div_btn {
+  display: flex;
+  justify-content: flex-end;
+}
+.el-tabs {
+  margin: 0 20px;
+}
+.el-upload__tip {
+  color: rgb(155, 155, 155);
+  margin: 0;
+}
+.form {
+  margin-top: 30px;
+}
+</style>
+
+<style>
+.el-dialog__body {
+  padding: 0 10px 20px !important;
+}
+</style>
diff --git a/src/views/modules/communityService/dqfwzx/cpts/orderList.vue b/src/views/modules/communityService/dqfwzx/cpts/orderList.vue
new file mode 100644
index 00000000..4f812c75
--- /dev/null
+++ b/src/views/modules/communityService/dqfwzx/cpts/orderList.vue
@@ -0,0 +1,206 @@
+<template>
+  <div style="min-height: 400px">
+    <el-form ref="ref_form" :inline="true" class="form">
+      <el-form-item
+        label="选择预约日期"
+        prop="appointmentDate"
+        label-width="110px"
+        style="display: block"
+      >
+        <el-date-picker
+          v-model="appointmentDate"
+          placeholder="预约日期"
+          value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      v-if="tableData.length > 0"
+      :data="tableData"
+      border
+      style="width: 96%; margin: 0 auto"
+      class="resi-table"
+      :max-height="maxTableHeight"
+    >
+      <el-table-column label="序号" type="index" align="center" width="50" />
+      <el-table-column prop="matterName" label="预约事项"></el-table-column>
+      <el-table-column
+        prop="appointmentTime"
+        label="预约时间"
+      ></el-table-column>
+      <el-table-column prop="appointmentName" label="预约人"></el-table-column>
+      <el-table-column
+        prop="appointmentPhone"
+        label="联系方式"
+      ></el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button
+            @click="handleCancel(scope.$index)"
+            type="text"
+            size="small"
+            >取消</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="m-hint" v-else>
+      <el-empty description="暂无内容" :image-size="200"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { Loading } from "element-ui"; // 引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+var map;
+var search;
+var markers;
+var infoWindowList;
+let loading; // 加载动画
+
+export default {
+  data() {
+    return {
+      appointmentDate: new Date().toLocaleDateString().split("/").join("-"),
+      matterId: "",
+      tableData: [],
+    };
+  },
+  components: {},
+  computed: {},
+  props: {},
+  watch: {
+    appointmentDate: function () {
+      this.getList();
+    },
+  },
+
+  async mounted() {},
+
+  methods: {
+    async init(row, index) {
+      let item = row.matterList[index];
+      if (item) {
+        this.matterId = item.matterId;
+        this.getList();
+      }
+    },
+
+    async getList() {
+      let url = "/gov/org/icpartyservicecenter/appointmentrecord";
+
+      const { matterId, appointmentDate } = this;
+      if (!matterId || !appointmentDate) return;
+
+      const { data, code, msg } = await requestPost(url, {
+        matterId,
+        date: appointmentDate,
+      });
+
+      if (code === 0) {
+        this.tableData = data
+          ? data.map((item) => {
+              item.appointmentTime = item.appointmentTime.join("，");
+              return item;
+            })
+          : [];
+      } else {
+      }
+    },
+    async handleCancel(index) {
+      let url = "/gov/org/icpartyservicecenter/cancelappointment";
+
+      const { matterId, tableData } = this;
+
+      const { data, code, msg } = await requestPost(url, {
+        matterId,
+        recordId: tableData[index].recordId,
+      });
+
+      if (code === 0) {
+        this.$message.success("操作成功");
+        this.getList();
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handleCancle() {
+      this.resetData();
+      this.$emit("dialogCancle");
+    },
+    resetData() {
+      this.tableData = [];
+    },
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: "正在加载……", // 加载中需要显示的文字
+        background: "rgba(0,0,0,.7)", // 背景颜色
+      });
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-hint {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.item_width_1 {
+  width: 500px;
+}
+.item_width_2 {
+  width: 400px;
+}
+.item_width_3 {
+  margin-left: 10px;
+  width: 200px;
+}
+.item_width_4 {
+  width: 200px;
+}
+
+.div_map {
+  margin-top: 10px;
+}
+
+.div_btn {
+  display: flex;
+  justify-content: flex-end;
+}
+.el-tabs {
+  margin: 0 20px;
+}
+.el-upload__tip {
+  color: rgb(155, 155, 155);
+  margin: 0;
+}
+.form {
+  margin-top: 30px;
+}
+</style>
+
+<style>
+.el-dialog__body {
+  padding: 0 10px 20px !important;
+}
+</style>
diff --git a/src/views/modules/communityService/dqfwzx/index.vue b/src/views/modules/communityService/dqfwzx/index.vue
index 2afa5533..36e5a473 100644
--- a/src/views/modules/communityService/dqfwzx/index.vue
+++ b/src/views/modules/communityService/dqfwzx/index.vue
@@ -6,48 +6,89 @@
           >新增</el-button
         >
       </div>
-      <el-table
-        :data="tableData"
-        border
-        style="width: 100%"
-        class="resi-table"
-        :max-height="maxTableHeight"
-      >
-        <el-table-column label="序号" type="index" align="center" width="50" />
-        <el-table-column prop="centerName" label="组织名称"> </el-table-column>
-        <el-table-column fixed="right" label="操作" align="center" width="120">
-          <template slot-scope="scope">
-            <el-button
-              @click="handleWatch(scope.$index)"
-              type="text"
-              size="small"
-              >查看</el-button
-            >
 
-            <el-button
-              @click="handleEdit(scope.$index)"
-              type="text"
-              size="small"
-              style="margin-right: 10px; color: #00a7a9"
-              >编辑</el-button
+      <div class="m-center" v-if="tableData.length > 0">
+        <div class="center-left">
+          <div class="list">
+            <div
+              @click="currentIndex = index"
+              class="item"
+              :class="{ 'z-on': currentIndex == index }"
+              :key="'ct' + index"
+              v-for="(item, index) in tableData"
             >
+              <div class="item-name">{{ item.centerName }}</div>
+              <div class="item-prop">
+                <div class="prop-field">社区地址：</div>
+                <div class="prop-value">{{ item.address }}</div>
+              </div>
+              <div class="item-prop">
+                <div class="prop-field">办公电话：</div>
+                <div class="prop-value">{{ item.workPhone }}</div>
+              </div>
+              <div class="item-prop">
+                <div class="prop-field">办公时间：</div>
+                <div class="prop-value">
+                  <p>上午 {{ item.amStartTime }} - {{ item.amEndTime }}</p>
+                  <p>下午 {{ item.pmStartTime }} - {{ item.pmEndTime }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-            <el-popconfirm
-              title="删除之后无法回复，确认删除？"
-              @onConfirm="handleDel(scope.row, scope.$index)"
-              @confirm="handleDel(scope.row, scope.$index)"
+        <div class="center-right">
+          <div class="operate">
+            <el-button type="warning" size="small" @click="handleEdit"
+              >修改</el-button
+            >
+          </div>
+          <el-table
+            :data="tableData[currentIndex].matterList"
+            border
+            style="width: 100%"
+            class="resi-table"
+            :max-height="maxTableHeight"
+          >
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              width="50"
+            />
+            <el-table-column prop="matterName" label="事项名称">
+            </el-table-column>
+            <el-table-column prop="allowTime" label="可预约时间	">
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              label="操作"
+              align="center"
+              width="120"
             >
-              <el-button
-                slot="reference"
-                type="text"
-                size="small"
-                style="color: #d51010"
-                >删除</el-button
-              >
-            </el-popconfirm>
-          </template>
-        </el-table-column>
-      </el-table>
+              <template slot-scope="scope">
+                <el-button
+                  @click="handleOrder(scope.$index)"
+                  type="text"
+                  size="small"
+                  >预约</el-button
+                >
+
+                <el-button
+                  @click="handleOrderList(scope.$index)"
+                  type="text"
+                  size="small"
+                  style="margin-right: 10px; color: #00a7a9"
+                  >预约记录</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="m-hint" v-else>
+        <el-empty description="暂无内容" :image-size="200"></el-empty>
+      </div>
     </el-card>
 
     <!-- 修改弹出框 -->
@@ -66,6 +107,39 @@
         @dialogOk="handleEditSuccess"
       ></edit-form>
     </el-dialog>
+
+    <!-- 修改弹出框 -->
+    <el-dialog
+      :visible.sync="form2Show"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="预约"
+      width="850px"
+      top="5vh"
+      @closed="handleCloseForm2"
+    >
+      <order-form
+        ref="eleOrderForm"
+        @dialogCancle="handleCloseForm2"
+        @dialogOk="handleOrderSuccess"
+      ></order-form>
+    </el-dialog>
+
+    <!-- 修改弹出框 -->
+    <el-dialog
+      :visible.sync="orderListShow"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="预约记录"
+      width="850px"
+      top="5vh"
+      @closed="handleCloseOrderList"
+    >
+      <order-list
+        ref="eleOrderList"
+        @dialogCancle="handleCloseOrderList"
+      ></order-list>
+    </el-dialog>
   </div>
 </template>
 
@@ -74,20 +148,25 @@ import { requestPost } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
 import { mapGetters } from "vuex";
 import editForm from "./cpts/edit";
+import orderForm from "./cpts/order";
+import orderList from "./cpts/orderList";
 
 export default {
-  components: { editForm },
+  components: { editForm, orderForm, orderList },
   data() {
     return {
       openSearch: false,
 
       formShow: false,
       formTitle: "",
-      formShow: false,
+      form2Show: false,
+      orderListShow: false,
 
       agencyId: "",
 
       tableData: [],
+
+      currentIndex: 0,
     };
   },
   computed: {
@@ -105,6 +184,12 @@ export default {
     handleClose() {
       this.formShow = false;
     },
+    handleCloseForm2() {
+      this.form2Show = false;
+    },
+    handleCloseOrderList() {
+      this.orderListShow = false;
+    },
 
     async handleAdd() {
       this.formShow = true;
@@ -113,16 +198,22 @@ export default {
       this.$refs.eleEditForm.initForm("add");
     },
 
-    async handleWatch(rowIndex) {
+    async handleWatch() {
       this.formShow = true;
       await nextTick();
-      this.$refs.eleEditForm.initForm("detail", this.tableData[rowIndex]);
+      this.$refs.eleEditForm.initForm(
+        "detail",
+        this.tableData[this.currentIndex]
+      );
     },
 
-    async handleEdit(rowIndex) {
+    async handleEdit() {
       this.formShow = true;
       await nextTick();
-      this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
+      this.$refs.eleEditForm.initForm(
+        "edit",
+        this.tableData[this.currentIndex]
+      );
     },
 
     handleEditSuccess() {
@@ -130,6 +221,27 @@ export default {
       this.getTableData();
     },
 
+    async handleOrder(index) {
+      this.form2Show = true;
+      await nextTick();
+      this.$refs.eleOrderForm.initForm(
+        "add",
+        this.tableData[this.currentIndex],
+        index
+      );
+    },
+
+    handleOrderSuccess() {
+      this.handleCloseForm2();
+    },
+
+    async handleOrderList(index) {
+      this.orderListShow = true;
+      await nextTick(0);
+      console.log(this.$refs);
+      this.$refs.eleOrderList.init(this.tableData[this.currentIndex], index);
+    },
+
     async handleDel(rowData, rowIndex) {
       console.log(rowData, rowIndex);
       const url =
@@ -156,12 +268,8 @@ export default {
       });
       if (code === 0) {
         console.log("列表请求成功！！！！！！！！！！！！！！");
-        this.total = data.total || 0;
-        this.tableData = data.list
-          ? data.list.map((item) => {
-              return item;
-            })
-          : [];
+
+        this.tableData = data;
       } else {
       }
     },
@@ -184,6 +292,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.m-hint {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.m-center {
+  display: flex;
+  .center-left {
+    width: 25%;
+    .list {
+      .item {
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        border: 2px solid #6aa;
+        border-radius: 4px;
+        padding: 13px 13px;
+        background-color: rgba(#6aa, 0.1);
+        cursor: pointer;
+
+        &.z-on {
+          background-color: #ffffff;
+          box-shadow: 0 0 10px #6aa;
+        }
+        .item-name {
+          font-size: 16px;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+        .item-prop {
+          display: flex;
+          margin-bottom: 8px;
+          font-size: 14px;
+
+          .prop-field {
+            width: 70px;
+          }
+          .prop-value {
+            margin-left: 5px;
+            p {
+              margin: 0;
+              margin-bottom: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .center-right {
+    margin-left: auto;
+    width: 72%;
+    .operate {
+      margin-bottom: 10px;
+      text-align: right;
+    }
+  }
+}
 .tabs-other-info {
   .el-tabs__item {
     // width: 50px;
diff --git a/src/views/modules/communityService/shzz/index.vue b/src/views/modules/communityService/shzz/index.vue
index 2f24ff24..508838f9 100644
--- a/src/views/modules/communityService/shzz/index.vue
+++ b/src/views/modules/communityService/shzz/index.vue
@@ -205,7 +205,6 @@ export default {
 
       formShow: false,
       formTitle: "",
-      formShow: false,
 
       pageNo: 1,
       pageSize: window.localStorage.getItem("pageSize") || 20,
diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue
index 82475d7f..d9537772 100644
--- a/src/views/modules/communityService/sqzzz/cpts/edit.vue
+++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue
@@ -135,16 +135,14 @@
         </el-form-item>
 
         <el-form-item
-          label="创建时间	"
+          label="创建时间"
           prop="organizationCreatedTime"
           label-width="150px"
           style="display: block"
         >
           <el-date-picker
             v-model="dataForm.organizationCreatedTime"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            placeholder="创建时间"
             value-format="yyyy-MM-dd"
           >
           </el-date-picker>
diff --git a/src/views/modules/communityService/sqzzz/index.vue b/src/views/modules/communityService/sqzzz/index.vue
index e0a6ec96..a2c1a7d7 100644
--- a/src/views/modules/communityService/sqzzz/index.vue
+++ b/src/views/modules/communityService/sqzzz/index.vue
@@ -173,7 +173,6 @@ export default {
 
       formShow: false,
       formTitle: "",
-      formShow: false,
 
       pageNo: 1,
       pageSize: window.localStorage.getItem("pageSize") || 20,