酒店库存页面优化

src/components/Hotel/HotelProductManage.vue

 <style>
-.hotelproduct .addGroup {
+  .hotelproduct .addGroup {
     width: 500px;
-}
-.hotelproduct .f1 {
+  }
+
+  .hotelproduct .f1 {
     float: left;
     margin: 10px 18px 0 0;
-}
-.hotelproduct .remarkTextarea {
+  }
+
+  .hotelproduct .remarkTextarea {
     margin-top: 13px;
-}
-.hotelproduct .el-form-item__label {
+  }
+
+  .hotelproduct .el-form-item__label {
     width: 100px;
     line-height: 45px;
-}
-.hotelproduct .el-textarea__inner {
+  }
+
+  .hotelproduct .el-textarea__inner {
     resize: none;
     height: 100px;
     display: inline-block;
     font-family: "微软雅黑";
-}
-.hotelproduct .el-form-item__error {
+  }
+
+  .hotelproduct .el-form-item__error {
     left: 100px;
-}
-.hotelproduct .el-dialog--center .el-dialog__body {
+  }
+
+  .hotelproduct .el-dialog--center .el-dialog__body {
     padding: 25px 0 0 25px;
-}
-.hotelproduct .el-scrollbar {
+  }
+
+  .hotelproduct .el-scrollbar {
     width: 300px;
-}
-.hotelproduct .addGroup .el-scrollbar {
+  }
+
+  .hotelproduct .addGroup .el-scrollbar {
     width: 400px !important;
-}
+  }
 
-.hotelproduct .singeRowTable tr:nth-child(n + 2):hover {
+  .hotelproduct .singeRowTable tr:nth-child(n + 2):hover {
     background-color: white;
     box-shadow: 0px 0px 14px 0px #adadad;
     z-index: 10;
     position: relative;
-}
-.hotelproduct .DaysInfo span {
+  }
+
+  .hotelproduct .DaysInfo span {
     display: inline-block;
     background-color: #2aaef2;
     color: white;
@@ -46,54 +55,64 @@
     padding: 0 10px;
     height: 30px;
     line-height: 30px;
-}
-.hotelproduct .DaysInfo span i {
+  }
+
+  .hotelproduct .DaysInfo span i {
     margin-right: 10px;
-}
-.hotelproduct .singeRowTable tr:nth-child(n + 2) {
+  }
+
+  .hotelproduct .singeRowTable tr:nth-child(n + 2) {
     height: 80px;
     text-align: center;
-}
-.hotelproduct .detailsIT .singeRowTable tr:nth-child(n + 2):hover {
+  }
+
+  .hotelproduct .detailsIT .singeRowTable tr:nth-child(n + 2):hover {
     background-color: white;
     box-shadow: 0px 0px 14px 0px #adadad;
     z-index: 10;
     position: relative;
-}
-.hotelproduct .Ldata {
+  }
+
+  .hotelproduct .Ldata {
     color: #333333;
     margin-top: 5px;
     text-align: center;
-}
-.hotelproduct .LP {
+  }
+
+  .hotelproduct .LP {
     color: #e95252;
-}
-.hotelproduct .HP {
+  }
+
+  .hotelproduct .HP {
     color: #2aaef2 !important;
     text-align: left;
     font-weight: bold;
     padding-left: 5px;
     font-size: 14px !important;
-}
-.hotelproduct .tit_name {
+  }
+
+  .hotelproduct .tit_name {
     display: inline-block;
     width: 70px;
     text-align: left;
     font-size: 12px;
     color: #666666;
-}
-.hotelproduct .T1 {
+  }
+
+  .hotelproduct .T1 {
     text-align: right;
     color: #666666;
-}
-.hotelproduct .T2 {
+  }
+
+  .hotelproduct .T2 {
     text-align: left;
     color: #e95252;
     font-size: 14px;
     font-weight: bold;
     padding-left: 5px;
-}
-.hotelproduct .descripTion {
+  }
+
+  .hotelproduct .descripTion {
     border-radius: 4px;
     width: 266px;
     text-align: left;
@@ -104,11 +123,13 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
-}
-.hotelproduct .singeRowTable tr:nth-child(n + 2):hover .descripTion {
+  }
+
+  .hotelproduct .singeRowTable tr:nth-child(n + 2):hover .descripTion {
     background-color: #ededed;
-}
-.hotelproduct .roomName {
+  }
+
+  .hotelproduct .roomName {
     display: inline-block;
     width: 200px;
     overflow: hidden;
@@ -116,7 +137,8 @@
     white-space: nowrap;
     text-align: left;
     padding-left: 20px;
-}
+  }
+
 </style>
 <template>
   <div class="flexOne hotelproduct">
@@ -126,59 +148,51 @@
           <span>
             <em>{{$t('hotel.hotel_roomName')}}</em>
             <el-select filterable v-model='msg.HotelProductType' :placeholder="$t('pub.pleaseSel')">
