<template>
|
<div class="page-list-container">
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes" :action-field="actionField" @on-delete-after="onDeleteAfter">
|
<template slot="action-column-slot" slot-scope="{row, col}">
|
<template>
|
<el-button type="text" size="mini" @click="actualTakeOffTime(row.voyageCode)">实飞ATD</el-button>
|
<el-button type="text" size="mini" @click="actualLandingTime(row.voyageCode)">实落ATA</el-button>
|
</template>
|
</template>
|
<!-- 字段插槽 -->
|
<template slot="common-column-slot" slot-scope="{ row, col }">
|
<template v-if="col.prop == 'voyageStatus'">
|
<el-tag :color="setStatusBgColor(row[col.prop])" :style="setStatusColor(row[col.prop])">
|
{{ row[col.prop] }}
|
</el-tag>
|
</template>
|
<template v-else-if="col.prop==dataOptions.linkColumn">
|
<el-link type="primary" @click.native="()=>{linkEditor(row[dataOptions.idField]);}">{{ row[col.prop] }}</el-link>
|
</template>
|
<template v-else-if="col.dropdown_Id>0">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</template>
|
</template>
|
</yrt-data-list>
|
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :visible.sync="editorOptions.config.visible" :on-save-before="onSaveBefore" :auth-nodes="authNodes" @on-add-load-after="onEditLoadAfter" @on-edit-load-after="onEditLoadAfter">
|
<div slot="blank-plateCodes" class="tag-container">
|
<el-tag v-for="(plateCode, index) in plateCodes" :key="index" :disable-transitions="false" closable @close="handleClose()">
|
{{ plateCode }}
|
</el-tag>
|
<el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
|
</el-input>
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加托盘号</el-button>
|
</div>
|
</yrt-editor>
|
|
<el-dialog :visible.sync="dialogFormVisible" title="" width="500px">
|
<el-form :model="form" label-width="160px">
|
<el-form-item label="主单号:">
|
<el-input v-model="form.voyageCode" autocomplete="off" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="实际起飞时间(ATD):">
|
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" class="w-200">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
<el-button type="primary" @click="editSave">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog :visible.sync="dialogLandingTime" width="500px">
|
<el-form :model="form" label-width="160px">
|
<el-form-item label="主单号:">
|
<el-input v-model="form.voyageCode" autocomplete="off" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="实际落地时间(ATA):">
|
<el-date-picker v-model="landingTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" class="w-200">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogLandingTime = false">取 消</el-button>
|
<el-button type="primary" @click="EditlogLandingTimesave">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
|
export default {
|
name: "tms-way-voyage",
|
components: {},
|
mixins: [baseLayout],
|
data() {
|
return {
|
plateCodes: [],
|
inputVisible: false,
|
inputValue: "",
|
dialogFormVisible: false,
|
dialogLandingTime: false,
|
value1: "",
|
landingTime: "",
|
form: {
|
voyageCode: "",
|
region: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
type: [],
|
resource: "",
|
desc: ""
|
},
|
// 状态值
|
statusValueList: [
|
{
|
status: "已发运",
|
bgColor: "#0099cc",
|
color: "#fff"
|
},
|
{
|
status: "清关中",
|
bgColor: "#cc99ff",
|
color: "#fff"
|
},
|
{
|
status: "新建",
|
bgColor: "#ffcc66",
|
color: "#fff"
|
}
|
],
|
actionField: {
|
prop: "_action",
|
label: "操作",
|
width: 130,
|
headerAlign: "center",
|
align: "center",
|
hidden: false
|
}
|
};
|
},
|
methods: {
|
// 状态背景颜色
|
setStatusBgColor(status) {
|
var colorItem = this.statusValueList.find(item => {
|
return item.status === status;
|
});
|
var bgColor = "#ffffff";
|
if (colorItem) bgColor = colorItem.bgColor;
|
|
return bgColor;
|
},
|
// 状态字体颜色
|
setStatusColor(status) {
|
var colorItem = this.statusValueList.find(item => {
|
return item.status === status;
|
});
|
var color = "#888";
|
if (colorItem) color = colorItem.color;
|
|
return {
|
border: 0,
|
color: color
|
};
|
},
|
// 列表页面按钮点击事件
|
buttonClick(authNode) {
|
switch (authNode) {
|
case "send":
|
// 航班发运
|
this.send();
|
return false;
|
case "clearance":
|
// 清关
|
this.clearance();
|
return false;
|
}
|
},
|
// 保存前事件
|
onSaveBefore(formData) {
|
var editorRef = this.editor;
|
editorRef.changeValue("plateCodes", this.plateCodes.join(","));
|
if (formData.voyageCode) {
|
if (formData.voyageCode.length !== 12) {
|
this.$message.error("主单号格式不正确");
|
return false;
|
}
|
// 前7位减第8位后除7余数为0就是正确的主单号
|
var voyayestr = formData.voyageCode.split("-")[1];
|
var voyage = parseInt(voyayestr.substr(0, 7)); // 截取从第0个开始往后数7位之间的字符
|
var last = parseInt(voyayestr.substr(7, 1));
|
if ((voyage - last) % 7) {
|
this.$message.error("主单号不正确");
|
return false;
|
}
|
}
|
},
|
// 编辑加载数据后事件
|
onEditLoadAfter(formData) {
|
if (formData.plateCodes) {
|
this.plateCodes = formData.plateCodes.split(",");
|
} else {
|
this.plateCodes = [];
|
}
|
},
|
handleClose(tag) {
|
this.plateCodes.splice(this.plateCodes.indexOf(tag), 1);
|
},
|
|
showInput() {
|
this.inputVisible = true;
|
this.$nextTick(_ => {
|
this.$refs.saveTagInput.$refs.input.focus();
|
});
|
},
|
|
handleInputConfirm() {
|
const inputValue = this.inputValue;
|
var url = "/api/tms/voyage/checkPlateCode";
|
var params = {
|
voyageCode: inputValue
|
};
|
this.common.ajax(url, params, res => {
|
if (res.result) {
|
if (inputValue) {
|
this.plateCodes.push(inputValue);
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
this.inputVisible = false;
|
this.inputValue = "";
|
var editorRef = this.editor;
|
editorRef.changeValue("plateCodes", this.plateCodes.join(","));
|
});
|
},
|
// 实际起飞
|
actualTakeOffTime(voyageCode) {
|
this.$set(this.form, "voyageCode", voyageCode);
|
this.dialogFormVisible = true;
|
},
|
editSave() {
|
var voyageCode = this.form.voyageCode;
|
const actualTakeOffTime = this.value1;
|
const params = {
|
voyageCode: voyageCode,
|
actualTakeOffTime: actualTakeOffTime
|
};
|
const url = "/api/tms/voyage/upActualTakeOffTime";
|
const ref = this.dataList;
|
var callback = res => {
|
this.common.showMsg(res);
|
if (!res.result) {
|
this.$message.success(res.msg);
|
}
|
};
|
this.common.ajax(url, params, callback, ref);
|
this.dialogFormVisible = false;
|
ref.loadData();
|
},
|
// 实际落地
|
actualLandingTime(voyageCode) {
|
this.$set(this.form, "voyageCode", voyageCode);
|
this.dialogLandingTime = true;
|
},
|
// 实际落地保存
|
EditlogLandingTimesave() {
|
var voyageCode = this.form.voyageCode;
|
const actualLandingTime = this.landingTime;
|
const params = {
|
voyageCode: voyageCode,
|
actualLandingTime: actualLandingTime
|
};
|
const url = "/api/tms/voyage/upActualLandingTime";
|
const ref = this.dataList;
|
var callback = res => {
|
this.common.showMsg(res);
|
if (!res.result) {
|
this.$message.success(res.msg);
|
}
|
};
|
this.common.ajax(url, params, callback, ref);
|
this.dialogLandingTime = false;
|
ref.loadData();
|
},
|
// 航班发运
|
send() {
|
const selectIDs = this.dataListSelections.map((item, index, Array) => {
|
return item.voyage_Id;
|
});
|
if (!selectIDs.length) {
|
this.$message.error("至少选择一项");
|
return;
|
}
|
|
this.$confirm("此操作将确认为航班已发运, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
const url = "/api/tms/voyage/send";
|
const params = {
|
ids: selectIDs
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dataList.reload();
|
}
|
},
|
true
|
);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消"
|
});
|
});
|
},
|
// 清关中
|
clearance() {
|
const selectIDs = this.dataListSelections.map((item, index, Array) => {
|
return item.voyage_Id;
|
});
|
if (!selectIDs.length) {
|
this.$message.error("至少选择一项");
|
return;
|
}
|
|
this.$confirm("此操作将确认为清关中, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
const url = "/api/tms/voyage/Clearance";
|
const params = {
|
ids: selectIDs
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dataList.reload();
|
}
|
},
|
true
|
);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消"
|
});
|
});
|
},
|
// 删除数据后将运单中的航空主单号清空
|
onDeleteAfter(rows) {
|
const voyageCodes = [];
|
if (rows) {
|
rows.map(item => {
|
voyageCodes.push(item.voyageCode);
|
});
|
}
|
alert(voyageCodes);
|
const url = "/api/tms/voyage/deleteVoyageCode";
|
const ref = this.dataList;
|
const params = {
|
voyageCode: voyageCodes
|
};
|
var callback = res => {
|
this.common.showMsg(res);
|
if (!res.result) {
|
this.$message.success(res.msg);
|
}
|
};
|
this.common.ajax(url, params, callback, ref);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.page-list-container {
|
min-height: calc(100vh - 110px);
|
overflow: hidden;
|
position: relative;
|
}
|
|
.tag-container {
|
.el-tag + .el-tag {
|
margin-left: 10px;
|
}
|
.button-new-tag {
|
margin-left: 10px;
|
width: 130px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
.input-new-tag {
|
width: 130px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
}
|
|
@media screen and (max-height: 900px) {
|
.page-list-container {
|
min-height: 600px;
|
}
|
}
|
</style>
|
