<template>
<el-container>
<el-main>
<el-row class="row-bg">
<el-col :span="24">
<div class="grid-content content">预报航班配置查询</div>
</el-col>
</el-row>
<!-- 搜索区域-->
<el-row style="padding-top: 10px">
<el-form :label-position="labelPosition" :model="queryConfigure" :rules="rules" ref="queryFlight"
label-width="130px" class="demo-ruleForm">
<el-row>
<el-col :span="5" style="margin-right: 70px">
<el-form-item label="承运人" prop="awcd" label-width="70px">
<el-input v-model="queryConfigure.awcd" style="width:120px"></el-input>
</el-form-item>
</el-col>
<el-col :span="5" style="margin-right: 70px">
<el-form-item label="航班号" prop="flightNo" label-width="70px">
<el-input v-model="queryConfigure.flightNo" style="width:120px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" >
<el-button type="primary" icon="el-icon-search" @click="submitForm()">查询</el-button>
<el-button type="success" icon="el-icon-edit" @click="addForm()">新增</el-button>
</el-col>
</el-row>
</el-form>
</el-row>
<!-- 表单区域-->
<el-row>
<el-table
:data="tableData"
border
v-loading="tableloading" style="margin-bottom: 20px;margin-top: 20px">
<el-table-column
prop="awcd"
label="承运人">
</el-table-column>
<el-table-column
prop="flightNo"
label="航班号">
</el-table-column>
<el-table-column
prop="customscode"
label="申报关区">
</el-table-column>
<el-table-column
prop="aircraftNo"
label="航空注册器编号">
</el-table-column>
<el-table-column
prop="transportflag"
label="航空器备案类型"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="aircraftstand"
label="停机位">
</el-table-column>
<el-table-column
prop="departurePort"
label="航班起始站">
</el-table-column>
<el-table-column
prop="arrivalPort"
label="航班目的站">
</el-table-column>
<el-table-column
prop="departuredatetime"
label="预计出境时间">
</el-table-column>
<el-table-column
prop="arrivaldatetime"
label="预计入境时间">
</el-table-column><el-table-column
prop="validtime"
label="配置生效到期日">
</el-table-column>
<el-table-column
label="配置状态">
<template slot-scope="scope">
<span v-if="scope.row.status ==='0'">禁用</span>
<span v-if="scope.row.status ==='1'">生效</span>
</template>
</el-table-column>
<el-table-column
label="配置类型">
<template slot-scope="scope">
<span v-if="scope.row.type ==='2'">入境</span>
<span v-if="scope.row.type ==='1'">出境</span>
</template>
</el-table-column>
<el-table-column
prop="userid"
label="创建人">
</el-table-column>
<el-table-column
prop="creatdate"
label="创建时间">
</el-table-column>
<el-table-column
prop="updatedate"
label="配置更新时间">
</el-table-column>
<el-table-column
prop="meno"
label="备注">
</el-table-column>
<el-table-column
fixed="right"
prop=""
label="报文操作"
width="280">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
<!-- 新增编辑弹框-->
<el-row>
<el-dialog :title="dialogMap[dialogApply]" :visible.sync="configure_dialog.addDialog" width="80%" @close="configure_addDialogClosed">
<el-form :model="configure_addForm" :rules="rules" ref="configure_addForm">
<el-row>
<el-col :span="6" style="margin-top: 10px">
<el-form-item label="承运人" prop="awcd" label-width="120px">
<el-input v-model.trim="configure_addForm.awcd" @input="e => configure_addForm.awcd=inputMe(e)"
maxLength='2'></el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: 10px">
<el-form-item label="航班号" prop="flightNo" label-width="120px">
<el-input v-model="configure_addForm.flightNo" @input="e => configure_addForm.flightNo=inputMe(e)"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: 10px">
<el-form-item label="申报关区" prop="customscode" label-width="120px">
<el-input v-model="configure_addForm.customscode" oninput="value=value.replace(/[^\d]/g,'')"
maxLength='4'></el-input>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-top: 10px">
<el-form-item label="航空注册器编号" prop="aircraftNo" label-width="130px">
<el-input v-model="configure_addForm.aircraftNo"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="航空器备案类型" prop="transportflag" label-width="140px">
<el-input v-model="configure_addForm.transportflag"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="停机位" prop="aircraftstand" label-width="120px">
<el-input v-model="configure_addForm.aircraftstand"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="航班起始站" prop="departurePort" label-width="120px">
<el-input v-model="configure_addForm.departurePort" @input="e => configure_addForm.departurePort=inputMe(e)"
maxLength='3'></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="航班目的站" prop="arrivalPort" label-width="120px">
<el-input v-model="configure_addForm.arrivalPort" @input="e => configure_addForm.arrivalPort=inputMe(e)"
maxLength='3'></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预计出境时间" prop="departuredatetime" label-width="120px">
<el-date-picker
v-model="configure_addForm.departuredatetime"
type="datetime"
placeholder="选择日期时间"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width:100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预计入境时间" prop="arrivaldatetime" label-width="120px">
<el-date-picker
v-model="configure_addForm.arrivaldatetime"
type="datetime"
placeholder="选择日期时间"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width:100%">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配置生效到期日" prop="validtime" label-width="130px">
<el-date-picker
v-model="configure_addForm.validtime"
type="datetime"
placeholder="选择日期时间"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width: 100%"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建人" prop="userid" label-width="120px">
<el-input v-model="configure_addForm.userid"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配置类型" prop="type" label-width="120px">
<!-- <el-input v-model="configure_addForm.type"></el-input>-->
<el-select v-model="configure_addForm.type" placeholder="请选择" size="mini">
<el-option label="2-入境" value="2"></el-option>
<el-option label="1-出境" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配置状态" prop="status" label-width="120px">
<!-- <el-input v-model="configure_addForm.status"></el-input>-->
<el-select v-model="configure_addForm.status" placeholder="请选择" size="mini">
<el-option label="0-禁用" value="0"></el-option>
<el-option label="1-生效" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间" prop="creatdate" label-width="120px">
<el-date-picker
v-model="configure_addForm.creatdate"
type="datetime"
placeholder="选择日期时间"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width: 100%"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配置更新时间" prop="updatedate" label-width="120px">
<el-date-picker
v-model="configure_addForm.updatedate"
type="datetime"
placeholder="选择日期时间"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width: 100%"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="星期日期" prop="schedule.options" label-width="120px">
<el-select v-model="configure_addForm.schedule.options" multiple placeholder="请选择(可多选)" style="width: 100%">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="meno" label-width="120px">
<el-input v-model="configure_addForm.meno"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="configure_dialog.addDialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?configure_add():configure_edit()" size="small">提 交</el-button>
</div>
</el-dialog>
</el-row>
</el-main>
</el-container>
</template>
<script>
import {addPrePlanConfig, delPrePlanConfig, ediPrePlanConfig, selectPrePlanConfig,} from "../../api/transport";
export default {
data(){
return{
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
queryConfigure:{
flightNo:undefined,
awcd:undefined,
},
labelPosition:'left',
pageNum: 1,
pageSize:10,
total:0,
tableData:[],
tableloading:false,
dialogMap: {
update: '编辑',
create: '新增'
},
dialogApply: 'create',
configure_dialog: {
// 添加对话框
addDialog: false,
// 编辑对话框
editDialog: false
},
formLabelWidth: '220px',
configure_addForm: {
id:'',
awcd:'',
flightNo:'',
customscode:'',
aircraftNo:'',
transportflag:'',
aircraftstand:'',
departurePort:'',
arrivalPort:'',
departuredatetime:'',
arrivaldatetime:'',
validtime:'',
status:'',
type:'',
userid:'',
creatdate:'',
updatedate:'',
schedulelist:[],
schedule:{
id:'',
planconfigid:'',
//周几
weekday:'',
options:[]
}
},
options: [{
value: '1',
label: '周一'
}, {
value: '2',
label: '周二'
}, {
value: '3',
label: '周三'
}, {
value: '4',
label: '周四'
}, {
value: '5',
label: '周五'
}, {
value: '6',
label: '周六'
}, {
value: '7',
label: '周日'
}],
rules: {
awcd: [
{ required: true, message: '请输入', trigger: 'change' }
],
flightNo: [
{ required: true, message: '请输入', trigger: 'change' }
],
customscode: [
{ required: true, message: '请输入', trigger: 'change' }
],
aircraftNo: [
{ required: true, message: '请输入', trigger: 'change' }
],
transportflag: [
{ required: true, message: '请输入', trigger: 'change' }
],
aircraftstand: [
{ required: true, message: '请输入', trigger: 'change' }
],
departurePort: [
{ required: true, message: '请输入', trigger: 'change' }
],
arrivalPort: [
{ required: true, message: '请输入', trigger: 'change' }
],
departuredatetime: [
{ required: true, message: '请输入', trigger: 'change' }
],
arrivaldatetime: [
{ required: true, message: '请输入', trigger: 'change' }
],
validtime: [
{ required: true, message: '请输入', trigger: 'change' }
],
userid: [
{ required: true, message: '请输入', trigger: 'change' }
],
type: [
{ required: true, message: '请输入', trigger: 'change' }
],
status: [
{ required: true, message: '请输入', trigger: 'change' }
],
creatdate: [
{ required: true, message: '请输入', trigger: 'change' }
],
updatedate: [
{ required: true, message: '请输入', trigger: 'change' }
],
'schedule.options': [
{ required: true, message: '请输入', trigger: 'change' }
],
}
}
},
methods: {
//分页
handleSizeChange(val) {
this.pageSize=val;
},
handleCurrentChange(val) {
this.pageNum=val;
this.submitForm();
},
// 获取消息标签列表
submitForm() {
const _this = this
selectPrePlanConfig(this.queryConfigure).then((response) => {
const res = response.data
console.log(response.data)
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data.list
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
//新增编辑弹框关闭重置
configure_addDialogClosed() {
// 重置对话框
this.$refs.configure_addForm.resetFields()
},
// 打开新增
addForm() {
this.dialogStatus = 'create'
this.configure_dialog.addDialog = true
},
// 新增功能
configure_add() { // 进行表单的预验证
this.$refs.configure_addForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return
console.log(this.configure_addForm);
addPrePlanConfig(this.configure_addForm).then((response) => {
const res = response.data
// 添加失败
if (res.code !== '200') {
// 关闭加载
return this.$message.error(res.msg)
}
// 添加，成功
this.$message.success(res.msg)
// 隐藏对话框
this.configure_dialog.addDialog = false
// 刷新列表
this.submitForm()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
// 打开编辑
handleEdit(index, row) {
this.configure_addForm = Object.assign({}, row);
console.log(this.configure_addForm)
this.configure_addForm.schedule.options=[];
for(var obj in row.schedulelist){
console.log(this.configure_addForm.schedule.options.push(row.schedulelist[obj]['weekday']))
}
this.configure_dialog.addDialog = true
this.dialogApply = 'update'
this.$nextTick(() => {
this.configure_addForm = Object.assign({}, row)
})
},
// 编辑功能
configure_edit() {
// 进行表单的预验证
this.$refs.configure_addForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return
ediPrePlanConfig(this.configure_addForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 隐藏对话框
this.configure_dialog.addDialog = false
// 刷新列表
this.submitForm()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
// 删除
handleDel(index,row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
console.log(row)
delPrePlanConfig(row).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 刷新列表
this.submitForm()
}).catch(error => {
this.$message.error(res.msg)
})
}).catch(() => {
})
},
// 过滤中英文
inputMe(e){
return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
}
},
//渲染方法
mounted(){
this.submitForm();
}
}
</script>
<style scoped>
</style>