-                      <el-option v-for='item in SelectHotelProductType' 
-                      :label='item.Name'
-                      :value='item.Id'
-                      :key='item.Id'>
+              <el-option v-for='item in SelectHotelProductType' :label='item.Name' :value='item.Id' :key='item.Id'>
               </el-option>
             </el-select>
-                        <!-- <el-input  v-model="msg.Name" maxlength="20" class="permiss-input" @keyup.native.enter="initData" :placeholder="$t('pub.pleaseImport')"></el-input> -->
           </span>
         </li>
         <li>
-                <button class="hollowFixedBtn" type="success" @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
-                <button class="normalBtn" type="success"  @click="outerVisible = true,dialogTitle='添加酒店产品',initAddMsg()">{{$t('pub.addBtn')}}</button>
+          <button class="hollowFixedBtn" type="success"
+            @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
+          <button class="normalBtn" type="success"
+            @click="outerVisible = true,dialogTitle='添加酒店产品',initAddMsg()">{{$t('pub.addBtn')}}</button>
         </li>
       </ul>
     </div>
-        <el-dialog custom-class='addGroup' :visible.sync="outerVisible" :title="dialogTitle" center :before-close="closeChangeMachie">
-              <el-form :model="addMsg" :rules="rules" ref="addMsg" >
+    <el-dialog custom-class='addGroup' :visible.sync="outerVisible" :title="dialogTitle" center
+      :before-close="closeChangeMachie">
+      <el-form :model="addMsg" :rules="rules" ref="addMsg">
         <el-form-item :label="$t('hotel.hotel_resource')" prop="Hotel_ID">
-                        <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" disabled  clearable v-model="addMsg.Hotel_ID">
-                            <el-option
-                            v-for="item in HotelName"
-                            :key="item.ID"
-                            :label="item.Name"
-                            :value="item.ID">
+          <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" disabled clearable
+            v-model="addMsg.Hotel_ID">
+            <el-option v-for="item in HotelName" :key="item.ID" :label="item.Name" :value="item.ID">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('hotel.product_name')" prop="HotelProductType">
           <el-select filterable v-model='addMsg.HotelProductType' :placeholder="$t('pub.pleaseSel')">
-                      <el-option v-for='item in HotelProductTypeList' 
-                      :label='item.Name'
-                      :value='item.Id'
-                      :key='item.Id'>
+            <el-option v-for='item in HotelProductTypeList' :label='item.Name' :value='item.Id' :key='item.Id'>
             </el-option>
           </el-select>
         </el-form-item>
-                     <!-- <el-form-item :label="$t('hotel.product_name')" prop="HotelProductType">
-          	
-                       <el-input type="text" class="w300" v-model="addMsg.HotelProductType"></el-input> 
-                    </el-form-item>-->
         <el-form-item :label="$t('hotel.table_servers')" prop="ServiceNumber">
-                        <el-input type="text" class="w300" v-model="addMsg.ServiceNumber" @keyup.native="checkInteger(addMsg,'ServiceNumber')"></el-input>
+          <el-input type="text" class="w300" v-model="addMsg.ServiceNumber"
+            @keyup.native="checkInteger(addMsg,'ServiceNumber')"></el-input>
         </el-form-item>
         <el-form-item :label="$t('hotel.hotel_produceDes')" prop="Description">
           <el-input class="w300" type="textarea" v-model="addMsg.Description"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-                <button class="hollowFixedBtn" @click="resetForm('addMsg'),outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
+        <button class="hollowFixedBtn"
+          @click="resetForm('addMsg'),outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
         <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
       </div>
     </el-dialog>
-        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading" style="border-collapse:separate;border-spacing:0px 10px;table-layout:fixed;">
+    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading"
+      style="border-collapse:separate;border-spacing:0px 10px;table-layout:fixed;">
       <tr>
         <th>{{$t('hotel.hotel_roomName')}}</th>
         <th>{{$t('scen.sc_bjts')}}</th>
@@ -210,13 +224,15 @@
           <p class="Ldata">{{item.HDate}}</p>
         </td>
         <td>
-                    <el-tooltip v-if="item.Description" class="item" effect="dark" :content="item.Description" placement="top-start" popper-class="max-w250">
+          <el-tooltip v-if="item.Description" class="item" effect="dark" :content="item.Description"
+            placement="top-start" popper-class="max-w250">
             <span class="descripTion">{{item.Description}}</span>
           </el-tooltip>
         </td>
         <td>
           <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
-                        <el-button type="primary" @click="outerVisible = true,dialogTitle='修改酒店产品',updateProduct(index,item.ID)" icon="el-icon-edit" circle></el-button>
+            <el-button type="primary" @click="outerVisible = true,dialogTitle='修改酒店产品',updateProduct(index,item.ID)"
+              icon="el-icon-edit" circle></el-button>
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="报价管理" placement="top-start">
             <el-button type="info" @click="goUrl('HotelPrice',item.ID)" icon="el-icon-document" circle></el-button>
