zhanbo.xu

feat: 新增PDD

1 +<template>
2 + <div class="entrySreach">
3 + <el-form
4 + class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
5 + ref="sreachForm"
6 + :model="sreachFormData"
7 + label-position="top"
8 + size="small"
9 + >
10 + <el-row class="row-border">
11 + <el-col :span="5">
12 + <Formitem label="提运单号" prop="billNo">
13 + <el-input
14 + type="text"
15 + class="inputShadow"
16 + id="inputInner--billNo"
17 + resize="none"
18 + v-model="sreachFormData.billNo"
19 + clearable
20 + placeholder=""
21 + ></el-input>
22 + </Formitem>
23 + </el-col>
24 + <el-col :span="5">
25 + <Formitem label="物流运单编号" prop="logisticsNo">
26 + <FormTextareaInput
27 + :formData="sreachFormData"
28 + dataKey="logisticsNo"
29 + @formChange="formChange"
30 + />
31 + </Formitem>
32 + </el-col>
33 +
34 + <el-col :span="5">
35 + <Formitem label="回执状态" prop="returnStatus">
36 + <el-select
37 + type="text"
38 + id="inputInner--returnStatus"
39 + v-model="sreachFormData.returnStatus"
40 + clearable
41 + placeholder=""
42 + >
43 + <el-option
44 + v-for="(item, index) in $store.getters.dict.RECEIPT_STATUS"
45 + :key="index"
46 + :label="item.itemChineseName"
47 + :value="item.itemValue"
48 + ></el-option>
49 + </el-select>
50 + </Formitem>
51 + </el-col>
52 + <el-col :span="5">
53 + <Formitem label="电子口岸编号" prop="preNo">
54 + <el-input
55 + type="text"
56 + class="inputShadow"
57 + id="inputInner--preNo"
58 + resize="none"
59 + v-model="sreachFormData.preNo"
60 + clearable
61 + placeholder=""
62 + ></el-input>
63 + </Formitem>
64 + </el-col>
65 + <el-col :span="2">
66 + <el-form-item class="textCenter">
67 + <el-button
68 + class="entrySreachButton"
69 + type="text"
70 + icon="el-icon-search"
71 + :loading="loadings.searchLoading"
72 + @click="search(0)"
73 + ></el-button>
74 + </el-form-item>
75 + </el-col>
76 + <el-col :span="2">
77 + <el-form-item class="textCenter">
78 + <el-button
79 + type="text"
80 + size="small"
81 + icon="el-icon-refresh"
82 + @click="clear"
83 + >
84 + 重置
85 + </el-button>
86 + </el-form-item>
87 + </el-col>
88 + </el-row>
89 + </el-form>
90 +
91 + <Table
92 + class="fedexDetialTable fedexSreachTable"
93 + ref="entryTable"
94 + :data="tableData"
95 + :headerData="headerData"
96 + :maxHeight="tableMaxheight"
97 + :border="true"
98 + :pagination="true"
99 + :order="false"
100 + :loading="loadings.searchLoading"
101 + :page="page.pageIndex"
102 + :totalCount="page.total"
103 + @sizeChange="sizeChange"
104 + @currentChange="currentChange"
105 + :selection="false"
106 + :selectFixed="false"
107 + :rowSelectDataType="false"
108 + >
109 + <template v-slot:returnStatus="scope">
110 + <TablePopover
111 + ref="returnStatusPopover"
112 + dataKey="returnStatus"
113 + :parentDom="$refs.entryTable"
114 + :receiptDataHead="receiptDataHead"
115 + :rowData="scope.row"
116 + :tableData="tableData"
117 + @popoverChange="popoverChange"
118 + @popoverClose="popoverClose"
119 + >
120 + <div slot="title">
121 + <span style="font-weight: 700; color: #515a6e">提运单号:</span
122 + >{{ scope.row.billNo }}
123 + </div>
124 + <div slot="buttonLabel">
125 + {{ scope.row.returnStatus }}
126 + </div>
127 + </TablePopover>
128 + </template>
129 + <template v-slot:billNo="scope">
130 + <el-button type="text" @click="view(scope.row)">{{
131 + scope.row.billNo
132 + }}</el-button>
133 + </template>
134 + </Table>
135 + </div>
136 +</template>
137 +
138 +<script>
139 +import {
140 + getExportArrivalInList,
141 + getExportArrivalInReceipt,
142 +} from "@/api/arrivalList-api";
143 +export default {
144 + name: "ArrivalList",
145 + components: {},
146 + data() {
147 + return {
148 + sreachFormData: {
149 + logisticsNo: [],
150 + billNo: "",
151 + returnStatus: "",
152 + preNo: "",
153 + },
154 + page: {
155 + pageIndex: 1,
156 + pageSize: 20,
157 + total: 0,
158 + },
159 + tableData: [],
160 + receiptDataHead: [
161 + {
162 + name: "回执状态",
163 + value: "returnStatus",
164 + width: "120",
165 + align: "left",
166 + },
167 + {
168 + name: "状态时间",
169 + value: "returnTime",
170 + width: "",
171 + align: "left",
172 + },
173 + {
174 + name: "回执描述",
175 + value: "returnInfo",
176 + width: "",
177 + align: "left",
178 + },
179 + ],
180 + headerData: [
181 + {
182 + name: "回执状态",
183 + value: "returnStatus",
184 + width: "",
185 + align: "left",
186 + slot: true,
187 + },
188 + {
189 + name: "提运单号",
190 + value: "billNo",
191 + width: "",
192 + align: "left",
193 + slot: true,
194 + },
195 + {
196 + name: "物流运单编号",
197 + value: "logisticsNo",
198 + width: "",
199 + align: "left",
200 + },
201 + {
202 + name: "电商企业代码",
203 + value: "ebccode",
204 + width: "",
205 + align: "left",
206 + },
207 + {
208 + name: "电子口岸编号",
209 + value: "preNo",
210 + width: "",
211 + align: "left",
212 + },
213 + {
214 + name: "监管场所经营人代码",
215 + value: "operatorCode",
216 + width: "",
217 + align: "left",
218 + },
219 + {
220 + name: "监管场所经营人名称",
221 + value: "operatorName",
222 + width: "",
223 + align: "left",
224 + },
225 + {
226 + name: "监管场所代码",
227 + value: "loctNo",
228 + width: "",
229 + align: "left",
230 + },
231 + {
232 + name: "创建时间",
233 + value: "createTime",
234 + width: "",
235 + align: "left",
236 + },
237 + ],
238 + loadings: {
239 + searchLoading: false,
240 + },
241 + tableMaxheight: null,
242 + originalLogisticsNo: "", // 用于保存原始的 logisticsNo 字符串
243 + };
244 + },
245 + created() {
246 + this.search(0);
247 + },
248 + mounted() {
249 + this.tableMaxheight = window.innerHeight - 300;
250 + },
251 + methods: {
252 + popoverClose(val) {
253 + this.tableData.forEach((item) => {
254 + item.returnStatusPopoverType = false;
255 + item.popoverData = [];
256 + });
257 + this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
258 + "auto";
259 + },
260 + popoverChange(val) {
261 + console.log(val);
262 + this.tableData = val.tableData;
263 + this.receiptApi(val.data.copNo, val.status)
264 + .then((res) => {
265 + val.tableData.forEach((item) => {
266 + if (item.declareId == val.data.declareId) {
267 + item.popoverData = res;
268 + }
269 + });
270 + this.tableData = val.tableData;
271 + })
272 + .finally(() => {
273 + this.$nextTick(() => {
274 + this.$store.dispatch("setLoadingState", false);
275 + this.$refs.returnStatusPopover.tableLoading = false;
276 + });
277 + });
278 + },
279 + //查询回执
280 + receiptApi(id) {
281 + return new Promise((resolve, reject) => {
282 + let obj = { copNo: id };
283 + getExportArrivalInReceipt(obj)
284 + .then((res) => {
285 + if (res.code === "200") {
286 + resolve(res.data);
287 + } else {
288 + reject();
289 + }
290 + })
291 + .catch((err) => {
292 + console.log(err);
293 + reject();
294 + });
295 + });
296 + },
297 + //查询详情
298 + view(val) {
299 + this.$router.push({
300 + name: "ArrivalListDetail",
301 + params: { data: val },
302 + });
303 + },
304 + formChange(val) {
305 + this.sreachFormData = val;
306 + this.originalLogisticsNo = val.logisticsNo; // 保存原始的 logisticsNo 字符串
307 + },
308 + // 清空
309 + clear() {
310 + this.sreachFormData = {
311 + ogisticsNo: [],
312 + billNo: "",
313 + returnStatus: "",
314 + preNo: "",
315 + };
316 + this.originalLogisticsNo = "";
317 + // this.search(0);
318 + },
319 + //查询
320 + search(val) {
321 + this.loadings.searchLoading = true;
322 + if (val == 0) {
323 + this.page.pageIndex = 1;
324 + }
325 + let obj = { ...this.sreachFormData }; // 使用对象展开运算符复制 sreachFormData
326 + obj.pageIndex = this.page.pageIndex;
327 + obj.pageSize = this.page.pageSize;
328 + obj.logisticsNo = this.originalLogisticsNo;
329 + if (obj.logisticsNo != null && obj.logisticsNo != "") {
330 + obj.logisticsNo = obj.logisticsNo.split("\n");
331 + } else {
332 + obj.logisticsNo = [];
333 + }
334 +
335 + getExportArrivalInList(obj)
336 + .then((res) => {
337 + if (res.code === "200") {
338 + this.tableData = res.data.value;
339 + this.page.total = res.data.totalItems;
340 + this.tableData.forEach((item, idx) => {
341 + item.index = idx;
342 + });
343 + } else {
344 + this.alertWarningMsg(res.message);
345 + }
346 + this.loadings.searchLoading = false;
347 + })
348 + .catch((err) => {
349 + console.log(err);
350 + this.loadings.searchLoading = false;
351 + });
352 + },
353 +
354 + //分页
355 + currentChange(val) {
356 + this.page.pageIndex = val.page;
357 + this.search(1);
358 + },
359 + sizeChange(val) {
360 + this.page.pageSize = val;
361 + this.search(1);
362 + },
363 + input() {
364 + this.$forceUpdate();
365 + },
366 + },
367 +};
368 +</script>
369 +
370 +<style scoped lang="scss">
371 +@import "@/assets/styles/variables.scss";
372 +.entrySreach {
373 + height: 100%;
374 + background-color: $menuLightBg;
375 +
376 + .entrySreachButton {
377 + display: inline-block;
378 + font-size: 20px;
379 + color: $fedexButton !important;
380 + }
381 +
382 + .optionButton {
383 + padding: 10px;
384 + text-align: left;
385 +
386 + .el-button {
387 + color: $fedexButton;
388 + border-color: $fedexButton !important;
389 +
390 + svg {
391 + display: inline-block;
392 + margin-right: 5px;
393 + fill: $fedexButton;
394 + }
395 + }
396 +
397 + .entrySaveButton:hover,
398 + .entrySaveButton:focus {
399 + color: $menuLightBg !important;
400 + background-color: $fedexButton !important;
401 + }
402 + }
403 +}
404 +
405 +.texttareaTip {
406 + position: absolute;
407 + top: 52%;
408 + right: 20px;
409 + transform: translate(0, -50%);
410 + z-index: 10;
411 +}
412 +</style>