初次提交
parent
af3a8bd091
commit
04bf694a19
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
*{margin:0;padding:0}html{font-size:16px}body{background:#f2f2f2}.main,.main[data-v-48fc50e2]{width:95%;margin:0 2.5%}.main .title[data-v-48fc50e2]{margin:1rem 0}.main .SearchBox[data-v-48fc50e2]{display:flex;margin-top:1rem}.main .SearchBox>[data-v-48fc50e2]{margin-right:10px}.main .SearchBox .SearchButton[data-v-48fc50e2]{display:ruby}.main .SearchBox .el-input[data-v-48fc50e2]{width:auto!important}.main .el-table[data-v-48fc50e2]{margin-top:1rem}.main[data-v-3cf7cb00]{min-height:100vh;background:#fff}.main .head[data-v-3cf7cb00]{display:flex;justify-content:flex-end;padding:10px 25px}[data-v-3cf7cb00] .el-collapse-item__header{background:#409eff;color:#fff;justify-content:center;font-size:1rem}[data-v-3cf7cb00] .el-collapse-item__header .el-collapse-item__arrow{margin:0;margin-left:.5rem}[data-v-3cf7cb00] .el-collapse-item__content{padding:0}[data-v-3cf7cb00] .el-form{padding:25px 0}[data-v-3cf7cb00] .el-tabs__header{padding-left:80px}.left .left_list[data-v-3cf7cb00]{height:35px;display:flex;align-items:center;padding:0 1rem;box-sizing:border-box;border-bottom:1px solid #c9c9c9}.left .left_list.isActive[data-v-3cf7cb00]{background:#409eff29}.left .left_list p[data-v-3cf7cb00]{flex:1}.left .left_list p i[data-v-3cf7cb00]{font-size:1rem}.right[data-v-3cf7cb00]{border-left:1px solid #c9c9c9}.title[data-v-3cf7cb00]{width:100%;height:36px;padding-left:26px;padding-right:40px;margin-bottom:25px;box-sizing:border-box;display:flex;line-height:36px;background:#409eff8f}.title div[data-v-3cf7cb00]{flex:1;display:flex;justify-content:flex-end}.title div p[data-v-3cf7cb00]{margin-left:.5rem;font-weight:700}.title div p span[data-v-3cf7cb00]{color:red;font-size:1.2rem}.mini_title[data-v-3cf7cb00]{height:1.5rem;border-left:3px solid #409eff;padding-left:10px;margin:25px 27px;display:flex;align-items:center}.mini_title span[data-v-3cf7cb00]{font-weight:700}.mini_title span[data-v-3cf7cb00]:nth-child(2){flex:1;color:#ff3c3c}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>vue</title><script defer="defer" type="module" src="js/chunk-vendors.49f19b56.js"></script><script defer="defer" type="module" src="js/app.0b1ce4f2.js"></script><link href="css/chunk-vendors.fdcf9830.css" rel="stylesheet"><link href="css/app.d62cdba0.css" rel="stylesheet"><script defer="defer" src="js/chunk-vendors-legacy.a3accb01.js" nomodule></script><script defer="defer" src="js/app-legacy.1624ba82.js" nomodule></script></head><body><noscript><strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "vue",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.26.1",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.8",
|
||||
"moment": "^2.29.3",
|
||||
"node-sass": "^7.0.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.3",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.main {
|
||||
width: 95%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
import request from "@/utils/axios";
|
||||
// import http from "@/utils/http";
|
||||
// 查询
|
||||
const Load = (params) => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/Load",
|
||||
method: "get",
|
||||
params,
|
||||
},
|
||||
});
|
||||
};
|
||||
// 删除
|
||||
const Del = (params) => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/Del",
|
||||
method: "get",
|
||||
params,
|
||||
},
|
||||
});
|
||||
};
|
||||
//新增 编辑
|
||||
const AddOrUpdate = (data) => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/AddOrUpdate",
|
||||
method: "post",
|
||||
data,
|
||||
},
|
||||
});
|
||||
};
|
||||
//发送
|
||||
const Send = (params) => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/Send",
|
||||
method: "get",
|
||||
params,
|
||||
},
|
||||
});
|
||||
};
|
||||
// 查询 船公司
|
||||
const GetCARRIER = () => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/GetCARRIER",
|
||||
method: "get",
|
||||
},
|
||||
});
|
||||
};
|
||||
// 查询 箱型
|
||||
const GetCTNALL = () => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/GetCTNALL",
|
||||
method: "get",
|
||||
},
|
||||
});
|
||||
};
|
||||
// 查询 包装单位
|
||||
const GetKINDPKGS = () => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/GetKINDPKGS",
|
||||
method: "get",
|
||||
},
|
||||
});
|
||||
};
|
||||
// 查询 获取危品等级及 CODE
|
||||
const GetDangerousGoods = () => {
|
||||
return request({
|
||||
data: {
|
||||
url: "/api/Ams/GetDangerousGoods",
|
||||
method: "get",
|
||||
},
|
||||
});
|
||||
};
|
||||
export {
|
||||
Load,
|
||||
Del,
|
||||
Send,
|
||||
AddOrUpdate,
|
||||
GetCARRIER,
|
||||
GetCTNALL,
|
||||
GetKINDPKGS,
|
||||
GetDangerousGoods,
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<h1>123</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
$--color-primary: #1E33B0;
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
@ -0,0 +1,24 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import axios from "axios";
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import "./element-variables.scss";
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
import { routes } from "./utils/routes.js";
|
||||
import store from "./utils/store";
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ElementUI);
|
||||
Vue.config.productionTip = false;
|
||||
Vue.prototype.$axios = axios;
|
||||
const router = new VueRouter({
|
||||
routes: routes,
|
||||
mode: "hash",
|
||||
// mode: "history", //去掉#
|
||||
});
|
||||
new Vue({
|
||||
store,
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
@ -0,0 +1,88 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default ({ data }) => {
|
||||
const baseURL = process.env.VUE_APP_AXIOS_BASEURL;
|
||||
const server = axios.create({
|
||||
baseURL,
|
||||
timeout: 60000,
|
||||
});
|
||||
return server(data);
|
||||
};
|
||||
|
||||
// import axios from "axios";
|
||||
// import { Message } from "element-ui";
|
||||
|
||||
// const instance = axios.create(); //创建一个axios实例
|
||||
// export const baseURL = `${serverconfig.BASE_URL}${serverconfig.SERVER_NAME}/api`;
|
||||
// // export const baseURL = process.env.VUE_APP_BASE_API
|
||||
// const timeout = 30 * 10000;
|
||||
// instance.interceptors.request.use((config) => {
|
||||
// config.headers.token = sessionStorage.user || "";
|
||||
// return config;
|
||||
// });
|
||||
// instance.interceptors.response.use(
|
||||
// (response) => {
|
||||
// if (response.headers["access-control-message-headers"]) {
|
||||
// const data =
|
||||
// response.headers["access-control-message-headers"].split(",");
|
||||
// if (data[1] !== "0") {
|
||||
// Message.success(
|
||||
// `上传已完成,成功${data[0]}条,失败${data[1]}条,如有失败详见下载文件`
|
||||
// );
|
||||
// } else {
|
||||
// Message.success("上传成功");
|
||||
// }
|
||||
// }
|
||||
// if (response.headers.token_new) {
|
||||
// window.sessionStorage.user = response.headers.token_new;
|
||||
// }
|
||||
// // 文件流下载单独判断
|
||||
// const { responseType } = response.config;
|
||||
// const { code, message } = response.data;
|
||||
// if (parseInt(code) === 1 || (responseType === "blob" && response.data)) {
|
||||
// return response;
|
||||
// } else {
|
||||
// Message.warning({
|
||||
// message: message || code,
|
||||
// });
|
||||
// // 结束Promise,不再继续执行
|
||||
// return Promise.reject(response);
|
||||
// }
|
||||
// },
|
||||
// (error) => {
|
||||
// if (error.response) {
|
||||
// const {
|
||||
// status,
|
||||
// data: { message },
|
||||
// } = error.response;
|
||||
// const { request } = error.response;
|
||||
// let responseURL = request.responseURL;
|
||||
|
||||
// if (status && status.toString() === "401") {
|
||||
// Message.warning({
|
||||
// message: "用户登录已失效",
|
||||
// });
|
||||
// sessionStorage.clear();
|
||||
// location.href = "/";
|
||||
// } else if (status && status.toString() === "403") {
|
||||
// console.log(status);
|
||||
// let errorUrl = responseURL.split("/").pop();
|
||||
// if (
|
||||
// typeof errorUrl == "string" &&
|
||||
// errorUrl !== "" &&
|
||||
// errorUrl === "exportRiskCaseMainDetailsPDF"
|
||||
// ) {
|
||||
// } else {
|
||||
// Message.warning({
|
||||
// message: "没有权限",
|
||||
// });
|
||||
// }
|
||||
// } else {
|
||||
// Message.warning({
|
||||
// message: message || `${status}异常`,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// return Promise.reject(error);
|
||||
// }
|
||||
// );
|
||||
@ -0,0 +1,45 @@
|
||||
/**** http.js ****/
|
||||
// 导入封装好的axios实例
|
||||
import request from "./axios";
|
||||
|
||||
const http = {
|
||||
/**
|
||||
* methods: 请求
|
||||
* @param url 请求地址
|
||||
* @param params 请求参数
|
||||
*/
|
||||
get(url, params) {
|
||||
const config = {
|
||||
method: "get",
|
||||
url: url,
|
||||
};
|
||||
if (params) config.params = params;
|
||||
return request(config);
|
||||
},
|
||||
post(url, params) {
|
||||
const config = {
|
||||
method: "post",
|
||||
url: url,
|
||||
};
|
||||
if (params) config.data = params;
|
||||
return request(config);
|
||||
},
|
||||
put(url, params) {
|
||||
const config = {
|
||||
method: "put",
|
||||
url: url,
|
||||
};
|
||||
if (params) config.params = params;
|
||||
return request(config);
|
||||
},
|
||||
delete(url, params) {
|
||||
const config = {
|
||||
method: "delete",
|
||||
url: url,
|
||||
};
|
||||
if (params) config.params = params;
|
||||
return request(config);
|
||||
},
|
||||
};
|
||||
// 导出
|
||||
export default http;
|
||||
@ -0,0 +1,14 @@
|
||||
import AmsIndex from "../views/ISF/Tabs.vue";
|
||||
import SendIndex from "../views/send/Tabs.vue";
|
||||
export const routes = [
|
||||
{ path: "/", redirect: "/Index" },
|
||||
{
|
||||
path: "/Index",
|
||||
component: AmsIndex,
|
||||
children: [],
|
||||
},
|
||||
{ path: "/SendIndex", component: SendIndex },
|
||||
// { path: "/SendList", name: "AmsSendList", component: SendList },
|
||||
// { path: "/SendEdit", component: IndexEdit },
|
||||
{ path: "*", redirect: "/" },
|
||||
];
|
||||
@ -0,0 +1,68 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
//1、注册
|
||||
Vue.use(Vuex);
|
||||
|
||||
//2、创建
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
ListData: {},
|
||||
editableTabsValue: "0",
|
||||
editableTabs: [
|
||||
{
|
||||
title: "草稿箱",
|
||||
name: "0",
|
||||
},
|
||||
],
|
||||
tabIndex: 0,
|
||||
SendeditableTabsValue: "0",
|
||||
SendeditableTabs: [
|
||||
{
|
||||
title: "已发送",
|
||||
name: "0",
|
||||
},
|
||||
],
|
||||
SendtabIndex: 0,
|
||||
},
|
||||
getters: {},
|
||||
mutations: {
|
||||
AddTabs(state, payload) {
|
||||
let newTabName = ++state.tabIndex + "";
|
||||
state.editableTabs.push({
|
||||
title: payload ? payload.mblno : "New Tab",
|
||||
name: newTabName,
|
||||
data: payload ? payload : {},
|
||||
});
|
||||
state.editableTabsValue = newTabName;
|
||||
},
|
||||
AddSendTabs(state, payload) {
|
||||
let title = "";
|
||||
if (payload) {
|
||||
if (payload.EditType == "历史记录") {
|
||||
title = "历史记录";
|
||||
} else if (payload.EditType == "查看") {
|
||||
title = `查看${payload.mblno}`;
|
||||
} else if (payload.EditType == "复制") {
|
||||
title = `复制`;
|
||||
} else {
|
||||
title = payload.mblno;
|
||||
}
|
||||
} else {
|
||||
title = "New Tab";
|
||||
}
|
||||
let newTabName = ++state.SendtabIndex + "";
|
||||
state.SendeditableTabs.push({
|
||||
title,
|
||||
name: newTabName,
|
||||
data: payload ? payload : {},
|
||||
});
|
||||
state.SendeditableTabsValue = newTabName;
|
||||
},
|
||||
},
|
||||
|
||||
actions: {},
|
||||
});
|
||||
|
||||
//3、导出
|
||||
export default store;
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="AddBox">
|
||||
<div class="first"><i class="el-icon-document" /> 表格导入/下载</div>
|
||||
<div @click="ClickAdd({ WebAddType: 5 })">
|
||||
<i class="el-icon-folder-add" />新增ISF-5 (过境)
|
||||
</div>
|
||||
<div @click="ClickAdd({ WebAddType: 10 })">
|
||||
<i class="el-icon-folder-add" />新增ISF-10 (出口)
|
||||
</div>
|
||||
</div>
|
||||
<div class="HeaderBox">
|
||||
<div class="ButtonBox">
|
||||
<el-button class="Send" type="primary" @click="ClickSend()">
|
||||
发送
|
||||
</el-button>
|
||||
<el-button class="Del" type="danger" plain @click="ClickDel()">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="SearchBox">
|
||||
<el-input placeholder="输入AMS B/L NO" v-model="search_data.MBLNO">
|
||||
</el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="GetList()">
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- :span-method="objectSpanMethod" -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
ref="Table"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="620"
|
||||
:header-cell-style="{ background: '#474e74', color: '#fff' }"
|
||||
>
|
||||
<el-table-column align="center" prop="mblno" type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="mblno" label="申报类型">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="shippingNo" label="AMS B/L NO">
|
||||
<template> NIAV </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="vessel" label="Ship-to">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="voyno"
|
||||
width="400"
|
||||
label="卖方公司名称/订舱人名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="loadingPort" label="Bond Holder ID">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="portdischarge" label="校验结果">
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
class="el-icon-success"
|
||||
v-if="scope.row.portdischarge"
|
||||
style="color: green; font-size: 1.2rem"
|
||||
></i>
|
||||
<i
|
||||
class="el-icon-error"
|
||||
v-else
|
||||
style="color: red; font-size: 1.2rem"
|
||||
></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="lastUpdate" label="最近编辑时间">
|
||||
<template slot-scope="scope">
|
||||
{{ moment(scope.row.lastUpdate).format("YYYY-MM-DD HH:mm") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="operation" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="ClickEdit(scope)"
|
||||
style="color: #273dc3"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="text" style="color: red" @click="ClickDel(scope)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
:page-size="10"
|
||||
layout="total, prev, pager, next"
|
||||
:total="search_data.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Load, Del, Send } from "@/api/views/AmsIndex";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "AmsIndex",
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
search_data: {
|
||||
Page: 1,
|
||||
Limit: 10,
|
||||
MBLNO: "",
|
||||
total: 0,
|
||||
},
|
||||
// ---------------------------------------------
|
||||
options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "黄金糕",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "双皮奶",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "蚵仔煎",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "龙须面",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "北京烤鸭",
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
Backup_tableData: [],
|
||||
SpanMethod: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.GetList();
|
||||
},
|
||||
methods: {
|
||||
Reset() {
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.GetList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.search_data.Page = val;
|
||||
this.GetList();
|
||||
},
|
||||
GetList() {
|
||||
Load(this.search_data).then((res) => {
|
||||
// let obj = [];
|
||||
// res.data.data.forEach((item, index) => {
|
||||
// this.SpanMethod[index] = [[0], [0, 0]];
|
||||
// item.houseDto.forEach((item2, index2) => {
|
||||
// this.SpanMethod[index][0].push(
|
||||
// this.SpanMethod[index][1][this.SpanMethod[index][1].length - 1] +
|
||||
// item2.cntrnoDto.length
|
||||
// );
|
||||
// let houseDtoData = {};
|
||||
// Object.keys(item2).forEach((HouseDtoKey) => {
|
||||
// houseDtoData[`houseDto_${HouseDtoKey}`] = item2[HouseDtoKey];
|
||||
// });
|
||||
// item2.cntrnoDto.forEach((item3, index3) => {
|
||||
// if (index == 0) {
|
||||
// this.SpanMethod[index][1] = [
|
||||
// 0,
|
||||
// this.SpanMethod[index][1][1] + 1,
|
||||
// ];
|
||||
// } else {
|
||||
// this.SpanMethod[index][1] = [
|
||||
// this.SpanMethod[index - 1][1][0] +
|
||||
// this.SpanMethod[index - 1][1][1],
|
||||
// this.SpanMethod[index][1][1] + 1,
|
||||
// ];
|
||||
// }
|
||||
|
||||
// let CntrnoDtoData = {};
|
||||
// Object.keys(item3).forEach((CntrnoDtoKey) => {
|
||||
// CntrnoDtoData[`CntrnoDto_${CntrnoDtoKey}`] =
|
||||
// item3[CntrnoDtoKey];
|
||||
// });
|
||||
// obj = [...obj, { ...item, ...houseDtoData, ...CntrnoDtoData }];
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
this.search_data.total = res.data.count;
|
||||
this.Backup_tableData = res.data.data;
|
||||
// this.tableData = obj;
|
||||
this.tableData = res.data.data;
|
||||
console.log(this.tableData);
|
||||
});
|
||||
},
|
||||
ClickSend() {
|
||||
let ids = "";
|
||||
this.$refs.Table.selection.forEach((item, index) => {
|
||||
index == 0 ? (ids = item.gid) : (ids = `${ids},${item.gid}`);
|
||||
});
|
||||
Send({ ids }).then((res) => {
|
||||
this.GetList();
|
||||
});
|
||||
},
|
||||
ClickAdd(payload) {
|
||||
this.$store.state.ListData = {};
|
||||
this.$store.commit("AddTabs", payload);
|
||||
},
|
||||
ClickEdit(scope) {
|
||||
this.Backup_tableData.forEach((item, index) => {
|
||||
if (scope.row.gid == item.gid) {
|
||||
let EditType = false;
|
||||
this.$store.state.editableTabs.forEach((item2) => {
|
||||
if (
|
||||
item2.data &&
|
||||
item2.data.mblno == this.Backup_tableData[index].mblno
|
||||
) {
|
||||
EditType = true;
|
||||
this.$store.state.ListData = item2.data;
|
||||
this.$store.state.editableTabsValue = item2.name;
|
||||
}
|
||||
});
|
||||
if (!EditType) {
|
||||
this.ClickAdd(item);
|
||||
}
|
||||
// this.$store.state.editableTabs[1].data = this.Backup_tableData[index];
|
||||
this.$store.state.ListData = this.Backup_tableData[index];
|
||||
}
|
||||
});
|
||||
},
|
||||
ClickDel(scope) {
|
||||
Del({ ids: scope.row.gid }).then((res) => {
|
||||
this.$message({
|
||||
message: res.data.message,
|
||||
type: "success",
|
||||
});
|
||||
this.$store.state.editableTabs.forEach((item, index) => {
|
||||
if (item.title == scope.row.mblno) {
|
||||
this.$store.state.editableTabs.splice(index, 1);
|
||||
}
|
||||
});
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.GetList();
|
||||
});
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
// if (rowIndex == 0 && columnIndex < 4) {
|
||||
let prefix = column.property.split("_")[0];
|
||||
let rowspan = 0;
|
||||
let colspan = 0;
|
||||
this.SpanMethod.forEach((item, index) => {
|
||||
if (prefix == "houseDto") {
|
||||
rowspan = 1;
|
||||
colspan = 1;
|
||||
} else if (prefix == "CntrnoDto") {
|
||||
rowspan = 1;
|
||||
colspan = 1;
|
||||
} else {
|
||||
if (rowIndex == item[1][0]) {
|
||||
rowspan = item[1][1];
|
||||
colspan = 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
return {
|
||||
rowspan,
|
||||
colspan,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 95%;
|
||||
margin: 0 2.5%;
|
||||
margin-top: 120px;
|
||||
.AddBox {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: linear-gradient(#abb6fa, #2d3ea2);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
background: #de062c;
|
||||
margin: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
border: 3px solid #4b5ecf;
|
||||
cursor: pointer;
|
||||
i {
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
&.first {
|
||||
background: #dee3ff;
|
||||
color: #000;
|
||||
i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.HeaderBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.ButtonBox {
|
||||
.Send {
|
||||
background: #1d33b1;
|
||||
border: 1px solid #1d33b1;
|
||||
}
|
||||
.Del {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.SearchBox {
|
||||
display: flex;
|
||||
.el-input {
|
||||
/deep/.el-input__inner {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border: 1px solid #1d33b1 !important;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
background: #1d33b1;
|
||||
border-radius: 0 4px 4px 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-tabs
|
||||
v-model="$store.state.editableTabsValue"
|
||||
type="border-card"
|
||||
@tab-remove="removeTab"
|
||||
class="main-tabs"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
:closable="item.name == '0' ? false : true"
|
||||
>
|
||||
<Index v-if="item.name == '0'" />
|
||||
<Edit v-else />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Edit from "./Edit.vue";
|
||||
import Index from "./Index.vue";
|
||||
export default {
|
||||
name: "AmsTabs",
|
||||
components: {
|
||||
Edit,
|
||||
Index,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
editableTabsValue() {
|
||||
return this.$store.state.editableTabsValue;
|
||||
},
|
||||
editableTabs() {
|
||||
return this.$store.state.editableTabs;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
editableTabsValue: {
|
||||
immediate: true,
|
||||
handler(newData) {
|
||||
if (newData !== 0) {
|
||||
this.editableTabs.forEach((item, index) => {
|
||||
if (item.name == newData) {
|
||||
this.$store.state.ListData = item.data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$store.state.ListData = {};
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 关闭 Tab
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.$store.state.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$store.state.editableTabsValue = activeName;
|
||||
this.$store.state.editableTabs = tabs.filter(
|
||||
(tab) => tab.name !== targetName
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
.main {
|
||||
width: 95%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
.main-tabs {
|
||||
> .el-tabs__content {
|
||||
height: calc(100vh - 41px);
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.el-tabs__item {
|
||||
background: #e5e5e5 !important;
|
||||
color: #69686a !important;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
background: #1d33b1 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="HeaderBox">
|
||||
<el-button type="primary">导出列表</el-button>
|
||||
<div class="HeaderRight">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
<div class="SearchBox">
|
||||
<el-input placeholder="输入AMS B/L NO" v-model="search_data.MBLNO">
|
||||
</el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="GetList()">
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="690"
|
||||
:header-cell-style="{ background: '#474e74', color: '#fff' }"
|
||||
ref="SendTable"
|
||||
>
|
||||
<el-table-column prop="houseDto_hblNo" label="申报类型" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="mblno" label="AMS B/L NO" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="vessel" label="ISF NO" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ReportState" label="最新操作" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="MateState" label="最新操作人" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="newNotice" label="申报状态" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="carrier" label="匹配状态" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="shippername" label="Ship-to" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="historyDto_operator"
|
||||
label="卖方公司名称/订舱人名称"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="historyDto_state"
|
||||
label="Bond Holder ID"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operation" label="操作" width="230" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: blue"
|
||||
@click="ClickEdit(scope, '查看')"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: blue"
|
||||
@click="ClickEdit(scope, '复制')"
|
||||
>
|
||||
复制
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: blue"
|
||||
@click="ClickEdit(scope, '历史记录')"
|
||||
>
|
||||
历史
|
||||
</el-button>
|
||||
<el-button type="text" style="color: green" @click="ClickEdit(scope)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="text" style="color: red" @click="ClickDel(scope)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button type="text" style="color: blue" @click="ClickDel(scope)">
|
||||
PDF导出
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
:page-size="10"
|
||||
layout="total, prev, pager, next"
|
||||
:total="search_data.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Load, Del } from "@/api/views/AmsIndex";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "AmsSendList",
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
search_data: {
|
||||
ReportState: "已申报",
|
||||
Page: 1,
|
||||
Limit: 10,
|
||||
MBLNO: "",
|
||||
total: 0,
|
||||
},
|
||||
// ---------------------------------------------
|
||||
tableData: [],
|
||||
Backup_tableData: [],
|
||||
SpanMethod: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.GetList();
|
||||
},
|
||||
methods: {
|
||||
Reset() {
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.GetList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.search_data.Page = val;
|
||||
this.GetList();
|
||||
},
|
||||
GetList() {
|
||||
Load(this.search_data).then((res) => {
|
||||
// Object.assign(this.$data, this.$options.data());
|
||||
let obj = [];
|
||||
res.data.data.forEach((item, index) => {
|
||||
let historyDtoData = {};
|
||||
if (item.historyDto.length) {
|
||||
Object.keys(item.historyDto[item.historyDto.length - 1]).forEach(
|
||||
(historyDtoKey) => {
|
||||
historyDtoData[`historyDto_${historyDtoKey}`] =
|
||||
item.historyDto[item.historyDto.length - 1][historyDtoKey];
|
||||
}
|
||||
);
|
||||
}
|
||||
this.SpanMethod[index] = [[0], [0, 0]];
|
||||
item.houseDto.forEach((item2, index2) => {
|
||||
this.SpanMethod[index][0].push(
|
||||
this.SpanMethod[index][1][this.SpanMethod[index][1].length - 1] +
|
||||
item2.cntrnoDto.length
|
||||
);
|
||||
let houseDtoData = {};
|
||||
Object.keys(item2).forEach((HouseDtoKey) => {
|
||||
houseDtoData[`houseDto_${HouseDtoKey}`] = item2[HouseDtoKey];
|
||||
});
|
||||
item2.cntrnoDto.forEach((item3, index3) => {
|
||||
if (index == 0) {
|
||||
this.SpanMethod[index][1] = [
|
||||
0,
|
||||
this.SpanMethod[index][1][1] + 1,
|
||||
];
|
||||
} else {
|
||||
// let num = 0;
|
||||
// this.SpanMethod.forEach((item, index) => {
|
||||
// num = num + item[1][1];
|
||||
// });
|
||||
this.SpanMethod[index][1] = [
|
||||
this.SpanMethod[index - 1][1][0] +
|
||||
this.SpanMethod[index - 1][1][1],
|
||||
this.SpanMethod[index][1][1] + 1,
|
||||
];
|
||||
}
|
||||
|
||||
let CntrnoDtoData = {};
|
||||
Object.keys(item3).forEach((CntrnoDtoKey) => {
|
||||
CntrnoDtoData[`CntrnoDto_${CntrnoDtoKey}`] =
|
||||
item3[CntrnoDtoKey];
|
||||
});
|
||||
obj = [
|
||||
...obj,
|
||||
{
|
||||
...item,
|
||||
...houseDtoData,
|
||||
...CntrnoDtoData,
|
||||
...historyDtoData,
|
||||
},
|
||||
];
|
||||
});
|
||||
});
|
||||
});
|
||||
this.search_data.total = res.data.count;
|
||||
this.Backup_tableData = res.data.data;
|
||||
this.tableData = obj;
|
||||
});
|
||||
},
|
||||
ClickAdd(payload) {
|
||||
this.$store.state.ListData = {};
|
||||
this.$store.commit("AddSendTabs", payload);
|
||||
},
|
||||
// ClickEdit(scope) {
|
||||
// this.Backup_tableData.forEach((item, index) => {
|
||||
// if (scope.row.gid == item.gid) {
|
||||
// this.$store.state.ListData = this.Backup_tableData[index];
|
||||
// this.$router.push("/SendEdit");
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// ClickHistory(scope) {
|
||||
// this.$store.commit("AddSendTabs", { mblno: "历史记录" });
|
||||
// },
|
||||
ClickEdit(scope, type) {
|
||||
this.Backup_tableData.forEach((item, index) => {
|
||||
item.WebAddType = 10;
|
||||
console.log(scope.row.gid, item.gid);
|
||||
if (scope.row.gid == item.gid) {
|
||||
let EditType = false;
|
||||
this.$store.state.SendeditableTabs.forEach((item2) => {
|
||||
if (
|
||||
item2.data &&
|
||||
item2.data.mblno == this.Backup_tableData[index].mblno &&
|
||||
item2.data.EditType == this.Backup_tableData[index].EditType
|
||||
) {
|
||||
EditType = true;
|
||||
this.$store.state.ListData = item2.data;
|
||||
this.$store.state.SendeditableTabsValue = item2.name;
|
||||
}
|
||||
});
|
||||
console.log("执行", EditType);
|
||||
if (!EditType) {
|
||||
if (type == "历史记录") {
|
||||
item = {
|
||||
...item,
|
||||
EditType: "历史记录",
|
||||
};
|
||||
} else if (type == "查看") {
|
||||
item = {
|
||||
...item,
|
||||
EditType: "查看",
|
||||
};
|
||||
} else if (type == "复制") {
|
||||
this.GetList();
|
||||
let DelArr = ["gid", "isDel", "pid", "hid", "hblNo", "mblno"];
|
||||
let data = item;
|
||||
Object.keys(data).forEach((item) => {
|
||||
DelArr.forEach((Del) => {
|
||||
if (Del == item) {
|
||||
delete data[item];
|
||||
}
|
||||
});
|
||||
if (item == "houseDto") {
|
||||
data.houseDto.forEach((arr, arrindex) => {
|
||||
Object.keys(arr).forEach((item2) => {
|
||||
DelArr.forEach((Del) => {
|
||||
if (Del == item2) {
|
||||
delete data.houseDto[arrindex][item2];
|
||||
}
|
||||
});
|
||||
if (item2 == "cntrnoDto") {
|
||||
data.houseDto[arrindex].cntrnoDto.forEach(
|
||||
(arr2, arrindex2) => {
|
||||
Object.keys(arr2).forEach((item3) => {
|
||||
DelArr.forEach((Del) => {
|
||||
if (Del == item3) {
|
||||
delete data.houseDto[arrindex].cntrnoDto[
|
||||
arrindex2
|
||||
][item3];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
item = {
|
||||
...data,
|
||||
EditType: "复制",
|
||||
gid: "CopyData",
|
||||
};
|
||||
// data = { ...data };
|
||||
// // this.$store.state.ListData = data;
|
||||
// this.$store.commit("AddSendTabs", data);
|
||||
}
|
||||
// if (item.historyDto.length) {
|
||||
this.ClickAdd(item);
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: "数据异常",
|
||||
// type: "warning",
|
||||
// });
|
||||
// }
|
||||
}
|
||||
// this.$store.state.SendeditableTabs[1].data = this.Backup_tableData[index];
|
||||
this.$store.state.ListData = this.Backup_tableData[index];
|
||||
}
|
||||
});
|
||||
},
|
||||
ClickAlter() {
|
||||
if (this.$refs.SendTable.selection.length != 1) {
|
||||
this.$message({
|
||||
message: "请选择一条数据",
|
||||
type: "warning",
|
||||
});
|
||||
} else {
|
||||
this.ClickEdit({ row: this.$refs.SendTable.selection[0] });
|
||||
}
|
||||
},
|
||||
ClickDelS() {
|
||||
this.$refs.SendTable.selection.forEach((item) => {
|
||||
Del({ ids: item.gid }).then((res) => {
|
||||
this.$message({
|
||||
message: res.data.message,
|
||||
type: "success",
|
||||
});
|
||||
this.$store.state.SendeditableTabs.forEach((item2, index) => {
|
||||
if (item2.title == item.mblno) {
|
||||
this.$store.state.SendeditableTabs.splice(index, 1);
|
||||
}
|
||||
});
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.GetList();
|
||||
});
|
||||
});
|
||||
},
|
||||
ClickDel(scope) {
|
||||
Del({ ids: scope.row.gid }).then((res) => {
|
||||
this.$message({
|
||||
message: res.data.message,
|
||||
type: "success",
|
||||
});
|
||||
this.$store.state.SendeditableTabs.forEach((item, index) => {
|
||||
if (item.title == scope.row.mblno) {
|
||||
this.$store.state.SendeditableTabs.splice(index, 1);
|
||||
}
|
||||
});
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.GetList();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 95%;
|
||||
margin: 1rem 2.5% 0 2.5%;
|
||||
.HeaderBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.ButtonBox {
|
||||
.Send {
|
||||
background: #1d33b1;
|
||||
border: 1px solid #1d33b1;
|
||||
}
|
||||
.Del {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.HeaderRight {
|
||||
display: flex;
|
||||
.el-input__inner {
|
||||
border: 1px solid #1d33b1 !important;
|
||||
}
|
||||
.SearchBox {
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
.el-input {
|
||||
/deep/.el-input__inner {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border: 1px solid #1d33b1 !important;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
background: #1d33b1;
|
||||
border-radius: 0 4px 4px 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.el-table {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-tabs
|
||||
v-model="$store.state.SendeditableTabsValue"
|
||||
type="border-card"
|
||||
@tab-remove="removeTab"
|
||||
class="main-tabs"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
:closable="item.name == '0' ? false : true"
|
||||
>
|
||||
<List v-if="item.name == '0'" />
|
||||
<HistoryList v-else-if="item.title == '历史记录'" />
|
||||
<Edit v-else />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Edit from "./Edit.vue";
|
||||
import List from "./List.vue";
|
||||
import HistoryList from "./HistoryList.vue";
|
||||
export default {
|
||||
name: "AmsTabs",
|
||||
components: {
|
||||
Edit,
|
||||
List,
|
||||
HistoryList,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
editableTabsValue() {
|
||||
return this.$store.state.SendeditableTabsValue;
|
||||
},
|
||||
editableTabs() {
|
||||
return this.$store.state.SendeditableTabs;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
editableTabsValue: {
|
||||
immediate: true,
|
||||
handler(newData) {
|
||||
if (newData !== 0) {
|
||||
this.editableTabs.forEach((item, index) => {
|
||||
if (item.name == newData) {
|
||||
this.$store.state.ListData = item.data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$store.state.ListData = {};
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 关闭 Tab
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.$store.state.SendeditableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$store.state.SendeditableTabsValue = activeName;
|
||||
this.$store.state.SendeditableTabs = tabs.filter(
|
||||
(tab) => tab.name !== targetName
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
.main {
|
||||
width: 95%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
.main-tabs {
|
||||
> .el-tabs__content {
|
||||
height: calc(100vh - 41px);
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue