管理后台-门店管理

htmldev/manage/src/router/modules/business.js

@@ -19,16 +19,6 @@ const businessRouter = {
           component: () => import('@/views/business/outlet/list/index'),
           name: 'BusinessOutletList',
           meta: { title: '门店列表' }
-        },
-        {
-          hidden: true,
-          path: 'detail',
-          component: () => import('@/views/business/outlet/detail/index'),
-          name: 'BusinessOutletDetail',
-          meta: { title: '门店详情', noCache: true },
-          props: (route) => ({
-            id: route.query.id
-          })
         }
       ]
     },

htmldev/manage/src/views/business/outlet/list/index.vue

@@ -28,40 +28,63 @@
       </el-form>
     </div>
     <el-table :data="tableData"
-              stripe
               v-loading="tableLoading"
               fit
               class="marginT-10 order-table"
-              border
               :max-height="vheight">
-      <el-table-column fixed label="编号" prop="id"></el-table-column>
-      <el-table-column label="酒吧名称" prop="bar_name"></el-table-column>
-      <el-table-column label="门店地址" prop="bar_address"></el-table-column>
-      <el-table-column label="门店图片">
-        <template slot-scope="scope"
-                  v-if="scope.row.bar_img_url.length">
-          <el-image
-            style="width: 100px; height: 100px"
-            :src="'//' + scope.row.bar_img_url[0]"
-            :preview-src-list="scope.row.bar_img_url.map(item => '//' + item)">
-          </el-image>
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left"
+                   inline
+                   class="demo-table-expand"
+                   label-width="160px">
+            <el-form-item label="编号">
+              <span>{{ props.row.id }}</span>
+            </el-form-item>
+            <el-form-item label="酒吧名称">
+              <span>{{ props.row.bar_name }}</span>
+            </el-form-item>
+            <el-form-item label="门店地址">
+              <span>{{ props.row.bar_address }}</span>
+            </el-form-item>
+            <el-form-item label="酒吧状态">
+              <span>{{ ['无效', '有效'][props.row.bar_status] }}</span>
+            </el-form-item>
+            <el-form-item label="点歌开始时间">
+              <span>{{ props.row.bar_song_start_time }}</span>
+            </el-form-item>
+            <el-form-item label="点歌结束时间">
+              <span>{{ props.row.bar_song_end_time }}</span>
+            </el-form-item>
+            <el-form-item label="酒吧座位预定开始时间">
+              <span>{{ props.row.bar_place_reserve_start_time }}</span>
+            </el-form-item>
+            <el-form-item label="酒吧座位预定结束时间">
+              <span>{{ props.row.bar_place_reserve_end_time }}</span>
+            </el-form-item>
+            <el-form-item label="门店图片">
+              <el-image style="width: 100px; height: 100px"
+                        :src="'//' + props.row.bar_img_url[0]"
+                        :preview-src-list="props.row.bar_img_url.map(item => '//' + item)">
+              </el-image>
+            </el-form-item>
+            <el-form-item label="备注">
+              <span></span>
+            </el-form-item>
+          </el-form>
         </template>
       </el-table-column>
-      <el-table-column label="酒吧状态">
+      <el-table-column label="编号" prop="id" width="160"></el-table-column>
+      <el-table-column label="酒吧名称" prop="bar_name" width="240"></el-table-column>
+      <el-table-column label="门店地址" prop="bar_address"></el-table-column>
+      <el-table-column label="酒吧状态" width="100">
         <template slot-scope="scope">
           <p>{{ ['无效', '有效'][scope.row.bar_status] }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="点歌开始时间" prop="bar_song_start_time"></el-table-column>
-      <el-table-column label="点歌结束时间" prop="bar_song_end_time"></el-table-column>
-      <el-table-column label="酒吧座位预定开始时间" prop="bar_place_reserve_start_time"></el-table-column>
-      <el-table-column label="酒吧座位预定结束时间" prop="bar_place_reserve_end_time"></el-table-column>
       <el-table-column label="备注"></el-table-column>
-      <el-table-column fixed="right" label="操作" width="200">
+      <el-table-column label="操作" width="100">
         <template slot-scope="scope">
-          <el-button type="text"
-                     @click="$router.push({name: 'BusinessOutletDetail', query: { id: scope.row.id }})">查看
-          </el-button>
           <el-button type="text" @click="edit(scope.row)">编辑</el-button>
         </template>
       </el-table-column>
@@ -122,4 +145,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.demo-table-expand {
+  .el-form-item {
+    width: 50%;
+    margin-right: 0;
+    margin-bottom: 0;
+
+    ::v-deep &__label {
+      color: #99a9bf;
+    }
+  }
+}
 </style>