页面修改

src/components/assetsman/HotelOrder.vue

 <style>
-    .commonMoreTable{
-        width:100%;
-        font-size:12px;
-        color:#000000;
-        border-collapse:collapse;
+  .commonMoreTable {
+    width: 100%;
+    font-size: 12px;
+    color: #000000;
+    border-collapse: collapse;
   }
+
   .commonMoreTable {
     width: 100%;
     /* min-width: 1500px; */
@@ -14,13 +15,14 @@
   }
 
   .commonMoreTable tr th {
-    color:#000000;
+    color: #000000;
     height: 50px;
     font-family: "muil";
     font-size: 14px;
     text-align: left;
     text-indent: 15px;
   }
+
   .commonMoreTable tr td {
     min-height: 60px;
     height: auto;
@@ -29,14 +31,16 @@
     font-size: 12px;
     border: 1px solid #E2E4EB;
   }
-  .HotelOderName{
-      margin-right:10px;
+
+  .HotelOderName {
+    margin-right: 10px;
   }
+
 </style>
 <template>
   <div class="HotelOrder">
     <div class="routerTitle">
-      <span class="pageTitle">酒店订单</span>
+      <span class="pageTitle" title="酒店订单">ホテル注文</span>
       <span @click="morequery = !morequery" style="display:inline-flex;align-items:center;cursor: pointer;"
         class="f12 cd6">
         <span style="margin-right:5px">上位検索</span>
@@ -48,7 +52,8 @@
     <div class="padContent">
       <ul v-show="morequery" class="queryul">
         <li>
-                <el-select size="small" v-model="msg.HotelId" placeholder="ホテル" clearable filterable @change="getRoomIdList(msg.HotelId)">
+          <el-select size="small" v-model="msg.HotelId" placeholder="ホテル" clearable filterable
+            @change="getRoomIdList(msg.HotelId)">
             <el-option label="决断" :value="0"></el-option>
             <el-option v-for="item in HotelList" :key="item.SID" :label="item.SHotelName" :value="item.SID">
             </el-option>
@@ -75,38 +80,38 @@
           </el-select>
         </li>
         <li>
-                <el-date-picker size="mini" v-model="msg.StartTime" :picker-options="beforeCheck" type="date" value-format="yyyy-MM-dd" placeholder="入居開始日時">
+          <el-date-picker size="mini" v-model="msg.StartTime" :picker-options="beforeCheck" type="date"
+            value-format="yyyy-MM-dd" placeholder="入居開始日時">
           </el-date-picker>
         </li>
         <li>
-                <el-date-picker size="mini" v-model="msg.EndTime" :picker-options="afterCheck" type="date" value-format="yyyy-MM-dd" placeholder="入居終了日時">
+          <el-date-picker size="mini" v-model="msg.EndTime" :picker-options="afterCheck" type="date"
+            value-format="yyyy-MM-dd" placeholder="入居終了日時">
           </el-date-picker>
         </li>
       </ul>
       <table class="commonMoreTable" border="0" cellspacing="0" cellpadding="0">
         <tr>
-                <th>酒店名称/星级</th>
-                <th>订单号</th>
-                <th>房型名称</th>
-                <th>房间数量</th>
-                <th>总金额</th>
-                <th>入住日期</th>
-                <th>退房日期</th>
-                <th>邮箱</th>
-                <th>手机号码</th>
-                <th>订单来源</th>
-                <th>订单状态</th>
-                <th>预计到店时间</th>
-                <th>创建人/创建时间</th>
-                <th>操作</th>
+          <th title="订单号">注文番号</th>
+          <th title="酒店信息">ホテル情報</th>
+          <th title="订房数量">注文数</th>
+          <th title="总金额">総額</th>
+          <th title="入住信息">入居情報</th>
+          <th title="联系信息">連絡先情報</th>
+          <th title="订单状态 ">注文状態</th>
+          <th title="创建人/创建时间">作成者/作成時間</th>
+          <th title="操作">操作</th>
         </tr>
         <tbody v-for="(item,index) in dataList" :key="index">
           <tr>
+            <td rowspan="2">{{item.OrderId}}</td>
             <td rowspan="2">
-                        {{item.SHotelName}}/{{item.SHotelStar}}
+              <span class="colorRed"> {{item.SHotelName}}</span>
+              <br />
+              型の名称:<span title="房型信息" class="colorRed">{{item.RoomName}}</span>
+              <br />
+              星: <span title="酒店星级" class="colorRed">{{item.SHotelStar}}星</span>
             </td>
-                    <td>{{item.OrderId}}</td>
-                    <td>{{item.RoomName}}</td>
             <td>{{item.RoomNum}}</td>
             <td>
               <el-popover width="300" trigger="click">
@@ -125,32 +130,40 @@
                 </span>
               </el-popover>
             </td>
-                    <td>{{item.CheckInDate}}</td>
-                    <td>{{item.CheckOutDate}}</td>
-                    <td>{{item.Email}}</td>
-                    <td>{{item.Mobile}}</td>
             <td>
-                        {{item.OrderForm==1?'同行':'直客'}}
+              入居期日：<span title="入住日期" class="colorRed">{{item.CheckInDate}}</span> <br />
+              チェックアウト日時： <span title="退房日期" class="colorRed">{{item.CheckOutDate}}</span> <br />
+              お店まで時間を取る予定です： <span title="预计到店时间" class="colorRed">{{item.PredictTime}}</span>
+
+            </td>
+
+            <td>
+              邮箱: {{item.Email}} <br />
+              电话：{{item.Mobile}}
+
             </td>
             <td>
+              <!-- {{item.OrderForm==1?'同行':'直客'}} -->
               {{item.OrderStatus==1?'正常':'取消'}}
             </td>
-                    <td>{{item.PredictTime}}</td>
+
             <td>
               {{item.EmName}}/{{item.CreateTime}}
             </td>
             <td>
-                        <el-tooltip class="item" effect="dark" content="キャンセル" placement="top" >
+              <el-tooltip class="item" effect="dark" content="キャンセル" placement="top">
                 <img @click="DeleteOrder(item)" style="width:24px;height:24px" src="../../assets/img/qx.png" alt="" />
               </el-tooltip>
-                        <el-tooltip class="item" effect="dark" content="キャンセル" placement="top" >
-                            <img @click="OperationCaozuo(item)" style="width:24px;height:24px" src="../../assets/img/czrz.png" alt=""/>
+              <el-tooltip class="item" effect="dark" content="キャンセル" placement="top">
+                <img @click="OperationCaozuo(item)" style="width:24px;height:24px" src="../../assets/img/czrz.png"
+                  alt="" />
               </el-tooltip>
             </td>
           </tr>
           <tr>
             <td colspan="13">
-                        旅客名单：<span class="HotelOderName" v-for="(subItem,subIndex) in item.GuestList" :key="subIndex">{{subItem.Name}}</span>
+              旅客名单：<span class="HotelOderName" v-for="(subItem,subIndex) in item.GuestList"
+                :key="subIndex">{{subItem.Name}}</span>
             </td>
           </tr>
         </tbody>
@@ -161,20 +174,9 @@
     </div>
 
     <!-- 操作日志 -->
-    <el-dialog
-      title="操作日志"
-      :visible.sync="caozuoState"
-      top="0"
-      width="600px"
-    >
-      <table
-        style="min-width:100%"
-        class="myTable miniTable"
-        v-loading="loading2"
-        border="0"
-        cellspacing="0"
-        cellpadding="0"
-      >
+    <el-dialog title="操作日志" :visible.sync="caozuoState" top="0" width="600px">
+      <table style="min-width:100%" class="myTable miniTable" v-loading="loading2" border="0" cellspacing="0"
+        cellpadding="0">
         <thead>
           <th width='200'>内容</th>
           <th>创建人</th>
@@ -193,13 +195,8 @@
           </tr>
         </tbody>
       </table>
-      <el-pagination
-        @current-change="currentChange1"
-        background
-        :page-size="opMsg.pageSize"
-        layout="prev, pager, next"
-        :total="total1"
-      >
+      <el-pagination @current-change="currentChange1" background :page-size="opMsg.pageSize" layout="prev, pager, next"
+        :total="total1">
       </el-pagination>
     </el-dialog>
     <!--  -->
@@ -217,33 +214,33 @@
         morequery: false,
         total: 0,
         //酒店下拉数据
-        HotelList:[],
+        HotelList: [],
         //房型下拉数据
-        RoomTypeList:[],
+        RoomTypeList: [],
         //操作日志数据
-        OperationList:[],
+        OperationList: [],
         msg: {
           pageIndex: 1,
           pageSize: 15,
-          HotelId:0,
-          RoomId:0,
-          RoomType:'',
-          StartTime:"",
-          EndTime:"",
-          OrderStatus:0,
+          HotelId: 0,
+          RoomId: 0,
+          RoomType: '',
+          StartTime: "",
+          EndTime: "",
+          OrderStatus: 0,
         },
-        caozuoState:false,
-        loading2:false,
+        caozuoState: false,
+        loading2: false,
         //根据hotelid获取roomid
-        roomIdList:[],
-        isShowRoom:false,
-        total1:0,
+        roomIdList: [],
+        isShowRoom: false,
+        total1: 0,
         //操作日志msg
-        opMsg:{
-            pageIndex:1,
-            pageSize:5,
-            SourceId:'',
-            Type:1
+        opMsg: {
+          pageIndex: 1,
+          pageSize: 5,
+          SourceId: '',
+          Type: 1
         },
         beforeCheck: {
           disabledDate: time => {
@@ -278,13 +275,13 @@
         this.msg.pageIndex = val;
         this.getList();
       },
-      currentChange1(val){
+      currentChange1(val) {
         this.opMsg.pageIndex = val;
         this.Operation();
       },
       //获取酒店下拉数据
       getHotelList() {
-         let msg={
+        let msg = {
           pageIndex: 1,
           pageSize: 100,
         };
@@ -298,21 +295,21 @@
           });
       },
       //获取房型数据
-      getRoomIdList(HotelId){
-        if(HotelId>0){
-            this.isShowRoom=true
-        }else{
-            this.isShowRoom=false
+      getRoomIdList(HotelId) {
+        if (HotelId > 0) {
+          this.isShowRoom = true
+        } else {
+          this.isShowRoom = false
         }
         let msg = {
-            HotelId:HotelId,
-            RoomType:0,
-            RoomStatus:0
+          HotelId: HotelId,
+          RoomType: 0,
+          RoomStatus: 0
         }
         this.apipost("scm_get_GetSCMHotelRoomDropList", msg,
           res => {
             if (res.data.resultCode == 1) {
-                console.log(res,'ressss')
+              console.log(res, 'ressss')
               this.roomIdList = res.data.data;
             } else {
               this.Error(res.data.message);
@@ -330,10 +327,10 @@
           });
       },
       getList() {
-        this.loading=true;
+        this.loading = true;
         this.apipost("scm_get_GetSCMHotelOrderPageList", this.msg,
           res => {
-            this.loading=false;
+            this.loading = false;
             if (res.data.resultCode == 1) {
               this.dataList = res.data.data.pageData;
               this.total = res.data.data.count;
@@ -352,14 +349,16 @@
         })
       },
       //删除订单
-      DeleteOrder(item){
+      DeleteOrder(item) {
         this.$confirm("この部屋のタイプを削除しますか？", "ヒント", {
             confirmButtonText: "を選択します",
             cancelButtonText: "キャンセル",
             type: "warning"
           })
           .then(() => {
-            this.apipost("scm_post_DelSCMHotelOrder", {OrderId:item.OrderId},
+            this.apipost("scm_post_DelSCMHotelOrder", {
+                OrderId: item.OrderId
+              },
               res => {
                 if (res.data.resultCode == 1) {
                   this.getList();
@@ -372,19 +371,19 @@
             this.$message.info("削除しました");
           });
       },
-      OperationCaozuo(item){
-        this.caozuoState=true;
-        this.opMsg.SourceId=item.OrderId;
+      OperationCaozuo(item) {
+        this.caozuoState = true;
+        this.opMsg.SourceId = item.OrderId;
         this.Operation();
       },
       //获取操作日志
-      Operation(){
-        this.loading2=true;
+      Operation() {
+        this.loading2 = true;
         this.apipost("scm_get_GetSCMOrderLogPageList", this.opMsg,
           res => {
-            this.loading2=false;
+            this.loading2 = false;
             if (res.data.resultCode == 1) {
-                console.log(res,'resssss');
+              console.log(res, 'resssss');
               this.OperationList = res.data.data.pageData;
               this.total1 = res.data.data.count;
             } else {
@@ -395,10 +394,16 @@
       }
     }
   };
+
 </script>
 <style>
   .HotelOrder {
     width: 100%;
     height: 100%;
   }
+
+  .HotelOrder .colorRed {
+    color: red;
+  }
+
 </style>