|
|
@@ -0,0 +1,485 @@
|
|
|
+<template>
|
|
|
+ <div class="advance">
|
|
|
+ <div class="advance__head flex">
|
|
|
+ <div class="flex-wrap interfaceLog_head_time">
|
|
|
+ <div class="manageTitle">高级查询</div>
|
|
|
+ <el-date-picker v-model="carrierFlightsDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" />
|
|
|
+ </div>
|
|
|
+ <Search ref="search" class="advanced-search" :is-title="false" :is-slot="true" :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'" @getSearchData="getSearchData" @clearSearchData="clearSearchData">
|
|
|
+ <div class="flex-wrap">
|
|
|
+ <button class="btnAn" @click="dialogShow">
|
|
|
+ 高级查询
|
|
|
+ </button>
|
|
|
+ <button class="btnAn" @click="exportHandler('queryTable', '高级查询结果')">
|
|
|
+ 导出
|
|
|
+ </button>
|
|
|
+ <button class="btnAn">
|
|
|
+ <router-link to="/newQuery">切换</router-link>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </Search>
|
|
|
+ </div>
|
|
|
+ <!--表格-->
|
|
|
+ <div class="advance__table">
|
|
|
+ <Table :pageSize="999" style="height:100%" ref="queryTable" :tableTag="tableTag" />
|
|
|
+ </div>
|
|
|
+ <!--高级查询-->
|
|
|
+ <Dialog width="900px" :flag="gjFlag">
|
|
|
+ <div ref="dialog" class="advanced-dialog" :tabindex="0" @keyup.enter="advancedSubmitHandler(false)" @keyup.self.esc="gjFlag = false">
|
|
|
+ <div class="title">高级查询</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col v-for="item in formItems" :key="item.prop" :span="item.span || 8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop">
|
|
|
+ <template v-if="item.prop === 'carrierFlightsDate'">
|
|
|
+ <el-date-picker v-model="carrierFlightsDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" @keyup.esc.native="dialogFocus" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.prop === 'specialType'">
|
|
|
+ <el-select v-model="form.specialType" size="small" class="multiple-select" multiple collapse-tags filterable allow-create default-first-option clearable @keyup.esc.native="dialogFocus">
|
|
|
+ <el-option v-for="option in baggageTypeList" :key="option.specialType" :label="option.specialType" :value="option.specialType" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="
|
|
|
+ ['canLoad', 'cantransportation'].includes(
|
|
|
+ item.prop
|
|
|
+ )
|
|
|
+ ">
|
|
|
+ <el-select v-model="form[item.prop]" size="small" clearable @keyup.esc.native="dialogFocus">
|
|
|
+ <el-option label="是" value="Y" />
|
|
|
+ <el-option label="否" value="N" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.prop === 'No_BSM'">
|
|
|
+ <el-select v-model="form.noBSM" size="small" clearable @keyup.esc.native="dialogFocus">
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.prop === 'activeState'">
|
|
|
+ <el-select v-model="form.loadType" size="small" clearable @keyup.esc.native="dialogFocus">
|
|
|
+ <el-option label="未激活" :value="0" />
|
|
|
+ <el-option label="已激活" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-popover v-model="item.hintVisible" placement="right" trigger="manual">
|
|
|
+ <span>{{ item.hintText }}</span>
|
|
|
+ <el-input :ref="'input-' + item.prop" slot="reference" v-model="form[item.prop]" size="small" @focus="item.hintVisible = true" @blur="item.hintVisible = false" @keyup.esc.native="dialogFocus" />
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="foot right t30">
|
|
|
+ <el-button size="medium" class="r24" type="primary" @click="advancedSubmitHandler(false)">确定</el-button>
|
|
|
+ <el-button size="medium" @click="dialogHide">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Search from '@/components/SearchWithTooltip'
|
|
|
+import Dialog from '@/layout/components/Dialog'
|
|
|
+import Table from '../newQuery/components/table.vue'
|
|
|
+import { parseTime } from '@/utils/index'
|
|
|
+import { TempQuery, myQuery } from '@/api/temp'
|
|
|
+import { setTableFilters, exportToExcel } from '@/utils/table'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AdvancedHome',
|
|
|
+ components: { Search, Dialog, Table },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ colDialogFlag: false,
|
|
|
+ gjFlag: false,
|
|
|
+ tableData: [],
|
|
|
+ page: -1,
|
|
|
+ noMore: false,
|
|
|
+ checkList: [],
|
|
|
+ dealedTableDataAll: [],
|
|
|
+ tableFlag: false,
|
|
|
+ carrierFlightsDate: [
|
|
|
+ parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ ],
|
|
|
+ dateRangePickerOptions: {
|
|
|
+ onPick: this.dateRangePickHandler,
|
|
|
+ disabledDate: this.dateRangeDisabled,
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ carrierFlights: '', //航班号
|
|
|
+ carrierFlightsDate: '', //航班日期
|
|
|
+ outAirport: '', //起飞航站
|
|
|
+ landAirport: '', //目的航站
|
|
|
+ luggageNum: '', //行李牌号
|
|
|
+ specialType: '', //特殊行李类型
|
|
|
+ dataState: '', //取消值机
|
|
|
+ activeState: '', //行李激活状态
|
|
|
+ container_ID: '', //容器编号
|
|
|
+ inflightNo: '', //进港航班号
|
|
|
+ transferFlightNO: '', //离港航班号
|
|
|
+ PNRNO: '', //PNR编号
|
|
|
+ luggageCount: '', //总件数
|
|
|
+ canLoad: '', //是否可装载
|
|
|
+ cantransportation: '', //是否可运输
|
|
|
+ No_BSM: '' //无BSM状态
|
|
|
+ },
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ prop: 'carrierFlightsDate',
|
|
|
+ label: '航班日期',
|
|
|
+ span: 16,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'carrierFlights',
|
|
|
+ label: '航班号',
|
|
|
+ hintText: '示例：CA1234',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'outAirport',
|
|
|
+ label: '起飞航站',
|
|
|
+ hintText: '示例：PEK',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'landAirport',
|
|
|
+ label: '目的航站',
|
|
|
+ hintText: '示例：CTU',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'luggageNum',
|
|
|
+ label: '行李牌号',
|
|
|
+ hintText: '示例：1234567890 或 CA123456',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'specialType',
|
|
|
+ label: '特殊行李类型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'dataState',
|
|
|
+ label: '取消值机',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'container_ID',
|
|
|
+ label: '容器编号',
|
|
|
+ hintText: '示例：AKE12345CA',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'passengerName',
|
|
|
+ label: '旅客姓名',
|
|
|
+ hintText: '示例：ZHAOWEI',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'PNRNO',
|
|
|
+ label: 'PNR',
|
|
|
+ hintText: '示例：PZR25X',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'activeState',
|
|
|
+ label: '行李激活状态',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'inflightNo',
|
|
|
+ label: '进港航班号',
|
|
|
+ hintText: '示例：CA1234',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'transferFlightNO',
|
|
|
+ label: '离港航班号',
|
|
|
+ hintText: '示例：CA1234',
|
|
|
+ hintVisible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'canLoad',
|
|
|
+ label: '是否可装载',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'cantransportation',
|
|
|
+ label: '是否可运输',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'No_BSM',
|
|
|
+ label: '无BSM状态',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ statusList: [
|
|
|
+ {
|
|
|
+ statusName: '值机',
|
|
|
+ statusCode: '值机',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '安检',
|
|
|
+ statusCode: '安检',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '分拣',
|
|
|
+ statusCode: '分拣',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '装车',
|
|
|
+ statusCode: '装车',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '装机',
|
|
|
+ statusCode: '装机',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '到达',
|
|
|
+ statusCode: '到达',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusName: '卸机',
|
|
|
+ statusCode: '卸机',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // statusName: '已中转',
|
|
|
+ // statusCode: '已中转'
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ baggageTypeList: [],
|
|
|
+ dataContent: [],
|
|
|
+ rules: {
|
|
|
+ // 机器信息表单验证
|
|
|
+ // flightNO: [
|
|
|
+ // { required: true, message: "请输入有效航班号", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ tableDataFilters: {},
|
|
|
+ filterValues: {},
|
|
|
+ tableDataSortRules: {},
|
|
|
+ spanArr: [],
|
|
|
+ contactDot: 0,
|
|
|
+ scrollTop: 0,
|
|
|
+ dom: null,
|
|
|
+ tableTag: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dialogShow () {
|
|
|
+ this.gjFlag = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.dialogFocus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dialogHide () {
|
|
|
+ this.gjFlag = false
|
|
|
+ },
|
|
|
+ dialogFocus () {
|
|
|
+ this.$refs['dialog'].focus()
|
|
|
+ },
|
|
|
+ dateRangePickHandler ({ maxDate, minDate }) {
|
|
|
+ if (!maxDate) {
|
|
|
+ this.pickedDate = minDate
|
|
|
+ } else {
|
|
|
+ this.pickedDate = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dateRangeDisabled (date) {
|
|
|
+ if (this.pickedDate) {
|
|
|
+ const diff = date - this.pickedDate,
|
|
|
+ day = 24 * 60 * 60 * 1000
|
|
|
+ return diff < -3 * day || diff > 2 * day
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ resetTable () {
|
|
|
+ this.tableTag = {}
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ getSearchData (val) {
|
|
|
+ if (
|
|
|
+ this.carrierFlightsDate[0] === '' ||
|
|
|
+ this.carrierFlightsDate[1] === '' ||
|
|
|
+ val === ''
|
|
|
+ ) {
|
|
|
+ this.$message.error('请先输入完整查询信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.clearForm()
|
|
|
+ // 点击搜索后清除跳转携带的查询信息
|
|
|
+ this.$route.query && this.$router.replace(this.$route.path)
|
|
|
+ // let searchData = {dataContent:[this.time[0],this.time[1],val]}
|
|
|
+ const az = /^[a-zA-Z]+$/
|
|
|
+ const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
|
|
|
+ // const top2 = /^[a-zA-Z]{2}\w*$/
|
|
|
+ const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
|
|
|
+ const bagNum = /^[0-9]{10}$/
|
|
|
+ const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
|
|
|
+ // const bagNumCA = /^CA[0-9]{6}$/
|
|
|
+ const bagNumShort = /^[0-9a-zA-Z][a-zA-Z][0-9]{6}$/
|
|
|
+ // 纯字母则为旅客姓名
|
|
|
+ if (az.test(val)) {
|
|
|
+ this.form['passengerName'] = val
|
|
|
+ this.advancedSubmitHandler(true)
|
|
|
+ } else if (azNum.test(val) && top2.test(val) && val.length < 8) {
|
|
|
+ // 字母加数字且前两位为字母则为航班号
|
|
|
+ if (val.length <= 5) {
|
|
|
+ const len = val.length
|
|
|
+ const lenCx = 6 - len
|
|
|
+ val = val.substring(0, 2) + '0'.repeat(lenCx) + val.substring(2, len)
|
|
|
+ this.$refs['search'].input = val
|
|
|
+ }
|
|
|
+ this.form['carrierFlights'] = val
|
|
|
+ this.advancedSubmitHandler(true)
|
|
|
+ } else if (
|
|
|
+ bagNum.test(val) ||
|
|
|
+ bagNo.test(val) ||
|
|
|
+ (bagNumShort.test(val) &&
|
|
|
+ Object.keys(AIRPORT_ID).includes(val.slice(0, 2).toUpperCase()))
|
|
|
+ ) {
|
|
|
+ // 纯数字且位数等于10则为行李牌号
|
|
|
+ this.form['luggageNum'] = val
|
|
|
+ this.advancedSubmitHandler(true)
|
|
|
+ } else {
|
|
|
+ this.$message.error(
|
|
|
+ '请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清除查询
|
|
|
+ clearSearchData () {
|
|
|
+ this.clearForm()
|
|
|
+ this.resetTable()
|
|
|
+ },
|
|
|
+ // 清除表单
|
|
|
+ clearForm () {
|
|
|
+ Object.keys(this.form).forEach(key => {
|
|
|
+ this.form[key] = ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 高级查询-确定
|
|
|
+ advancedSubmitHandler (singleJump) {
|
|
|
+ this.resetTable()
|
|
|
+ /* 参数顺序
|
|
|
+ 【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊行李类型，旅客姓名大写拼音，旅客姓名大写拼音，
|
|
|
+ PNR，PNR，值机号，值机号，中转进航班，中转进航班，中转出航班，中转出航班，容器编号，容器编号，
|
|
|
+ 是否已翻减（null/OFF/其他），是否已翻减（null/OFF/其他），是否值机（null/0/1），是否值机（null/0/1），
|
|
|
+ 是否激活（null/0/1），是否激活（null/0/1），是否中转（null/0/1），是否中转（null/0/1），是否取消行李（null/0/1)，是否取消行李（null/0/1)】 */
|
|
|
+ if (!this.carrierFlightsDate?.length) {
|
|
|
+ this.$message.error('请先选择要查询的时间')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (Object.values(this.form).every(value => value === '')) {
|
|
|
+ this.$message.error('请先输入查询信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const NEW_FORM = { ...this.form }
|
|
|
+ const NEW_PUSH = []
|
|
|
+ const START_TIME = {
|
|
|
+ column: 'carrierFlightsDate',
|
|
|
+ comparator: '>=',
|
|
|
+ connector: '',
|
|
|
+ left: '(',
|
|
|
+ right: ')',
|
|
|
+ value: this.carrierFlightsDate[0]
|
|
|
+ }
|
|
|
+ const END_TIME = {
|
|
|
+ column: 'carrierFlightsDate',
|
|
|
+ comparator: '<=',
|
|
|
+ connector: '',
|
|
|
+ left: '(',
|
|
|
+ right: ')',
|
|
|
+ value: this.carrierFlightsDate[1]
|
|
|
+ }
|
|
|
+ NEW_PUSH.push(START_TIME)
|
|
|
+ NEW_PUSH.push(END_TIME)
|
|
|
+ for (const key in NEW_FORM) {
|
|
|
+ if (Object.hasOwnProperty.call(NEW_FORM, key)) {
|
|
|
+ const _ele = NEW_FORM[key]
|
|
|
+ if (_ele && _ele.length) {
|
|
|
+ const _eleObject = {
|
|
|
+ column: key,
|
|
|
+ comparator: '=',
|
|
|
+ connector: '',
|
|
|
+ left: '(',
|
|
|
+ right: ')',
|
|
|
+ value: _ele
|
|
|
+ }
|
|
|
+ NEW_PUSH.push(_eleObject)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableTag = {
|
|
|
+ filter: NEW_PUSH
|
|
|
+ }
|
|
|
+ this.gjFlag = false
|
|
|
+ },
|
|
|
+ exportHandler: _.throttle(
|
|
|
+ function (refName, tableName) {
|
|
|
+ const table = this.$refs[refName].$el.cloneNode(true)
|
|
|
+ const fileName = `${tableName}.xlsx`
|
|
|
+ exportToExcel(table, tableName, fileName)
|
|
|
+ },
|
|
|
+ 2000,
|
|
|
+ { trailing: false }
|
|
|
+ ),
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.advance {
|
|
|
+ padding: 24px;
|
|
|
+ height: calc(100vh - 80px);
|
|
|
+ &__head {
|
|
|
+ line-height: 32px;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .btnAn:not(:last-child) {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .setting {
|
|
|
+ height: 32px;
|
|
|
+ width: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background: url("../../assets/baggage/ic_setting.png") no-repeat;
|
|
|
+ margin-left: 12px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ .mr10 {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ ::v-deep .interfaceLog_head_time {
|
|
|
+ .el-input__prefix {
|
|
|
+ left: 10px;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ .el-input--prefix .el-input__inner {
|
|
|
+ padding-left: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.advance__table {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 56px);
|
|
|
+}
|
|
|
+
|
|
|
+.advanced-dialog::v-deep .el-form > .el-row > .el-col {
|
|
|
+ &:nth-child(1) .el-date-editor {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .multiple-select
|
|
|
+ .el-select__tags
|
|
|
+ > span
|
|
|
+ > .el-tag:first-child
|
|
|
+ > .el-select__tags-text {
|
|
|
+ width: 35px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