@@ -224,11 +240,7 @@
         </td>
       </tr>
     </table>
-        <el-pagination 
-            background
-            @current-change="handleCurrentChange"
-            :current-page="1" 
-            :page-size="this.msg.PageSize" 
+    <el-pagination background @current-change="handleCurrentChange" :current-page="1" :page-size="this.msg.PageSize"
       layout="total,prev, pager, next, jumper" :total="total">
     </el-pagination>
   </div>
@@ -236,7 +248,7 @@
 </template>
 
 <script>
-export default {
+  export default {
     data() {
       return {
         total: 0,
@@ -246,8 +258,8 @@ export default {
         pageData: "",
         HotelName: "",
         HotelID: "",
-      Country:'',
-      IsSelfBook:'',
+        Country: '',
+        IsSelfBook: '',
         uodateId: "",
         loading: "true",
         msg: {
@@ -255,11 +267,11 @@ export default {
           PageSize: 10,
           pageIndex: 1,
           Name: "",
-        HotelProductType:"",
+          HotelProductType: "",
           Hotel_ID: ""
         },
-      HotelProductTypeList:[],
-      SelectHotelProductType:[],
+        HotelProductTypeList: [],
+        SelectHotelProductType: [],
         addMsg: {
           ID: 0,
           Hotel_ID: "",
@@ -270,15 +282,19 @@ export default {
         },
         rules: {
           //表单必填验证
-        Hotel_ID: [{ required: true, message: "请选择酒店资源" }],
-        HotelProductType: [{ required: true, message: "请选择产品名称" }],
-        ServiceNumber: [
-          {
+          Hotel_ID: [{
+            required: true,
+            message: "请选择酒店资源"
+          }],
+          HotelProductType: [{
+            required: true,
+            message: "请选择产品名称"
+          }],
+          ServiceNumber: [{
             required: true,
             pattern: this.$commonUtils.Regex.el_isInteger,
             message: "请输入正确的数字"
-          }
-        ]
+          }]
         }
       };
     },
@@ -343,8 +359,7 @@ export default {
       //初始化酒店列表
       initHotel() {
         this.apipost(
-        "hotel_post_GetList",
-        {},
+          "hotel_post_GetList", {},
           res => {
             if (res.data.resultCode == 1) {
               this.HotelName = res.data.data;
@@ -353,20 +368,19 @@ export default {
           null
         );
       },
-    GetHotelProductType(){
-    		this.apipost('dict_post_GetHotelProductTypeList',{},res=>{
-				if(res.data.resultCode==1){
-          this.HotelProductTypeList=res.data.data
+      GetHotelProductType() {
+        this.apipost('dict_post_GetHotelProductTypeList', {}, res => {
+          if (res.data.resultCode == 1) {
+            this.HotelProductTypeList = res.data.data
             this.SelectHotelProductType = res.data.data
           }
-			},err=>{}) 
+        }, err => {})
       },
       saveInfo() {
 
-      this.HotelProductTypeList.forEach(item=>{
-					if(this.addMsg.HotelProductType==item.Id)
-					{
-						 this.addMsg.Name =item.Name
+        this.HotelProductTypeList.forEach(item => {
+          if (this.addMsg.HotelProductType == item.Id) {
+            this.addMsg.Name = item.Name
           }
         })
 
@@ -409,7 +423,9 @@ export default {
         this.$refs[formName].resetFields();
       },
       updateProduct(index, ID) {
-      let msg = { ProductId: ID };
+        let msg = {
+          ProductId: ID
+        };
         this.apipost(
           "dict_post_HotelProduct_Get",
           msg,
@@ -424,7 +440,14 @@ export default {
       goUrl(path, id) {
         this.$router.push({
           path: path,
-        query: { id: id, HotelID: this.HotelID,Country: this.Country,IsSelfBook: this.IsSelfBook,blank:'y',tab:'报价管理' }
+          query: {
+            id: id,
+            HotelID: this.HotelID,
+            Country: this.Country,
+            IsSelfBook: this.IsSelfBook,
+            blank: 'y',
+            tab: '报价管理'
+          }
         });
       },
       submitForm(addMsg) {
@@ -454,5 +477,6 @@ export default {
       this.initHotel();
       this.GetHotelProductType();
     }
-};
+  };
+
 </script>

src/components/Hotel/HotelProductManage2.vue

@@ -73,13 +73,13 @@
                       <td style="text-align:center">
                         {{childItem.BatchNumber}}
                       </td>
-                      <td style="text-align:center">
+                      <td style="text-align:center;white-space:nowrap; ">
                         {{childItem.CostPrice}}
                       </td>
-                      <td style="text-align:center">
+                      <td style="text-align:center;white-space:nowrap; ">
                         {{childItem.Inventory}}
                       </td>
-                      <td style="text-align:center">
+                      <td style="text-align:center;white-space:nowrap; ">
                         {{childItem.RemainingInventory}}
                       </td>
                       <td style="text-align:left">