<style> @import url('../../assets/css/domestic/OrderToday.css'); </style> <template> <div class='flexOne page_OrderToday'> <div class='query-box'> <ul> <li> <span> <em>制单日期</em> <el-date-picker class="h34" v-model="transactionDate" @change="timeAdd()" type="daterange" value-format="yyyy-MM-dd"> </el-date-picker> </span> </li> <li> <span> <em>航空公司</em> <el-select filterable @change="flight_post_GetAirportNameList(msg.AirlineId,1)" v-model='msg.AirlineId'> <el-option label='不限' value=''></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-select filterable v-model='msg.FlightNo'> <el-option v-for='item in AirportNameList' :label='item.Flight_number' :value='item.Flight_number' :key='item.Flight_number'> </el-option> </el-select> </span> </li> <li> <label>订单号</label> <el-input v-model="msg.OrderID" class="w210"></el-input> </li> <li> <span> <em>客户名称</em> <el-input v-model="msg.ClientName" class="w210"></el-input> </span> </li> <li> <input type="button" class="hollowFixedBtn" value="结算" @click="goUrl('SettlementOrder')" /> <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList(1)" /> <input type="button" class="normalBtn" value="新增" @click="addShow=true,text='新增',initAddMsg()" /> </li> </ul> </div> <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''"> <div class="clearfix" v-loading='loading'> <div class="_price"> <span>应收总金额:¥{{DataList.Money}}</span> <span>总成本:¥{{DataList.Cost}}</span> <span>总利润:¥{{DataList.Profit}}</span> </div> <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" 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> </tr> <tr v-for="(item,index) in DataList.list" :key="index"> <td >{{item.ID}}</td> <td class="_hover"> <el-popover placement="bottom" width="220" trigger="click"> <table class="add_table singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"> <tr> <th width="70"></th> <th>数量</th> </tr> <tr> <td>成人</td> <td>{{item.AdultNumber}}</td> </tr> <tr> <td>儿童</td> <td>{{item.ChirdNumber}}</td> </tr> <tr> <td>婴儿</td> <td>{{item.BabyNumber}}</td> </tr> </table> <span slot="reference">{{item.Number}}人</span> </el-popover> </td> <td class="_hover"> <el-popover placement="bottom" width="220" trigger="click"> <table class="add_table singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"> <tr> <th width="70"></th> <th>单价(含税)</th> </tr> <tr> <td>成人</td> <td>{{item.AdultPrice}}</td> </tr> <tr> <td>儿童</td> <td>{{item.ChirdPrice}}</td> </tr> <tr> <td>婴儿</td> <td>{{item.BabyPrice}}</td> </tr> </table> <span slot="reference">¥{{item.TotalPrice}}</span> </el-popover> </td> <td class="_hover"> <el-popover placement="bottom" width="220" trigger="click"> <table class="add_table singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"> <tr> <th width="70"></th> <th>成本单价</th> </tr> <tr> <td>成人</td> <td>{{item.AdultCost}}</td> </tr> <tr> <td>儿童</td> <td>{{item.ChirdCost}}</td> </tr> <tr> <td>婴儿</td> <td>{{item.BabyCost}}</td> </tr> </table> <span slot="reference">¥{{item.TotalCost}}</span> </el-popover> </td> <td>{{item.TotalProfit}}</td> <td>{{item.ClientName}}</td> <td>{{item.TravelTime}}</td> <td colspan="3" class="_hover"> <el-popover placement="bottom" width="450" trigger="click"> <table class="add_table singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"> <tr> <th>航空公司</th> <th>航班</th> <th>航段</th> </tr> <tr v-for="(i,d) in item.FlightList" :key="d"> <td>{{i.AirlineName}}</td> <td>{{i.FlightNo}}</td> <td>{{i.Leg}}</td> </tr> </table> <span slot="reference">{{item.FlightList[0].AirlineName+' — '+item.FlightList[0].FlightNo+' — '+item.FlightList[0].Leg}}</span> </el-popover> </td> <td>{{item.EmName}}</td> <td> <el-tooltip class="item" effect="dark" content="修改" placement="top"> <el-button type="primary" class="iconfont icon-xiugai" @click="editCurency(item.ID),addShow=true,text='修改'" circle></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="删除" placement="top"> <el-button type="danger" class="iconfont icon-shanchu" @click="financeinfoRemove(item.ID)" circle> </el-button> </el-tooltip> </td> </tr> </table> </div> <div class="noData" v-show="noData"> {{$t('system.content_noData')}} </div> <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 class="_vMG_edit _scrollbar" :class="addShow==true?'edHeight':''"> <el-row> <el-col :span="20"> <p class="_tit">{{text}}订单</p> </el-col> <el-col :span="4" class="_add_saveBtn"> <button type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> <button class="hollowFixedBtn" type="button" @click="initAddMsg(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button> </el-col> </el-row> <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="110px"> <el-row> <el-col :span="6" :gutter="35"> <el-form-item label="出票日期" prop="OutTicketDate"> <el-date-picker v-model="addMsg.OutTicketDate" type="date" :default-value="addMsg.OutTicketDate" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="6" :gutter="35"> <el-form-item label="客户名称" prop="ClientName"> <el-input v-model="addMsg.ClientName" class=""></el-input> </el-form-item> </el-col> <el-col :span="6" :gutter="35"> <el-form-item label="行程日期" prop="TravelTime"> <el-input v-model="addMsg.TravelTime" class=""></el-input> </el-form-item> </el-col> </el-row> <el-row v-for="(list,index) in addMsg.FlightList" :key="index"> <el-col :span="6" :gutter="35"> <el-form-item label="航空公司"> <el-select filterable v-model='list.AirlineId' @change="flight_post_GetAirportNameList(list.AirlineId,2,index)"> <el-option label='不限' value='-1'></el-option> <el-option v-for='i in list.airlineList' :label='i.AlName' :value='i.AirLineId' :key='i.AirLineId'> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="6" :gutter="35"> <el-form-item label="航班号"> <el-select filterable v-model='list.FlightNo'> <el-option v-for='i in list.AirportNameList' :label='i.Flight_number' :value='i.Flight_number' :key='i.Flight_number'> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="6" :gutter="35"> <el-form-item label="航段"> <el-input v-model="list.Leg" class=""></el-input> </el-form-item> </el-col> <el-col :span="6" :gutter="35" v-if="index==0"> <span class="_add_trip" @click="addAir(0)">+</span> </el-col> <el-col :span="6" :gutter="35" v-if="index!=0"> <span class="_add_trip _delete_trip" @click="deleteAir(index)">+</span> </el-col> </el-row> <el-row> <el-col :span="18" :gutter="110"> <div class="add_table_box"> <table class="add_table singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"> <tr> <th width="70"></th> <th width="70">数量</th> <th width="150">单价(含税)</th> <th width="150">成本单价</th> <th>总计</th> <th>成本总计</th> <th>利润</th> </tr> <template v-for="(p,pi) in addMsg.PriceList"> <tr v-if="p.Type==1" :key="pi"> <td>成人</td> <td><input onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' type="number" v-model="p.Number" size="mini" @change="calculation(1,pi)" placeholder="0" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Price" size="mini" @change="calculation(1,pi)" placeholder="¥0.00" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Cost" size="mini" @change="calculation(1,pi)" placeholder="¥0.00" /></td> <td>{{p.allCost}}</td> <td>{{p.cAllCost}}</td> <td :class="p.profit>=0?'_zhengshu':'_fushu'">{{p.profit}} <p class="_add_small_btn"> <span class="_add_trip _add_small" @click="addAir(1)">+</span> <span class="_add_trip _add_small _delete_trip" @click="deleteAir(0,pi,p.Type)">+</span> </p> </td> </tr> <tr v-if="p.Type==2" :key="pi"> <td>儿童</td> <td><input onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' type="number" v-model="p.Number" size="mini" @change="calculation(2,pi)" placeholder="0" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Price" size="mini" @change="calculation(2,pi)" placeholder="¥0.00" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Cost" size="mini" @change="calculation(2,pi)" placeholder="¥0.00" /></td> <td>{{p.allCost}}</td> <td>{{p.cAllCost}}</td> <td :class="p.profit>=0?'_zhengshu':'_fushu'">{{p.profit}} <p class="_add_small_btn"> <span class="_add_trip _add_small" @click="addAir(2)">+</span> <span class="_add_trip _add_small _delete_trip" @click="deleteAir(0,pi,p.Type)">+</span> </p> </td> </tr> <tr v-if="p.Type==3" :key="pi"> <td>婴儿</td> <td><input onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' type="number" v-model="p.Number" size="mini" @change="calculation(3,pi)" placeholder="0" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Price" size="mini" @change="calculation(3,pi)" placeholder="¥0.00" /></td> <td><input @keydown="handleInput2" type="number" v-model="p.Cost" size="mini" @change="calculation(3,pi)" placeholder="¥0.00" /></td> <td>{{p.allCost}}</td> <td>{{p.cAllCost}}</td> <td :class="p.profit>=0?'_zhengshu':'_fushu'">{{p.profit}} <p class="_add_small_btn"> <span class="_add_trip _add_small" @click="addAir(2)">+</span> <span class="_add_trip _add_small _delete_trip" @click="deleteAir(0,pi,p.Type)">+</span> </p> </td> </tr> </template> </table> </div> </el-col> </el-row> </el-form> </div> <el-dialog title="结算订单" :visible.sync="dialogFormVisible" custom-class="orderTodayJsBox"> <el-form label-width="80px"> <el-form-item label="结算期数"> <el-date-picker v-model="TermDate" type="date" :default-value="addMsg.OutTicketDate" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button> <el-button size="mini" type="primary" class="otCancleBtn" @click="dialogFormVisible = false,jiesuan()">确 定 </el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { msg: { pageIndex: 1, pageSize: 15, OrderID: '', AirlineId: '', FlightNo: '', ClientName: '', ParentId: 0, Term: '', sDate: '', eDate: '' }, addMsg: { TermDate: '', ID: 0, OutTicketDate: new Date().Format("yyyy-MM-dd"), TravelTime: '', ClientName: '', AirlineId: '', FlightNo: '', Leg: '', PriceList: [{ ID: 0, Number: '', Cost: '', Price: '', Type: 1, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 2, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 3, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' } ], Num: 0, FlightList: [{ ID: 0, AirlineId: '-1', FlightNo: '', Leg: '', airlineList: [], AirportNameList: [], }], }, FlightList: { ID: 0, AirlineId: '-1', FlightNo: '', Leg: '', airlineList: [], AirportNameList: [], }, transactionDate: [], airlineList: [], AirportNameList: [], DataList: [], total: 0, currentPage: 1, loading: true, text: '', addShow: false, noData: false, cCostPrice: 0, cUnitPrice: 0, eCostPrice: 0, eUnitPrice: 0, yCostPrice: 0, yUnitPrice: 0, cLirun: 0, eLirun: 0, yLirun: 0, dialogFormVisible: false, formLabelWidth: '120px', goPath: '', TermDate: '', rules: { //表单必填验证 ClientName: [{ required: true, message: '请填写客户名称', trigger: 'blur' }], TravelTime: [{ required: true, message: '请填写行程日期', trigger: 'blur' }], AirlineId: [{ required: true, message: '请选择航空公司', trigger: 'change' }], Leg: [{ required: true, message: '请输入航段', trigger: 'blur' }], FlightNo: [{ required: true, message: '请输选择航班', trigger: 'change' }], OutTicketDate: [{ required: true, message: '请输选出票日期', trigger: 'change' }] } } }, mounted() { this.getList(); this.getAirlineList(); }, methods: { deleteAir(i, pi, t) { if (pi >= 0) { let count = 0; this.addMsg.PriceList.forEach(x => { if (x.Type === t) { count = count + 1 } }) if (count == 1) return this.addMsg.PriceList.splice(pi, 1); } else { if (pi) return this.addMsg.FlightList.splice(i, 1); } }, timeAdd() { // 日期格式 if (!this.transactionDate) { this.msg.sDate = ''; this.msg.eDate = ''; return } this.msg.sDate = this.transactionDate[0]; this.msg.eDate = this.transactionDate[1]; }, compare(property) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; return value1 - value2; } }, addAir(t) { if (t != 0) { let msg = { ID: 0, Number: '', Cost: '', Price: '', Type: t, allCost: '', cAllCost: '', profit: '' } this.addMsg.PriceList.push(msg); this.addMsg.PriceList.sort(this.compare('Type')) } else { this.addMsg.FlightList.push(JSON.parse(JSON.stringify(this.FlightList))); } }, jiesuan() { if (!this.TermDate) { return this.$message.error('请选择结算日期'); } this.apipost('Domestic_Ticket_post_CheckBiLL', { TermDate: this.TermDate, sDate: this.msg.sDate, eDate: this.msg.eDate }, r => { if (r.data.resultCode == 1) { this.$router.push({ name: this.goPath, query: { 'Term': this.TermDate, 'blank': 'y' } }); this.getList(); } else { this.$message.error(r.data.message); } }, null) }, flight_post_GetAirportNameList(id, t, i, num) { if (!num) { if (t === 1) { this.msg.FlightNo = ''; } else { this.addMsg.FlightList[i].FlightNo = ''; } if (!id) return if (t === 1) { this.msg.FlightNo = ''; } else { this.addMsg.FlightList[i].FlightNo = ''; } } this.apipost('flight_post_GetAirportNameList', { airlineID: id }, r => { if (r.data.resultCode == 1) { if (t === 1) { this.AirportNameList = r.data.data; } else { this.addMsg.FlightList[i].AirportNameList = r.data.data; } } }, null) }, goUrl(path) { this.dialogFormVisible = true; this.goPath = path; return }, Domestic_Ticket_post_Set() { // 保存 this.apipost('Domestic_Ticket_post_Set', this.addMsg, res => { if (res.data.resultCode == 1) { this.$message.success(res.data.message); this.getList(); this.initAddMsg(); this.addShow = false; } else { this.$message.error(res.data.message); } }, null) }, handleInput2(e) { // input验证 e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null }, calculation(t, i) { //计算 let AdultNumber = this.addMsg.PriceList[i].Number ? parseFloat(this.addMsg.PriceList[i].Number) : 0; let AdultPrice = this.addMsg.PriceList[i].Price ? parseFloat(this.addMsg.PriceList[i].Price) : 0; let AdultCost = this.addMsg.PriceList[i].Cost ? parseFloat(this.addMsg.PriceList[i].Cost) : 0; this.addMsg.PriceList[i].allCost = AdultNumber * AdultPrice; this.addMsg.PriceList[i].cAllCost = AdultNumber * AdultCost; this.addMsg.PriceList[i].profit = this.addMsg.PriceList[i].allCost - this.addMsg.PriceList[i].cAllCost; this.$forceUpdate(); }, deletInstitutions(id) { //删除 this.apipost("Domestic_Ticket_post_Remove", { ID: id }, res => { if (res.data.resultCode == 1) { this.$message.success(res.data.message); this.getList(); } else { this.tips(res.data.message, 'error'); } }, err => {}); }, financeinfoRemove(id) { //删除 提示 this.$confirm('是否删除?删除后后不可恢复!', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.deletInstitutions(id) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, getAirlineList(n) { //获取航空公司* this.apipost("airline_post_GetList", {}, res => { if (n) { this.addMsg.FlightList.forEach((x, index) => { x.airlineList = res.data.data; this.$forceUpdate(); this.flight_post_GetAirportNameList(x.AirlineId, 2, index, 66); }) } else { this.airlineList = res.data.data; this.addMsg.FlightList[0].airlineList = res.data.data; this.FlightList.airlineList = res.data.data; } }, err => {}); }, editCurency(id) { // 修改根据ID 获取信息 this.apipost('Domestic_Ticket_post_Get', { ID: id }, res => { if (res.data.resultCode == 1) { let data = res.data.data; this.UnitPrice = data.TotalPrice; this.CostPrice = data.TotalCost; this.allPeople = parseInt(data.AdultNumber) + parseInt(data.ChirdNumber) + parseInt(data.BabyNumber); this.addMsg = data; this.addMsg.PriceList.forEach((x, index) => { this.calculation(1, index) }) this.getAirlineList(2); } else { this.tips(res.data.message, 'error'); } }, err => {}) }, initAddMsg() { // 取消修改、新增 this.addMsg = { TermDate: '', ID: this.addMsg.ID, OutTicketDate: new Date().toLocaleDateString().replace('/', '-').replace('/', '-'), TravelTime: '', ClientName: '', AirlineId: '', FlightNo: '', Leg: '', PriceList: [{ ID: 0, Number: '', Cost: '', Price: '', Type: 1, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 2, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 3, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' } ], Num: 0, Term: '', FlightList: [{ ID: 0, AirlineId: '-1', FlightNo: '', Leg: '', airlineList: this.addMsg.FlightList[0].airlineList, AirportNameList: [] }] }; this.cCostPrice = 0; this.cUnitPrice = 0; this.eCostPrice = 0; this.eUnitPrice = 0; this.yCostPrice = 0; this.yUnitPrice = 0; this.$forceUpdate(); }, getList(t) { //获取列表 if (this.msg.OrderID == '') { this.msg.OrderID = 0; } if (this.msg.AirlineId == '') { this.msg.AirlineId = 0; } this.loading = true this.apipost('Domestic_Ticket_post_GetPageList', this.msg, res => { if (res.data.resultCode == 1) { this.total = res.data.data.count; let data = res.data.data.pageData; if (this.total > 0) { this.noData = false; } else { this.noData = true; } this.DataList = data; this.loading = false; if (!t) { this.msg.OrderID = ''; this.msg.AirlineId = ''; } else { if (this.msg.OrderID == 0) { this.msg.OrderID = ''; } if (this.msg.AirlineId == 0) { this.msg.AirlineId = ''; } } } else { this.$message.error(res.data.message) this.loading = false; if (!t) { this.msg.OrderID = ''; this.msg.AirlineId = ''; } else { if (this.msg.OrderID == 0) { this.msg.OrderID = ''; } if (this.msg.AirlineId == 0) { this.msg.AirlineId = ''; } } } }, err => {}) }, initAddMsg() { //初始化添加、修改数据 let newMsg = { TermDate: '', OrderID: 0, OutTicketDate: new Date().Format("yyyy-MM-dd"), TravelTime: '', ClientName: '', AirlineId: '', FlightNo: '', Leg: '', PriceList: [{ ID: 0, Number: '', Cost: '', Price: '', Type: 1, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 2, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' }, { ID: 0, Number: '', Cost: '', Price: '', Type: 3, //1-成人2-儿童3-婴儿 allCost: '', cAllCost: '', profit: '' } ], Term: '', FlightList: [{ ID: 0, AirlineId: '-1', FlightNo: '', Leg: '', airlineList: this.addMsg.FlightList[0].airlineList, AirportNameList: [] }], } this.cCostPrice = 0; this.cUnitPrice = 0; this.eCostPrice = 0; this.eUnitPrice = 0; this.yCostPrice = 0; this.yUnitPrice = 0; this.addMsg = newMsg; this.$forceUpdate(); }, submitForm(addMsg) { //提交创建、修改表单 this.$refs[addMsg].validate((valid) => { if (valid) { this.Domestic_Ticket_post_Set() } else { return false; } }); }, resetPageIndex() { //查询初始化页码 this.msg.pageIndex = 1; this.currentPage = 1 }, handleCurrentChange(val) { //翻页功能按钮 this.msg.pageIndex = val; this.getList(); }, tips(msg, type) { this.$message({ message: msg, duration: 2000, type: type }); }, closeChangeMachie(done) { done(); this.resetForm('addMsg'); }, resetForm(formName) { this.initAddMsg(); this.$refs[formName].resetFields(); }, } } </script>