Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
701b7d09 1 parent 288907d3

modify

Expand all
Inline Side-by-side
Showing 6 changed files with 636 additions and 0 deletions
This diff is collapsed. Click to expand it.
import { debounce } from "@/utils";
export default {
data() {
return {
ursaError: "", // URSA包含校验提示语
notUrsaError: "", // URSA不包含校验提示语
validateForm: true, // form表单节流阀
};
},
directives: {
// 处理加减天数
"input-filter": {
bind: function (el, binding, { context }) {
el.handler = function (event) {
context.calculateDay(event);
};
el.addEventListener("input", el.handler);
},
unbind: function (el) {
el.removeEventListener("input", el.handler);
},
},
},
methods: {
// 防抖函数处理加减天数校验
calculateDay: debounce(function (...args) {
// 判断有没有值
if (args.length) {
// 判断传过来的是不是一个对象
const { target } = args[0];
// 是不是一个数字
if (isNaN(Number(target.value))) {
this.msgError("请输入有效数字");
target.value = "";
} else {
// // 非数字时
// if (Number(target.value) < -7) {
// this.msgError("加减天数最小不能大于7天");
// target.value = "";
// } else if (Number(target.value) > 7) {
// this.msgError("加减天数最大不能大于7天");
// target.value = "";
// }
if (/[\.]/.test(Number(target.value))) {
// 浮点数时
this.msgError("加减天数只能为整数");
target.value = "";
}
}
target.dispatchEvent(new Event("input"));
}
}, 800),
// 获取字典
getObj({ serviceCode }) {
let service_Code = [];
serviceCode.map((item) => {
service_Code.push(item.chineseName);
});
this.serviceCodeData = service_Code;
},
// 处理serviceCode包不包含
serviceCodeCofig() {
let str = "";
if (this.isServiceCode == "1") {
str = this.queryForm.includeServiceType.replace(/;|；/g, ",");
} else {
str = this.queryForm.notIncludeServiceType.replace(/;|；/g, ",");
}
let arr = str.split(",");
if (arr[arr.length - 1] == "") {
arr.splice(arr.length - 1, 1);
}
let noHasCode = this.serviceCodeData.filter(
(v) => !arr.some((val) => val == v)
);
let hasCode = this.serviceCodeData.filter((v) =>
arr.some((val) => val == v)
);
let includeCode = arr.filter((v) => !hasCode.some((val) => val == v));
return {
include: hasCode,
noInclude: includeCode,
};
},
// radio包含不包含serviceCode
changeIsServiceCode(val) {
// 勾选的时候去校验 || 输入的时候去校验
if (val == 1) {
if (this.serviceCodeCofig().noInclude.length) {
let tip = this.serviceCodeCofig().noInclude.toString();
// this.msgError(`${tip} 不包含`);
}
} else {
if (this.serviceCodeCofig().include.length) {
let tip = this.serviceCodeCofig().include.toString();
// this.msgError(`${tip} 已包含`);
}
}
},
// serviceCode失焦事件
serviceCodeBlur() {
if (this.isServiceCode == "1") {
if (this.serviceCodeCofig().noInclude.length) {
let tip = this.serviceCodeCofig().noInclude.toString();
// this.msgError(`${tip} 不包含`);
}
} else {
if (this.serviceCodeCofig().include.length) {
let tip = this.serviceCodeCofig().include.toString();
// this.msgError(`${tip} 已包含`);
}
}
},
// Ursa校验 使用JavaScript写一个匹配字母的表达式
validateUrsa(ursaMark, ursa) {
// 分隔字符串并且转数组&去除数组空字符串
let ursaList = ursa.split(";").filter((str) => str !== "");
// 是否有重复的
let repeat = new Set(ursaList).size !== ursaList.length;
// 校验开头以字母或者数字开头下划线结尾的/^[a-zA-Z0-9]*_$/ 和 校验校验开头以字母或者数字开头的/^[a-zA-Z0-9]*$/
let inUrsa = ursaList.every((item) =>
ursaMark ? /^[a-zA-Z0-9]*_$/.test(item) : /^[a-zA-Z0-9]*$/.test(item)
);
const ursaInfo = {
ursaMark: ursaMark, // Boolean ursa包含/不包含
ursa: ursaList, // ursa
repeat: repeat, // Boolean 是否有重复的
inUrsa: inUrsa, // Boolean ursa校验
};
// ursa包含
if (ursaMark && ursaInfo.repeat) {
this.ursaError = "填写的URSA已重复";
}
if (ursaMark && !ursaInfo.inUrsa) {
this.ursaError = "URSA包含之间用分号分隔，例：P2_;P3_;P_";
}
if (ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
this.ursaError = "";
}
// ursa不包含;
if (!ursaMark && ursaInfo.repeat) {
this.notUrsaError = "填写的URSA已重复";
}
if (!ursaMark && !ursaInfo.inUrsa) {
this.notUrsaError = "URSA不包含之间用分号分隔，例：P2;P3;P";
}
if (!ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
this.notUrsaError = "";
}
// 两则都为空时则校验通过
if (
(this.ursaError && this.notUrsaError) ||
this.ursaError ||
this.notUrsaError
) {
this.validateForm = false;
} else {
this.validateForm = true;
}
},
// 包含
includeUrsa() {
let { includeUrsa } = this.queryForm;
this.validateUrsa(true, includeUrsa);
},
// 不包含
notIncludeUrsa() {
let { notIncludeUrsa } = this.queryForm;
this.validateUrsa(false, notIncludeUrsa);
},
},
};
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: true, // 拖拽tableData数据一定要加id字段
maxHeight: 300,
btnCofig: {
isBtn: false,
btnGroup: [
{
type: "primary",
icon: "el-icon-plus",
btnName: "添加",
size: "mini",
round: false,
loading: false,
event: "add",
},
],
},
};
export const formConfig = [
{
label: "原航班",
type: "Input",
name: "originOfFlightNo",
prop: "originOfFlightNo",
placeholder: "请输入原航班号",
span: 5,
trigger: "blur",
labelWidth: "55px",
},
{
label: "修改时间 从",
type: "Date",
name: "startTime",
prop: "startTime",
placeholder: "请选择开始时间",
// rules: { required: true, message: "请选择开始时间", trigger: "blur" },
format: "yyyy-MM-dd",
colWidth: "23%",
inputWidth: "100%",
},
{
label: "到",
type: "Date",
name: "endTime",
prop: "endTime",
placeholder: "请选择结束时间",
// rules: { required: true, message: "请选择结束时间", trigger: "blur" },
format: "yyyy-MM-dd",
colWidth: "20%",
labelWidth: "20px",
inputWidth: "100%",
},
{
label: "规则状态",
type: "Select",
name: "status",
prop: "status",
placeholder: "请选择状态",
options: {
data: [
{
value: "1",
label: "有效",
},
{
value: "0",
label: "无效",
},
],
},
colWidth: "18%",
labelWidth: "70px",
inputWidth: "100%",
},
];
<template>
<div ref="formHeaderRef" class="form-header container">
<el-row>
<el-col>
<yl-form
ref="ruleForm"
:formConfig="formConfig"
:queryForm="queryForm"
:inline="false"
formWidth="auto"
@blur="blurEvent"
/>
</el-col>
</el-row>
<yl-table
ref="ylTable"
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:columns="columns"
:tableData="tableData"
:pageConfig="pageConfig"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
@search="searchBtn"
@add="addBtn"
>
</yl-table>
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight } from "@/utils";
import {
findAllEtesRules, // ET86查询
deleteEtesRuleById, // 删除
} from "@/api/et86";
import store from "@/store";
export default {
name: "Et86RuleConfig",
components: {
YlForm,
YlTable,
},
data() {
return {
formConfig: formConfig, // 表单配置项
queryForm: {
// 表单参数
status: "有效",
},
pageConfig: {
// 分页配置项
isPagination: true,
total: 0,
pageData: {
page: 1,
size: 10,
},
},
tableAttr: tableAttr, // table配置项
columns: columnHeader(
this.indexAdd,
this.viewRow,
this.editRow,
this.deleteRow
), // 表头
tableData: [], // 表格数据
};
},
watch: {
$route(to, from) {
// 如果是从edit页面进入的Et86RuleConfig页面，那么删除Et86RuleConfig页面缓存
// store.dispatch("tagsView/delCachedView", to); // 删除当前路由组件Et86RuleConfig缓存
if (to.name == this.$options.name) {
this.searchBtn();
}
},
},
created() {
// ET86查询
this.$nextTick(() => {
this.searchBtn();
});
},
mounted() {
this.$nextTick(() => {
// window视口的高减去除了Table表格的高；将这个差的结果值作为设置Table的高;
this.tableAttr.maxHeight =
window.innerHeight - restTableHeight(this.$refs);
});
},
computed: {},
methods: {
// ET86查询
queryFindAllEtesRules() {
const { page, size } = this.pageConfig.pageData;
let params = {
originOfFlightNo: this.queryForm.originOfFlightNo,
updateTimeStart: this.queryForm.startTime
? this.queryForm.startTime
: "",
updateTimeEnd: this.queryForm.endTime ? this.queryForm.endTime : "",
limitStart: (page - 1) * size,
limitSize: size,
status: this.queryForm.status,
};
if (this.queryForm.status == "有效") {
params.status = "1";
}
this.tableAttr.loadingTable = true;
findAllEtesRules(params)
.then((res) => {
this.tableAttr.loadingTable = false;
const { code, data } = res;
if (code == 200) {
const valid = data.list.filter((item) => item.status == "1"); // 有效
const invalid = data.list.filter((item) => item.status == "0"); // 无效
this.tableData = valid.concat(invalid);
this.pageConfig.total = data.total;
}
})
.catch(() => {});
},
// 失焦事件
blurEvent({ originOfFlightNo }) {
this.queryForm.originOfFlightNo = this.upCase(originOfFlightNo);
},
// 搜索
searchBtn() {
this.pageConfig.pageData.page = 1;
this.pageConfig.pageData.size = 10;
this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
this.queryFindAllEtesRules();
});
},
// 翻页序号递增
indexAdd(index) {
const page = this.pageConfig.pageData.page; // 当前页码
const pagesize = this.pageConfig.pageData.size; // 每页条数
return index + 1 + (page - 1) * pagesize;
},
//条数变化
handleSizeChange(e) {
this.pageConfig.pageData.size = e;
this.pageConfig.pageData.page = 1;
this.queryFindAllEtesRules();
},
//页码变化
handleCurrentChange(e) {
this.pageConfig.pageData.page = e;
this.queryFindAllEtesRules();
},
// 添加
addBtn(item) {
this.$router.push({
path: "/edit",
query: {
name: "add",
},
});
},
// 重置表单
restForm() {
this.$refs.ruleForm.resetFields("ruleForm");
},
// 查看
viewRow({ row }) {
this.$router.push({
path: "/edit",
query: {
name: "view",
id: row.id,
status: row.status,
},
});
},
// 编辑
editRow({ row }) {
this.$router.push({
path: "/edit",
query: {
name: "edit",
id: row.id,
status: row.status,
},
});
},
// 删除
deleteRow({ row }) {
this.$confirm("是否确认删除? 删除后该规则设置为无效，不可恢复", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
delete row.status;
deleteEtesRuleById(row).then((res) => {
const { code, msg } = res;
if (code == 200) {
this.searchBtn();
this.msgSuccess("删除成功!");
} else {
this.msgError(msg || "删除失败");
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped></style>
const state = {
1: "有效",
0: "无效",
};
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: false, // 拖拽tableData数据一定要加id字段
maxHeight: 0,
// defaultSort: { prop: "updateTime", order: "descending" },
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",
},
],
},
};
export const columnHeader = (indexAdd, viewRow, editRow, deleteRow) => [
{
type: "index",
label: "序号",
prop: "id",
align: "center",
width: "50",
index: indexAdd,
},
{
label: "原航班",
prop: "originOfFlightNo",
align: "center",
minWidth: 80,
},
{
label: "配载航班",
prop: "rankFltNoStr",
align: "center",
minWidth: 120,
},
{
label: "航线",
prop: "rankFltRouteStr",
align: "center",
minWidth: 140,
},
{
label: "状态",
prop: "status",
align: "center",
minWidth: 50,
render: (h, params) => {
const { row } = params;
return h("div", `${state[row.status]}`);
},
},
{
label: "修改时间",
prop: "updateTime",
align: "center",
minWidth: 80,
// sortable: true,
// "sort-method": (a, b) => a.createTime - b.createTime,
},
{
label: "修改人",
prop: "updateUserName",
align: "center",
minWidth: 60,
},
{
label: "操作",
prop: "operate",
align: "center",
minWidth: 90,
fixed: "right",
render: (h, params) => {
let operateData = [];
if (params.row.status == "1") {
operateData = [
h(
"el-button",
{
props: {
type: "text",
size: "mini",
icon: "el-icon-view",
},
on: {
click() {
viewRow(params);
},
},
},
"查看"
),
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);
},
},
},
"删除"
),
];
} else {
operateData = [
h(
"el-button",
{
props: {
type: "text",
size: "mini",
icon: "el-icon-view",
},
on: {
click() {
viewRow(params);
},
},
},
"查看"
),
];
}
return h("div", operateData);
},
},
];