Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
ed67e897 1 parent 9eec3b4d

modify

Inline Side-by-side
Showing 1 changed file with 0 additions and 663 deletions
<template>
<div ref="routeInfo" class="route-container">
<el-collapse
value="1"
accordion
v-model="activeNames"
@change="collapseChange"
v-loading="loading"
>
<div
class="collapse-item-header"
v-for="(item, index) in routesInfo"
:key="item.route || item.flightRoute"
>
<el-collapse-item :name="index" v-if="showFlightRoute(item)">
<!-- 航线名 -->
<template slot="title">
<strong>{{ item.route || item.flightRoute }}</strong>
</template>
<!-- 航线设置信息 -->
<div class="route-info info-item">
<el-card class="route-info-card">
<!-- 有数据时 -->
<section v-if="item.config || item.flightRoute">
<div slot="header" class="route-config-header">
<el-button
type="primary"
size="mini"
:disabled="pageName || item.status == '3' || status"
:loading="item.loading"
@click="saveSubmit(item, index)"
>保 存</el-button
>
<el-button
v-if="showBtnRule(item)"
type="primary"
size="mini"
icon="el-icon-video-pause"
:loading="item.loading"
:disabled="pageName || status"
@click="onOffSubmit(item, index)"
>{{ item.status | statusBtn }}</el-button
>
<el-button
v-if="showBtnRule(item)"
type="danger"
size="mini"
icon="el-icon-delete"
:disabled="pageName || item.status !== '3' || status"
:loading="item.loading"
@click="deleteSubmit(item, index)"
>删 除</el-button
>
<span class="flight-route-title">
{{ item.ruleDate ? "日期级别规则" : "普通规则" }}</span
>
</div>
<el-divider></el-divider>
<div class="route-config-info">
<el-form label-position="right" label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item label="始发站">
<el-col :span="2">
<el-radio-group
v-model="item.isLocation"
@change="changeLocation"
:disabled="pageName || status"
>
<el-radio label="1">包含始发站</el-radio>
<el-radio label="2">不包含始发站</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10">
<el-input
v-if="item.isLocation == '1'"
:disabled="pageName || status"
type="textarea"
v-model="item.location"
:rows="4"
placeholder="始发站之间用回车符分隔"
style="width: 500px"
>
</el-input>
<el-input
v-else
:disabled="pageName || status"
type="textarea"
v-model="item.notLocation"
:rows="4"
placeholder="始发站之间用回车符分隔"
style="width: 500px"
>
</el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="目的站">
<el-col :span="2">
<el-radio-group
:disabled="pageName || status"
v-model="item.isDestinationSite"
@change="changeDestinationSite"
>
<el-radio label="1">包含目的站</el-radio>
<el-radio label="2">不包含目的站</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10">
<el-input
v-if="item.isDestinationSite == '1'"
:disabled="pageName || status"
type="textarea"
v-model="item.destinationSite"
:rows="4"
placeholder="目的站之间用回车符分隔"
style="width: 500px"
>
</el-input>
<el-input
v-else
:disabled="pageName || status"
type="textarea"
v-model="item.notDestinationSite"
:rows="4"
placeholder="目的站之间用回车符分隔"
style="width: 500px"
>
</el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="10">
<el-form-item label="URSA包含">
<el-input
:disabled="pageName || status"
type="textarea"
v-model="item.includeUrsa"
:rows="4"
placeholder="URSA之间用分号分隔，例：F1_;F2_;F3_;P_"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="URSA不包含">
<el-input
:disabled="pageName || status"
type="textarea"
v-model="item.notIncludeUrsa"
:rows="4"
placeholder="URSA之间用分号分隔，例：F1;F2;F3;P"
>
</el-input>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24">
<el-col :span="9">
<el-form-item label="件数">
<el-col :span="10">
<el-input
:disabled="pageName || status"
class="numberInput"
v-model.trim="item.minNumOfPieces"
placeholder="最少件数"
>
</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
:disabled="pageName || status"
class="numberInput"
v-model.trim="item.maxNumOfPieces"
placeholder="最多件数"
>
</el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="重量(KG)">
<el-col :span="10">
<el-input
:disabled="pageName || status"
class="numberInput"
v-model.trim="item.minWeight"
placeholder="最小重量"
>
</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
:disabled="pageName || status"
class="numberInput"
v-model.trim="item.maxWeight"
placeholder="最大重量"
>
</el-input>
</el-col>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24">
<el-form-item label="申报类别">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.typeOfGoods"
@change="changeCargoType"
>
<el-row>
<el-col
v-for="item in cargoType"
:span="2"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="货物类型">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.cargoType"
@change="changeCargoStatus"
>
<el-row>
<el-col
:span="3"
v-for="item in cargoStatus"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
disabled
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="取件扫描号">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.puporpuxCode"
@change="changePuporpux"
>
<el-row>
<el-col
:span="2"
v-for="item in puporpux"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="Service Code">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.serviceCode"
@change="changeServiceCode"
>
<el-row>
<el-col
:span="2"
v-for="item in serviceCode"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="Handling Code">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.handlingCode"
@change="changeHandlingCode"
>
<el-row>
<el-col
:span="2"
v-for="item in handlingCode"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="Sub Category">
<el-card shadow="never" style="width: 95%">
<el-checkbox-group
:disabled="pageName || status"
v-model="item.subCategory"
@change="changeSubCategory"
>
<el-row>
<el-col
:span="2"
v-for="item in subCategory"
:key="item.id"
>
<el-checkbox
v-if="item.status === 1"
:label="item.chineseName"
:name="item.chineseName"
:key="item.code"
>
<Tooltips
:content="item.chineseName"
:refName="item.code"
>
</Tooltips>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-card>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</section>
<!-- 没有数据时 -->
<div class="no-data" v-else>
<el-empty description="未设置规则！">
<el-button
type="primary"
size="small"
:disabled="pageName"
@click="addRouteRule(index)"
>新增规则</el-button
>
</el-empty>
</div>
</el-card>
</div>
</el-collapse-item>
</div>
</el-collapse>
</div>
</template>
<script>
// import { inputBlurValidate } from "@/utils/mixins";
export default {
name: "routeInfo",
props: {
routesInfo: {
// 航线规则信息
type: Array,
default: () => [],
},
cargoType: {
// 申报类别
type: Array,
default: () => [],
},
cargoStatus: {
// 货物类型
type: Array,
default: () => [],
},
puporpux: {
// 取件扫描号
type: Array,
default: () => [],
},
serviceCode: {
// Service Code
type: Array,
default: () => [],
},
handlingCode: {
// Handling Code
type: Array,
default: () => [],
},
subCategory: {
// Sub Category
type: Array,
default: () => [],
},
status: {
// 标识是详情还是编辑
type: Boolean,
default: false,
},
loading: {
// 折叠面板
type: Boolean,
default: false,
},
},
// mixins: [inputBlurValidate],
data() {
return {
activeNames: [0], // 展开指定项
};
},
computed: {
pageName() {
if (
this.$route.query.pageName == "dmLog" ||
this.$route.query.pageName == "flightRandConfig" ||
this.$route.query.dataStatus == "view"
) {
return true;
}
},
},
filters: {
// 状态：0 无效，1 有效 2 配置中 3 停用
statusBtn(status) {
if (status == "0") {
return "无 效";
} else if (status == "1") {
return "停 用";
} else if (status == "3") {
return "开 启";
} else {
return "保 存";
}
},
},
mounted() {},
methods: {
// 航线回显逻辑：如果航线无效并且没有数据，则不展示该航线
showFlightRoute(item) {
if (this.$route.query.status == "3" && item.config == false) {
return false;
} else {
return true;
}
},
// 航线操作按钮回显逻辑
showBtnRule(item) {
/*
展示保存按钮、开启按钮/停用按钮、删除按钮逻辑如下：
1：当status状态等于3的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
2：当status状态等于1并且ruleDate字段有值的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
3：当从航班配置设置不查询日期的时候“查看&修改”的时候，
有效的航线也就是status状态等于1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
4：那么问题来了当从航班配置设置不查询日期的时候状态为1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
那么要么跳转的时候传过来一个参数；
5：如果是从【航班顺位】和【DM数据处理】跳转过来，那么航班航线设置维度只作为详情查看，禁用所有的操作。
所以展示不展示保存按钮、开启按钮/停用按钮、删除按钮毫无意义
*/
if (item.status == "3" || (item.status == "1" && item.ruleDate)) {
return true;
} else if (
item.status == "1" &&
this.$route.query.querySpecifyData == "2"
) {
// 航班配舱设置非日期级别情况下
return true;
} else if (item.status == "1" && this.$route.query.dataStatus == "add") {
// 添加航班配舱设置非日期级别情况下
return true;
} else if (item.status == "2") {
return true;
} else {
return false;
}
},
// 当前激活面板改变时触发
collapseChange(name) {
this.$emit("collapse", name);
},
// 始发站
changeLocation(val) {
this.$emit("location", val);
},
// 目的站
changeDestinationSite(val) {
this.$emit("destinationSite", val);
},
// 申报类别
changeCargoType(arr) {
this.$emit("cargoType", arr);
},
// 货物类型
changeCargoStatus(arr) {
this.$emit("cargoStatus", arr);
},
// 取件扫描号
changePuporpux(arr) {
this.$emit("puporpux", arr);
},
// Service Code
changeServiceCode(arr) {
this.$emit("serviceCode", arr);
},
// Handling Code
changeHandlingCode(arr) {
this.$emit("handlingCode", arr);
},
// Sub Category
changeSubCategory(arr) {
this.$emit("subCategory", arr);
},
// 新增规则
addRouteRule(index) {
this.$emit("addRlue", index);
},
// 保存
saveSubmit(item, index) {
this.$emit("save", item, index);
},
// 开启/暂停
onOffSubmit(item, index) {
this.$emit("onOff", item, index);
},
// 删除
deleteSubmit(item, index) {
this.$emit("delete", item, index);
},
},
};
</script>
<style lang="scss">
.collapse-item-header {
padding-left: 40px;
}
.el-collapse {
border: 0 !important;
}
.el-collapse-item__header {
background-color: #d9ecff !important;
border-bottom: 1px solid #ccc;
padding: 0 10px 0 30px;
}
.el-collapse-item__wrap {
border-bottom: 0 !important;
}
.el-collapse-item {
border-bottom: 1px solid #ccc;
}
.el-collapse-item:last-child {
}
.route-container {
strong {
font-size: 14px;
}
.route-info {
.route-info-card {
section {
padding: 12px 70px;
.route-config-header {
.flight-route-title {
margin-left: 8px;
}
}
}
.route-config-info {
}
}
}
}
.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>