自定义时间显示

src/views/modules/communityService/dqfwzx/index.vue

@@ -2,24 +2,26 @@
   <div>
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
-        <el-button class="diy-button--add" size="small" @click="handleAdd"
+        <el-button class="diy-button--add"
-          >新增</el-button
+                   size="small"
-        >
+                   @click="handleAdd">新增</el-button>
       </div>
 
-      <div class="m-center" v-if="tableData.length > 0">
+      <div class="m-center"
+           v-if="tableData.length > 0">
         <div class="center-left">
-          <div class="list" :class="{ 'z-iframe': $store.state.inIframe }">
+          <div class="list"
-            <div
+               :class="{ 'z-iframe': $store.state.inIframe }">
-              @click="currentIndex = index"
+            <div @click="currentIndex = index"
                  class="item"
                  :class="{ 'z-on': currentIndex == index }"
                  :key="'ct' + index"
-              v-for="(item, index) in tableData"
+                 v-for="(item, index) in tableData">
-            >
               <div class="item-btns">
-                <a v-if="currentIndex == index" @click="handleEdit">修改</a>
+                <a v-if="currentIndex == index"
-                <a v-if="currentIndex == index" @click="handleDel">删除</a>
+                   @click="handleEdit">修改</a>
+                <a v-if="currentIndex == index"
+                   @click="handleDel">删除</a>
               </div>
 
               <div class="item-name">{{ item.centerName }}</div>
@@ -49,108 +51,93 @@
             >
           </div> -->
 
-          <div id="centerIndexApp" class="div_map"></div>
+          <div id="centerIndexApp"
+               class="div_map"></div>
 
-          <el-table
+          <el-table :data="tableData[currentIndex].matterList"
-            :data="tableData[currentIndex].matterList"
                     border
                     style="width: 100%"
                     class="resi-table"
-            :max-height="maxTableHeight"
+                    :max-height="maxTableHeight">
-          >
+            <el-table-column label="序号"
-            <el-table-column
-              label="序号"
                              type="index"
                              align="center"
-              width="50"
+                             width="50" />
-            />
+            <el-table-column prop="matterName"
-            <el-table-column prop="matterName" label="事项名称">
+                             label="事项名称">
             </el-table-column>
-            <el-table-column prop="allowTime" label="可预约时间	">
+            <el-table-column prop="allowTime"
+                             label="可预约时间	">
+              <template slot-scope="scope">
+                <span v-if="scope.row.appointmentType==='custom'">{{scope.row.showName}}</span>
+                <span v-else>{{scope.row.allowTime}}</span>
+              </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column fixed="right"
-              fixed="right"
                              label="操作"
                              align="center"
-              width="120"
+                             width="120">
-            >
               <template slot-scope="scope">
-                <el-button
+                <el-button @click="handleOrder(scope.$index)"
-                  @click="handleOrder(scope.$index)"
                            type="text"
                            size="small"
-                  style="color: #1c6afd"
+                           style="color: #1c6afd">预约</el-button>
-                  >预约</el-button
-                >
 
-                <el-button
+                <el-button @click="handleOrderList(scope.$index)"
-                  @click="handleOrderList(scope.$index)"
                            type="text"
                            size="small"
-                  style="margin-right: 10px; color: #1c6afd"
+                           style="margin-right: 10px; color: #1c6afd">预约记录</el-button>
-                  >预约记录</el-button
-                >
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
-      <div class="m-hint" v-else>
+      <div class="m-hint"
-        <el-empty description="暂无内容" :image-size="200"></el-empty>
+           v-else>
+        <el-empty description="暂无内容"
+                  :image-size="200"></el-empty>
       </div>
     </el-card>
 
     <!-- 修改弹出框 -->
-    <el-dialog
+    <el-dialog :visible.sync="formShow"
-      :visible.sync="formShow"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="formTitle"
                width="850px"
                top="5vh"
                class="dialog-h"
-      @closed="handleClose"
+               @closed="handleClose">
-    >
+      <edit-form ref="eleEditForm"
-      <edit-form
-        ref="eleEditForm"
                  @dialogCancle="handleClose"
-        @dialogOk="handleEditSuccess"
+                 @dialogOk="handleEditSuccess"></edit-form>
-      ></edit-form>
     </el-dialog>
 
     <!-- 修改弹出框 -->
-    <el-dialog
+    <el-dialog :visible.sync="form2Show"
-      :visible.sync="form2Show"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                title="预约"
                width="850px"
                top="5vh"
                class="dialog-h"
-      @closed="handleCloseForm2"
+               @closed="handleCloseForm2">
-    >
+      <order-form ref="eleOrderForm"
-      <order-form
-        ref="eleOrderForm"
                   @dialogCancle="handleCloseForm2"
-        @dialogOk="handleOrderSuccess"
+                  @dialogOk="handleOrderSuccess"></order-form>
-      ></order-form>
     </el-dialog>
 
     <!-- 修改弹出框 -->
-    <el-dialog
+    <el-dialog :visible.sync="orderListShow"
-      :visible.sync="orderListShow"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                title="预约记录"
                width="850px"
                top="5vh"
                class="dialog-h"
-      @closed="handleCloseOrderList"
+               @closed="handleCloseOrderList">
-    >
+      <order-list ref="eleOrderList"
-      <order-list
+                  @dialogCancle="handleCloseOrderList"></order-list>
-        ref="eleOrderList"
-        @dialogCancle="handleCloseOrderList"
-      ></order-list>
     </el-dialog>
   </div>
 </template>
@@ -312,6 +299,46 @@ export default {
       });
       if (code === 0) {
         console.log("列表请求成功！！！！！！！！！！！！！！");
+        data.forEach(tableItem => {
+          if (tableItem.matterList.length > 0) {
+            tableItem.matterList.forEach(element => {
+              if (element.appointmentType === 'custom') {
+                let showName = ''
+                let customList = element.customDay.split(',')
+                let customNameList = []
+
+                customList.forEach(customItem => {
+                  if (customItem === '1') {
+                    customNameList.push('周日')
+                  }
+                  if (customItem === '2') {
+                    customNameList.push('周一')
+                  }
+                  if (customItem === '3') {
+                    customNameList.push('周二')
+                  }
+                  if (customItem === '4') {
+                    customNameList.push('周三')
+                  }
+                  if (customItem === '5') {
+                    customNameList.push('周四')
+                  }
+                  if (customItem === '6') {
+                    customNameList.push('周五')
+                  }
+                  if (customItem === '7') {
+                    customNameList.push('周六')
+                  }
+                });
+
+                showName = customNameList.join('、')
+                showName = showName + ' ' + element.startTime + '-' + element.endTime
+                element.showName = showName
+              }
+
+            });
+          }
+        });
 
         this.tableData = data;