Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
cfbf301f 1 parent 7745adf8

【IMAC-ET86】配舱设置-新增ET86配舱

Expand all
Inline Side-by-side
Showing 19 changed files with 1433 additions and 103 deletions
......@@ -39,8 +39,10 @@
"axios": "0.21.1",
"core-js": "3.8.3",
"element-ui": "2.15.3",
"sortablejs": "^1.15.0",
"vue": "2.6.14",
"vue-router": "3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "3.6.2"
},
"devDependencies": {
......
This diff is collapsed. Click to expand it.
<template>
<el-input
v-bind="$attrs"
clearable
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
class="yl-input"
></el-input>
</template>
<script>
export default {
props: {
rules: {
type: Array,
default: () => [],
},
},
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {
handleInput(event) {
// v-bind="$attrs" v-on="$listeners"
this.$emit("input", event);
},
handleFocus(event) {
this.$emit("focus", event);
},
handleBlur(event) {
this.$emit("blur", event);
},
handleChange(event) {
this.$emit("change", event);
},
},
};
</script>
<style lang='scss'>
</style>
<script>
/**
* 动态渲染 el-table-column
*/
export default {
name: 'column',
props: {
attrs: {
type: Object,
default: () => ({}),
required: true
}
},
render: function(h) {
let attrs = this.attrs;
let scopedSlots = {};
if (attrs.render) {
scopedSlots.default = scope => attrs.render(h, scope);
}
return h('el-table-column', {
attrs,
scopedSlots
});
}
};
</script>
<template>
<div class="table-container">
<el-row v-if="attrs.btnCofig.isBtn" style="margin-bottom: 15px">
<el-col>
<el-button
v-for="item in attrs.btnCofig.btnGroup"
:key="item.icon"
:type="item.type"
:icon="item.icon"
:round="item.round"
:size="item.size"
:loading="item.loading"
@click="handleClick(item)"
>{{ item.btnName }}</el-button
>
</el-col>
</el-row>
<el-table
:max-height="attrs.maxHeight"
empty-text
v-bind="attrs"
v-loading="loadingTable"
:data="tableData"
@selection-change="selectionChange"
ref="tableRef"
row-key="id"
:header-cell-class-name="headerCellClassName"
>
<template v-if="columns.length">
<template v-for="(item, index) in columns">
<column v-if="!item.hidden" :key="index" :attrs="item"></column>
</template>
</template>
<slot name="column" v-else></slot>
</el-table>
<!-- 分页 -->
<div
v-if="pageConfig.isPagination"
class="pagination-container"
:style="{ textAlign: pageConfig.position || 'right' }"
>
<el-pagination
background
:hide-on-single-page="false"
:current-page="pageConfig.pageData.page"
:page-sizes="[10, 15, 20, 25, 30, 35, 40]"
:page-size="pageConfig.pageData.size"
layout="total,prev, pager, next, jumper, ->, sizes"
:total="pageConfig.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<script>
import Sortable from "sortablejs";
import { objectMerge, debounce } from "@/utils";
import column from "./column";
export default {
props: {
attrs: {
type: Object,
default: {
border: true,
isDragSort: false,
btnCofig: {
isBtn: true,
btnGroup: [
{
type: "primary", // text、primary、danger
icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
btnName: "搜索",
size: "mini", // medium / small / mini
round: false,
loading: false,
event: "searchBtn",
},
],
},
},
},
loadingTable: {
type: Boolean,
default: false,
},
columns: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
required: true,
},
pageConfig: {
type: Object,
default: {
isPagination: true,
},
required: true,
},
},
components: {
column,
},
data() {
return {
dropCol: objectMerge({}, this.columns),
trHeight: 4,
};
},
computed: {
_attrs() {
//默认table 参数
const defaultParams = {};
return Object.assign(defaultParams, this.attrs);
},
isHasAttr() {},
},
created() {
if (this.attrs.isDragSort) {
// 有没有复选框、有没有render
// this.columns
}
},
mounted() {
this.getTrCurrentHeight();
window.addEventListener("resize", this.getTrCurrentHeight);
//阻止火狐拖拽新建新页面
document.body.addEventListener(
"drop",
(event) => {
event.preventDefault();
event.stopPropagation();
},
false
);
// 拖拽行更新排序
// this.rowDrop();
// 拖拽列更新排序
this.columnDrop();
},
destroyed() {
window.removeEventListener("resize", this.getTrCurrentHeight);
},
methods: {
getTrCurrentHeight: debounce(function () {
this.$nextTick(() => {
const trEl =
this.$refs.tableRef.$refs.bodyWrapper.children[0].children[1]
.children[0].clientHeight;
this.trHeight = trEl;
// console.log(this);
});
}, 800),
// 给表头列添加className
headerCellClassName({ row, column, rowIndex, columnIndex }) {
if (columnIndex !== 0) {
return "el-table_1_column";
}
},
useTableFunc(FuncName, ...params) {
if (!this.$refs["el-table"]) {
return console.warn("访问不到el-table");
}
if (!FuncName) {
return console.error("请传入tabel方法名字");
}
this.$refs["el-table"][FuncName](params[0]);
},
// table复选框事件
selectionChange(e) {
console.log(e);
this.$emit("selectionEvent", e);
},
// 条数变化
handleSizeChange(e) {
this.$emit("sizeChange", e);
},
// 页码变化
handleCurrentChange(e) {
this.$emit("currentChange", e);
},
// btn点击事件注册
handleClick(item) {
this.$emit(item.event, item);
},
// 拖拽行更新排序
rowDrop() {
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
console.log("wrapperTr:", wrapperTr);
this.sortable = Sortable.create(wrapperTr, {
sort: this.attrs.isDragSort,
animation: 100,
delay: 0,
handle: ".move", // 只有带move类名的元素才能拖动,多选框禁止拖动
onEnd: (evt) => {
// 因为手动加了一个多选框, 不在表头循环数组内, 所以这里减1
let oldIndx = evt.oldIndex - 1;
let newIndx = evt.newIndex - 1;
const oldItem = this.dropCol[oldIndx];
// 真正改变列数据--变化列头，就能实现列拖动 列数据按列头索引取值 {{ scope.row[dropCol[index].prop] }}
this.dropCol.splice(oldIndx, 1); // 删除旧一行 删除为1
this.dropCol.splice(newIndx, 0, oldItem); // 插入新一行 插入为0
},
});
},
// 拖拽列更新排序
columnDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
sort: this.attrs.isDragSort,
animation: 100,
delay: 0,
onEnd({ newIndex, oldIndex }) {
console.log("onEnd:", newIndex, oldIndex);
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
},
});
},
},
watch: {
data() {
this.$nextTick(() => {
this.useTableFunc("doLayout");
});
},
},
};
</script>
<style lang="scss">
</style>
......@@ -26,7 +26,7 @@ import Drag from "@/components/Drag"
import tableHeaders from '@/assets/languages/tableHeaders'
import dictLabels from "@/assets/languages/dictLabels.js"
import settings from './settings.js'
import * as filters from "./utils/filters.js";
// 全局方法挂载
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
......@@ -76,6 +76,10 @@ Vue.directive('focus', {
}
});
// 全局注册过滤器
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
/**
* If you don't want to use mock-server
......
......@@ -29,76 +29,97 @@ import ParentView from '@/components/ParentView';
// 公共路由
export const constantRoutes = [
{
path: '/redirect',
path: "/redirect",
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve)
}
]
path: "/redirect/:path(.*)",
component: (resolve) => require(["@/views/redirect"], resolve),
},
],
},
{
path: '/login',
component: (resolve) => require(['@/views/login'], resolve),
hidden: true
path: "/login",
component: (resolve) => require(["@/views/login"], resolve),
hidden: true,
},
{
path: '/404',
component: (resolve) => require(['@/views/error/404'], resolve),
hidden: true
path: "/404",
component: (resolve) => require(["@/views/error/404"], resolve),
hidden: true,
},
{
path: '/401',
component: (resolve) => require(['@/views/error/401'], resolve),
hidden: true
path: "/401",
component: (resolve) => require(["@/views/error/401"], resolve),
hidden: true,
},
{
path: '',
path: "",
component: Layout,
redirect: 'index',
redirect: "index",
children: [
{
path: 'index',
component: (resolve) => require(['@/views/index'], resolve),
name: 'Index',
meta: { title: '首页', icon: 'home', noCache: true, affix: true }
path: "index",
component: (resolve) => require(["@/views/index"], resolve),
name: "Index",
meta: { title: "首页", icon: "home", noCache: true, affix: true },
},
]
],
},
{
path: '',
path: "",
component: Layout,
hidden: true,
children: [
{
path: '/info/:handle/id=:id;routeStatus=:routeStatus;fltNo=:fltNo;route=:route;fltDate=:fltDate;status=:status',
component: (resolve) => require(['@/views/allocationConfig/flightAllocConfig/info'], resolve),
name: 'FlightAllocConfigInfo',
meta: { title: '航班配舱', icon: 'user' }
path: "/et86",
component: (resolve) =>
require(["@/views/allocationConfig/et86"], resolve),
name: "et86",
meta: { title: "ET86", icon: "user" },
children: [],
},
{
path: "/et86/:edit",
component: (resolve) =>
require(["@/views/allocationConfig/et86/edit"], resolve),
name: "edit",
meta: { title: "编辑", icon: "user" },
},
{
path: "/info/:handle/id=:id;routeStatus=:routeStatus;fltNo=:fltNo;route=:route;fltDate=:fltDate;status=:status",
component: (resolve) =>
require(["@/views/allocationConfig/flightAllocConfig/info"], resolve),
name: "FlightAllocConfigInfo",
meta: { title: "航班配舱", icon: "user" },
},
{
path: '/weatherTable/:awbNbr',
component: (resolve) => require(['@/views/systemLog/dmLog/weatherTable'], resolve),
name: 'weatherTable',
meta: { title: '流水表', icon: 'user' }
path: "/weatherTable/:awbNbr",
component: (resolve) =>
require(["@/views/systemLog/dmLog/weatherTable"], resolve),
name: "weatherTable",
meta: { title: "流水表", icon: "user" },
},
{
path: '/upDateResult',
component: (resolve) => require(['@/views/preMdeConfig/upDateResult'], resolve),
name: 'UpDateResult',
meta: { title: '错误信息提示', icon: 'user' }
path: "/upDateResult",
component: (resolve) =>
require(["@/views/preMdeConfig/upDateResult"], resolve),
name: "UpDateResult",
meta: { title: "错误信息提示", icon: "user" },
},
{
path: '/goodsLog/type=:type',
component: (resolve) => require(['@/views/basicInformation/goodsStation/goodsUploadLog'], resolve),
name: 'GoodsUploadLog',
meta: { title: '导入日志', icon: 'user' }
path: "/goodsLog/type=:type",
component: (resolve) =>
require([
"@/views/basicInformation/goodsStation/goodsUploadLog",
], resolve),
name: "GoodsUploadLog",
meta: { title: "导入日志", icon: "user" },
},
]
],
},
]
];
export default new Router({
mode: 'history', // 去掉url中的#
......
import { constantRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView';
import hasPermi from '../../directive/permission/hasPermi';
import { constantRoutes } from "@/router";
import { getRouters } from "@/api/menu";
import Layout from "@/layout/index";
import ParentView from "@/components/ParentView";
import hasPermi from "../../directive/permission/hasPermi";
const permission = {
state: {
routes: [],
......@@ -10,110 +10,133 @@ const permission = {
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: [],
filghtAllData: {}
filghtAllData: {},
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
state.addRoutes = routes;
state.routes = constantRoutes.concat(routes);
},
SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes)
state.defaultRoutes = constantRoutes.concat(routes);
},
SET_TOPBAR_ROUTES: (state, routes) => {
// 顶部导航菜单默认添加统计报表栏指向首页
const index = [{
path: 'index',
meta: { title: '首页', icon: 'home' }
}]
const index = [
{
path: "index",
meta: { title: "首页", icon: "home" },
},
];
state.topbarRouters = routes.concat(index);
},
SET_SIDEBAR_ROUTERS: (state, routes) => {
state.sidebarRouters = routes
state.sidebarRouters = routes;
},
SET_FILGHTALL: (state, data) => {
let name = data.name;
state.filghtAllData[name] = data.data;
},
REMOVE_FILGHTALL: (state, name) => {
delete state.filghtAllData[name]
}
delete state.filghtAllData[name];
},
},
actions: {
// 生成路由
GenerateRoutes({ commit }) {
return new Promise(resolve => {
return new Promise((resolve) => {
// 向后端请求路由数据
getRouters().then(res => {
res.data = hasPermi.routerPer(res.data);
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
resolve(rewriteRoutes)
})
})
}
getRouters().then((res) => {
const newUrl = {
id: 24,
name: "et86",
path: "/et86",
hidden: false,
component: "allocationConfig/et86",
meta: {
title: "ET86",
icon: "edit",
permissions: "allocation:rand:list",
noCache: false,
},
alwaysShow: false,
children: null,
};
res.data.map((item) => {
if (item.name == "AllocationConfig") {
item.children.push(newUrl);
}
}
});
res.data = hasPermi.routerPer(res.data);
const sdata = JSON.parse(JSON.stringify(res.data));
const rdata = JSON.parse(JSON.stringify(res.data));
const sidebarRoutes = filterAsyncRouter(sdata);
const rewriteRoutes = filterAsyncRouter(rdata, false, true);
rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);
commit("SET_TOPBAR_ROUTES", sidebarRoutes);
resolve(rewriteRoutes);
});
});
},
},
};
// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => {
return asyncRouterMap.filter((route) => {
if (type && route.children) {
route.children = filterChildren(route.children)
route.children = filterChildren(route.children);
}
if (route.component) {
// Layout ParentView 组件特殊处理
if (route.component === 'Layout') {
route.component = Layout
} else if (route.component === 'ParentView') {
route.component = ParentView
if (route.component === "Layout") {
route.component = Layout;
} else if (route.component === "ParentView") {
route.component = ParentView;
} else {
route.component = loadView(route.component)
route.component = loadView(route.component);
}
}
if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type)
route.children = filterAsyncRouter(route.children, route, type);
} else {
delete route['children']
delete route['redirect']
delete route["children"];
delete route["redirect"];
}
return true
})
return true;
});
}
function filterChildren(childrenMap, lastRouter = false) {
var children = []
var children = [];
childrenMap.forEach((el, index) => {
if (el.children && el.children.length) {
if (el.component === 'ParentView') {
el.children.forEach(c => {
c.path = el.path + '/' + c.path
if (el.component === "ParentView") {
el.children.forEach((c) => {
c.path = el.path + "/" + c.path;
if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c))
return
children = children.concat(filterChildren(c.children, c));
return;
}
children.push(c)
})
return
children.push(c);
});
return;
}
}
if (lastRouter) {
el.path = lastRouter.path + '/' + el.path
el.path = lastRouter.path + "/" + el.path;
}
children = children.concat(el)
})
return children
children = children.concat(el);
});
return children;
}
export const loadView = (view) => { // 路由懒加载
return (resolve) => require([`@/views/${view}`], resolve)
}
export const loadView = (view) => {
// 路由懒加载
return (resolve) => require([`@/views/${view}`], resolve);
};
export default permission
export default permission;
......
// 是否
export function isSure(type) {
if (type === 0 || type === "0" || type === false) {
return "否";
} else if (type === 1 || type === "1" || type === true) {
return "是";
}
}
// 布尔值转换
export function returnBoolean(type) {
if (type === 0 || type === "0") {
return false;
} else if (type === 1 || type === "1") {
return true;
}
}
export default {
isSure,
returnBoolean,
};
<template>
<div class=''></div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
}
},
computed: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style lang='scss' scoped>
</style>
<template>
<div class=''></div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
}
},
computed: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style lang='scss' scoped>
</style>
export const formConfig = [
{
label: "重量(KG)",
type: "Input",
name: "minWeight",
prop: "minWeight",
placeholder: "0",
rules: {
required: true,
message: "最大重量不得小于0KG",
trigger: ["change", "blur"],
},
trigger: "blur", // 事件名
},
{
label: "",
type: "Input",
name: "maxWeight",
prop: "maxWeight",
placeholder: "34",
rules: {
required: true,
message: "最大重量不得大于34KG",
trigger: ["change", "blur"],
},
trigger: "blur", // 事件名
},
{
label: "件数",
type: "Input",
name: "minNumOfPieces",
prop: "minNumOfPieces",
placeholder: "0",
rules: {
required: true,
message: "最大重量不得小于0KG",
trigger: ["change", "blur"],
},
trigger: "blur", // 事件名
},
{
label: "",
type: "Input",
name: "maxNumOfPieces",
prop: "maxNumOfPieces",
placeholder: "34",
rules: {
required: true,
message: "最大重量不得大于34KG",
trigger: ["change", "blur"],
},
trigger: "blur", // 事件名
},
];
This diff is collapsed. Click to expand it.
export const validateRules = {
methods: {
// 最小重量
validateMinWeight(name) {
if (/^(0|[1-9]\d*)(.\d{1,3})?$/.test(Number(this.queryForm[name]))) {
// 最小重量大于0小于100，并且最小重量小于最大重量
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 100 &&
Number(this.queryForm[name]) < Number(this.queryForm.maxWeight)
) {
this.$refs.minWeight.innerHTML = "";
return true;
} else {
this.$refs.maxWeight.innerHTML = "";
this.$refs.minWeight.innerHTML =
"最小重量大于0小于100，并且最小重量小于最大重量";
return false;
}
} else {
this.$refs.maxWeight.innerHTML = "";
this.$refs.minWeight.innerHTML = "请输入正整数，小数保留3位";
return false;
}
},
// 最大重量
validateMaxWeight(name) {
// 最大重量
if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
// 最大重量大于0小于100，并且最大重量大于最小重量
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 100 &&
Number(this.queryForm[name]) > Number(this.queryForm.minWeight)
) {
this.$refs.maxWeight.innerHTML = "";
return true;
} else {
this.$refs.minWeight.innerHTML = "";
this.$refs.maxWeight.innerHTML =
"最大重量大于0小于100，并且最大重量大于最小重量";
return false;
}
} else {
this.$refs.minWeight.innerHTML = "";
this.$refs.maxWeight.innerHTML = "请输入正整数，小数保留3位";
return false;
}
},
// 最少件数
validateMinPieces(name) {
if (/^\d+$/.test(Number(this.queryForm[name]))) {
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 100 &&
Number(this.queryForm[name]) < Number(this.queryForm.maxNumOfPieces)
) {
// 最少件数 大于0小于100并且最少件数小于最多件数
this.$refs.minNumOfPieces.innerHTML = "";
return true;
} else {
this.$refs.maxNumOfPieces.innerHTML = "";
this.$refs.minNumOfPieces.innerHTML =
"最少件数 大于0小于100并且最少件数小于最多件数";
}
} else {
this.$refs.maxNumOfPieces.innerHTML = "";
this.$refs.minNumOfPieces.innerHTML = "请输入有效件数";
return false;
}
},
// 最多件数
validateMaxPieces(name) {
if (/^\d+$/.test(Number(this.queryForm[name]))) {
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 100 &&
Number(this.queryForm[name]) > Number(this.queryForm.minNumOfPieces)
) {
// 最少件数 大于0小于100并且最少件数小于最多件数
this.$refs.maxNumOfPieces.innerHTML = "";
return true;
} else {
this.$refs.minNumOfPieces.innerHTML = "";
this.$refs.maxNumOfPieces.innerHTML =
"最多件数 大于0小于100并且最少件数小于最多件数";
}
} else {
this.$refs.minNumOfPieces.innerHTML = "";
this.$refs.maxNumOfPieces.innerHTML = "请输入有效件数";
return false;
}
},
// 最小申报价值
validateMinCustomVal(name) {
// 申报价值
if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
if (
this.queryForm.customVal == "USD" ||
this.queryForm.customVal == "美元"
) {
// 申报价值（美元）0~600
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 600 &&
Number(this.queryForm[name]) < Number(this.queryForm.maxCustomVal)
) {
// 最小申报价值大于0小于600，并且最小申报价值小于最大申报价值
this.$refs.minCustomVal.innerHTML = "";
return true;
} else {
this.$refs.maxCustomVal.innerHTML = "";
this.$refs.minCustomVal.innerHTML = `申报价值（美元）0~600`;
return false;
}
} else {
// 申报价值（人民币）0~2000
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 2000 &&
Number(this.queryForm[name]) < Number(this.queryForm.maxCustomVal)
) {
// 最大申报价值大于0小于2000，并且最大申报价值大于最小申报价值
this.$refs.minCustomVal.innerHTML = "";
return true;
} else {
this.$refs.maxCustomVal.innerHTML = "";
this.$refs.minCustomVal.innerHTML = `申报价值（人民币）0~2000`;
return false;
}
}
} else {
this.$refs.maxCustomVal.innerHTML = "";
this.$refs.minCustomVal.innerHTML = "请输入正确申报价值";
return false;
}
},
// 最大申报价值
validateMaxCustomVal(name) {
// 申报价值
if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
if (
this.queryForm.customVal == "USD" ||
this.queryForm.customVal == "美元"
) {
// 申报价值（美元）0~600
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 600 &&
Number(this.queryForm[name]) > Number(this.queryForm.minCustomVal)
) {
// 最小申报价值大于0小于600，并且最小申报价值小于最大申报价值
this.$refs.maxCustomVal.innerHTML = "";
return true;
} else {
this.$refs.minCustomVal.innerHTML = "";
this.$refs.maxCustomVal.innerHTML = `申报价值（美元）0~600`;
return false;
}
} else {
// 申报价值（人民币）0~2000
if (
Number(this.queryForm[name]) >= 0 &&
Number(this.queryForm[name]) < 2000 &&
Number(this.queryForm[name]) > Number(this.queryForm.minCustomVal)
) {
// 最大申报价值大于0小于2000，并且最大申报价值大于最小申报价值
this.$refs.maxCustomVal.innerHTML = "";
return true;
} else {
this.$refs.minCustomVal.innerHTML = "";
this.$refs.maxCustomVal.innerHTML = `申报价值（人民币）0~2000`;
return false;
}
}
} else {
this.$refs.minCustomVal.innerHTML = "";
this.$refs.maxCustomVal.innerHTML = "请输入正确申报价值";
return false;
}
},
},
};
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: true, // 拖拽tableData数据一定要加id字段
maxHeight: 300,
btnCofig: {
isBtn: true,
btnGroup: [
// {
// type: "primary", // text、primary、danger
// icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
// btnName: "搜索",
// size: "mini", // medium / small / mini
// round: false,
// loading: false,
// event: "search",
// },
{
type: "primary",
icon: "el-icon-plus",
btnName: "添加",
size: "mini",
round: false,
loading: false,
event: "add",
},
// {
// type: "danger",
// icon: "el-icon-delete",
// btnName: "删除",
// size: "mini",
// round: false,
// loading: false,
// event: "delete",
// },
],
},
};
export const columnHeader = (deleteRow) => [
{
label: "航班号",
prop: "fltNo",
align: "center",
minWidth: 100,
},
{
label: "航班日期",
prop: "fltNoDate",
align: "center",
minWidth: 100,
// sortable: true,
// "sort-method": (a, b) => b.updateTime - a.updateTime,
},
{
label: "航线优先级",
prop: "fltRoute",
align: "center",
minWidth: 100,
},
{
label: "爆仓是否继续配舱",
prop: "isOn",
align: "center",
minWidth: 100,
render: (h, params) => {
const { row } = params;
console.log(345678,row);
// return h("div", `状态-${row.id}`);
},
},
{
label: "操作",
align: "center",
minWidth: 120,
render: (h, params) => {
return h("div", [
h(
"el-button",
{
style: {
color: "#ff4949",
},
props: {
type: "text",
size: "mini",
icon: "el-icon-delete",
},
on: {
click() {
deleteRow(params);
},
},
},
"删除"
),
]);
},
},
];
export const tableData = [
{
id: "1",
fltNo: "A380",
fltNoDate: "3",
fltRoute: "CAN",
isOn: "1",
sort: "1", // 排序字段
},
];
export const formConfig = [
{
label: "创建时间(从)",
type: "Date",
name: "startTime",
prop: "startTime",
placeholder: "请选择开始时间",
rules: { required: true, message: "请选择开始时间", trigger: "blur" },
},
{
label: "创建时间(到)",
type: "Date",
name: "endTime",
prop: "endTime",
placeholder: "请选择结束时间",
rules: { required: true, message: "请选择结束时间", trigger: "blur" },
},
{
label: "规则状态",
type: "Select",
name: "status",
prop: "status",
width: "140px",
placeholder: "请选择状态",
rules: { required: true, message: "请选择状态", trigger: "blur" },
options: {
data: [
{
value: "1",
label: "新增",
},
{
value: "2",
label: "修改",
},
{
value: "3",
label: "删除",
},
],
label: "",
value: "",
},
},
];
export const editFormConfig = [
{
label: "航班号",
type: "Search",
name: "route",
prop: "fltNo",
placeholder: "请输入航班号",
rules: {
required: true,
message: "请输入航班号",
trigger: ["change", "blur"],
},
http: {
url: "/dictionary/queryRouteByFltNo",
method: "post",
data: {
fltNo: "",
},
},
},
{
label: "",
type: "inputNumber",
name: "count",
prop: "count",
placeholder: "+",
min: 0,
max: 7,
with: "50px",
},
{
label: "航线优先级",
type: "Input",
name: "route",
prop: "fltNum",
placeholder: "请选择航线优先级",
trigger: "focus",
},
{
label: "爆仓是否继续配舱",
type: "Checkbox",
name: "checked",
prop: "checked",
disabled: false,
},
];
<template>
<div class="form-header container">
<el-row>
<el-col>
<yl-form
ref="ruleForm"
:formConfig="formConfig"
:queryForm="queryForm"
@input="inputEvent"
@keyup="keyUpEvent"
/>
</el-col>
</el-row>
<yl-table
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:columns="columns"
:tableData="tableData"
:pageConfig="pageConfig"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
@search="searchBtn"
@restForm="restForm"
@add="addBtn"
@upload="uploadBtn"
@download="downloadBtn"
>
</yl-table>
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { debounce } from "@/utils";
import { tableAttr, columnHeader, tableData } from "./tableConfig";
import {
allDictData, // 获取全部字典
queryRouteByFltNo, // 航线查询
} from "@/api/destinationFlight";
export default {
components: {
YlForm,
YlTable,
},
data() {
return {
formConfig: formConfig, // 表单配置项
queryForm: {}, // 表单参数
pageConfig: {
// 分页配置项
isPagination: true,
total: 13,
pageData: {
page: 1,
size: 10,
},
},
tableAttr: tableAttr, // table配置项
columns: columnHeader(this.editRow, this.deleteRow, this.viewRow), // 表头
tableData: tableData, // 表格数据
selectionList: [], // table复选框筛选集合
};
},
created() {},
mounted() {},
methods: {
// 航线查询
queryRoute(item) {
queryRouteByFltNo(item).then((res) => {
if (res.code == 200) {
const list = res.data.list;
let routeList = "";
if (list.length) {
list.map((item) => {
routeList += item.route + ",";
});
this.queryForm.fltRoute = routeList.substring(
0,
routeList.length - 1
);
} else {
this.queryForm = {
fltNo: item.fltNo, // 航班号
};
}
}
});
},
// input事件
inputEvent: debounce(function () {
this.queryRoute({
fltNo: this.queryForm.fltNo, // 航班号
});
}, 800),
// 回车事件
keyUpEvent(item) {
this.queryRoute(item);
},
// table复选框事件
selectionTable(e) {
console.log("selectionTable：", e);
this.selectionList = e;
},
//条数变化
handleSizeChange(e) {
this.pageConfig.pageData.size = e;
this.pageConfig.pageData.page = 1;
console.log("sizeChange：", e);
},
//页码变化
handleCurrentChange(e) {
this.pageConfig.pageData.page = e;
console.log("currentChange：", e);
},
// 搜索
searchBtn(row) {
this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
console.log(val);
});
console.log(this.queryForm);
},
// 重置表单
restForm() {
this.$refs.ruleForm.resetFields("ruleForm");
},
// 添加
addBtn(item) {
console.log("add：", item);
this.$router.push({
name: "edit",
params: {
edit: 12,
},
});
},
// 上传
uploadBtn(item) {
console.log("upload：", item);
},
// 导出
downloadBtn(item) {
console.log("download：", item);
},
// 编辑
editRow(item) {
this.$router.push({
name: "edit",
params: {
edit: 12,
},
});
console.log("修改：", item);
},
// 删除
deleteRow(item) {
this.$confirm("是否允许删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
console.log("删除：", item);
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 查看
viewRow({ row }) {
this.$router.push({
name: "edit",
params: {
edit: 12,
},
});
console.log("查看：", row);
},
},
};
</script>
<style lang="scss" scoped></style>
const state = {
1: "新增",
2: "修改",
3: "删除",
};
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: false, // 拖拽tableData数据一定要加id字段
maxHeight: 300,
btnCofig: {
isBtn: true,
btnGroup: [
{
type: "primary", // text、primary、danger
icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
btnName: "搜索",
size: "mini", // medium / small / mini
round: false,
loading: false,
event: "search",
},
{
type: "info",
icon: "",
btnName: "重置",
size: "mini",
round: false,
loading: false,
event: "restForm",
},
{
type: "primary",
icon: "el-icon-plus",
btnName: "添加",
size: "mini",
round: false,
loading: false,
event: "add",
},
{
type: "primary",
icon: "el-icon-upload",
btnName: "上传",
size: "mini",
round: false,
loading: false,
event: "upload",
},
{
type: "primary",
icon: "el-icon-download",
btnName: "导出",
size: "mini",
round: false,
loading: false,
event: "download",
},
],
},
};
export const columnHeader = (editRow, deleteRow, viewRow) => [
{
type: "selection",
align: "center",
prop: "selection",
width: "50",
},
{
type: "index",
label: "序号",
prop: "id",
align: "center",
width: "50",
},
{
label: "顺位航班",
prop: "flightRand",
align: "center",
minWidth: 100,
},
{
label: "状态",
prop: "status",
align: "center",
minWidth: 100,
render: (h, params) => {
const { row } = params;
return h("div", `${state[row.status]}`);
},
},
{
label: "创建时间",
prop: "createTime",
align: "center",
minWidth: 100,
sortable: true,
"sort-method": (a, b) => b.createTime - a.createTime,
},
{
label: "修改时间",
prop: "updateTime",
align: "center",
minWidth: 100,
},
{
label: "创建人",
prop: "createUserName",
align: "center",
minWidth: 100,
},
{
label: "修改人",
prop: "updateUserName",
align: "center",
minWidth: 100,
},
{
label: "操作",
prop: "operate",
align: "center",
minWidth: 120,
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"el-button",
{
props: {
type: "text",
size: "mini",
icon: "el-icon-edit",
},
on: {
click() {
editRow(params);
},
},
},
"修改"
),
h(
"el-button",
{
style: {
color: "#ff4949",
},
props: {
type: "text",
size: "mini",
icon: "el-icon-delete",
},
on: {
click() {
deleteRow(params);
},
},
},
"删除"
),
h(
"el-button",
{
props: {
type: "text",
size: "mini",
icon: "el-icon-view",
},
on: {
click() {
viewRow(params);
},
},
},
"查看"
),
]);
},
},
];
export const tableData = [
{
id: "1",
flightRand: "LZ003;LZ00",
status: "1",
createTime: "2023-08-11",
updateTime: "2023-08-11",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "2",
flightRand: "LP001;LP004+1",
status: "3",
createTime: "2023-08-11",
updateTime: "2023-08-11",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "3",
flightRand: "LZ002;LZ003;LZ001",
status: "1",
createTime: "2023-08-10",
updateTime: "2023-08-10",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "4",
flightRand: "LZ001;LZ002;LZ004",
status: "2",
createTime: "2023-08-11",
updateTime: "2023-08-11",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "5",
flightRand: "PS001;PS003",
status: "1",
createTime: "2023-08-11",
updateTime: "2023-08-11",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "6",
flightRand: "PS002;PS003",
status: "3",
createTime: "2023-08-11",
updateTime: "2023-08-11",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "7",
flightRand: "FX0092;FX0095;FX0094;FX0090",
status: "1",
createTime: "2023-08-10",
updateTime: "2023-08-10",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "8",
flightRand: "AB060;AC005;AC204",
status: "2",
createTime: "2023-08-10",
updateTime: "2023-08-10",
createUserName: "wjh",
updateUserName: "wjh",
},
{
id: "9",
flightRand: "FX0090;FX0092",
status: "1",
createTime: "2023-08-10",
updateTime: "2023-08-10",
createUserName: "wjh",
updateUserName: "wjh",
},
];