1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<div>
<el-form ref="cusClearanceForm" :rules="rules" :model="cusClearanceObj" label-width="120px">
<!-- <el-form-item :label="$t('清关代理')">{{getClAgent('label')}}</el-form-item> -->
<el-form-item :label="$t('预计清关时间')" prop="clEstTime">
<el-date-picker type="datetime" :placeholder="$t('请选择日期')" v-model="cusClearanceObj.clEstTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item :label="$t('清关时间')" prop="clClearTime">
<el-date-picker type="datetime" :placeholder="$t('请选择日期')" v-model="cusClearanceObj.clClearTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
<p class="message-area" v-show="showMsg">{{$t('清关时间与预计时间不符，如有异常请登记')}}</p>
</el-form-item>
</el-form>
<el-row class="operate-button">
<el-button type="primary" @click="onSubmit(1)">{{$t('保存')}}</el-button>
<el-button type="success" @click="onSubmit(2)">{{$t('提交')}}</el-button>
<el-button @click="cancel">{{$t('关闭')}}</el-button>
<el-button type="primary" @click="exceptionReg" :disabled="!showMsg">{{$t('异常登记')}}</el-button>
</el-row>
<!-- 对话框 -->
<el-dialog custom-class="shipping-dialog" :title="$t('票异常')" :visible.sync="dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
<regError @closeDialog="dialogVisible = false" v-bind="$attrs" />
</el-dialog>
</div>
</template>
<script>
import regError from "../../regError";
import dayjs from "dayjs";
import { clearanceCreate } from "@/api/ecw/boxSea";
import { formatDateStr, serviceMsg } from "../utils";
/**
* 清关
*/
export default {
name: "cusClearance",
inheritAttrs: false,
components: {
regError,
},
data() {
return {
// 清关对象
cusClearanceObj: {},
// 校验
rules: {
clEstTime: [
{ required: true, message: this.$t("必填"), trigger: "change" },
],
clClearTime: [
{ required: true, message: this.$t("必填"), trigger: "change" },
],
},
// 弹窗配置
dialogVisible: false,
// 提示消息
showMsg: false,
};
},
created() {
const voName = this.$attrs.currNode.voName;
let oldData = { ...this.$attrs.shipmentObj[voName] };
oldData = formatDateStr(oldData, ["clEstTime"]);
oldData = formatDateStr(oldData, ["clClearTime"], "YYYY-MM-DD HH:mm:ss");
this.cusClearanceObj = oldData;
},
watch: {
// 预计清关时间
"cusClearanceObj.clEstTime"(val) {
this.compareDate(val, this.cusClearanceObj.clClearTime);
},
// 清关时间
"cusClearanceObj.clClearTime"(val) {
this.compareDate(this.cusClearanceObj.clEstTime, val);
},
},
methods: {
getClAgent(type) {
const agentId = this.$attrs.shipmentObj.agentInfo.agentId;
if (type === "label") {
const selected = this.$attrs.allSupplier.find(
(item) => item.id === agentId
);
return this.$l(selected, "company") ?? agentId;
}
return agentId;
},
// 时间比较
compareDate(clEstTime, clClearTime) {
this.showMsg = false;
let date1 = null,
date2 = null;
if (clEstTime) date1 = dayjs(clEstTime);
if (clClearTime) date2 = dayjs(clClearTime);
if (date1 && date2 && !date2.isSame(date1)) {
this.showMsg = true;
}
},
// 异常登记
exceptionReg() {
this.dialogVisible = true;
},
/** 提交 */
onSubmit(operateType) {
this.$refs["cusClearanceForm"].validate((valid) => {
if (valid) {
clearanceCreate({
...this.cusClearanceObj,
shipmentId: this.$attrs.shipmentObj.id,
clAgentId: this.getClAgent(),
operateType,
}).then((res) => {
serviceMsg(res, this).then(() => {
this.cancel("submit");
});
});
}
});
},
/** 取消 */
cancel(type) {
this.$emit("closeDialog", type);
},
},
};
</script>
<style lang="scss" scoped>
.message-area {
margin: 0;
color: red;
}
</style>