Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
c4a5ca28 1 parent 200d8739

代码更新bug修复

Expand all
Inline Side-by-side
Showing 8 changed files with 612 additions and 14 deletions
1 +<template>
2 + <div class="Tables">
3 + <el-table
4 + :ref="tableName"
5 + :data="data"
6 + :headerData="headerData"
7 + :border="border"
8 + :stripe="stripe"
9 + :size="size"
10 + :fit="fit"
11 + :indent="indent"
12 + :show-header="showHeader"
13 + :height="height"
14 + :highlight-current-row="highlightCurrentRow"
15 + :label-position="labelPosition"
16 + :lazy="lazy"
17 + :downShiftKey="shiftKey"
18 + :limitStart="limitStart"
19 + v-loading="loading"
20 + @select="tableSelect"
21 + @select-all="tableSelectAll"
22 + @select-change="SelectChange"
23 + >
24 + <el-table-column
25 + v-for="(item, index) in newHeader"
26 + :type="item.type"
27 + :prop="item.value"
28 + :label="item.name"
29 + :width="item.width"
30 + :align="item.align"
31 + :fixed="item.fixed"
32 + :show-overflow-tooltip="showOverflowTooltip"
33 + :sortable="item.sorTable"
34 + header-align="center"
35 + :formatter="formatter"
36 + :slotHeader="slotHeader"
37 + :key="index"
38 + >
39 + <template v-if="item.slot" slot-scope="">
40 + <Item :dom="item.slot" @change="itemChange"></Item>
41 + </template>
42 + </el-table-column>
43 + <slot></slot>
44 + </el-table>
45 + <el-pagination
46 + :total="totalCount"
47 + :page-size.sync="limitSize"
48 + background
49 + class="tablePagination"
50 + @next-click="nextClick"
51 + @prev-click="prevClick"
52 + @current-change="currentChange"
53 + >
54 + </el-pagination>
55 + <!-- <infoTable
56 + v-bind="$attrs"
57 + @checkChange="checkChange"
58 + @top="top"
59 + @bottom="bottom"
60 + ></infoTable> -->
61 + </div>
62 +</template>
63 +
64 +<script>
65 +// import infoTable from "./info.vue";
66 +import Item from "./item.vue";
67 +export default {
68 + name: "Table",
69 + components: {
70 + // infoTable,
71 + Item,
72 + },
73 + props: {
74 + tableName: { type: String, default: "tables" },
75 + data: {
76 + type: Array,
77 + default() {
78 + return [];
79 + },
80 + },
81 + headerData: {
82 + type: Array,
83 + default: null,
84 + },
85 + border: {
86 + type: Boolean,
87 + default: true,
88 + },
89 + stripe: {
90 + type: Boolean,
91 + default: true,
92 + },
93 + size: {
94 + type: String,
95 + default: "mini",
96 + },
97 + height: {
98 + type: String,
99 + default: "400",
100 + },
101 + fit: {
102 + type: Boolean,
103 + default: true,
104 + },
105 + labelPosition: {
106 + type: String,
107 + default: "left",
108 + },
109 + indent: {
110 + type: Number,
111 + default: 16,
112 + },
113 + showHeader: {
114 + type: Boolean,
115 + default: true,
116 + },
117 + slotHeader: {
118 + type: Boolean,
119 + default: true,
120 + },
121 + highlightCurrentRow: {
122 + type: Boolean,
123 + default: true,
124 + },
125 + lazy: {
126 + type: Boolean,
127 + default: true,
128 + },
129 + loading: {
130 + type: Boolean,
131 + default: false,
132 + },
133 + hidden: {
134 + type: Boolean,
135 + default: false,
136 + },
137 + showOverflowTooltip: {
138 + type: Boolean,
139 + default: true,
140 + },
141 + shiftKey:{
142 + type:Boolean,
143 + default:false,
144 + },
145 + page: {
146 + type: Number,
147 + default: 1,
148 + },
149 + limitSize: {
150 + type: Number,
151 + default: 20,
152 + },
153 + limitStart:{
154 + type:Number,
155 + default:0,
156 + },
157 + paginationBackground: {
158 + type: Boolean,
159 + default: true,
160 + },
161 + pageSize: {
162 + type: Number,
163 + default: 20,
164 + },
165 + totalCount: {
166 + type: Number,
167 + default: 0,
168 + },
169 + },
170 + inheritAttrs: false,
171 + data() {
172 + return {
173 + newHeader: [],
174 + selectTable: [],
175 + pageNum: 1,
176 + start:-1,
177 + // {
178 + // type: "selection",
179 + // name: "",
180 + // value: "",
181 + // slot: null,
182 + // width: "",
183 + // align: "center",
184 + // sorTable: false,
185 + // },
186 + };
187 + },
188 + created() {
189 + this.newHeader = this.headerData;
190 + this.total = this.data.length;
191 + },
192 + mounted() {
193 +
194 + },
195 + methods: {
196 + nextClick() {
197 + this.$emit('currentChange',{page:this.pageNum + 1,start:this.limitStart + this.limitSize})
198 + },
199 + prevClick() {
200 + this.$emit('currentChange',{page:this.pageNum - 1,start:this.limitStart - this.limitSiz})
201 + },
202 + currentChange(val) {
203 + this.$emit('currentChange',{page:val,start: val*this.limitSize+1});
204 + },
205 + tableSelect(selection, row) {
206 + let end = row.index;
207 + if (this.shiftKey) {
208 + const sum = Math.abs(this.start - end);
209 + const min = Math.min(this.start, end);
210 + let i;
211 + if (
212 + this.start === -1 &&
213 + selection.includes(this.data[row.index])
214 + ) {
215 + for (i = 0; i < sum; i++) {
216 + this.$refs.tables.toggleRowSelection(this.data[i], true);
217 + this.selectTable.push(this.data[i]);
218 + }
219 + } else if (selection.includes(this.data[row.index])) {
220 + for (i = this.start + 1; i <= end; i++) {
221 + this.$refs.tables.toggleRowSelection(this.data[i], true);
222 + this.selectTable.push(this.data[i]);
223 + }
224 + } else if (!selection.includes(this.data[row.index])) {
225 + this.selectTable.splice(end - 1, sum + 1);
226 + for (i = end; i <= this.start; i++) {
227 + this.$refs.tables.toggleRowSelection(this.data[i], false);
228 + }
229 + }
230 + this.start = end;
231 + } else {
232 + this.start = end;
233 + if (selection.includes(this.data[end])) {
234 + this.selectTable.push(row);
235 + } else {
236 + for (let i = 0; i < this.selectTable.length; i++) {
237 + if (this.selectTable[i].index == row.index) {
238 + this.selectTable.splice(i, 1);
239 + }
240 + }
241 + }
242 + }
243 + selection = this.selectTable
244 + this.$emit("tableSelect", { selection, row });
245 + },
246 + tableSelectAll(selection) {
247 + this.$emit("tableSelectAll", selection);
248 + },
249 + SelectChange(selection) {
250 + this.$emit("SelectChange", selection);
251 + },
252 + itemChange(val) {},
253 + // checkChange(val) {
254 + // console.log(val);
255 + // },
256 + // top(val) {
257 + // console.log(val);
258 + // },
259 + // bottom(val) {
260 + // console.log(val);
261 + // },
262 + formatter(row, column, cellValue, index) {
263 + return cellValue;
264 + },
265 + },
266 +};
267 +</script>
268 +
269 +<style>
270 +.Tables {
271 + width: 100%;
272 + margin-top: 20px;
273 +}
274 +.tablePagination {
275 + margin-top: 40px;
276 + text-align: right;
277 +}
278 +</style>
279 +
1 +<template>
2 + <div class="tableInfo">
3 + <el-dropdown trigger="click" :hide-on-click="false">
4 + <el-button
5 + type="primary"
6 + icon="el-icon-edit"
7 + size="medium"
8 + circle
9 + ></el-button>
10 + <el-dropdown-menu slot="dropdown">
11 + <el-checkbox-group v-model="checkList">
12 + <el-dropdown-item
13 + v-for="(item, index) in infoData"
14 + :key="index"
15 + v-if="!item.type"
16 + class="dropItem"
17 + >
18 + <el-checkbox
19 + :label="item.name"
20 + :checked="true"
21 + @change="checkChange"
22 + ></el-checkbox>
23 + <span class="itemRight">
24 + <i class="el-icon-caret-top" @click.stop="top(index)"></i>
25 + <i class="el-icon-caret-bottom" @click.stop="bottom(index)"></i>
26 + </span>
27 + </el-dropdown-item>
28 + </el-checkbox-group>
29 + </el-dropdown-menu>
30 + </el-dropdown>
31 + </div>
32 +</template>
33 +
34 +<script>
35 +export default {
36 + props: { infoData: { type: Array, default: null } },
37 + inheritAttrs: false,
38 + data() {
39 + return {
40 + checkList: [],
41 + };
42 + },
43 + methods: {
44 + checkChange(val) {
45 + this.$emit("checkChange", { type: val });
46 + },
47 + top(val) {
48 + this.$emit("top", val);
49 + },
50 + bottom(val) {
51 + this.$emit("bottom", val);
52 + },
53 + },
54 + created() {},
55 +};
56 +</script>
57 +
58 +<style scope lang="scss">
59 +.itemRight {
60 + display: -webkit-inline-box;
61 + display: -ms-inline-flexbox;
62 + display: inline-flex;
63 + -webkit-box-orient: vertical;
64 + -webkit-box-direction: normal;
65 + -ms-flex-direction: column;
66 + flex-direction: column;
67 + -webkit-box-align: center;
68 + -ms-flex-align: center;
69 + align-items: center;
70 + height: 34px;
71 + width: 24px;
72 + vertical-align: middle;
73 + cursor: pointer;
74 + overflow: initial;
75 + position: relative;
76 + .el-icon-caret-bottom,
77 + .el-icon-caret-top {
78 + width: 0;
79 + height: 0;
80 + border: solid 5px transparent;
81 + position: absolute;
82 + left: 10px;
83 + }
84 + .el-icon-caret-bottom {
85 + bottom: 12px;
86 + }
87 + .el-icon-caret-top {
88 + top: 5px;
89 + }
90 +}
91 +.dropItem {
92 + display: flex;
93 + justify-content: space-between;
94 +}
95 +</style>
96 +
97 +<style>
98 +.tableInfo {
99 + position: fixed;
100 + right: 30px;
101 + bottom: 40px;
102 + z-index: 99999999;
103 +}
104 +</style>
...\ No newline at end of file ...\ No newline at end of file
1 +<script>
2 +export default {
3 + name: "Item",
4 + inheritAttrs: false,
5 + props: {
6 + dom: {
7 + type: Object,
8 + default: null,
9 + },
10 + },
11 + render() {
12 + let newDom = [];
13 + newDom.push(this.dom);
14 + return newDom;
15 + },
16 + methods: {
17 + change(val){
18 + this.$emit('change',val)
19 + }
20 + },
21 +};
22 +</script>
...@@ -20,6 +20,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, ...@@ -20,6 +20,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
20 import Pagination from "@/components/Pagination"; 20 import Pagination from "@/components/Pagination";
21 // 自定义表格工具扩展 21 // 自定义表格工具扩展
22 import RightToolbar from "@/components/RightToolbar" 22 import RightToolbar from "@/components/RightToolbar"
23 +import Table from "@/components/Table"
23 24
24 // 全局方法挂载 25 // 全局方法挂载
25 //Vue.prototype.getDicts = getDicts 26 //Vue.prototype.getDicts = getDicts
...@@ -47,6 +48,7 @@ Vue.prototype.msgInfo = function (msg) { ...@@ -47,6 +48,7 @@ Vue.prototype.msgInfo = function (msg) {
47 // 全局组件挂载 48 // 全局组件挂载
48 Vue.component('Pagination', Pagination) 49 Vue.component('Pagination', Pagination)
49 Vue.component('RightToolbar', RightToolbar) 50 Vue.component('RightToolbar', RightToolbar)
51 +Vue.component('Table', Table)
50 52
51 Vue.use(permission) 53 Vue.use(permission)
52 54
......
...@@ -97,7 +97,7 @@ export const constantRoutes = [ ...@@ -97,7 +97,7 @@ export const constantRoutes = [
97 component: (resolve) => require(['@/views/allocationConfig/flightAllocConfig/info'], resolve), 97 component: (resolve) => require(['@/views/allocationConfig/flightAllocConfig/info'], resolve),
98 name: 'flightAllocConfigAdd', 98 name: 'flightAllocConfigAdd',
99 meta: { title: '添加航班配舱', icon: 'user', breadcrumb: false } 99 meta: { title: '添加航班配舱', icon: 'user', breadcrumb: false }
100 - } 100 + },
101 ] 101 ]
102 } 102 }
103 ] 103 ]
......
This diff is collapsed. Click to expand it.
1 +<template>
2 + <div>
3 + <el-dialog
4 + title="货物配舱"
5 + width="80%"
6 + :visible.sync="dialogVisible"
7 + :close-on-click-modal="false"
8 + :append-to-body="true"
9 + >
10 + <el-divider content-position="left">已选货物信息</el-divider>
11 + <el-table
12 + :data="tableData"
13 + size="mini"
14 + height="200"
15 + max-height="200"
16 + border
17 + stripe
18 + style="width: 100%"
19 + >
20 + <el-table-column type="index" label="序号" align="center">
21 + </el-table-column>
22 + <el-table-column
23 + v-for="(item, index) in cargoHeader"
24 + header-align="center"
25 + align="center"
26 + :prop="item.value"
27 + :label="item.name"
28 + :key="index"
29 + :show-overflow-tooltip="true"
30 + >
31 + </el-table-column>
32 + </el-table>
33 + <el-divider content-position="left">可配置航班信息</el-divider>
34 + <el-table
35 + :data="fltData"
36 + size="mini"
37 + height="200"
38 + max-height="200"
39 + border
40 + stripe
41 + style="width: 100%"
42 + >
43 + <el-table-column type="index" label="序号" align="center">
44 + </el-table-column>
45 + <el-table-column
46 + v-for="(item, index) in fltHeader"
47 + header-align="center"
48 + align="center"
49 + :prop="item.value"
50 + :label="item.name"
51 + :key="index"
52 + :show-overflow-tooltip="true"
53 + >
54 + </el-table-column>
55 + </el-table>
56 + <el-form
57 + ref="form"
58 + label-width="auto"
59 + style="width: 400px; margin: 30px auto"
60 + >
61 + <el-form-item label="航班号">
62 + <el-input
63 + v-model="fltNo"
64 + size="medium"
65 + placeholder="请输入航班号"
66 + style="width: 350px"
67 + ></el-input>
68 + </el-form-item>
69 + <el-form-item label="航班日期:">
70 + <el-date-picker
71 + v-model="formData.fltDate"
72 + type="date"
73 + placeholder="选择日期"
74 + value-format="yyyy-MM-dd"
75 + size="medium"
76 + style="width: 350px"
77 + >
78 + </el-date-picker>
79 + </el-form-item>
80 + </el-form>
81 + <div slot="footer">
82 + <el-button @click="dialogBeforeClose">取 消</el-button>
83 + <el-button type="primary" @click="submit">确 定</el-button>
84 + </div>
85 + </el-dialog>
86 + </div>
87 +</template>
88 +
89 +<script>
90 +import { findAllFltDataApi } from "@/api/findAllFltData";
91 +export default {
92 + props: {
93 + dialogVisible: {
94 + type: Boolean,
95 + default: false,
96 + },
97 + tableData: {
98 + type: Array,
99 + default: null,
100 + },
101 + },
102 + data() {
103 + return {
104 + formData: { fltNo: "" },
105 + fltSelect:{
106 + limitStart: 0, //当前条数【代表第几条数据 +1开始】
107 + pageNum: 1,
108 + limitSize: -1, //一页显示多少条数据
109 + fltDateStart: undefined, //航班日期开始
110 + fltDateEnd: undefined, //航班日期结束
111 + typeId: undefined, //航班类型
112 + statusId: '83937', //航班状态
113 + flightKindId: undefined, //航班种类
114 + fltNo: undefined //航班号，要大写
115 + },
116 + cargoHeader: [
117 + { name: "口岸代码", value: "portName" },
118 + { name: "运单号", value: "waybillNo" },
119 + { name: "货物状态", value: "statusName" },
120 + { name: "站点", value: "siteName" },
121 + { name: "申报类型", value: "typeName" },
122 + { name: "URSA", value: "ursa" },
123 + { name: "实际重量", value: "actualWeight" },
124 + { name: "件数", value: "qty" },
125 + { name: "品名描述", value: "nameDescription" },
126 + { name: "是否自动", value: "cargoRulesStatus" },
127 + { name: "创建人", value: "createUserName" },
128 + { name: "创建时间", value: "createTime" },
129 + ],
130 + fltHeader: [
131 + { name: "航班日期", value: "fltDate" },
132 + { name: "航班号", value: "fltNo" },
133 + { name: "航班路线", value: "route" },
134 + { name: "航班类型", value: "typeName" },
135 + { name: "总重量", value: "totalWeight" },
136 + { name: "额外增重百分比", value: "extraWeightPercent" },
137 + { name: "已配重量", value: "alloctedWeight" },
138 + { name: "配舱优先级", value: "priorityRuleName" },
139 + { name: "是否开启高地价", value: "highLowPriceFlg" },
140 + { name: "航班起飞时间", value: "takeOffTime" },
141 + { name: "创建人", value: "createUserName" },
142 + { name: "创建时间", value: "createTime" },
143 + ],
144 + fltData: [],
145 + };
146 + },
147 + methods: {
148 + submit() {
149 + this.$emit("dialogBeforeClose", false);
150 + },
151 + dialogBeforeClose() {
152 + this.$emit("dialogBeforeClose", false);
153 + },
154 + },
155 + watch:{
156 + },
157 + computed: {
158 + fltNo: {
159 + get: function () {
160 + return this.formData.fltNo;
161 + },
162 + set: function (val) {
163 + this.formData.fltNo = val.toUpperCase();
164 + },
165 + },
166 + },
167 +};
168 +</script>
169 +
170 +<style>
171 +</style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 <div class="cargoPage"> 2 <div class="cargoPage">
3 <el-form 3 <el-form
4 ref="cargoForm" 4 ref="cargoForm"
5 + class="form-header"
5 size="small" 6 size="small"
6 :model="formData" 7 :model="formData"
7 label-position="top" 8 label-position="top"
...@@ -307,14 +308,14 @@ ...@@ -307,14 +308,14 @@
307 <!-- <el-button type="primary" size="small" @click="checks(tableData)" 308 <!-- <el-button type="primary" size="small" @click="checks(tableData)"
308 >全选/全否</el-button 309 >全选/全否</el-button
309 > --> 310 > -->
310 - <el-button type="primary" size="small" @click="xlse(0)" v-dbClick :disabled="tableData.length==0" :loading="downloading" 311 + <el-button :type="downLoadingTip.downloading?'warning':'primary'" size="small" @click="xlse(0)" :disabled="tableData.length==0" :loading="downLoadingTip.downloading"
311 - >导出本页查询结果</el-button 312 + >{{downLoadingTip.downloading?downLoadingTip.tip:"导出本页查询结果"}}</el-button
312 > 313 >
313 - <el-button type="primary" size="small" @click="xlse(1)" v-dbClick :disabled="tableData.length==0" :loading="downloading" 314 + <el-button :type="downLoadingTip.downloading?'warning':'primary'" size="small" @click="xlse(1)" :disabled="tableData.length==0" :loading="downLoadingTip.downloading"
314 - >导出全部查询结果</el-button 315 + >{{downLoadingTip.downloading?downLoadingTip.tip:"导出全部查询结果"}}</el-button
315 > 316 >
316 <div class="tips"> 317 <div class="tips">
317 - <span style="paddingright: 50px">总重量:{{ allWeight }}</span> 318 + <span style="paddingRight: 50px">总重量:{{ allWeight }}</span>
318 <span>总件数:{{ allQty }}</span> 319 <span>总件数:{{ allQty }}</span>
319 </div> 320 </div>
320 </div> 321 </div>
...@@ -340,6 +341,7 @@ ...@@ -340,6 +341,7 @@
340 :key="item.name" 341 :key="item.name"
341 header-align="center" 342 header-align="center"
342 align="center" 343 align="center"
344 + :show-overflow-tooltip="true"
343 :width="item.value=='bigPretrialOpinion'?'300':'170'" 345 :width="item.value=='bigPretrialOpinion'?'300':'170'"
344 :formatter="formatter" 346 :formatter="formatter"
345 sortable 347 sortable
...@@ -447,7 +449,10 @@ export default { ...@@ -447,7 +449,10 @@ export default {
447 start: -1, 449 start: -1,
448 valueFormat: "yyyy-MM-dd", 450 valueFormat: "yyyy-MM-dd",
449 tableLoading: false, 451 tableLoading: false,
452 + downLoadingTip:{
453 + tip:"",
450 downloading:false, 454 downloading:false,
455 + },
451 totalCount: 0, 456 totalCount: 0,
452 selectTable: [], 457 selectTable: [],
453 flightTime: [], 458 flightTime: [],
...@@ -649,7 +654,7 @@ export default { ...@@ -649,7 +654,7 @@ export default {
649 }, 654 },
650 // 导出表格 655 // 导出表格
651 xlse(page) { 656 xlse(page) {
652 - this.downloading = true; 657 + this.downLoadingTip.downloading = true;
653 let cargoXlse = {title:"货物导出表",cargoConditionDto:{}}; 658 let cargoXlse = {title:"货物导出表",cargoConditionDto:{}};
654 if(this.formData.customsReceiptStatusId != null && this.formData.customsReceiptStatusId.length < 1){ 659 if(this.formData.customsReceiptStatusId != null && this.formData.customsReceiptStatusId.length < 1){
655 this.formData.customsReceiptStatusId = null; 660 this.formData.customsReceiptStatusId = null;
...@@ -686,16 +691,35 @@ export default { ...@@ -686,16 +691,35 @@ export default {
686 cargoXlse.cargoConditionDto.limitSize = this.limitSize; 691 cargoXlse.cargoConditionDto.limitSize = this.limitSize;
687 692
688 if (page == 0) { 693 if (page == 0) {
694 + this.downLoadingTip.tip = "正在导出本页结果集"
689 cargoXlse.cargoConditionDto.limitStart = this.limitStart; 695 cargoXlse.cargoConditionDto.limitStart = this.limitStart;
696 + cargoXlsx("/cargo/excel",cargoXlse).then(()=>{
697 + this.downLoadingTip.downloading = false;
698 + this.downLoadingTip.tip = ""
699 + }).catch(()=>{
700 + this.downLoadingTip.downloading = false;
701 + this.downLoadingTip.tip = ""
702 + })
690 } else { 703 } else {
704 + if(this.totalCount < 100000){
705 + this.downLoadingTip.tip = "正在导出全部结果集"
691 cargoXlse.cargoConditionDto.limitStart = 0; 706 cargoXlse.cargoConditionDto.limitStart = 0;
692 cargoXlse.cargoConditionDto.limitSize = -1; 707 cargoXlse.cargoConditionDto.limitSize = -1;
693 - }
694 cargoXlsx("/cargo/excel",cargoXlse).then(()=>{ 708 cargoXlsx("/cargo/excel",cargoXlse).then(()=>{
695 - this.downloading = false; 709 + this.downLoadingTip.downloading = false;
710 + this.downLoadingTip.tip = ""
696 }).catch(()=>{ 711 }).catch(()=>{
697 - this.downloading = false; 712 + this.downLoadingTip.downloading = false;
713 + this.downLoadingTip.tip = ""
698 }) 714 })
715 + }else{
716 + this.downLoadingTip.downloading = false;
717 + this.$message({
718 + message: "数据量过大无法导出",
719 + type: "warning",
720 + });
721 + }
722 + }
699 }, 723 },
700 //表格格式化 724 //表格格式化
701 formatter(row,column,cellValue,index){ 725 formatter(row,column,cellValue,index){
...@@ -753,8 +777,4 @@ export default { ...@@ -753,8 +777,4 @@ export default {
753 font-size: 14px; 777 font-size: 14px;
754 margin-right: 40px; 778 margin-right: 40px;
755 } 779 }
756 -.formItem {
757 - width:100%;
758 - max-width: 300px;
759 -}
760 </style> 780 </style>
...\ No newline at end of file ...\ No newline at end of file
......