1

src/components/sale/TravelLessPriceRule.vue

+<template>
+  <div class="page_FProcessManagement">
+    <ul class="_nav clearfix">
+        <!-- <li style="color: red;">{{$t('objFill.v101.FinancialModule.zhumpbjrrtjl')}}</li> -->
+        <!-- <input type="button" class="hollowFixedBtn" :value="$t('pub.addBtn')" @click="AddMsg"/> -->
+        <input type="button" class="normalBtn" style="position: absolute; right: 90px;top: 9px;" :value="$t('pub.searchBtn')" @click="getList"/>
+    </ul>
+      <div
+        class="cm_content"
+        style="width: 100%;margin-bottom: 35px;margin-top: 90px;"
+      >
+        <div style="width:100%;overflow-x: auto;" v-for="(item,index ) in dataList " :key="index">
+          <table
+            class="po_content singeRowTable"
+            style="border:1px solid #E6E6E6;"
+            cellspacing="0"
+            cellpadding="0"
+          >
+
+            <tr>
+              <td rowspan="2" width="150" style="min-width: 150px;">{{item.BranchName}}</td>
+              <td rowspan="2" width="150" style="min-width: 150px;">{{item.LineNameStr}}</td>
+
+              <th style="min-width: 220px;" v-for="( son , sIndex ) in item.RuleList" :key="sIndex">
+                <span v-if="item.Type==1">{{ son.StartValue }}{{son.EndValue&&son.EndValue!=-1?' ~ '+son.EndValue+'  '+$t('hotel.hotel_people'):' '+$t('objFill.v101.FinancialModule.renyishang')}}</span>
+                <span v-else>{{ son.StartValue }}{{son.EndValue&&son.EndValue!=-1?' ~ '+son.EndValue+'  '+$t('hotel.hotel_yuan'):' '+$t('objFill.v101.FinancialModule.renyishang')}}</span>
+              </th>
+            </tr>
+            <tr>
+              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.RuleList" :key="sIndex">{{ son.Rate }} {{$t('hotel.hotel_yuan')}}</td>
+            </tr>
+          </table>
+        </div>
+
+      </div>
+      <div v-if="dataList.length==0"
+        style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;margin-top: 30px;"
+      >{{$t('system.content_noData')}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        dataList:[],
+      }
+    },
+    created() {},
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      // 获取列表数据
+      getList() {
+        this.loading = true;
+        this.apipost("sellorder_post_GetTravelLessPriceRuleList", {}, res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data;
+
+          }else{
+            this.Error(res.data.message)
+          }
+        });
+      },
+    }
+  }
+
+</script>
+<style scoped>
+  .hollowFixedBtn{
+    position: absolute;
+    top: 9px;
+    right: 20px;
+  }
+  ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 10px;background-color: #F1F1F1;cursor: pointer;position: relative;}
+  ._nav li._active{background-color:#FFFFFF;color: #333333 }
+  ._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
+  .ImpressionTicketing-OuterFrame{
+    padding: 10px 20px 20px 20px;
+    box-shadow: 0 1px 8px rgb(0 0 0 / 20%), 0 3px 4px rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
+  }
+  .ImpressionTicketing-msgbox{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  .ImpressionTicketing-msgbox.bottom0{
+    margin-bottom: 0;
+  }
+  .ImpressionTicketing-msgbox div{
+    flex: 1;
+  }
+  .ImpressionTicketing-msgbox div.ImpressionTicketing-msg-but{
+    flex: 0 0 36px !important;
+  }
+  .itc-delete{
+    color: #E95252;
+    font-size: 16px;
+    cursor: pointer;
+    display: inline-block;
+    padding: 10px;
+  }
+  .itc-outline{
+    color: #409EFF;
+    font-size: 16px;
+    cursor: pointer;
+    display: inline-block;
+    padding: 10px;
+  }
+  .ImpressionTicketing-title{
+    padding: 0;
+  }
+  .left-text-indent{
+    text-align: left;
+    text-indent: 20px
+  }
+  /deep/.el-input-number{
+    width: inherit;
+  }
+  /deep/.el-input-number .el-input__inner{
+    text-align: left;
+    height: 34px;
+  }
+  .Impression-ratio-box{
+    display: flex;
+    justify-content: space-between;
+  }
+  .Impression-ratio-right{
+    font-size: 13px;
+    margin-left: 5px;
+  }
+  /deep/.line-heigh .el-input-number{
+    line-height: 32px;
+  }
+  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC{
+    flex-wrap: wrap;
+  }
+  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div{
+   flex: 0 0 220px;
+  }
+  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div:last-child{
+    flex: 0 0 auto;
+  }
+  .EmpGroupListBox{
+    display: flex;flex-direction: row; flex-wrap: nowrap;
+    justify-content: space-between;
+    /* box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 1px 4px rgb(0 0 0 / 14%), 0 1px 1px -1px rgb(0 0 0 / 12%); */
+    margin-bottom: 5px;
+
+  }
+  .EmpGroupListBox:last-child{
+    /* margin-bottom: 0; */
+  }
+  .EmpGroupListBox>div{
+    flex: 0 0 220px;
+  }
+  .EmpGroupListBox>div:nth-child(2){
+    /* margin-left: 50px; */
+  }
+  /deep/.EmpGroupListBox .el-form-item__content{
+    /* width: 100%; */
+  }
+</style>