新增散客机票列表页

src/components/Ticketing/individualTicket.vue

+<style>
+  .individualTicket .el-input--prefix .el-input__inner {
+    padding-left: 30px;
+  }
+
+  .individualTicket_list {
+    padding: 20px 0 0 0;
+  }
+
+  .individualTicket ._ol_info {
+    font-size: 12px;
+    height: 100%;
+  }
+
+  .individualTicket ._ol_info._edHeight {
+    height: 200px;
+  }
+
+  .individualTicket ._ol_color {
+    font-size: 12px;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .individualTicket ._ol_color li {
+    float: left;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .individualTicket ._ol_color li ._cl {
+    border-radius: 3px;
+    display: inline-block;
+    width: 5px;
+    height: 12px;
+    margin-right: 5px;
+  }
+  .individualTicket ._red_text {
+    color: #e95252;
+  }
+
+  .individualTicket ._green {
+    background-color: #47bf8c;
+  }
+
+  .individualTicket ._green_text {
+    color: #47bf8c;
+  }
+
+  .individualTicket ._blu {
+    background-color: #2aaef2;
+  }
+
+  .individualTicket ._blu_text {
+    color: #2aaef2;
+  }
+
+  .individualTicket ._ol_list {
+    margin-top: 20px;
+    min-height: 500px;
+  }
+
+  .individualTicket ._ol_list > li {
+    margin: 20px 0 0px 0px;
+    transition: linear all 0.5s;
+    background-color: #fff;
+    border: 1px solid #dddddd;
+    border-left: 0;
+    position: relative;
+  }
+
+  .individualTicket ._ol_list > li:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  .individualTicket ._oll_tit {
+    color: #333333;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .individualTicket ._oll_tit span {
+    display: inline-block;
+    padding: 1px 10px;
+    font-size: 12px;
+    border: solid 1px #ff9000;
+    color: #ff9000;
+    border-radius: 4px;
+  }
+
+  .individualTicket ._oll_line {
+    max-width: 5px;
+    min-width: 5px;
+    height: 105px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 50;
+    background: rgba(233, 82, 82, 1);
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    display: inline-block;
+  }
+
+  .individualTicket ._oll_line._o_green {
+    background: #47bf8c;
+  }
+
+  .individualTicket ._oll_line._o_blu {
+    background: #2aaef2;
+  }
+
+  .individualTicket ._oll_img {
+    height: 45px;
+    width: 45px;
+    border-radius: 50%;
+    margin: 5px 0 0 15px;
+    margin-left: 20px;
+    display: inline-block;
+  }
+
+  .individualTicket ._oll_adrr {
+    color: white;
+    font-size: 12px;
+    margin-top: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    padding: 4px 9px;
+    background-color: #2aaef2;
+    border-radius: 2px;
+  }
+
+  .TMN_Seat {
+    height: 100%;
+    display: flex;
+  }
+
+  .TK_SeatList {
+    height: 60px;
+    background-color: #f9f9f9;
+    margin-top: 9px;
+    padding-right: 10px;
+  }
+
+  .TK_SeatList > ul > li:nth-child(1) {
+    margin-left: 5px;
+  }
+
+  .TK_SeatList > ul > li {
+    float: left;
+    text-align: center;
+    margin: 5px 10px 0 0;
+  }
+
+  .TK_SeatList > ul > li:last-child {
+    margin-right: 0;
+  }
+
+  .TK_SeatList .iconfont {
+    color: #d1d1d1;
+    display: inline-block;
+    margin-top: 5px;
+  }
+  .TK_SeatList ._wz {
+    color: #666666;
+  }
+  .TMA_raduis > ul > li._head {
+    display: flex;
+    align-items: center;
+  }
+
+  .TMA_raduis > ul > li._head img {
+    height: 26px;
+    width: 26px;
+    border-radius: 50%;
+    margin-left: 15px;
+  }
+
+  .TMA_raduis > ul > li._head span {
+    padding-left: 7px;
+    display: inline-block;
+    margin-right: 25px;
+  }
+
+  ._jztime {
+    color: #666666;
+    margin: 0 12px;
+  }
+
+  ._jztime .PingFangSC {
+    font-size: 12px;
+  }
+
+  ._jztime ._text {
+    font-size: 12px;
+  }
+  .individualTicket .el-pagination {
+    border: none !important;
+  }
+  .individualTicket .el-form-item__label {
+    font-size: 12px;
+    color: #606266;
+  }
+  .individualTicket .multiple_input .el-input {
+    height: auto !important;
+  }
+
+  .individualTicket .el-button--primary {
+    padding: 5px;
+    margin-right: 1px;
+  }
+
+  .individualTicket ._lian_style {
+    position: absolute;
+    top: 0px;
+    left: 5px;
+    z-index: 99;
+    display: inline-block;
+    background-color: #e83140;
+    color: white;
+    padding: 2px 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  ._oll_img_box {
+    height: 78px;
+    display: inline-block;
+    vertical-align: top;
+    padding-top: 14px;
+  }
+
+  .vmiddle {
+    display: flex;
+    align-items: Center;
+    height: 78px;
+  }
+  .individualTicket .TICK_Code {
+    position: absolute;
+    left: 27px;
+    top: 5px;
+  }
+
+  .TCID_cont {
+    min-height: 28px;
+    border-top: 1px dashed #ccc;
+  }
+
+  /*航班详情*/
+  .individualTicket .FlightDivDetails {
+    width: 100%;
+    height: 65px;
+    overflow: auto;
+  }
+
+  .individualTicket ._flightList {
+    text-align: left;
+    font-size: 12px;
+    margin-bottom: 5px;
+    padding-right: 5px;
+  }
+
+  /*航班号*/
+  .individualTicket .FlightNumber {
+    color: #ff0066;
+    font-weight: bold;
+  }
+  .TK_SeatList ._num3 {
+    font-size: 17px;
+    color: #e95252;
+    height: 28px;
+    font-family: PingFangSC-Semibold, sans-serif;
+  }
+</style>
+<template>
+  <div class="flexOne individualTicket">
+    <div class="query-box Plan_Query">
+      <ul>
+        <li>
+          <span>
+            <em>状态</em>
+            <el-select v-model="msg.FlyState" :placeholder="$t('system.ph_in')">
+              <el-option label="未起飞" :value='0'></el-option>
+              <el-option label="已起飞" :value='1'></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>线路</em>
+            <el-select v-model="msg.LineId" :placeholder="$t('pub.pleaseSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
+              <el-option v-for="item in LineList" :key="item.LineID" :label="item.LineName"
+                         :value="item.LineID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>航空公司</em>
+            <el-select v-model="msg.AirLineID" filterable :placeholder="$t('system.ph_in')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
+              <el-option v-for="item in airlineList" :label="item.AlName" :value="item.AirLineId"
+                         :key="item.AirLineId"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>航班号</em>
+            <el-input v-model="msg.Flight_number" placeholder="机票编号"></el-input>
+          </span>
+        </li>
+
+        <li>
+          <span>
+            <em>操作人</em>
+            <el-select v-model="msg.CreateBy" filterable :placeholder="$t('system.ph_in')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
+              <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
+                         :key="item.EmployeeId"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>编号</em>
+            <el-input v-model="msg.ID" placeholder="机票编号"></el-input>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>可报名</em>
+            <el-select v-model="msg.IsPayOrder" :placeholder="$t('system.ph_in')">
+              <el-option label="否" :value='0'></el-option>
+              <el-option label="是" :value='1'></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>航班日期</em>
+            <el-date-picker clearable class="w135" v-model="msg.QFlightDateStart" type="date"
+                            :picker-options="beforeCheck"
+                            value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')"></el-date-picker>
+            <span class="_ln">-</span>
+            <el-date-picker clearable class="w135" v-model="msg.QFlightDateEnd" type="date" :picker-options="afterCheck"
+                            value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')"></el-date-picker>
+          </span>
+        </li>
+        <li style="margin-right:50px;">
+          <button class="normalBtn" type="button" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
+        </li>
+      </ul>
+    </div>
+    <div class="individualTicket_list">
+      <ul class="_ol_color clearfix">
+        <li>
+          <span class="_red _cl"></span>
+          <span class="_red_text">{{$t('Airticket.Air_redType')}}：</span>
+          {{$t('Airticket.Air_firstClass')}}
+        </li>
+        <li>
+          <span class="_green _cl"></span>
+          <span class="_green_text">{{$t('Airticket.Air_greenType')}}：</span>
+          {{$t('Airticket.Air_businessClass')}}
+        </li>
+        <li>
+          <span class="_blu _cl"></span>
+          <span class="_blu_text">{{$t('Airticket.Air_blueType')}}：</span>
+          {{$t('Airticket.Air_EconomyClass')}}
+        </li>
+      </ul>
+      <div class="_ol_info">
+        <ul class="_ol_list" v-loading="loading">
+          <li v-for="(item,index) in dataList" :data-id="item.ID">
+            <span class="_oll_line" v-if="item.FreightSpace==1"></span>
+            <span class="_oll_line _o_green" v-if="item.FreightSpace==2"></span>
+            <span class="_oll_line _o_blu" v-if="item.FreightSpace==3"></span>
+            <el-row :gutter="10">
+              <el-col :span="2">
+                <span class="_lian_style" v-if="item.IsSetUnion==1">联</span>
+                <div class="_oll_img_box">
+                  <span class="TICK_Code PingFangSC">编号：{{item.ID}}</span>
+                  <img v-if="!item.AirlineUrl" class="_oll_img" :src="defaultImg">
+                  <img v-else class="_oll_img" :src="item.AirlineUrl" :onerror="defaultImg">
+                </div>
+              </el-col>
+              <el-col :span="2" class="vmiddle">
+                <div class="_oll_info">
+                  <el-tooltip class="item" effect="dark" :content="item.AirlineName" placement="top-start"
+                              popper-class="max-w250">
+                    <p class="_oll_tit">{{item.AirlineName}}</p>
+                  </el-tooltip>
+                  <span class="_oll_adrr">{{item.FreightSpaceStr}}</span>
+                </div>
+              </el-col>
+              <el-col :span="5" class="vmiddle">
+                <div class="FlightDivDetails">
+                  <div class="_flightList" v-for="subItem in item.flightList">
+                    <span class="FlightNumber">{{subItem.Flight_number}}</span>
+                    <span>{{subItem.FlightDate}} {{subItem.Departure_time}}</span>
+                    <span>({{subItem.DIATA}}){{subItem.DepartureName}}</span>
+                    <span v-if="subItem.StopoverName">-</span>
+                    <span v-if="subItem.StopoverName">({{subItem.StopoverIATA}}){{subItem.StopoverName}}</span>
+                    <span v-if="subItem.ArrivalCityName">-</span>
+                    <span v-if="subItem.ArrivalCityName">({{subItem.AIATA}}){{subItem.ArrivalCityName}}</span>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="10" class="vmiddle">
+                <div class="TMN_Seat">
+                  <div class="TK_SeatList">
+                    <ul class="clearfix">
+                      <li>
+                        <span class="iconfont icon-img_yizi"></span>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.CostPrice}}</p>
+                        <p class="_wz">成本价格</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.B2BPrice}}</p>
+                          <p slot="reference" class="_wz">b2b价格</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.B2CPrice}}</p>
+                        <p class="_wz">b2c价格</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.SalePrice}}</p>
+                        <p class="_wz">销售价格</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.AirTickNum}}</p>
+                        <p class="_wz">总机位数</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.SurplusNum}}</p>
+                        <p class="_wz">剩余机位数</p>
+                      </li>
+                      <li>
+                        <p class="_num3">{{item.UseNum}}</p>
+                        <p class="_wz">使用机位数</p>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="1" class="vmiddle">
+                <div class="TMA_raduis">
+                  <ul style="padding:0;">
+                    <li class="_head" style="display:block">
+                      <img style="margin-left:0px" v-if="item.CreateUrl" :src="item.CreateUrl" :onerror="defaultImg">
+                      <img style="margin-left:0px" v-else src="../../assets/img/bg_z1@2x.png">
+                      <span style="padding:0;margin:0;display:block;">{{item.CreateName}}</span>
+                    </li>
+                  </ul>
+                </div>
+              </el-col>
+              <el-col :span="2" class="vmiddle">
+                <div class="_jztime">
+                  <p class="PingFangSC">{{item.TicketDeadlineStr}}</p>
+                  <p class="_text">{{$t('Airticket.Air_deadTicketTime')}}</p>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="0">
+              <el-col :span="24">
+                <div class="TCID_cont" style="padding:5px 0 0 20px;">PNR：{{item.PNR}}</div>
+              </el-col>
+            </el-row>
+          </li>
+        </ul>
+        <div class="noData" v-show="noData">{{$t('system.content_noData')}}</div>
+        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+                       layout="total,prev, pager, next, jumper"
+                       :page-size="msg.pageSize" :total="total"></el-pagination>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          pageIndex: 1,
+          pageSize: 6,
+          ID: 0,
+          QFlightDateStart:'',
+          QFlightDateEnd: "",
+          Flight_number:'',
+          AirLineID: 0,
+          TicketType: 2, //定金类型(1定，2定等)
+          LineId: 0, //线路编号
+          IsPayOrder:0,
+          FlyState: 1,
+          CreateBy: 0, //操作人
+        },
+        //员工列表
+        EmployeeList: [],
+        defaultSelectValue: 0,
+        //航空公司下拉框
+        airlineList: [],
+        //日志详情
+        orderlogList: [],
+        //航班详情
+        tripDetails: [],
+        //订单详情
+        usedDetails: [],
+        //默认图片
+        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
+        //线路列表
+        LineList: [],
+        total: 0,
+        isSubmit: true,
+        currentPage: 1,
+        loading: true,
+        noData: false,
+        countryList: "",
+        dataList: [],
+
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() < Date.now() - 100000000;
+          }
+        },
+        beforeCheck: {
+          disabledDate: time => {
+            let endTime = new Date(this.msg.QFlightDateEnd);
+            return endTime.getTime() < time.getTime();
+          }
+        },
+        afterCheck: {
+          disabledDate: time => {
+            let startTime = new Date(this.msg.QFlightDateStart);
+            return startTime.getTime() >= time.getTime();
+          }
+        },
+      };
+    },
+    methods: {
+      getList() {
+        this.loading = true;
+        if(this.msg.ID==''){
+          this.msg.ID=0;
+        }
+        this.apipost(
+          "ticket_get_GetAirTicketScatteringPageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.total = res.data.data.count;
+              this.dataList = res.data.data.pageData;
+              this.noData = !this.total > 0;
+            }else{
+              this.Error(res.data.message);
+            }
+          },
+          err => {
+          }
+        );
+      },
+      //初始化航空公司下拉
+      initAirlines() {
+        this.apipost(
+          "airline_post_GetList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.airlineList = res.data.data;
+            }
+          },
+          err => {
+          }
+        );
+      },
+      //提交创建、修改表单
+      submitForm(addMsg) {
+        let that = this;
+        that.$refs[addMsg].validate(valid => {
+          if (valid) {
+            that.saveAddData(addMsg);
+          } else {
+            return false;
+          }
+        });
+      },
+      //翻页功能按钮
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      //查询初始化页码
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      //根据当前员工所在部门获取该部门及子部门员工信息
+      getEmployeeList() {
+        this.apipost(
+          "admin_get_GetEmployeeByUserDepartmentId", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.EmployeeList = res.data.data;
+            }
+          },
+          err => {
+          }
+        );
+      },
+      //获取线路列表
+      GetLineList() {
+        this.apipost(
+          "line_post_GetAllList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.LineList = res.data.data;
+            }
+          },
+          err => {
+          }
+        );
+      },
+    },
+    mounted() {
+      this.GetLineList();
+      this.getList();
+      this.initAirlines();
+      this.getEmployeeList();
+    }
+  };
+
+</script>

src/router/config.js

@@ -1011,6 +1011,13 @@ export default {
                 title: '机票列表'
               },
             }, {
+              path: '/individualTicket',  //散客机票
+              name: 'individualTicket',
+              component: resolve => require(['@/components/Ticketing/individualTicket'], resolve),
+              meta: {
+                title: '散客机票'
+              },
+            },{
               path: '/PassengerList', //旅客名单
               name: 'PassengerList',
               component: resolve => require(['@/components/Ticketing/PassengerList'], resolve),