Fedex / imac-vue

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

modify

Inline Side-by-side
Showing 6 changed files with 1525 additions and 0 deletions
<template>
<div class="form-header">
<el-row style="padding-bottom: 20px">
<el-col>
<el-divider content-position="left">ET86配舱航班顺位</el-divider>
</el-col>
</el-row>
<!-- ET86配舱航班顺位 -->
<el-row :gutter="24" justify="center">
<el-col :span="18">
<el-row style="margin-bottom: 15px" v-show="getRouter">
<el-col>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="addBtn"
>添加</el-button
>
<span class="ml20" style="color: #ffba00"
>拖动航班号可调整优先级</span
>
</el-col>
</el-row>
<yl-table
ref="ylTable"
emptyText="请添加配舱航班"
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:tableData="tableData"
:pageConfig="{
isPagination: false,
}"
>
<template #column>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
></el-table-column>
<el-table-column
label="航班号"
prop="flightNo"
min-width="100"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.flightNo"
clearable
:disabled="scope.row.edit"
@focus="inputFlightNoFocus(scope)"
@blur="blurSearch"
placeholder="请输入航班号"
size="small"
/>
</template>
</el-table-column>
<el-table-column
label="加减天数"
prop="calculateDay"
width="140"
align="center"
>
<template slot-scope="scope">
<yl-el-input-number
v-model="scope.row.calculateDay"
:disabled="scope.row.edit"
:precision="0"
:controls="true"
v-input-filter
clearable
placeholder=""
size="small"
style="width: 100%"
/>
</template>
</el-table-column>
<el-table-column
label="航线"
prop="flightRoute"
min-width="100"
align="center"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.flightRoute"
size="small"
:disabled="scope.row.edit"
@visible-change="visibleChangeRoute($event, scope)"
>
<el-option
v-for="item in scope.row.routeList"
:key="item.id"
:label="item.route"
:value="item.route"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="爆仓是否继续配舱"
prop="permitOverweight"
min-width="100"
align="center"
>
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.permitOverweight"
:disabled="scope.row.edit"
@change="changeCheck(scope)"
></el-checkbox>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
:disabled="scope.row.edit"
@click="deleBtn(scope.row, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</template>
</yl-table>
</el-col>
</el-row>
<!-- ET86配舱航班顺位维度 -->
<el-row style="padding: 20px 0">
<el-col>
<el-divider content-position="left">航线维度设置</el-divider>
</el-col>
</el-row>
<el-card shadow="always" class="box-card">
<el-form
:model="queryForm"
label-position="right"
label-width="120px"
ref="ruleForm"
class="config-form"
>
<el-row class="rowPadding">
<el-col :span="24">
<el-col :span="10">
<el-form-item label="原航班号">
<el-input
type="textarea"
v-model="queryForm.originOfFlightNo"
size="medium"
maxlength="1000"
show-word-limit
:rows="4"
placeholder="原航班号之间用分号分隔，例：LP001;LP002"
@blur="blurEvent"
:disabled="!getRouter"
></el-input>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="">
<el-col :span="4" style="text-align: end; width: 9%">
<span
style="
width: 10%;
margin-right: 10px;
font-size: 14px;
color: #606266;
font-weight: 700;
"
>服务种类</span
>
</el-col>
<el-col :span="4" style="text-align: end; width: 19%">
<el-radio-group
v-model="isServiceCode"
@change="changeIsServiceCode"
:disabled="!getRouter"
style="text-align: left"
>
<el-radio label="1">包含ServiceCode</el-radio>
<el-radio label="2">不包含ServiceCode</el-radio>
</el-radio-group>
</el-col>
<el-col :span="16" v-if="isServiceCode == '1'">
<el-input
type="textarea"
v-model="queryForm.includeServiceType"
size="medium"
maxlength="1000"
show-word-limit
:rows="4"
placeholder="请输入ServiceCode"
@blur="serviceCodeBlur"
:disabled="!getRouter"
></el-input>
</el-col>
<el-col :span="16" v-else>
<el-input
type="textarea"
v-model="queryForm.notIncludeServiceType"
size="medium"
maxlength="1000"
show-word-limit
:rows="4"
placeholder="请输入ServiceCode"
@blur="serviceCodeBlur"
:disabled="!getRouter"
></el-input>
</el-col>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24">
<el-col :span="10">
<el-form-item label="URSA包含">
<el-input
type="textarea"
v-model="queryForm.includeUrsa"
size="medium"
maxlength="1000"
show-word-limit
:rows="4"
placeholder="URSA之间用分号分隔，例：F1_;F2_;F3_;P_"
:disabled="!getRouter"
@blur="includeUrsa"
></el-input>
<span v-text="ursaError" class="el-form-item__error"></span>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="">
<el-col :span="8" style="text-align: end; width: 28%"
><span
class="ursa-label"
style="
margin-right: 10px;
font-size: 14px;
color: #606266;
font-weight: 700;
"
>URSA不包含</span
></el-col
>
<el-col :span="16">
<el-input
type="textarea"
v-model="queryForm.notIncludeUrsa"
size="medium"
maxlength="1000"
show-word-limit
:rows="4"
placeholder="URSA之间用分号分隔，例：F1;F2;F3;P"
:disabled="!getRouter"
@blur="notIncludeUrsa"
></el-input>
<span
class="el-form-item__error"
v-text="notUrsaError"
style="width: 50%; margin-left: 28%"
></span>
</el-col>
</el-form-item>
</el-col>
</el-col>
<el-col :span="10">
<el-form-item label="申报类别">
<el-card shadow="never">
<el-checkbox-group
v-model="checkboxClassType"
@change="changeCheckboxCargoType"
style="display: flex"
v-if="cargoType.length"
:disabled="!getRouter"
>
<el-checkbox
v-for="item in cargoType"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips :content="item.chineseName" :refName="item.code">
</Tooltips>
</el-checkbox>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="2">
<el-form-item label="单品名">
<el-checkbox
v-model="queryForm.multiHs"
:disabled="!getRouter"
></el-checkbox>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" class="custom-label">
<span class="custom-label-title">件数</span>
<el-col :span="10">
<el-input
v-model.trim="queryForm.minNumOfPieces"
placeholder="最少件数"
@blur="inputBlurMinPieces($event)"
:disabled="!getRouter"
></el-input>
<span ref="minNumOfPieces" class="el-form-item__error"></span>
</el-col>
<el-col style="text-align: center" :span="1">-</el-col>
<el-col :span="10">
<el-input
v-model.trim="queryForm.maxNumOfPieces"
placeholder="最多件数"
@blur="inputBlurMaxPieces($event)"
:disabled="!getRouter"
></el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" class="custom-label">
<span class="custom-label-title">重量(KG)</span>
<el-col :span="10">
<el-input
v-model.trim="queryForm.minWeight"
placeholder="最小重量"
@blur="inputBlurMinWeight($event)"
:disabled="!getRouter"
></el-input>
<span ref="minWeight" class="el-form-item__error"></span>
</el-col>
<el-col style="text-align: center" :span="1">-</el-col>
<el-col :span="10">
<el-input
v-model.trim="queryForm.maxWeight"
placeholder="最大重量"
@blur="inputBlurMaxWeight($event)"
:disabled="!getRouter"
></el-input>
</el-col>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24">
<el-col :span="2">
<el-form-item label="申报价值"></el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" class="custom-label">
<span class="custom-label-title">人民币</span>
<el-col :span="10">
<el-input
v-model.trim="queryForm.minCustomVal"
placeholder="最小申报价值"
@blur="inputCNYBlurMin($event, 'minCNYCustomVal')"
:disabled="!getRouter"
></el-input>
<span
ref="minCNYCustomVal"
class="el-form-item__error"
></span>
</el-col>
<el-col style="text-align: center" :span="1">-</el-col>
<el-col :span="10">
<el-input
v-model.trim="queryForm.maxCustomVal"
placeholder="最大申报价值"
@blur="inputCNYBlurMax($event, 'maxCNYCustomVal')"
:disabled="!getRouter"
></el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" class="custom-label">
<span class="custom-label-title">美元</span>
<el-col :span="10">
<el-input
v-model.trim="queryForm.minUsdCustomVal"
placeholder="最小申报价值"
@blur="inputSUDBlurMin($event, 'minSUDCustomVal')"
:disabled="!getRouter"
></el-input>
<span
ref="minSUDCustomVal"
class="el-form-item__error"
></span>
</el-col>
<el-col style="text-align: center" :span="1">-</el-col>
<el-col :span="10">
<el-input
v-model.trim="queryForm.maxUsdCustomVal"
placeholder="最大申报价值"
@blur="inputSUDBlurMax($event, 'maxSUDCustomVal')"
:disabled="!getRouter"
></el-input>
</el-col>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24" v-show="getRouter">
<el-form-item label="">
<el-button type="primary" @click="submitForm('ruleForm')">{{
getRouter
}}</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import YlElInputNumber from "../components/input-number"
import { inputBlurValidate } from "@/utils/mixins";
import { tableAttr } from "./tableConfig";
import {
allDictData, // 获取全部字典
queryRouteByFltNo, // 航线查询
} from "@/api/destinationFlight";
import {
add, // ET86新增
findEtesRuleById, // ET86详情
update, // ET86编辑
} from "@/api/et86";
import indexMixins from "./mixins";
export default {
name: "edit",
components: {
YlForm,
YlTable,
YlElInputNumber
},
mixins: [indexMixins, inputBlurValidate],
data() {
return {
queryForm: {
// ET86配舱航班顺位维度
// 表单参数
id: "", // 维度ID
originOfFlightNo: "", // 原航班号
includeServiceType: "", // 服务种类包含
notIncludeServiceType: "", // 服务种类不包含
includeUrsa: "", // URSA包含
notIncludeUrsa: "", // URSA不包含
declarationCategory: "", // 已勾选申报类别的数据
multiHs: false, // 单品名
minWeight: "", // 最小重量
maxWeight: "",
minNumOfPieces: "", // 最小件数
maxNumOfPieces: "",
currencyCd: "CNY", // 人民币种
currencyCdUsd: "SUD", // 美元币种
minCustomVal: "", // 人民币最小申报值
maxCustomVal: "", // 人民币最大申报值
minUsdCustomVal: "", // 美元最小申报值
maxUsdCustomVal: "", // 美元最大申报值
},
tableAttr: tableAttr, // table配置项
tableData: [], // ET86配舱航班顺位
currentIndex: 0, // 记录当前table 列的索引位置
id: 1, // ET86配舱航班顺位ID
isServiceCode: "1", // 服务种类
serviceCode: "", // 服务种类内容
cargoType: [], // 申报类别调用接口获取所有的申报类别
checkboxCargoType: [], // 已勾选申报类别的数据
checkboxClassType: [], // 申报类别
serviceCodeData: [], // 【服务种类】调用接口获取服务种类所有的serviceCode
minCNYCustomVal: "", // 人民币最小申报值
maxCNYCustomVal: "", //
minSUDCustomVal: "", // 美元最小申报值
maxSUDCustomVal: "", //
};
},
computed: {
// 获取路由参数
getRouter() {
if (this.$route.query.name == "add") {
return "保存";
} else if (this.$route.query.name == "edit") {
return "修改";
} else {
return false;
}
},
},
created() {
this.getAllDictData(); // 获取全部字典
if (this.$route.query.name == "view") {
tableAttr.isDragSort = false;
} else {
tableAttr.isDragSort = true;
}
if (this.$route.query.name == "view" || this.$route.query.name == "edit") {
this.queryFindEtesRuleById(this.$route.query); // ET86详情
} else {
// 新增时默认一条数据
this.tableData = [
{
id: this.id,
flightNo: "", // 航班号
calculateDay: "", // 航班日期//+1 -1
flightRoute: "", // 航线
routeList: [], // 航线列表
permitOverweight: "N" ? false : true, // 爆仓是否继续配舱 Y-是，N-否
priority: this.id, // 优先等级
ruleId: "", // 维度ID
},
];
}
},
methods: {
// ET86新增
postAdd(params) {
add(params)
.then((res) => {
const { code, msg } = res;
if (code == 200) {
this.msgSuccess(msg || "创建成功!");
this.closeTagMenu(this.$route);
} else {
this.msgError(msg || "创建失败!");
}
})
.catch(() => {});
},
// ET86详情
queryFindEtesRuleById({ id, status, name }) {
findEtesRuleById({ id: id, status: status })
.then((res) => {
const { code, data, msg } = res;
if (code == 200) {
data.list.flightRankDtoList.map((item) => {
if (name == "view") {
// 跳转页面传过来的字段值等于view展示查看
item.edit = true;
} else {
item.edit = false;
}
// 爆仓是否继续配舱
if (item.permitOverweight == "N") {
item.permitOverweight = false;
} else {
item.permitOverweight = true;
}
});
// ET86配舱航班顺位列表
this.tableData = data.list.flightRankDtoList;
Object.keys(data.list.fltRuleDto).map((key) => {
if (key == "multiHs") {
// N为单品名，Y为多品名
if (data.list.fltRuleDto[key] == "N") {
data.list.fltRuleDto[key] = true;
} else {
data.list.fltRuleDto[key] = false;
}
}
// 将详情获取为null的字段设置为空字符串，目的是为了判断的时候少些为null的判断,保持空数据同一的判断条件;
if (data.list.fltRuleDto[key] == null) {
data.list.fltRuleDto[key] = "";
}
});
// 申报类别详情转化成数组赋值给申报类别勾选框作为回显展示数据
if (data.list.fltRuleDto.declarationCategory) {
this.checkboxClassType =
data.list.fltRuleDto.declarationCategory.split(";");
} else {
this.checkboxClassType = [];
}
// 服务种类
if (data.list.fltRuleDto.includeServiceType) {
this.isServiceCode = "1";
} else if (data.list.fltRuleDto.notIncludeServiceType) {
this.isServiceCode = "2";
} else {
this.isServiceCode = "1";
}
this.queryForm = data.list.fltRuleDto; // ET86配舱航班顺位维度
} else {
this.msgError(msg || "获取查看失败");
}
})
.catch(() => {});
},
// ET86编辑
postUpdate(parmas) {
update(parmas)
.then((res) => {
const { code, msg } = res;
if (code == 200) {
this.msgSuccess(msg || "修改成功!");
this.closeTagMenu(this.$route);
} else {
this.msgError(msg || "修改失败!");
}
})
.catch(() => {});
},
// 获取所有数据字典
getAllDictData() {
allDictData()
.then((res) => {
if (res.code != 200) {
this.msgError(res.msg);
return;
}
this.cargoType = res.data.cargoType; // 申报类别
if (res.data.serviceCode.length) {
this.getObj(res.data);
}
})
.catch(() => {});
},
// 航线查询
getQueryRouteByFltNo(item) {
this.tableAttr.loadingTable = true;
this.tableData[this.currentIndex].flightRoute;
queryRouteByFltNo(item)
.then((res) => {
this.tableAttr.loadingTable = false;
if (res.code == 200) {
const list = res.data.list;
if (list.length) {
let isEtesRoute = list.filter((item) => item.isEtesRoute == "Y"); // 过滤普通航线
if (isEtesRoute.length == 0) {
this.msgError("该航班下的航线均为普通航线");
}
this.tableData[this.currentIndex].routeList = isEtesRoute;
this.$set(this.tableData, this.currentIndex, {
...this.tableData[this.currentIndex],
});
} else {
this.msgError("暂无航线");
this.tableData[this.currentIndex].routeList = [];
this.tableData[this.currentIndex].flightRoute = "";
}
}
})
.catch(() => {});
},
// 航班号input 聚焦事件
inputFlightNoFocus({ $index }) {
this.currentIndex = $index;
},
// 失焦查询
blurSearch() {
// 转大写字母
this.tableData[this.currentIndex].flightNo = this.upCase(
this.tableData[this.currentIndex].flightNo
);
// 筛选重复的航班：【重复规则】航班号 + 加减天数 + 航线有同样的就认为是重复
let repeat = this.tableData.filter(
(item) =>
item.flightNo == this.tableData[this.currentIndex].flightNo &&
item.calculateDay == this.tableData[this.currentIndex].calculateDay &&
item.flightRoute == this.tableData[this.currentIndex].flightRoute
);
let flightNo = repeat.every((item) => item.flightNo.length == 0);
// 出现重复的是不是有航班号
if (flightNo) {
this.msgError("请输入航班号");
return;
}
// 出现重复的返回
if (repeat.length > 1) {
this.msgError("航班顺位已重复");
return;
}
let params = {
fltNo: this.tableData[this.currentIndex].flightNo,
};
// 航班号输入框失焦时判断有没有航班号，有航班号调用航线查询
if (params.fltNo) {
this.getQueryRouteByFltNo(params); // 航线查询
} else {
this.tableData[this.currentIndex].flightRoute = "";
this.tableData[this.currentIndex].routeList = [];
this.msgError("请输入航班号");
}
},
// 航线Select下拉框出现/隐藏时触发事件
visibleChangeRoute(e, { $index, row }) {
this.currentIndex = $index;
let params = {
fltNo: row.flightNo,
};
// 出现下拉框时触发
if (e) {
// 航线查询
this.getQueryRouteByFltNo(params);
}
},
// 添加ET86配舱航班顺位
addBtn(item) {
this.id++;
this.tableData.unshift({
id: this.id,
flightNo: "", // 航班号
calculateDay: "", // 航班日期//+1 -1
flightRoute: "", // 航线
routeList: [], // 航线列表
permitOverweight: "N" ? false : true, // 爆仓是否继续配舱 Y-是，N-否
priority: this.id, // 优先等级
ruleId: "", // 维度ID
});
},
// 是否爆仓
changeCheck({ $index, row }) {
this.tableData.map((item, i) => {
if ($index !== i) {
item.permitOverweight = false;
}
});
},
// 删除
deleBtn(item, $index) {
console.log("删除：", item, $index);
this.tableData.splice($index, 1);
},
// 类别
changeCheckboxCargoType(arr) {
let include = this.cargoType.filter((item) =>
arr.some((val) => val == item.chineseName)
); // 查询已被勾选的类别
this.checkboxCargoType = include; // 已勾选申报类别的数据
this.queryForm.declarationCategory = arr.join(";");
},
// 失焦事件
blurEvent() {
this.queryForm.originOfFlightNo = this.upCase(
this.queryForm.originOfFlightNo
);
},
// 表单提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid && this.validateForm) {
this.tableData.map((item, i) => {
item.priority = ++i;
});
// 爆仓是否继续配舱
const newtTableData = JSON.parse(JSON.stringify(this.tableData));
const tableData = newtTableData;
tableData.filter((item) => {
if (item.permitOverweight == false) {
item.permitOverweight = "N";
} else {
item.permitOverweight = "Y";
}
});
// 校验ET86配舱航班顺位维度
let fltNo = this.tableData.some((item) => item.flightNo == ""); // 通过遍历判断航班顺位列表有没有填写的航班号
let fltNoRoute = this.tableData.some(
(item) => item.flightRoute == ""
); // 通过遍历判断航班顺位列表有没有填写的航线
if (fltNo) {
this.msgError("航班号不可为空");
return;
}
if (fltNoRoute) {
this.msgError("航线不可为空");
return;
}
if (this.queryForm.originOfFlightNo.length == 0) {
this.msgError("原航班号不可为空");
return;
}
// 服务种类包含不包含二选一
if (this.isServiceCode == "1") {
this.queryForm.notIncludeServiceType = "";
} else {
this.queryForm.includeServiceType = "";
}
let parmas = {
flightRankDtoList: tableData, // ET86配舱航班顺位
fltRuleDto: this.queryForm,
};
let queryParmas = JSON.parse(JSON.stringify(parmas));
// 筛选重复的航班
let repeat = tableData.filter(
(item) =>
item.flightNo == tableData[this.currentIndex].flightNo &&
item.calculateDay == tableData[this.currentIndex].calculateDay &&
item.flightRoute == tableData[this.currentIndex].flightRoute
);
if (tableData.length > 100) {
this.msgError("最多添加100条，请删除后再添加");
return;
}
if (repeat.length > 1) {
this.msgError("ET86配舱航班顺位中存在重复设置");
return;
}
queryParmas.fltRuleDto.multiHs = this.queryForm.multiHs ? "N" : "Y"; // N为单品名，Y为多品名
if (this.validateForm && this.$route.query.name == "add") {
this.postAdd(queryParmas); // 新增
} else {
if (this.validateForm) {
queryParmas.flightRankDtoList.map((item) => {
if (item.hasOwnProperty("routeList")) {
delete item.routeList;
}
});
this.postUpdate(queryParmas); // 修改
}
}
} else {
console.log("error submit!!");
return false;
}
});
this.$emit("handleSearch");
},
isActive(route) {
return route.path === this.$route.path;
},
toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0];
if (latestView) {
this.$router.replace(latestView.fullPath);
} else {
if (view.name === "Dashboard") {
this.$router.replace({ path: "/redirect" + view.fullPath });
} else {
this.$router.push("/");
}
}
},
// 关闭当前标签菜单
closeTagMenu(view) {
this.$store
.dispatch("tagsView/delView", view)
.then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view);
}
});
},
},
};
</script>
<style lang="scss" scoped>
.rowPadding {
padding: 10px 0;
font-size: 12px;
}
::v-deep .custom-label {
.el-form-item__content {
display: flex;
margin-left: 0 !important;
span {
font-size: 14px;
color: #606266;
font-weight: 700;
float: right;
margin-right: 10px;
text-align: end;
}
.custom-label-title {
width: 120px;
}
.el-input__suffix {
right: -15px !important;
}
.el-form-item__error {
color: #ff4949;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
font-weight: 500;
width: 100% !important;
}
}
}
</style>
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);
},
},
];