<template> <el-container> <el-main > <!--检索条件--> <el-row class="toolbar" style="background-color: white;margin-bottom: 10px"> <el-col :span="6"> <el-input v-model="queryinfo.carrier" placeholder="承运人" style="width: 200px"> <template slot="prepend">承运人</template> </el-input> </el-col> <el-col :span="6"> <el-input v-model="queryinfo.flightno" placeholder="航班号" style="width: 200px"> <template slot="prepend">航班号</template> </el-input> </el-col> <el-col :span="8"> <el-button type="primary" v-on:click="getList">查询</el-button> <el-button type="success" v-on:click="toAddDialog">新增</el-button> </el-col> </el-row> <!--TableList--> <el-row> <template> <el-table v-loading="tableloading" :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" > <el-table-column prop="carrier" label="承运人"> </el-table-column> <el-table-column prop="flightno" label="航班号"> </el-table-column> <el-table-column prop="originatingstation" label="起始站" width="60"> </el-table-column> <el-table-column prop="destinationstation" label="目的站" width="60"> </el-table-column> <el-table-column prop="crossdays" label="跨天天数" width="70"> </el-table-column> <el-table-column prop="effectivedate" label="航班计划开始时间" width="120"> </el-table-column> <el-table-column prop="expirationdate" label="航班计划结束时间" width="120"> </el-table-column> <el-table-column prop="schedule" label="航班计划航班时刻" width="120"> </el-table-column> <el-table-column prop="state" label="启/禁用"> <template slot-scope="scope"> <span v-if="scope.row.state == 1" style="color:rgb(103,194,58)"> 启用 </span> <span v-else="scope.row.state == 0" style="color: #F56C6C"> 禁用 </span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="150"> <template slot-scope="scope"> <el-button type="success" size="small" @click="toEditDialog(scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> </el-row> <!-- 新增弹框--> <el-row> <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogCross.addDialog" align="center" style="margin-left: 40px" width="70%"> <el-form ref="form" :model="form" label-width="200px" label-position="right" :inline="true" :rules="rules"> <el-row> <el-col :span="11"> <el-form-item label="" prop="state"> <div class="ipt" style="padding-right: 105px">   启/禁用   </div> <el-select v-model="form.state" placeholder="请选择" style="width: 200px" :clearable="true"> <el-option v-for="item in splitcodes" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- <el-input v-model="form.state" :clearable="true"></el-input>--> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="" prop="carrier"> <el-input v-model="form.carrier" :clearable="true"> <template slot="prepend">  承运人  </template> </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="" prop="flightno"> <el-input v-model="form.flightno" :clearable="true"> <template slot="prepend">  航班号  </template> </el-input> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="" prop="originatingstation"> <el-input v-model="form.originatingstation" :clearable="true"> <template slot="prepend">  起始站  </template> </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="" prop="destinationstation"> <el-input v-model="form.destinationstation" :clearable="true"> <template slot="prepend">  目的站  </template> </el-input> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="" prop="crossdays"> <el-input v-model="form.crossdays" :clearable="true"> <template slot="prepend"> 跨天天数  </template> </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="" prop="effectivedate"> <div class="ipt" style="padding-right: 105px"> 航班计划开始时间 </div> <el-date-picker type="date" v-model="form.effectivedate" value-format="yyyy-MM-dd" style="width: 200px" :clearable="true"></el-date-picker> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="" prop="expirationdate" > <div class="ipt" style="padding-right: 105px"> 航班计划结束时间 </div> <el-date-picker type="date" v-model="form.expirationdate" value-format="yyyy-MM-dd" style="width: 200px" :clearable="true"></el-date-picker> <!-- <el-date-picker type="date" value-format="yyyyMMdd" v-model="form.expirationdate" style="width: 200px" :clearable="true"></el-date-picker>--> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="" prop="schedule"> <div class="ipt" style="padding-right: 105px"> 航班计划航班时刻 </div> <el-select v-model="form.schedule" placeholder="请选择" style="width: 200px" :clearable="true"> <el-option label="周一" value="1"></el-option> <el-option label="周二" value="2"></el-option> <el-option label="周三" value="3"></el-option> <el-option label="周四" value="4"></el-option> <el-option label="周五" value="5"></el-option> <el-option label="周六" value="6"></el-option> <el-option label="周日" value="7"></el-option> </el-select> <!-- <el-date-picker type="date" prefix-icon=0 v-model="form.schedule" style="width: 200px" :clearable="true"></el-date-picker>--> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="" prop="remark"> <el-input v-model="form.remark" :clearable="true"> <template slot="prepend">  备 注  </template> </el-input> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer" align="center"> <el-button type="info" @click="cancel">取消</el-button> <el-button type="primary" @click="dialogStatus==='create'?add():edit()">提 交</el-button> </div> </el-dialog> </el-row> <!--分页模块--> <el-row style="float: right;margin-top: 20px"> <el-col> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryinfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </el-col> </el-row> </el-main> </el-container> </template> <script> import { addCrossday,ediCrossday,delCrossday,selectLists } from '../../api/mt1201' export default { name: "Cross", data() { /*初始化值*/ return { queryinfo:{ carrier:'', flightno:'', pageNum:1, pageSize:10, }, total:0, tableData: [], tableloading:false, dialogMap: { update: '编辑', create: '新增' }, dialogStatus: 'create', dialogCross: { // 添加对话框 addDialog: false, // 编辑对话框 editDialog: false }, form:{ state:1, carrier:'', flightno:'', originatingstation:'', destinationstation:'', crossdays:'', effectivedate:'', expirationdate:'', schedule:'', remark:'' }, splitcodes: [{value:1,label:'启用'},{value:0,label:'禁用'}], rules: { state: [ { required: true, message: '请输入', trigger: 'change' } ], flightno: [ { required: true, message: '请输入', trigger: 'change' } ], crossdays: [ { required: true, message: '请输入', trigger: 'change' } ], effectivedate: [ { required: true, message: '请输入', trigger: 'change' } ], expirationdate: [ { required: true, message: '请输入', trigger: 'change' } ], schedule: [ { required: true, message: '请输入', trigger: 'change' } ], } }; }, methods: { //取消 cancel(){ this.dialogCross.addDialog = false this.getList(); }, //查询 getList() { const _this = this this.tableloading = true; selectLists(this.queryinfo).then((response) => { console.log(response) const res = response.data if (res.code != '200') { return _this.$message.error('获取消息收发记录,失败!') } // 获取列表数据 _this.tableData = res.data.list // 获取列表的总记录数 _this.total = res.data.total this.tableloading = false; _this.$message.success('获取消息收发记录,成功!') }).catch(error => { // 关闭加载 _this.$message.error(error.toString()) }) }, // 打开新增 toAddDialog() { this.dialogStatus = 'create' this.dialogCross.addDialog = true this.form = { state:1, carrier:'', flightno:'', originatingstation:'', destinationstation:'', crossdays:'', effectivedate:'', expirationdate:'', schedule:'', remark:'' } }, // 新增功能 add() { // 进行表单的预验证 this.$refs.form.validate(valid => { // 未通过,表单预校验 if (!valid) return addCrossday(this.form).then((response) => { const res = response.data // 添加失败 if (res.code !== '200') { // 关闭加载 return this.$message.error(res.msg) } // 添加,成功 this.$message.success(res.msg) // 隐藏对话框 this.dialogCross.addDialog = false // 刷新列表 this.getList() }).catch(error => { this.$message.error(error.toString()) }) }) }, // 打开编辑 toEditDialog(row) { this.dialogCross.addDialog = true; this.dialogStatus = 'update'; // console.log(row); this.form=row; }, // 编辑功能 edit(row) { // 进行表单的预验证 this.$refs.form.validate(valid => { // 未通过,表单预校验 if (!valid) return ediCrossday(this.form).then((response) => { console.log(row) const res = response.data if (res.code != '200') { return this.$message.error(res.msg) } this.$message.success(res.msg) // 隐藏对话框 this.dialogCross.addDialog = false // 刷新列表 this.getList() }).catch(error => { this.$message.error(error.toString()) }) }) }, // 删除 del(index, row) { // 弹框询问是否删除? this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' } ).then(() => { console.log(row); delCrossday(row).then((response) => { // console.log(row) const res = response.data this.$message.success(res.msg) this.getList() }).catch(error => { this.$message.error(error.msg) }) }).catch(() => { }) }, // // 关闭对话框 // dangerous_addDialogClosed() { // // 重置对话框 // this.$refs.dangerousAddForm.resetFields() // }, // 危险品操作员分页 handleSizeChange(val) { this.queryinfo.pageSize= val this.getList() }, handleCurrentChange(val) { this.queryinfo.pageNum = val this.getList() }, }, // 自动获取列表 activated(){ this.getList(); }, } </script> <style scoped> .el-input-group{ display: table; } .ipt{ max-width: 100px; margin-right: -4px; display: inline-block; background-color: #6F8294; color: #ffffff; border: 1px solid #DCDFE6; vertical-align: middle; padding: 0 18px; white-space: nowrap; border-top-right-radius: 0px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0px; font-size: 10px; } </style>