11

src/components/assetsman/RoomList.vue

+<template>
+  <div class="assetsList">
+    <div class="routerTitle">
+      <span class="pageTitle">酒店列表</span>
+      <span @click="morequery = !morequery" style="display:inline-flex;align-items:center;cursor: pointer;"
+        class="f12 cd6">
+        <span style="margin-right:5px">高级查询</span>
+        <img v-show="!morequery" style="width:12px;height:12px;" src="../../assets/img/more.png" alt="" />
+        <img v-show="morequery" class="roatImg" style="width:12px;height:12px" src="../../assets/img/more.png" alt="" />
+      </span>
+      <span @click="getList" style="margin-left:20px" class="chaxunSpan">照会</span>
+      <span @click="addHotel()" style="margin-left:20px" class="addSpan">
+        <img style="width:10px;height:10px;margin-right:6px" src="../../assets/img/add.png" alt="" />
+        新たに</span>
+    </div>
+    <div class="padContent">
+      <ul v-show="morequery" class="queryul">
+        <li>
+          <el-input class="w200" size="small" v-model="msg.RoomName" placeholder="房型名称"></el-input>
+        </li>
+        <li>
+          <el-select size="small" v-model="msg.HotelId" placeholder="酒店" clearable filterable>
+            <el-option v-for="item in PropertyStatusList" :key="item.Id" :label="item.Name" :value="item.Id">
+            </el-option>
+          </el-select>
+        </li>
+        <li>
+          <el-select size="small" filterable clearable v-model="msg.EmployeeId" placeholder="房型类型">
+            <el-option v-for="item in RoomTypeList" :key="item.Id" :label="item.Name"
+              :value="item.Id">
+            </el-option>
+          </el-select>
+        </li>
+        <li>
+          <el-select clearable size="small" v-model="msg.SupplierId" placeholder="状态">
+            <el-option label="不限" :value="0"></el-option>
+            <el-option label="上架" :value="1"></el-option>
+            <el-option label="下架" :value="2"></el-option>
+          </el-select>
+        </li>
+      </ul>
+      <vxe-table stripe style="margin-top:15px" :loading="loading" :data="dataList">
+        <vxe-table-column field="RoomName" title="房型"></vxe-table-column>
+        <vxe-table-column field="RoomTypeName" title="类型"></vxe-table-column>
+        <vxe-table-column field="CostPrice" title="成本价"></vxe-table-column>
+        <vxe-table-column field="Money" title="售卖价"></vxe-table-column>
+        <vxe-table-column field="ToDayMoney" title="今日卖价">
+            <template v-slot="{row}">
+                <span v-if="row.ToDayMoney==0">未设置</span>
+                <span v-else>{{row.ToDayMoney}}</span>
+            </template>
+        </vxe-table-column>
+        <vxe-table-column field="Description" title="描述"></vxe-table-column>
+        <vxe-table-column field="UpdateBy" title="修正者"></vxe-table-column>
+        <vxe-table-column field="ImageList" title="图片">
+            <template v-slot="{row}">
+                <span>查看房型图片</span>
+            </template>
+        </vxe-table-column>
+        <vxe-table-column field="RoomStatus" title="状态">
+            <template v-slot="{row}">
+                <span v-if="row.RoomStatus==1">上架</span>
+                <span v-if="row.RoomStatus==2">下架</span>
+            </template>
+        </vxe-table-column>
+        <vxe-table-column field="Mobile" title="操作人/时间">
+                <template  v-slot="{ row }">
+                  <p>{{ row.UpdateByName }}</p>
+                  <p>{{ row.UpdateTime }}</p>
+              </template>
+            </vxe-table-column>
+        <vxe-table-column field="address" title="操作">
+            <template  v-slot="{ row }">
+                <el-tooltip class="item" effect="dark" content="修正" placement="top" >
+                    <img @click="Edit(row)" style="width:24px;height:24px" src="../../assets/img/edit.png" alt="" />
+                </el-tooltip>
+            </template>
+        </vxe-table-column>
+      </vxe-table>
+      <el-pagination @current-change="currentChange" background :page-size="msg.pageSize" layout="prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  import moment from 'moment'
+  export default {
+    name: "assetsList",
+    components: {},
+    data() {
+      return {
+        PropertyStatusList:[],
+        currentPage: 1,
+        dataList: [],
+        loading: false,
+        morequery:false,
+        total: 0,
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          RoomName:'',
+          HotelId:'',
+          RoomType:'',
+          RoomStatus:0,
+        },
+        RoomTypeList:[],
+      };
+    },
+    mounted() {
+      this.getList();
+      this.getRoomType();
+    },
+    methods: {
+      currentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      getList() {
+        this.apipost("scm_get_GetSCMHotelRoomPageList", this.msg,
+        res => {
+            if (res.data.resultCode == 1) {
+                this.dataList = res.data.data.pageData;
+                this.total = res.data.data.count;
+                console.log("this.dataList", this.dataList)
+            } else {
+                this.Error(res.data.message);
+            }
+        });
+      },
+      getRoomType() {
+        this.apipost("scm_get_GetSCMHotelRoomTypeEnumList", {},
+        res => {
+            if (res.data.resultCode == 1) {
+                this.RoomTypeList = res.data.data;
+            } else {
+                this.Error(res.data.message);
+            }
+        });
+      },
+      addHotel(){
+        this.$router.push({path: 'HotelInfo'})
+      },
+      getDate(date){
+        return moment(date).format("YYYY-MM-DD HH:mm:ss");
+      },
+      //修改
+      Edit(item) {
+        this.$router.push({
+          path: 'HotelInfo',
+          query: {
+            SID: item.SID
+          }
+        })
+      },
+    }
+  };
+
+</script>
+
+<style>
+  .assetsList .MyEditForm .baseform .el-form-item:nth-child(4n) {
+    margin-right: 0;
+  }
+
+  .assetsList .zczt1 {
+    background: #ffe4d5;
+    color: #ffa87c;
+  }
+
+  .assetsList .zczt2 {
+    background: #beeff0;
+    color: #089bab;
+  }
+
+  .assetsList .zczt3 {
+    background: #ffd6d5;
+    color: #ff7874;
+  }
+
+  .assetsList .zczt4 {
+    background: #d7d6ff;
+    color: #7b78ff;
+  }
+
+  .assetsList .Commonzczt {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 12px;
+    font-family: "Microsoft YaHei";
+  }
+
+  .assetsList {
+    width: 100%;
+    height: 100%;
+  }
+
+</style>

src/components/global/Nav.vue

@@ -14,14 +14,17 @@
             <span slot="title">首页</span>
           </div>
         </el-menu-item>
-        <el-submenu>
+        <el-submenu index="2-1">
           <template slot="title">
             <div class="menuDiv">
               <span slot="title">酒店管理</span>
             </div>
           </template>
           <el-menu-item-group class="itemgroup">
-            <el-menu-item @click="goUrl('HotelList')"><span>酒店列表</span></el-menu-item>  
+            <el-menu-item index="2-1-1" @click="goUrl('HotelList')"><span>酒店列表</span></el-menu-item>  
+          </el-menu-item-group>
+          <el-menu-item-group class="itemgroup">
+            <el-menu-item index="2-2-2"  @click="goUrl('RoomList')"><span>房型列表</span></el-menu-item>  
           </el-menu-item-group>
         </el-submenu>
 

src/router/config.js

@@ -52,6 +52,12 @@ export default {
                     path: '/HotelList',
                     name: 'HotelList',
                     component: resolve => require(['@/components/assetsman/HotelList'], resolve),
+                },
+                //房型列表
+                {
+                    path: '/RoomList',
+                    name: 'RoomList',
+                    component: resolve => require(['@/components/assetsman/RoomList'], resolve),
                 }