朱兆平 / vue_cli · 提交

转到一个项目

作者 shenhailong
提交 a60bb4ac195e00e9ce70df26b95cc4979b4db58d 1 个父辈 166a4132 master ... ExportOrder flightplan2.0 kako_vue master_dev master_dev_markdown master_dev_permission master_ffmTemp zhidan

海关物流流转 列表显示 申请添加

内嵌 并排对比
正在显示 15 个修改的文件 包含 2234 行增加 和 394 行删除
... ... @@ -35,7 +35,7 @@ module.exports = {
// target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api/': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
'^/api/': '/', //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
}
}
},
... ...
... ... @@ -47,6 +47,7 @@ export default {
return axios({
method: 'POST', // 请求协议
url: 'cloud-user-center/login', // 请求的地址
// url: 'cloud-kako-user-center/login', // 请求的地址
data: qs.stringify(data), // post 请求的数据
timeout: 30000, // 超时时间, 单位毫秒
headers: {
... ...
import axios from 'axios'
let base = '/wlpt-flight-scheduling-interface/inquiry';
let base = '/wltp-flight-scheduling-interface/inquiry';
export const portList = params => { return axios.get(`${base}/portList`, { params: params }); };
export const exportList = params => { return axios.get(`${base}/exportList`, { params: params }); };
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
export const nternationaiiImportList = params => { return axios.get(`${base}/nternationaiiImportList`, { params: params }); };
export const nternationaiiExportList = params => { return axios.get(`${base}/nternationaiiExportList`, { params: params }); };
... ...
import axios from 'axios'
let base = '/cloud-user-center/perm';
// let base = '/cloud-kako-user-center/perm';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ...
import axios from 'axios'
import http from "../http";
let base = 'byonet-import';
export const trailerFrameNoSuccess = params => {return axios.post(`${base}/businesstype/trailerFrameNoSuccess`, params);};
export const list = params => {return http.get(`${base}/businesstype/list`, params);};
export const aisleList = params => {return http.get(`${base}/businesstype/aisleList`, params);};
export const save = params => {return axios.post(`${base}/businesstype/save`, params);};
... ...
import axios from 'axios'
let base = '/cloud-user-center/role';
// let baseUrl = '/cloud-kako-user-center/role'
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ...
import http from './http.js'
let baseUrl = 'station-manage'
// 场站信息，分页查询
export const selectYardList = params =>{return http.get(`${baseUrl}/yard/page`, params);};
export const getYardList = params =>{return http.get(`${baseUrl}/yard/list`, params);};
// 场站信息，新增
export const insertYard = params =>{return http.post(`${baseUrl}/yard/insert`, params);};
// 场站信息，编辑
export const updateYard = params =>{return http.put(`${baseUrl}/yard/update`, params);};
// 场站信息，删除
export const deleteYard = params =>{return http.del(`${baseUrl}/yard/delete`, params);};
// 卡口信息，分页查询
export const selectBayonetList = params =>{return http.get(`${baseUrl}/bayonet/page`, params);};
// 卡口信息，新增
export const insertBayonet = params =>{return http.post(`${baseUrl}/bayonet/insert`, params);};
// 卡口信息，编辑
export const updateBayonet = params =>{return http.put(`${baseUrl}/bayonet/update`, params);};
// 卡口信息，删除
export const deleteBayonet = params =>{return http.del(`${baseUrl}/bayonet/delete`, params);};
// 仓库信息，分页查询
export const selectWarehouseList = params =>{return http.get(`${baseUrl}/warehouse/page`, params);};
// 仓库信息，新增
export const insertWarehouse = params =>{return http.post(`${baseUrl}/warehouse/insert`, params);};
// 仓库信息，编辑
export const updateWarehouse = params =>{return http.put(`${baseUrl}/warehouse/update`, params);};
// 仓库信息，删除
export const deleteWarehouse = params =>{return http.del(`${baseUrl}/warehouse/delete`, params);};
... ...
import http from './http.js'
let baseUrl = '/cloud-user-center/user'
// let baseUrl = '/cloud-kako-user-center/user'
export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };
export const getUserListPage = params => { return http.get(`/user/list`,params) };
... ...
... ... @@ -91,6 +91,12 @@ import Consignee from './views/consigner/consignee.vue'
import Security from './views/security/security.vue'
// 场站管理
import Yard from './views/station_manage/Yard.vue'
import Bayonet from './views/station_manage/Bayonet.vue'
import Warehouse from './views/station_manage/Warehouse.vue'
let routes = [
{
... ... @@ -316,6 +322,17 @@ let routes = [
{path:'/queryFlightConfigure',component:queryFlightConfigure,name:'航班配置查询'},
]
},
{
path: '/',
component: Home,
name: '场站管理',
iconCls: 'el-icon-setting',//图标样式class
children: [
{path: '/yard', component: Yard, name: '场站管理'},
{path: '/bayonet', component: Bayonet, name: '卡口管理'},
{path: '/warehouse', component: Warehouse, name: '仓库管理'},
]
},
{
path: '/empt',
... ...
... ... @@ -2,38 +2,45 @@
<section>
<!-- 工具条-->
<el-row class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" ref="form" :model="form">
<el-form :inline="true" ref="form" :model="filters">
<el-row>
<el-col span="5">
<el-col :span="5">
<el-form-item label="车牌号：">
<el-input v-model="form.input" placeholder="" size="small"style="width: 120px"></el-input>
<el-input v-model="filters.trailerFrameNo" placeholder="" size="small"style="width: 120px"></el-input>
</el-form-item>
</el-col>
<el-col span="5">
<el-col :span="5">
<el-form-item label="挂靠名称:">
<el-input v-model="form.input" placeholder="" size="small" style="width: 120px"></el-input>
<el-input v-model="filters.agentname" placeholder="" size="small" style="width: 120px"></el-input>
</el-form-item>
</el-col>
<el-col span="5">
<el-col :span="5">
<el-form-item label="目的场站:">
<el-select v-model="form.region" placeholder="请选择" size="small" style="width: 120px">
<el-option label="综保区货站" value="zongbaoqu"></el-option>
<el-option label="三号货站" value="sanhao"></el-option>
<el-option label="冷链货站" value="lenglian"></el-option>
<el-option label="快邮货站" value="kuaiyou"></el-option>
<el-option label="西货站" value="xi"></el-option>
<el-select v-model="filters.endstation" @change="aisleOption(filters.endstation)" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.stationId"
:label="item.name"
:value="item.stationId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col span="5">
<el-form-item label="卡 口:" style="margin-left: 10px">
<el-select v-model="form.region" placeholder="请选择" size="small" style="width: 120px">
<el-col :span="5">
<el-form-item label="卡口:" style="margin-left: 10px">
<el-select v-model="filters.aisle" :disabled="disabled" placeholder="先选择目的场站" size="small" style="width: 150px">
<el-option
v-for="item in aisleOptions"
:key="item.channel"
:label="item.name"
:value="item.channel">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col span="2">
<el-col :span="2">
<el-form-item>
<el-button type="primary" @click="" size="small">查&nbsp;&nbsp;&nbsp;询</el-button>
<el-button type="primary" @click="getList()" size="small">查询</el-button>
</el-form-item>
</el-col>
</el-row>
... ... @@ -42,81 +49,44 @@
<!-- 列表-->
<el-row>
<el-table
:data="tableData"
:data="businesstypeList"
border
v-loading="businesstypeListLoading"
style="width: 100%">
<el-table-column
fixed
prop="date"
label="操作">
<el-table-column fixed prop="date" label="操作">
<el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
</el-table-column>
<el-table-column
prop="name"
label="是否失效">
<el-table-column prop="isvalid" :formatter="isvalidFormatter" label="是否失效">
</el-table-column>
<el-table-column
prop="province"
label="车牌号"
width="100">
<el-table-column prop="trailerFrameNo" label="车牌号" width="100">
</el-table-column>
<el-table-column
prop="city"
label="挂靠单位">
<el-table-column prop="agentname" label="挂靠单位">
</el-table-column>
<el-table-column
prop="zip"
label="目的关区">
<el-table-column prop="endport" label="目的关区">
</el-table-column>
<el-table-column
prop="name"
label="卡口">
<el-table-column prop="aisle" label="卡口" width="100">
</el-table-column>
<el-table-column
prop="province"
label="地磅称重">
<el-table-column prop="aislewt" label="地磅称重">
</el-table-column>
<el-table-column
prop="city"
label="总货重">
<el-table-column prop="remark" label="总货重">
</el-table-column>
<el-table-column
prop="address"
label="进出差值">
<el-table-column prop="remark1" label="进出差值">
</el-table-column>
<el-table-column
prop="zip"
label="备案车重">
<el-table-column prop="remark2" label="备案车重">
</el-table-column>
<el-table-column
prop="name"
label="业务类型">
<el-table-column prop="businesstype" label="业务类型">
</el-table-column>
<el-table-column
prop="province"
label="货物类型">
<el-table-column prop="cocode" label="货物类型">
</el-table-column>
<el-table-column
prop="city"
label="二维码编号"
width="110">
<el-table-column prop="barcode" label="二维码编号" width="110">
</el-table-column>
<el-table-column
prop="address"
label="进出场站">
<el-table-column prop="turnoverflag" :formatter="turnoverflagFormatter" label="进出场站">
</el-table-column>
<el-table-column
prop="zip"
label="已进已出">
<el-table-column prop="contrastflag" label="已进已出">
</el-table-column>
<el-table-column
prop="zip"
label="更新时间">
<el-table-column prop="updateDate" label="更新时间" width="155">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="150">
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button type="success" size="mini">修改</el-button>
<el-button type="danger" size="mini">删除</el-button>
... ... @@ -131,53 +101,134 @@
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
:current-page="pageSize"
:page-sizes="[10, 100, 200, 300]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
:total="this.total">
</el-pagination>
</div>
</section>
</template>
<script>
import {list, aisleList} from '../../api/remote_interface/byont_import';
import {getYardList as yartList} from "../../api/station_dispatch";
export default {
data() {
return {
tableData:[
{
date: '',
name: '未失效',
province: '晋A5ES6',
city: '河南诺畅',
address: '4604',
zip: '西货站'
businesstypeList: [],
pageSize: 1,
limitSize: 10,
total: 1,
options: [],
aisleOptions: [],
disabled: true,
filters: {
trailerFrameNo: '',
agentname: '',
endstation: '',
aisle: '',
},
businesstypeListLoading: false
}
],
currentPage4: 4,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
methods: {
isvalidFormatter: function(row, column){
if (row.isvalid == '0'){
return "未失效"
}else {
return "失效"
}
},
turnoverflagFormatter: function(row, column){
if (row.turnoverflag == 'I'){
return "进场站"
}else {
return "出场站"
}
},
methods: {
// 获取列表
getList() {
let para = {
pageSize: this.pageSize,
limitSize: this.limitSize,
trailerFrameNo: this.filters.trailerFrameNo,
agentname: this.filters.agentname,
endstation: this.filters.endstation,
aisle: this.filters.aisle
};
this.businesstypeListLoading = true;
console.log(para);
list(para).then((res) => {
this.total = res.data.data.total;
this.businesstypeList = res.data.data.list;
this.businesstypeListLoading = false;
}).catch((error) => {
this.businesstypeListLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
// 获取场站
getYardList(){
yartList().then((res) =>{
this.options = res.data.data;
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
// 获取卡口名称
aisleOption(value){
let para = {
yardId: value
}
this.filters.aisle = '';
aisleList(para).then((res) =>{
this.aisleOptions = res.data.data;
this.disabled = false;
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
onSubmit() {
console.log('submit!');
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limitSize = val;
this.getList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageSize = val;
this.getList();
}
},
mounted() {
this.getYardList();
this.getList();
}
}
</script>
... ...
... ... @@ -2,16 +2,16 @@
<section>
<!-- 工具条-->
<el-row class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" ref="form" :model="form" >
<el-form :inline="true" ref="filters" :model="filters" :rules="rules" >
<el-row>
<el-col span="8">
<el-form-item label="主单号：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 240px"></el-input>
<el-col :span="8">
<el-form-item label="主单号：" prop="waybill">
<el-input v-model="filters.waybill" placeholder="" size="small" style="width: 240px"></el-input>
</el-form-item>
</el-col>
<el-col span="8">
<el-col :span="8">
<el-form-item>
<el-button type="primary" @click="" size="small" style="margin-left: 40px">查&nbsp;&nbsp;&nbsp;询</el-button>
<el-button type="primary" @click="getWaybillList('filters')" size="small" style="margin-left: 40px">查询</el-button>
<span style="color: red;margin-left: 10px">查询单号前请先选定业务类型</span>
</el-form-item>
</el-col>
... ... @@ -20,64 +20,42 @@
</el-row>
<!-- 列表-->
<el-row>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
fixed
prop="date"
label="操作">
<el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
<el-table :data="awbaList" v-loading="commonLoading" style="width: 100%">
<el-table-column fixed label="操作">
<template slot-scope="scope">
<el-button @click="addWaybill(scope.$index, scope.row)" type="primary" size="small">添加</el-button>
</template>
</el-table-column>
<el-table-column
prop="date"
label="航班号">
<el-table-column prop="flightno" label="航班号">
</el-table-column>
<el-table-column
prop="name"
label="航班日期">
<el-table-column prop="flightDate" :formatter="flightDate" label="航班日期">
</el-table-column>
<el-table-column
prop="address"
label="航段">
<el-table-column prop="segment" label="航段">
</el-table-column>
<el-table-column
prop="date"
label="主单号">
<el-table-column prop="waybillnomaster" label="主单号">
</el-table-column>
<el-table-column
prop="name"
label="件数">
<el-table-column prop="totalpiece" label="件数">
</el-table-column>
<el-table-column
prop="address"
label="重量">
<el-table-column prop="totalweight" label="重量">
</el-table-column>
<el-table-column
prop="date"
label="关区">
<el-table-column prop="customscode" label="关区">
</el-table-column>
<el-table-column
prop="name"
label="时间">
<el-table-column prop="createdate" :formatter="formatDate" label="时间">
</el-table-column>
<el-table-column
prop="address"
label="回执内容">
<el-table-column prop="receiptinformation" label="回执内容" width="280px">
</el-table-column>
</el-table>
</el-row>
<!-- 申请表单信息-->
<el-row style="padding-bottom: 0px;">
<el-form ref="form" :model="form">
<el-form ref="addForm" :model="addForm" :rules="addFormRules">
<el-row>
<el-col span="8">
<el-col :span="10">
<el-row>
<el-form-item label="输入备注：">
<el-input
type="text"
placeholder=""
v-model="form.text"
v-model="addForm.remark3"
maxlength="10"
show-word-limit
size="small" style="width: 180px">
... ... @@ -85,58 +63,64 @@
</el-form-item>
</el-row>
<el-row>
<el-form-item label="车牌号码：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 180px"></el-input>
<el-form-item label="车牌号码：" prop="trailerFrameNo">
<el-input v-model="addForm.trailerFrameNo" placeholder="请输入车牌号" @change="trailerFrameNo(addForm.trailerFrameNo)" size="small" style="width: 180px"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="货物类型：">
<el-select v-model="form.region" placeholder="请选择" size="small" style="width: 180px">
<el-option label="转关货" value="zongbaoqu"></el-option>
<el-option label="换单货" value="sanhao"></el-option>
<el-option label="普通货" value="lenglian"></el-option>
<el-option label="退库货" value="kuaiyou"></el-option>
<el-option label="查验货" value="xi"></el-option>
<el-form-item label="货物类型：" prop="cocode">
<el-select v-model="addForm.cocode" placeholder="请选择" size="small" style="width: 180px">
<el-option label="转关货" value="转关货"></el-option>
<el-option label="换单货" value="换单货"></el-option>
<el-option label="普通货" value="普通货"></el-option>
<el-option label="退库货" value="退库货"></el-option>
<el-option label="查验货" value="查验货"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="运输公司：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 180px"></el-input>
<el-form-item label="场站选择：" prop="endstationList">
<el-select v-model="addForm.endstationList" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.stationId"
:label="item.name"
:value="item.stationId">
</el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="挂靠单位：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 180px"></el-input>
<el-form-item label="运输公司：">
<el-input v-model="addForm.agentno" placeholder="" size="small" style="width: 180px"></el-input>
</el-form-item>
</el-row>
</el-col>
<el-col span="7">
<el-row>
<el-form-item label="是否空车：">
<el-radio v-model="radio" label="1" style="margin-left: 20px">是</el-radio>
<el-radio v-model="radio" label="2">否</el-radio>
<el-form-item label="挂靠单位：">
<el-input v-model="addForm.agentname" placeholder="" size="small" style="width: 180px"></el-input>
</el-form-item>
</el-row>
</el-col>
<el-col :span="7">
<el-row>
<el-form-item label="业务类型：">
<el-select v-model="form.region" placeholder="请选择" size="small" style="width: 180px">
<el-option label="进口提货" value="zongbaoqu"></el-option>
<el-option label="出口送货" value="sanhao"></el-option>
<el-option label="分拨业务" value="lenglian"></el-option>
<el-option label="调拨业务" value="kuaiyou"></el-option>
<el-form-item label="业务类型：" prop="businesstype">
<el-select v-model="addForm.businesstype" clearable placeholder="请选择" size="small" style="width: 180px">
<el-option label="进口提货" value="进口提货"></el-option>
<el-option label="出口送货" value="出口送货"></el-option>
<el-option label="分拨业务" value="分拨业务"></el-option>
<el-option label="调拨业务" value="调拨业务"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="申请单位：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 180px"></el-input>
<el-input v-model="addForm.veProperty" disabled size="small" style="width: 180px"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="备案单位：">
<el-input v-model="form.input" placeholder="" size="small" style="width: 180px"></el-input>
<el-input v-model="addForm.trailerLicenseNo" disabled size="small" style="width: 180px"></el-input>
</el-form-item>
</el-row>
... ... @@ -146,114 +130,313 @@
type="textarea"
:rows="4"
placeholder="请输入主单号，例如17212341234，多个单号以‘，’（英文）分割"
v-model="textarea"
v-model="addForm.masterList"
style="width: 180px">
</el-input>
</el-form-item>
</el-row>
</el-col>
<el-col span="3">
<el-row>
<el-form-item label="选择场站信息：" >
</el-form-item>
</el-row>
</el-col>
<el-col span="4">
<el-row>
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]">
</el-tree>
</el-row>
</el-col>
</el-row>
<el-row style="margin-left: 320px">
<el-button type="success">保&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
<el-button type="info">返&nbsp;&nbsp;&nbsp;&nbsp;回</el-button>
<!-- <el-button type="primary" @click="saveSubmit()" :disabled="disabledStr">保存</el-button>-->
<el-button type="primary" @click="saveSubmit()" :disabledStr="disabledStr" >保存</el-button>
</el-row>
</el-form>
</el-row>
</section>
</template>
<script>
import {getYardList as yartList} from '../../api/station_dispatch'
import {trailerFrameNoSuccess, save} from '../../api/remote_interface/byont_import'
import loginUserInfo from "../../api/base";
import {add} from "../../api/security/security";
export default {
data() {
return {
form: {
input: '',
rules:{
waybill: [
{ required: true, message: '请输入运单号', trigger: 'change' }
]
},
radio:'',
tableData:[],
data: [{
id: 1,
label: '4604',
children: [{
id: 3,
label: '西货站',
children: [{
id: 4,
label: '一号卡口进'
}, {
id: 5,
label: '一号卡口出',
}]
}, {
id: 2,
label: '军投货站',
children: [{
id: 6,
label: '一号卡口进'
}, {
id: 7,
label: '一号卡口出',
}]
}]
addFormRules:{
businesstype: [
{required: true, message: '请输入运单号', trigger: 'blur'}
],
trailerFrameNo: [
{required: true, message: '请输入车牌号', trigger: 'blur'}
],
cocode: [
{required: true, message: '请选择货务类型', trigger: 'blur'}
],
endstationList: [
{required: true, message: '请选择场站', trigger: 'blur'}
]
},
{
id: 1,
label: '4620',
children: [{
id: 3,
label: '综保区货站仓库',
children: [{
id: 4,
label: '内三卡口进'
}, {
id: 5,
label: '内三卡口出',
}]
}]
options:[],
filters: {
waybill: '828-12161085',
},
{
id: 1,
label: '4612',
children: [{
id: 3,
label: '综保区',
children: [{
id: 4,
label: '六号主卡口进'
}, {
id: 5,
label: '六号主卡口出',
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
radio:'',
awbaList:[],
yardList: [],
commonLoading: false,
textarea: '',
disabledStr: true,
addForm: {
// 备注
remark3: '',
// 业务类型
businesstype: '',
// 车牌号
trailerFrameNo: '',
//备案单位
trailerLicenseNo: '',
// 主单列表
masterList: '',
// 场站编号
endstation: '',
endstationList: '',
// 运输公司
agentno: '',
// 挂靠单位
agentname: '',
//申请单位
veProperty: '',
// 货物类型
cocode:'',
// 货物重量
remark: ''
},
textarea: ''
}
},
methods: {
// 运单查询
getWaybillList(filters){
let businesstype = this.addForm.businesstype;
if (businesstype != undefined && businesstype != null && businesstype != ''){
this.$refs[filters].validate((valid) => {
if (valid) {
this.commonLoading = true;
if (businesstype == '进口提货'){
businesstype = 'I';
}else if (businesstype == '出口送货'){
businesstype = 'E';
}else if (businesstype == '分拨业务'){
businesstype = 'I';
}else if (businesstype == '调拨业务'){
businesstype = 'E';
}
let _this = this;
var url = "http://tjfx.15miaoo.com:8003/orig/orig";
var xhr = new XMLHttpRequest();
// 访问nginx中的代理服务器
xhr.open('get', url+'?waybill='+this.filters.waybill+'&imp='+businesstype, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status ==200){
var data = JSON.parse(xhr.responseText);
_this.awbaList=data;
//console.log(data);
_this.commonLoading = false;
}
}
}
} else {
console.log('error submit!!');
return false;
}
});
}else {
this.$message({
message: '请在下列选择业务类型',
type: "error"
})
}
},
// 获取场站
getYardList(){
yartList().then((res) =>{
this.options = res.data.data;
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
// 校验车牌号是否合格
trailerFrameNo(value){
let params = {
'trailerFrameNo': value,
}
trailerFrameNoSuccess(params).then((res) =>{
if (res.data.code == 200){
this.$message({
message: res.data.msg,
type: "success"
})
this.addForm.agentno = res.data.data.coCode;
this.addForm.trailerLicenseNo = res.data.data.veTargetNo;
this.addForm.agentname = res.data.data.proposer;
this.disabledStr = false;
}else if(res.data.code == 201) {
this.$message({
message: res.data.msg,
type: "warning"
})
this.disabledStr = true;
}else if (res.data.code == 202){
this.$message({
message: res.data.msg,
type: "warning"
})
this.addForm.agentno = res.data.data.coCode;
this.addForm.trailerLicenseNo = res.data.data.veTargetNo;
this.addForm.agentname = res.data.data.proposer;
this.addForm.veProperty = res.data.data.veProperty;
this.disabledStr = true;
}
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
// 日期格式转换
flightDate: function (row, column) {
// 获取单元格数据
let data = row.flightDate
if(data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
},
formatDate: function (row, column) {
// 获取单元格数据
let data = row.createdate;
if(data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
},
// 添加主单号到主单列表
addWaybill: function(index, row){
this.addForm.masterList += row.waybillnomaster+','
},
addweight(businesstype){
let _this = this;
let addweight = "";
// 运单重量累加
this.addForm.masterList=this.addForm.masterList.substring(0,this.addForm.masterList.length-1);
var split = this.addForm.masterList.split(",");
split.forEach((item) =>{
var url = "http://tjfx.15miaoo.com:8003/orig/orig";
var xhr = new XMLHttpRequest();
// 访问nginx中的代理服务器
xhr.open('get', url+'?waybill='+item+'&imp='+businesstype, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status ==200){
var data = JSON.parse(xhr.responseText);
data.forEach((itmeData => {
addweight += itmeData.manifesttotalweight+",";
}));
}
}
}
});
return addweight;
},
addsubmit(){
let para = Object.assign({}, _this.addForm);
save(para).then((res) => {
if (res.data.code == 200){
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
}else {
this.$message({
message: '提交失败',
type: 'error'
});
}
}).catch(error => alert(error));
},
// 申请添加
saveSubmit (){
let _this = this;
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
let businesstype = this.addForm.businesstype;
if (businesstype == '进口提货'){
businesstype = 'I';
}else if (businesstype == '出口送货'){
businesstype = 'E';
}else if (businesstype == '分拨业务'){
businesstype = 'I';
}else if (businesstype == '调拨业务'){
businesstype = 'E';
}
if (this.addForm.masterList.indexOf(",") !== -1){
_this.addForm.remark = _this.addweight(businesstype);
_this.nextTick(function(){
_this.addsubmit();
});
}else {
console.log("进入远程调用");
let sum = 0;
var url = "http://tjfx.15miaoo.com:8003/orig/orig";
var xhr = new XMLHttpRequest();
// 访问nginx中的代理服务器
xhr.open('get', url+'?waybill='+this.addForm.masterList+'&imp='+businesstype, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status ==200){
var data = JSON.parse(xhr.responseText);
data.forEach((itme => {
_this.addForm.remark += parseInt(itme.manifesttotalweight);
}));
}
}
}
}
console.log(_this.addForm.remark);
console.log(_this.addForm);
}).catch(() =>{
});
} else {
console.log('error submit!!');
return false;
}
});
}
},
mounted() {
this.getYardList();
}
}
</script>
... ...
... ... @@ -27,20 +27,20 @@
<p style="font-size: 28px">条件查询</p>
</el-row>
<el-row>
<el-tabs v-model="activeName" @tab-click="getDomesticClearance()" style="width: 100%">
<el-tabs v-model="activeName" @tab-click="getDomesticClearance" style="width: 100%">
<el-tab-pane label="国内出港" name="first">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
v-model="value2"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -48,7 +48,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -61,35 +61,24 @@
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
:data="listDate"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
<el-table-column prop="fplt" label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
<el-table-column label="航班号">
<template slot-scope="scope">
{{scope.row.carrier}}{{scope.row.flightno}}
</template>
</el-table-column>
<el-table-column
prop=""
label="航空公司">
<el-table-column prop="carrier" label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
<el-table-column prop="apcd" label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
<el-table-column prop="frlt" label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
<el-table-column prop="" label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
<el-table-column prop="btsc" label="航站楼">
</el-table-column>
</el-table>
</el-col>
... ... @@ -98,18 +87,17 @@
<el-tab-pane label="国际/地区出港" name="second">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -117,7 +105,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -130,54 +118,48 @@
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
:data="listDate"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
<el-table-column prop="fplt" label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
<el-table-column label="航班号">
<template slot-scope="scope">
{{scope.row.carrier}}{{scope.row.flightno}}
</template>
</el-table-column>
<el-table-column
prop=""
label="航空公司">
<el-table-column prop="carrier" label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
<el-table-column prop="apcd" label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
<el-table-column prop="frlt" label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
<el-table-column prop="" label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
<el-table-column prop="btsc" label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="国内到港" name="third">
<el-tab-pane label="国内进港" name="third">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
<el-time-select
v-model="filters.flightDate"
:picker-options="{
start: '00:00',
step: '01:00',
end: '23:00'
}"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
</el-time-select>
<el-time-picker
arrow-control
v-model="value2"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -185,7 +167,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -198,54 +180,43 @@
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
:data="listDate"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
<el-table-column prop="fplt" label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
<el-table-column label="航班号">
<template slot-scope="scope">
{{scope.row.carrier}}{{scope.row.flightno}}
</template>
</el-table-column>
<el-table-column
prop=""
label="航空公司">
<el-table-column prop="carrier" label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
<el-table-column prop="apcd" label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
<el-table-column prop="frlt" label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
<el-table-column prop="" label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
<el-table-column prop="btsc" label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="国际/地区到港" name="fourth">
<el-tab-pane label="国际/地区进港" name="fourth">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
v-model="filters.flightDate"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -253,7 +224,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
... ... @@ -266,35 +237,24 @@
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
:data="listDate"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
<el-table-column prop="fplt" label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
<el-table-column label="航班号">
<template slot-scope="scope">
{{scope.row.carrier}}{{scope.row.flightno}}
</template>
</el-table-column>
<el-table-column
prop=""
label="航空公司">
<el-table-column prop="carrier" label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
<el-table-column prop="apcd" label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
<el-table-column prop="frlt" label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
<el-table-column prop="" label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
<el-table-column prop="btsc" label="航站楼">
</el-table-column>
</el-table>
</el-col>
... ... @@ -304,10 +264,9 @@
</el-row>
<el-row>
<div>
<pagination background layout="total, prev, pager, next" v-show="total>0" :total="total" :page.sync="pageSize" :limit.sync="pageNum"
@pagination="getDomesticClearance"/>
<el-pagination background layout="total, prev, pager, next" v-show="this.total>0" :total="total" :page.sync="this.pageSize" :limit.sync="this.pageSize"
@pagination="getDomesticClearance()"/>
</div>
</el-row>
</el-col>
</el-row>
... ... @@ -316,47 +275,100 @@
</template>
<script>
import {getList} from '../../api/inquiry/inquiry'
import {portList, exportList, nternationaiiImportList, nternationaiiExportList} from '../../api/inquiry/inquiry'
export default {
data() {
return {
currentPage4: 4,
activeName: 'first',
filters: {
flightNo: ''
flightNo: '',
flightDate: '',
destination: '',
carrier: ''
},
options:[],
listDate: [],
total: 1,
pageSize: 1,
pageNum: 30,
domesticClearanceList: [],
limitSize: 30,
};
},
methods: {
//获取列表集合
getDomesticClearance() {
getDomesticClearance(tab, event) {
let label = tab.label;
this.listLoading = true;
if (label == '国内出港'){
exportList().then((res) =>{
this.total = res.data.total;
this.listDate = res.data.data.list;
this.listLoading = false;
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
}else if(label == '国际/地区出港'){
nternationaiiExportList().then((res) =>{
this.total = res.data.total;
this.listDate = res.data.data.list;
this.listLoading = false;
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
// this.listLoading = true;
// //NProgress.start();
// getList().then((res) => {
// this.total = res.data.total;
// this.domesticClearanceList = res.data.list;
// this.listLoading = false;
// //NProgress.done();
// }).catch((error) => {
//
// this.listLoading = false;
// if(null!= error.response && error.response!==undefined){
// let status= error.response.status;
// let msg = error.response.statusText;
// alert(status+msg);
// }else {
// alert(error);
// }
//
// });
});
}else if(label == '国内进港'){
portList().then((res) =>{
this.total = res.data.total;
this.listDate = res.data.data.list;
this.listLoading = false;
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
}else if(label == '国际/地区进港'){
nternationaiiImportList().then((res) =>{
this.total = res.data.total;
this.listDate = res.data.data.list;
this.listLoading = false;
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
}
}
},
mounted() {
}
}
</script>
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="卡口名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.channel" prefix-icon="el-icon-search" size="small"
placeholder="通道编号" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="bayonet_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="bayonet_toAddDialog">
卡口添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="bayonet_page.bayonetList" border size="mini"
v-loading="bayonet_loading.listLoading" element-loading-text="获取卡口列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
<el-table-column label="卡口名称" prop="name" align="center" width="200"></el-table-column>
<el-table-column label="通道编号" prop="channel" align="center" width="200"></el-table-column>
<el-table-column label="卡口类型" prop="type" align="center" width="200">
<template slot-scope="scope">
<span v-if="scope.row.type ==='1'">进</span>
<span v-if="scope.row.type ==='2'">出</span>
<span v-if="scope.row.type ==='3'">进出共用</span>
</template>
</el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="140px" align="center">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="bayonet_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="bayonet_loading.delLoading"
@click="bayonet_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="bayonet_handleSizeChange"
@current-change="bayonet_handleCurrentChange"
:current-page="bayonet_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="bayonet_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="bayonet_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 卡口添加 -->
<div>
<el-dialog title="卡口添加："
:visible.sync="bayonet_dialog.addDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="bayonet_addDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="bayonet_addForm" :rules="bayonet_addFormRules" ref="bayonet_addFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="bayonet_addForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="卡口名称：" prop="name">
<el-input v-model="bayonet_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入卡口名称">
</el-input>
</el-form-item>
<el-form-item label="通道编号：" prop="channel">
<el-input v-model="bayonet_addForm.channel" style="width:300px" size="mini" clearable
placeholder="请输入通道编号">
</el-input>
</el-form-item>
<el-form-item label="卡口类型：" prop="type">
<el-select v-model="bayonet_addForm.type" style="width: 300px" clearable size="small"
placeholder="请选择卡口类型">
<el-option
v-for="item in bayonetTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="bayonet_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="bayonet_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="bayonet_add" :loading="bayonet_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 卡口修改 -->
<div>
<el-dialog title="卡口修改："
:visible.sync="bayonet_dialog.editDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="bayonet_editDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="bayonet_editForm" :rules="bayonet_editFormRules" ref="bayonet_editFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="bayonet_editForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="卡口名称：" prop="name">
<el-input v-model="bayonet_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入卡口名称">
</el-input>
</el-form-item>
<el-form-item label="通道编号：" prop="channel">
<el-input v-model="bayonet_editForm.channel" style="width:300px" size="mini" clearable
placeholder="请输入通道编号">
</el-input>
</el-form-item>
<el-form-item label="卡口类型：" prop="type">
<el-select v-model="bayonet_editForm.type" style="width: 300px" clearable size="small"
placeholder="请选择卡口类型">
<el-option
v-for="item in bayonetTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="bayonet_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="bayonet_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="bayonet_edit" :loading="bayonet_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectBayonetList, getYardList, insertBayonet, updateBayonet, deleteBayonet} from "../../api/station_dispatch";
export default {
name: "Bayonet",
data() {
return {
/**
* 搜索参数
*/
bayonet_queryInfo: {
// 场站名称
stationName: '',
// 卡口名称
name: '',
// 通道编号
channel: '',
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* 分页
*/
bayonet_page: {
bayonetList: [],
total: 0,
selectList: [],
},
/**
* 场站列表
*/
stationNameList: [],
/**
* 卡口类型列表
*/
bayonetTypeList: [
{
value: '1',
label: '进'
},
{
value: '2',
label: '出'
},
{
value: '3',
label: '进出共用'
},
],
/**
* 加载
*/
bayonet_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
bayonet_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
bayonet_addForm: {
// 场站名称
stationName: '',
// 卡口名称
name: '',
// 通道编号
channel: '',
// 备注信息
remarks: '',
},
/**
* 备案添加，表单验证规则
*/
bayonet_addFormRules: {
// 场站名称
stationName: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
// 卡口名称
name: [
{required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
],
// 通道编号
channel: [
{required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
],
type: [
{required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
bayonet_editForm: {},
/**
* 备案修改，表单验证规则
*/
bayonet_editFormRules: {
// 场站名称
stationName: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
// 卡口名称
name: [
{required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
],
// 通道编号
channel: [
{required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
],
type: [
{required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
bayonet_handleSizeChange(newSize) {
this.bayonet_queryInfo.pageSize = newSize;
this.bayonet_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
bayonet_handleCurrentChange(newPage) {
this.bayonet_queryInfo.pageNum = newPage;
this.bayonet_getList();
},
/**
* 列表查询
*/
bayonet_getList() {
this.bayonet_loading.listLoading = true;
selectBayonetList(this.bayonet_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.bayonet_page.bayonetList = res.data.list;
this.bayonet_page.total = res.data.total;
this.bayonet_loading.listLoading = false;
}).catch(error => {
this.bayonet_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
bayonet_toAddDialog() {
this.getYards();
this.bayonet_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
bayonet_addDialogClosed() {
this.$refs.bayonet_addFormRef.resetFields();
},
/**
* 备案添加
*/
bayonet_add() {
this.$refs.bayonet_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.bayonet_loading.addLoading = true;
insertBayonet(this.bayonet_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.bayonet_loading.addLoading = false;
this.bayonet_dialog.addDialog = false;
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
bayonet_toEditDialog(index, row) {
this.getYards();
this.bayonet_editForm = Object.assign({}, row);
this.bayonet_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
bayonet_editDialogClosed() {
this.$refs.bayonet_editFormRef.resetFields();
},
/**
* 备案修改
*/
bayonet_edit() {
this.$refs.bayonet_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.bayonet_loading.editLoading = true;
updateBayonet(this.bayonet_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.bayonet_loading.editLoading = false;
this.bayonet_dialog.editDialog = false;
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
bayonet_delete(index, row) {
this.$confirm('此操作永久删除该卡口信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.bayonet_loading.delLoading = true;
deleteBayonet(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.bayonet_loading.delLoading = false;
this.$message.success(res.msg);
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 获取所有场站列表
*/
getYards() {
getYardList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.stationNameList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
}
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="warehouse_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="warehouse_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="仓库名称" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="warehouse_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="warehouse_toAddDialog">
仓库添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="warehouse_page.warehouseList" border size="mini"
v-loading="warehouse_loading.listLoading" element-loading-text="获取仓库列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
<el-table-column label="仓库名称" prop="name" align="center" width="130"></el-table-column>
<el-table-column label="仓库类型" prop="warehouseType" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.warehouseType ==='001'">进港仓库</span>
<span v-if="scope.row.warehouseType ==='002'">出港仓库</span>
<span v-if="scope.row.warehouseType ==='003'">查验仓库</span>
<span v-if="scope.row.warehouseType ==='004'">危险品仓库</span>
</template>
</el-table-column>
<el-table-column label="仓库长度（米）" prop="warehouseLength" align="center" width="120"></el-table-column>
<el-table-column label="仓库宽度（米）" prop="warehouseWidth" align="center" width="120"></el-table-column>
<el-table-column label="仓库高度（米）" prop="warehouseHeight" align="center" width="120"></el-table-column>
<el-table-column label="仓库面积（平方米）" prop="warehouseArea" align="center" width="140"></el-table-column>
<el-table-column label="仓库体积（立方米）" prop="warehouseVolume" align="center" width="140"></el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="160px" align="center" fixed="right">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="warehouse_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="warehouse_loading.delLoading"
@click="warehouse_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="warehouse_handleSizeChange"
@current-change="warehouse_handleCurrentChange"
:current-page="warehouse_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="warehouse_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="warehouse_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 仓库添加 -->
<div>
<el-dialog title="仓库添加："
:visible.sync="warehouse_dialog.addDialog"
style="margin-top: -100px" text-align="center" width="60%"
@close="warehouse_addDialogClosed">
<el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
:model="warehouse_addForm" :rules="warehouse_addFormRules" ref="warehouse_addFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="warehouse_addForm.yardId" style="width: 300px" clearable size="mini"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库名称：" prop="name">
<el-input v-model="warehouse_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入仓库名称">
</el-input>
</el-form-item>
<el-form-item label="仓库类型：" prop="warehouseType">
<el-select v-model="warehouse_addForm.warehouseType" style="width: 300px" clearable size="mini"
placeholder="请选择仓库类型">
<el-option
v-for="item in warehouseTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库长度（米）：" prop="warehouseLength">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseLength" placeholder="请输入仓库长度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseWidth" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库高度（米）：" prop="warehouseHeight">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseHeight" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
:disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined"
v-model="warehouse_addForm.warehouseArea" placeholder="请输入仓库面积">
</el-input-number>
</el-form-item>
<el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
:disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined
|| warehouse_addForm.warehouseHeight === undefined"
v-model="warehouse_addForm.warehouseVolume" placeholder="请输入仓库体积">
</el-input-number>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="warehouse_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="2">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="warehouse_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="warehouse_add" :loading="warehouse_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 仓库修改 -->
<div>
<el-dialog title="仓库修改："
:visible.sync="warehouse_dialog.editDialog"
style="margin-top: -100px" text-align="center" width="60%"
@close="warehouse_editDialogClosed">
<el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
:model="warehouse_editForm" :rules="warehouse_editFormRules" ref="warehouse_editFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="warehouse_editForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库名称：" prop="name">
<el-input v-model="warehouse_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入仓库名称">
</el-input>
</el-form-item>
<el-form-item label="仓库类型：" prop="warehouseType">
<el-select v-model="warehouse_editForm.warehouseType" style="width: 300px" clearable size="small"
placeholder="请选择仓库类型">
<el-option
v-for="item in warehouseTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库长度（米）：" prop="warehouseLength">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseLength" placeholder="请输入仓库长度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseWidth" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库高度（米）：" prop="warehouseHeight">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseHeight" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
v-model="warehouse_editForm.warehouseArea" placeholder="请输入面积">
</el-input-number>
</el-form-item>
<el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
v-model="warehouse_editForm.warehouseVolume" placeholder="请输入体积">
</el-input-number>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="warehouse_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="2">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="warehouse_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="warehouse_edit" :loading="warehouse_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectWarehouseList, insertWarehouse, updateWarehouse, deleteWarehouse, getYardList} from "../../api/station_dispatch";
export default {
name: "Warehouse",
data() {
return {
/**
* 搜索参数
*/
warehouse_queryInfo: {
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* 分页
*/
warehouse_page: {
yardList: [],
total: 0,
selectList: [],
},
/**
* 加载
*/
warehouse_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
warehouse_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
warehouse_addForm: {
// 对应场站的ID
yardId: '',
// 仓库名称
name: '',
// 仓库类型
warehouseType: '',
// 仓库长度
warehouseLength: undefined,
// 仓库宽度
warehouseWidth: undefined,
// 仓库高度
warehouseHeight: undefined,
// 仓库面积
warehouseArea: undefined,
// 仓库体积
warehouseVolume: undefined,
// 备注
remarks: '',
},
/**
* 仓库类型
*/
warehouseTypeList: [
{
value: '001',
label: '进港仓库'
},
{
value: '002',
label: '出港仓库'
},
{
value: '003',
label: '查验仓库'
},
{
value: '004',
label: '危险品仓库'
},
],
/**
* 场站名称
*/
stationNameList: [],
/**
* 备案添加，表单验证规则
*/
warehouse_addFormRules: {
yardId: [
{required: true, message: '请选择场站', trigger: ['blur', 'change']},
],
// 仓库名称
name: [
{required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
],
// 仓库类型
warehouseType: [
{required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
],
// 仓库长度
warehouseLength: [
{required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
],
// 仓库宽度
warehouseWidth: [
{required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
],
warehouseArea: [
{required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
warehouse_editForm: {},
/**
* 备案修改，表单验证规则
*/
warehouse_editFormRules: {
yardId: [
{required: true, message: '请选择场站', trigger: ['blur', 'change']},
],
// 仓库名称
name: [
{required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
],
// 仓库类型
warehouseType: [
{required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
],
// 仓库长度
warehouseLength: [
{required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
],
// 仓库宽度
warehouseWidth: [
{required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
],
warehouseArea: [
{required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
warehouse_handleSizeChange(newSize) {
this.warehouse_queryInfo.pageSize = newSize;
this.warehouse_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
warehouse_handleCurrentChange(newPage) {
this.warehouse_queryInfo.pageNum = newPage;
this.warehouse_getList();
},
/**
* 列表查询
*/
warehouse_getList() {
this.warehouse_loading.listLoading = true;
selectWarehouseList(this.warehouse_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.warehouse_page.warehouseList = res.data.list;
this.warehouse_page.total = res.data.total;
this.warehouse_loading.listLoading = false;
}).catch(error => {
this.warehouse_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
warehouse_toAddDialog() {
this.getYards();
this.warehouse_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
warehouse_addDialogClosed() {
this.$refs.warehouse_addFormRef.resetFields();
},
/**
* 添加表单，失去焦点时，计算面积和体积
*/
calculationAreaAndVolume() {
this.warehouse_addForm.warehouseArea = this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth;
this.warehouse_addForm.warehouseVolume =
this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth * this.warehouse_addForm.warehouseHeight;
},
/**
* 备案添加
*/
warehouse_add() {
this.$refs.warehouse_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.warehouse_loading.addLoading = true;
insertWarehouse(this.warehouse_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.warehouse_loading.addLoading = false;
this.warehouse_dialog.addDialog = false;
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
warehouse_toEditDialog(index, row) {
this.getYards();
this.warehouse_editForm = Object.assign({}, row);
this.warehouse_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
warehouse_editDialogClosed() {
this.$refs.warehouse_editFormRef.resetFields();
},
/**
* 添加表单，失去焦点时，计算面积和体积
*/
edit_calculationAreaAndVolume() {
this.warehouse_editForm.warehouseArea = this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth;
this.warehouse_editForm.warehouseVolume =
this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth * this.warehouse_editForm.warehouseHeight;
},
/**
* 备案修改
*/
warehouse_edit() {
this.$refs.warehouse_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.warehouse_loading.editLoading = true;
updateWarehouse(this.warehouse_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.warehouse_loading.editLoading = false;
this.warehouse_dialog.editDialog = false;
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
warehouse_delete(index, row) {
this.$confirm('此操作永久删除该仓库信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.warehouse_loading.delLoading = true;
deleteWarehouse(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.warehouse_loading.delLoading = false;
this.$message.success(res.msg);
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 获取所有场站列表
*/
getYards() {
getYardList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.stationNameList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="yard_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="yard_queryInfo.customsCode" prefix-icon="el-icon-search" size="small"
placeholder="关区代码" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="yard_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="yard_toAddDialog">
场站添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="yard_page.yardList" border size="mini"
v-loading="yard_loading.listLoading" element-loading-text="获取场站列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="name" align="center" width="120"></el-table-column>
<el-table-column label="区域代码" prop="areaCode" align="center" width="120"></el-table-column>
<el-table-column label="场站ID" prop="stationId" align="center" width="120"></el-table-column>
<el-table-column label="关区代码" prop="customsCode" align="center" width="120"></el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="140px" align="center">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="yard_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="yard_loading.delLoading"
@click="yard_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="yard_handleSizeChange"
@current-change="yard_handleCurrentChange"
:current-page="yard_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="yard_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="yard_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 场站添加 -->
<div>
<el-dialog title="场站添加："
:visible.sync="yard_dialog.addDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="yard_addDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="yard_addForm" :rules="yard_addFormRules" ref="yard_addFormRef">
<el-form-item label="场站名称：" prop="name">
<el-input v-model="yard_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入场站名称">
</el-input>
</el-form-item>
<el-form-item label="区域代码：" prop="areaCode">
<el-input v-model="yard_addForm.areaCode" style="width:300px" size="mini" clearable
placeholder="请输入区域代码">
</el-input>
</el-form-item>
<el-form-item label="场站ID：" prop="stationId">
<el-input v-model="yard_addForm.stationId" style="width:300px" size="mini" clearable
placeholder="请输入场站ID">
</el-input>
</el-form-item>
<el-form-item label="关区代码：" prop="customsCode">
<el-select v-model="yard_addForm.customsCode" style="width: 300px" clearable size="small"
placeholder="请选择关区代码">
<el-option
v-for="item in customsCodeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="yard_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="yard_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="yard_add" :loading="yard_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 场站修改 -->
<div>
<el-dialog title="场站修改："
:visible.sync="yard_dialog.editDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="yard_editDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="yard_editForm" :rules="yard_editFormRules" ref="yard_editFormRef">
<el-form-item label="场站名称：" prop="name">
<el-input v-model="yard_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入场站名称">
</el-input>
</el-form-item>
<el-form-item label="区域代码：" prop="areaCode">
<el-input v-model="yard_editForm.areaCode" style="width:300px" size="mini" clearable
placeholder="请输入区域代码">
</el-input>
</el-form-item>
<el-form-item label="场站ID：" prop="stationId">
<el-input v-model="yard_editForm.stationId" style="width:300px" size="mini" clearable
placeholder="请输入场站ID">
</el-input>
</el-form-item>
<el-form-item label="关区代码：" prop="customsCode">
<el-select v-model="yard_editForm.customsCode" style="width: 300px" clearable size="small"
placeholder="请选择关区代码">
<el-option
v-for="item in customsCodeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="yard_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="yard_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="yard_edit" :loading="yard_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectYardList, insertYard, updateYard, deleteYard} from "../../api/station_dispatch";
export default {
name: "Yard",
data() {
return {
/**
* 搜索参数
*/
yard_queryInfo: {
// 场站名称
name: '',
customsCode: undefined,
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* yard，分页
*/
yard_page: {
yardList: [],
total: 0,
selectList: [],
},
/**
* 加载
*/
yard_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
yard_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
yard_addForm: {
// 场站名称
name: '',
// 区域代码
areaCode: '',
// 场站ID
stationId: '',
// 关区代码
customsCode: undefined,
// 备注信息
remarks: '',
},
customsCodeList: [
{
value: 4604,
label: '4604'
},
{
value: 4620,
label: '4620'
},
],
/**
* 备案添加，表单验证规则
*/
yard_addFormRules: {
name: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
yard_editForm: {},
/**
* 备案修改，表单验证规则
*/
yard_editFormRules: {
name: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
yard_handleSizeChange(newSize) {
this.yard_queryInfo.pageSize = newSize;
this.yard_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
yard_handleCurrentChange(newPage) {
this.yard_queryInfo.pageNum = newPage;
this.yard_getList();
},
/**
* 列表查询
*/
yard_getList() {
this.yard_loading.listLoading = true;
selectYardList(this.yard_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.yard_page.yardList = res.data.list;
this.yard_page.total = res.data.total;
this.yard_loading.listLoading = false;
}).catch(error => {
this.yard_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
yard_toAddDialog() {
this.yard_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
yard_addDialogClosed() {
this.$refs.yard_addFormRef.resetFields();
},
/**
* 备案添加
*/
yard_add() {
this.$refs.yard_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预检验
this.yard_loading.addLoading = true;
insertYard(this.yard_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.yard_loading.addLoading = false;
this.yard_dialog.addDialog = false;
this.yard_getList();
}).catch(error => {
this.yard_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
yard_toEditDialog(index, row) {
this.yard_editForm = Object.assign({}, row);
this.yard_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
yard_editDialogClosed() {
this.$refs.yard_editFormRef.resetFields();
},
/**
* 备案修改
*/
yard_edit() {
this.$refs.yard_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.yard_loading.editLoading = true;
updateYard(this.yard_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.yard_loading.editLoading = false;
this.yard_dialog.editDialog = false;
this.yard_getList();
}).catch(error => {
this.yard_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
yard_delete(index, row) {
this.$confirm('此操作永久删除该场站信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.yard_loading.delLoading = true;
deleteYard(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.yard_loading.delLoading = false;
this.$message.success(res.msg);
this.yard_getList();
}).catch(error => {
this.yard_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...