<style> .clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .flightMg .addCompany { width: 440px; max-height: 600px; } .flightMg .addCompany .el-dialog__body { height: 486px; overflow: auto; } .flightMg .addCompany input { width: 208px; height: 34px; border-radius: 17px; } .flightMg .name_input .el-form-item__content, .other_input .el-form-item__content .el-input input { width: 208px; } .flightMg .name_input .el-form-item__content .el-input input { border-radius: 0; } .flightMg .name_input .el-form-item__content .el-input:first-child input { border-top-left-radius: 17px; border-bottom-left-radius: 17px; border-right: 0; } .flightMg .cn_name .el-form-item:nth-child(2) .el-form-item__content .el-input:last-child input, .is-error .el-form-item__content { border-top-right-radius: 17px; border-bottom-right-radius: 17px; } .flightMg .el-form-item__content .el-textarea { width: 208px; } .flightMg .cn_name .el-form-item:nth-child(1) { width: 55%; float: left; } .flightMg .cn_name .el-form-item:nth-child(2) { width: 45%; float: left; } .flightMg .cn_name .el-form-item:nth-child(2) .el-form-item__content { margin: 0 !important; } .flightMg .cn_name .el-form-item:nth-child(2) .el-form-item__content input { border-radius: 0; border-top-right-radius: 17px; border-bottom-right-radius: 17px; } .flightMg .flightMg .cn_name .name_input .el-form-item__content, .cn_name .name_input .el-form-item__content .el-input input { width: 108.5px; } .flightMg .el-dialog__header { background-color: #e95252; } .flightMg .el-dialog__header .el-dialog__title { color: white; font-size: 14px; } .flightMg .el-dialog__header .el-dialog__close { color: #d23131; } .flightMg .el-pagination { text-align: center; padding-top: 10px; } .flightMg .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #e95252; color: #fff; } .flightMg_info { margin-bottom: 0; } .flightMg_info_tips { color: #999999; font-size: 12px; text-align: center; } .flightMg_delete_icon .el-input__suffix { right: 15px; } .flightMg .time .el-input--prefix .el-input__inner { padding-left: 30px; } .flightMg .query-box li label { display: inline-block; min-width: 80px; text-align: right; font-style: normal; margin: 0 20px 0 0; } </style> <template> <div class="flexOne flightMg"> <div class="query-box"> <ul> <li> <label>{{$t('system.query_airCompanyName')}}</label> <el-select v-model="msg.airlineID" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for="item in airlineList" :key="item.AirLineId" :label="item.AlName" :value="item.AirLineId"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_flightNum')}}</label> <el-input v-model="msg.Flight_number" placeholder="" @keyup.native.enter="getList" class="w210"></el-input> </li> <li> <label>{{$t('system.query_type')}}</label> <el-select v-model="msg.Type" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option :label='$t("system.label_zhifei")' value='1'></el-option> <el-option :label='$t("system.label_jingting")' value='2'></el-option> </el-select> </li> <li> <label>{{$t('system.query_flightCity')}}</label> <el-select v-model="msg.Departure_city" filterable :placeholder="$t('system.ph_buxian')" @change="getaAirport(msg.Departure_city,false)" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_flightAir')}}</label> <el-select v-model="msg.Departure_airport" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in Departure_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_stopCity')}}</label> <el-select v-model="msg.Stopover_city" filterable :placeholder="$t('system.ph_buxian')" @change="getaStopAirport(msg.Stopover_city,false)" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_stopAir')}}</label> <el-select v-model="msg.Stopover_airport" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in Stopover_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_arrivalCity')}}</label> <el-select v-model="msg.Arrival_city" filterable :placeholder="$t('system.ph_buxian')" @change="getaArrivalAirport(msg.Arrival_city,false)" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('system.query_arrivalAir')}}</label> <el-select v-model="msg.Arrival_airport" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label='$t("system.ph_buxian")' value='0'></el-option> <el-option v-for='item in Arrival_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </li> <li> <label>{{$t('admin.admin_status')}}</label> <el-select v-model="msg.Status" filterable :placeholder="$t('system.ph_buxian')" class="w210"> <el-option :label="$t('system.ph_buxian')" value='-1'></el-option> <el-option :label="$t('system.ph_zhengchang')" value='0'></el-option> <el-option :label="$t('system.ph_shanchu')" value='1'></el-option> </el-select> </li> <li> <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" /> <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="outerVisible = true,dialogTitle='新增航班',initAddMsg()" /> </li> </ul> </div> <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading"> <tr> <th width="">{{$t("system.query_flightNum")}}</th> <th width="">{{$t("system.query_flightAir")}}</th> <th>{{$t("system.ph_flightTime")}}</th> <th>{{$t("system.query_stopAir")}}</th> <th>{{$t("system.ph_stopFlightTime")}}</th> <th>{{$t("system.ph_toFlightTime")}}</th> <th>{{$t("system.query_arrivalAir")}}</th> <th>{{$t("system.query_arrivalTime")}}</th> <th>{{$t("admin.admin_czPerson")}}</th> <th>飞行时间</th> <th>{{$t("hotel.table_operattime")}}</th> <th width="200">{{$t("admin.admin_operate")}}</th> </tr> <tr v-for="(item,index) in DataList" :key="index"> <td>{{item.Flight_number}} <!--{{item.SeasonTypeStr}}--> </td> <td>{{item.DName}}</td> <td>{{item.Departure_time}}</td> <td>{{item.SName}}</td> <td>{{item.Arrival_stopover_time}}</td> <td>{{item.Departure_stopover_time}}</td> <td>{{item.AName}}</td> <td>{{item.Arrival_time}}</td> <td>{{item.emName}}</td> <td>{{item.FlyTime}}</td> <td>{{item.UpdateDate}}</td> <td style="position: relative;"> <el-row> <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start"> <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle='修改航班',updateData(item.ID)"></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="$t('pub.revoke')" placement="top-start" v-if="item.Status==1"> <el-button type="danger" icon="iconfont icon-web-icon-revoke" circle @click="deletelist(index,2)"> </el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start" v-else> <el-button type="danger" icon="el-icon-delete" circle @click="deletelist(index,1)"></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="效期维护" placement="top-start"> <el-button type="primary" icon="iconfont icon-weihu" circle @click="gotoChild(item)"></el-button> </el-tooltip> </el-row> </td> </tr> </table> <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> <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px"> <el-form-item :label="$t('system.query_airCompanyName')" prop="AirlineID"> <el-select v-model="addMsg.AirlineID" filterable :placeholder="$t('system.ph_choiceAir')"> <el-option v-for='item in airlineList' :key="item.AirLineId" :label="item.AlName" :value="item.AirLineId"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_flightNum')" prop="Flight_number" class="other_input"> <el-input v-model="addMsg.Flight_number" :placeholder="$t('system.ph_airNum')"></el-input> </el-form-item> <el-form-item label="时间类型" style="display:none"> <el-select v-model="addMsg.SeasonType"> <el-option v-for='item in SeasonTypeList' :key="item.Id" :label="item.Name" :value="item.Id"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_type')" prop="Type"> <el-select v-model="addMsg.Type" :placeholder="$t('system.ph_type')"> <el-option :label='$t("system.label_zhifei")' :value='1'></el-option> <el-option :label='$t("system.label_jingting")' :value='2'></el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_flightCity')" prop="Departure_city"> <el-select v-model="addMsg.Departure_city" filterable :placeholder="$t('system.ph_flightCity')" @change="getaAirport(addMsg.Departure_city,false)"> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_flightAir')" prop="Departure_airport"> <el-select v-model="addMsg.Departure_airport" filterable :placeholder="$t('system.ph_flightAir')"> <el-option v-for='item in layer_Departure_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.ph_flightTime')" prop="Departure_time" class='flightMg_delete_icon time'> <el-input type="text" v-model="addMsg.Departure_time" @keyup.native="checkTime(addMsg,'Departure_time')" maxlength="5" :placeholder="$t('system.ph_time')"></el-input> </el-form-item> <div v-if='addMsg.Type=="2"'> <el-form-item :label="$t('system.query_stopCity')" prop="Stopover_city"> <el-select v-model="addMsg.Stopover_city" filterable :placeholder="$t('system.ph_stopCity')" @change="getaStopAirport(addMsg.Stopover_city,false)"> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_stopAir')" prop="Stopover_airport"> <el-select v-model="addMsg.Stopover_airport" filterable :placeholder="$t('system.ph_stopAir')"> <el-option v-for='item in layer_Stopover_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.ph_stopFlightTime')" prop="Arrival_stopover_time" class='flightMg_delete_icon time'> <el-input type="text" v-model="addMsg.Arrival_stopover_time" :placeholder="$t('system.ph_time')"></el-input> </el-form-item> <el-form-item :label="$t('system.ph_toFlightTime')" prop="Departure_stopover_time" class='flightMg_delete_icon time'> <el-input type="text" v-model="addMsg.Departure_stopover_time" :placeholder="$t('system.ph_time')"> </el-input> </el-form-item> </div> <el-form-item :label="$t('system.query_arrivalCity')" prop="Arrival_city"> <el-select v-model="addMsg.Arrival_city" filterable :placeholder="$t('system.ph_flightCity')" @change="getaArrivalAirport(addMsg.Arrival_city,false)"> <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_arrivalAir')" prop="Arrival_airport"> <el-select v-model="addMsg.Arrival_airport" filterable :placeholder="$t('system.ph_flightAir')"> <el-option v-for='item in layer_Arrival_airport' :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item :label="$t('system.query_arrivalTime')" prop="Arrival_time" class='flightMg_delete_icon time'> <el-input type="text" v-model="addMsg.Arrival_time" @keyup.native="checkTime(addMsg,'Arrival_time')" maxlength="5" :placeholder="$t('system.ph_time')"></el-input> </el-form-item> <el-form-item label="飞行时间" prop="FlyTime" class='flightMg_delete_icon time'> <el-input type="text" v-model="addMsg.FlyTime" @keyup.native="checkTime(addMsg,'FlyTime')" maxlength="5" :placeholder="$t('system.ph_time')"></el-input> </el-form-item> <el-form-item class="flightMg_info"> <el-checkbox v-model="checked">{{$t('system.table_tips_fmgCk')}}</el-checkbox> </el-form-item> <div v-if="checked"> <p class="flightMg_info_tips">{{$t('system.table_tips_fmgInfo')}}</p> <el-form-item :label="$t('system.table_begTime')" class='time'> <el-date-picker v-model='addMsg.StartDate' class='w135' value-format="yyyy-MM-dd" type="date"> </el-date-picker> </el-form-item> <el-form-item :label="$t('system.table_overTime')" class='time'> <el-date-picker v-model='addMsg.EndDate' class='w135' value-format="yyyy-MM-dd" type="date"> </el-date-picker> </el-form-item> </div> </el-form> <div slot="footer" class="dialog-footer"> <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button> </div> </el-dialog> </div> </template> <script> export default { data() { let validateFlightNum = (rule, value, callback) => { var reg = /^[a-zA-Z]+$/; var reg2 = /^[0-9]+$/; var reg3 = /^[0-9a-zA-Z]*$/g; if (value === "") { callback(new Error("请输入航班号")); } else if (!reg3.test(value)) { callback(new Error("请输入数字或字母")); } else if (!reg2.test(value.charAt(value.length - 1))) { callback(new Error("尾数必须为数字")); } else { callback(); } } return { checked: false, outerVisible: false, msg: { //请求数据参数 pageIndex: 1, pageSize: 15, airlineID: "0", Flight_number: "", Type: "0", Departure_city: "0", Departure_airport: "0", Stopover_city: "0", Stopover_airport: "0", Arrival_city: "0", Arrival_airport: "0", Status: "0", TrafficType: 1, }, addMsg: { ID: 0, Flight_number: "", Departure_city: "", Arrival_city: "", Departure_airport: "", Arrival_airport: "", Departure_time: "", Arrival_time: "", Type: "", AirlineID: "", Stopover_city: "", Stopover_airport: "", Arrival_stopover_time: "", Departure_stopover_time: "", SeasonType: 0, //是否同步 synchronization: 0, StartDate: "", EndDate: "", TrafficType: 1, FlyTime:"",//飞行时间 }, SeasonTypeList: [], DataList: [], chosenIndex: -1, total: 0, currentPage: 1, airlineList: [], Departure_airport: [], layer_Departure_airport: [], Stopover_airport: [], layer_Stopover_airport: [], Arrival_airport: [], layer_Arrival_airport: [], cityList: [], stopShow: false, dialogTitle: "", insideDialogTxt: "保存成功!", loading: true, noData: false, rules: { //表单必填验证 AirlineID: [{ required: true, message: "请选择航空公司", trigger: "change" }], Flight_number: [{ validator: validateFlightNum, trigger: "blur", }], Type: [{ required: true, message: "请选择类型", trigger: "change" }], Departure_city: [{ required: true, message: "请选择起飞城市", trigger: "change" }], Departure_airport: [{ required: true, message: "请选择起飞机场", trigger: "change" }], Departure_time: [{ required: true, message: "请填写起飞时间", trigger: "change" }], Arrival_time: [{ required: true, message: "请填写到达时间", trigger: "change" }], Stopover_city: [{ required: true, message: "请选择经停城市", trigger: "change" }], Stopover_airport: [{ required: true, message: "请选择起飞机场", trigger: "change" }], Arrival_stopover_time: [{ required: true, message: "请填写经停到达时间", trigger: "change" }], Departure_stopover_time: [{ required: true, message: "请填写经停起飞时间", trigger: "change" }], Arrival_city: [{ required: true, message: "请选择到达城市", trigger: "change" }], Arrival_airport: [{ required: true, message: "请选择到达机场", trigger: "change" }] } }; }, methods: { //获取列表数据 getList() { this.loading = true; this.apipost( "flight_post_GetPageList", this.msg, res => { this.loading = false; if (res.data.resultCode == 1) { this.total = res.data.data.count; this.noData = !this.total > 0; this.DataList = res.data.data.pageData; } else { this.Error(res.data.message); } }, err => {} ); }, //获取城市列表 getDepartureCityList() { this.apipost( "dict_post_Destination_GetCityList", {}, res => { this.cityList = res.data.data; }, err => {} ); }, getaAirport(ID, blo) { //根据城市获取起飞机场 let msg = { City_id: ID, TrafficType: 1, }; this.apipost( "airport_post_GetList", msg, res => { if (this.outerVisible) { if (!blo) { this.addMsg.Departure_airport = ""; } this.layer_Departure_airport = res.data.data; } else { this.msg.Departure_airport = "0"; this.Departure_airport = res.data.data; } }, err => {} ); }, initAddMsg() { let newMsg = { ID: 0, Flight_number: "", Departure_city: "", Arrival_city: "", Departure_airport: "", Arrival_airport: "", Departure_time: "", Arrival_time: "", Type: "", AirlineID: "", Stopover_city: "", Stopover_airport: "", Arrival_stopover_time: "", Departure_stopover_time: "", SeasonType: 0, synchronization: 0, StartDate: "", EndDate: "", TrafficType: 1, FlyTime:"",//飞行时间 }; this.addMsg = newMsg; }, //根据城市获取经停机场 getaStopAirport(ID, blo) { this.apipost( "airport_post_GetList", { City_id: ID, TrafficType: 1, }, res => { if (this.outerVisible) { if (!blo) { this.addMsg.Stopover_airport = ""; } this.layer_Stopover_airport = res.data.data; } else { this.msg.Stopover_airport = "0"; this.Stopover_airport = res.data.data; } }, err => {} ); }, getaArrivalAirport(ID, blo) { //根据城市获取到达机场 let msg = { City_id: ID, TrafficType: 1, }; this.apipost( "airport_post_GetList", msg, res => { if (this.outerVisible) { if (!blo) { this.addMsg.Arrival_airport = ""; } this.layer_Arrival_airport = res.data.data; } else { this.msg.Arrival_airport = "0"; this.Arrival_airport = res.data.data; } }, err => {} ); }, //获取航空公司* getAirlineList() { this.apipost( "airline_post_GetList", {}, res => { this.airlineList = res.data.data; }, err => {} ); }, //添加 addGroupGuide() { if (this.checked) { this.addMsg.synchronization = 1; } else { this.addMsg.synchronization = 0; } this.checkIsRightTime(this.addMsg.Departure_time, 1); this.checkIsRightTime(this.addMsg.Arrival_time, 2); this.apipost( "flight_post_Set", this.addMsg, res => { if (res.data.resultCode == 1) { this.Success("保存成功"); this.getList(); this.outerVisible = false; this.resetForm("addMsg"); } else { this.Error(res.data.message); } }, err => {} ); }, checkIsRightTime(time, type) { let arrTime = time.split(':'); if (arrTime[0] >= 24 || arrTime[1] >= 60) { if (type == 1) { this.Error('请输入正确的起飞时间格式!'); } if (type == 2) { this.Error('请输入正确的到达时间格式!'); } } }, //提交创建、修改表单 submitForm(addMsg) { this.$refs[addMsg].validate(valid => { if (valid) { this.addGroupGuide(); } else { return false; } }); }, deletelist(index, type) { //删除 var text = ""; var text2 = ""; if (type == 1) { text = "是否删除?"; text2 = "删除成功"; } else { text = "是否恢复?"; text2 = "恢复成功"; } this.$confirm(text, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$message({ type: "success", message: text2 }); this.deleteFligt(index); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, //删除 deleteFligt(index) { let msg = { ID: this.DataList[index].ID }; this.apipost( "flight_post_Remove", msg, res => { if (res.data.resultCode == 1) { this.getList(); } }, err => {} ); }, //显示功能操作按钮 menuShow(index) { this.chosenIndex = this.chosenIndex == index ? -1 : index; }, //翻页功能按钮 handleCurrentChange(val) { this.msg.pageIndex = val; this.getList(); }, //查询初始化页码 resetPageIndex() { this.msg.pageIndex = 1; this.currentPage = 1; }, //修改 updateData(ID) { let msg = { ID: ID }; this.apipost( "flight_post_Get", msg, res => { var newMsg = res.data.data; this.getaAirport(newMsg.Departure_city, true); if (newMsg.Stopover_city) { this.getaStopAirport(newMsg.Stopover_city, true); } this.getaArrivalAirport(newMsg.Arrival_city, true); this.addMsg = res.data.data; }, err => {} ); }, closeChangeMachie(done) { //弹出框关闭初始化弹框内表单 done(); this.resetForm("addMsg"); }, resetForm(formName) { //弹出框取消 初始化谈框内表单 this.$refs[formName].clearValidate(); }, //获取季节类型枚举列表 getSeasonTypeList() { this.apipost( "flight_get_GetSeasonTypeList", {}, res => { this.SeasonTypeList = res.data.data; }, err => {} ); }, //跳转到子项 gotoChild(item) { this.$router.push({ name: "flightChild", query: { id: item.ID, blank: 'y', tab: "航班有效期维护" } }) }, }, mounted() { this.getSeasonTypeList() this.getList(); this.getAirlineList(); this.getDepartureCityList(); }, }; </script>