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
<template>
<div class="Tables">
<el-table
:ref="tableName"
:data="data"
:headerData="headerData"
:border="border"
:stripe="stripe"
:size="size"
:fit="fit"
:indent="indent"
:show-header="showHeader"
:height="height"
:highlight-current-row="highlightCurrentRow"
:label-position="labelPosition"
:lazy="lazy"
:downShiftKey="shiftKey"
:limitStart="limitStart"
v-loading="loading"
@select="tableSelect"
@select-all="tableSelectAll"
@select-change="SelectChange"
>
<el-table-column
v-for="(item, index) in newHeader"
:type="item.type"
:prop="item.value"
:label="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:show-overflow-tooltip="showOverflowTooltip"
:sortable="item.sorTable"
header-align="center"
:formatter="formatter"
:slotHeader="slotHeader"
:key="index"
>
<template v-if="item.slot" slot-scope="">
<Item :dom="item.slot" @change="itemChange"></Item>
</template>
</el-table-column>
<slot></slot>
</el-table>
<el-pagination
:total="totalCount"
:page-size.sync="limitSize"
background
class="tablePagination"
@next-click="nextClick"
@prev-click="prevClick"
@current-change="currentChange"
>
</el-pagination>
<!-- <infoTable
v-bind="$attrs"
@checkChange="checkChange"
@top="top"
@bottom="bottom"
></infoTable> -->
</div>
</template>
<script>
// import infoTable from "./info.vue";
import Item from "./item.vue";
export default {
name: "Table",
components: {
// infoTable,
Item,
},
props: {
tableName: { type: String, default: "tables" },
data: {
type: Array,
default() {
return [];
},
},
headerData: {
type: Array,
default: null,
},
border: {
type: Boolean,
default: true,
},
stripe: {
type: Boolean,
default: true,
},
size: {
type: String,
default: "mini",
},
height: {
type: String,
default: "400",
},
fit: {
type: Boolean,
default: true,
},
labelPosition: {
type: String,
default: "left",
},
indent: {
type: Number,
default: 16,
},
showHeader: {
type: Boolean,
default: true,
},
slotHeader: {
type: Boolean,
default: true,
},
highlightCurrentRow: {
type: Boolean,
default: true,
},
lazy: {
type: Boolean,
default: true,
},
loading: {
type: Boolean,
default: false,
},
hidden: {
type: Boolean,
default: false,
},
showOverflowTooltip: {
type: Boolean,
default: true,
},
shiftKey:{
type:Boolean,
default:false,
},
page: {
type: Number,
default: 1,
},
limitSize: {
type: Number,
default: 20,
},
limitStart:{
type:Number,
default:0,
},
paginationBackground: {
type: Boolean,
default: true,
},
pageSize: {
type: Number,
default: 20,
},
totalCount: {
type: Number,
default: 0,
},
},
inheritAttrs: false,
data() {
return {
newHeader: [],
selectTable: [],
pageNum: 1,
start:-1,
// {
// type: "selection",
// name: "",
// value: "",
// slot: null,
// width: "",
// align: "center",
// sorTable: false,
// },
};
},
created() {
this.newHeader = this.headerData;
this.total = this.data.length;
},
mounted() {
},
methods: {
nextClick() {
this.$emit('currentChange',{page:this.pageNum + 1,start:this.limitStart + this.limitSize})
},
prevClick() {
this.$emit('currentChange',{page:this.pageNum - 1,start:this.limitStart - this.limitSiz})
},
currentChange(val) {
this.$emit('currentChange',{page:val,start: val*this.limitSize+1});
},
tableSelect(selection, row) {
let end = row.index;
if (this.shiftKey) {
const sum = Math.abs(this.start - end);
const min = Math.min(this.start, end);
let i;
if (
this.start === -1 &&
selection.includes(this.data[row.index])
) {
for (i = 0; i < sum; i++) {
this.$refs.tables.toggleRowSelection(this.data[i], true);
this.selectTable.push(this.data[i]);
}
} else if (selection.includes(this.data[row.index])) {
for (i = this.start + 1; i <= end; i++) {
this.$refs.tables.toggleRowSelection(this.data[i], true);
this.selectTable.push(this.data[i]);
}
} else if (!selection.includes(this.data[row.index])) {
this.selectTable.splice(end - 1, sum + 1);
for (i = end; i <= this.start; i++) {
this.$refs.tables.toggleRowSelection(this.data[i], false);
}
}
this.start = end;
} else {
this.start = end;
if (selection.includes(this.data[end])) {
this.selectTable.push(row);
} else {
for (let i = 0; i < this.selectTable.length; i++) {
if (this.selectTable[i].index == row.index) {
this.selectTable.splice(i, 1);
}
}
}
}
selection = this.selectTable
this.$emit("tableSelect", { selection, row });
},
tableSelectAll(selection) {
this.$emit("tableSelectAll", selection);
},
SelectChange(selection) {
this.$emit("SelectChange", selection);
},
itemChange(val) {},
// checkChange(val) {
// console.log(val);
// },
// top(val) {
// console.log(val);
// },
// bottom(val) {
// console.log(val);
// },
formatter(row, column, cellValue, index) {
return cellValue;
},
},
};
</script>
<style>
.Tables {
width: 100%;
margin-top: 20px;
}
.tablePagination {
margin-top: 40px;
text-align: right;
}
</style>
<template>
<div class="tableInfo">
<el-dropdown trigger="click" :hide-on-click="false">
<el-button
type="primary"
icon="el-icon-edit"
size="medium"
circle
></el-button>
<el-dropdown-menu slot="dropdown">
<el-checkbox-group v-model="checkList">
<el-dropdown-item
v-for="(item, index) in infoData"
:key="index"
v-if="!item.type"
class="dropItem"
>
<el-checkbox
:label="item.name"
:checked="true"
@change="checkChange"
></el-checkbox>
<span class="itemRight">
<i class="el-icon-caret-top" @click.stop="top(index)"></i>
<i class="el-icon-caret-bottom" @click.stop="bottom(index)"></i>
</span>
</el-dropdown-item>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
props: { infoData: { type: Array, default: null } },
inheritAttrs: false,
data() {
return {
checkList: [],
};
},
methods: {
checkChange(val) {
this.$emit("checkChange", { type: val });
},
top(val) {
this.$emit("top", val);
},
bottom(val) {
this.$emit("bottom", val);
},
},
created() {},
};
</script>
<style scope lang="scss">
.itemRight {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 34px;
width: 24px;
vertical-align: middle;
cursor: pointer;
overflow: initial;
position: relative;
.el-icon-caret-bottom,
.el-icon-caret-top {
width: 0;
height: 0;
border: solid 5px transparent;
position: absolute;
left: 10px;
}
.el-icon-caret-bottom {
bottom: 12px;
}
.el-icon-caret-top {
top: 5px;
}
}
.dropItem {
display: flex;
justify-content: space-between;
}
</style>
<style>
.tableInfo {
position: fixed;
right: 30px;
bottom: 40px;
z-index: 99999999;
}
</style>
\ No newline at end of file
<script>
export default {
name: "Item",
inheritAttrs: false,
props: {
dom: {
type: Object,
default: null,
},
},
render() {
let newDom = [];
newDom.push(this.dom);
return newDom;
},
methods: {
change(val){
this.$emit('change',val)
}
},
};
</script>
......@@ -20,6 +20,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
import Pagination from "@/components/Pagination";
// 自定义表格工具扩展
import RightToolbar from "@/components/RightToolbar"
import Table from "@/components/Table"
// 全局方法挂载
//Vue.prototype.getDicts = getDicts
......@@ -47,6 +48,7 @@ Vue.prototype.msgInfo = function (msg) {
// 全局组件挂载
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Table', Table)
Vue.use(permission)
......
......@@ -97,7 +97,7 @@ export const constantRoutes = [
component: (resolve) => require(['@/views/allocationConfig/flightAllocConfig/info'], resolve),
name: 'flightAllocConfigAdd',
meta: { title: '添加航班配舱', icon: 'user', breadcrumb: false }
}
},
]
}
]
......
This diff is collapsed. Click to expand it.
<template>
<div>
<el-dialog
title="货物配舱"
width="80%"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:append-to-body="true"
>
<el-divider content-position="left">已选货物信息</el-divider>
<el-table
:data="tableData"
size="mini"
height="200"
max-height="200"
border
stripe
style="width: 100%"
>
<el-table-column type="index" label="序号" align="center">
</el-table-column>
<el-table-column
v-for="(item, index) in cargoHeader"
header-align="center"
align="center"
:prop="item.value"
:label="item.name"
:key="index"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<el-divider content-position="left">可配置航班信息</el-divider>
<el-table
:data="fltData"
size="mini"
height="200"
max-height="200"
border
stripe
style="width: 100%"
>
<el-table-column type="index" label="序号" align="center">
</el-table-column>
<el-table-column
v-for="(item, index) in fltHeader"
header-align="center"
align="center"
:prop="item.value"
:label="item.name"
:key="index"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<el-form
ref="form"
label-width="auto"
style="width: 400px; margin: 30px auto"
>
<el-form-item label="航班号">
<el-input
v-model="fltNo"
size="medium"
placeholder="请输入航班号"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item label="航班日期:">
<el-date-picker
v-model="formData.fltDate"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
size="medium"
style="width: 350px"
>
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogBeforeClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { findAllFltDataApi } from "@/api/findAllFltData";
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
tableData: {
type: Array,
default: null,
},
},
data() {
return {
formData: { fltNo: "" },
fltSelect:{
limitStart: 0, //当前条数【代表第几条数据 +1开始】
pageNum: 1,
limitSize: -1, //一页显示多少条数据
fltDateStart: undefined, //航班日期开始
fltDateEnd: undefined, //航班日期结束
typeId: undefined, //航班类型
statusId: '83937', //航班状态
flightKindId: undefined, //航班种类
fltNo: undefined //航班号，要大写
},
cargoHeader: [
{ name: "口岸代码", value: "portName" },
{ name: "运单号", value: "waybillNo" },
{ name: "货物状态", value: "statusName" },
{ name: "站点", value: "siteName" },
{ name: "申报类型", value: "typeName" },
{ name: "URSA", value: "ursa" },
{ name: "实际重量", value: "actualWeight" },
{ name: "件数", value: "qty" },
{ name: "品名描述", value: "nameDescription" },
{ name: "是否自动", value: "cargoRulesStatus" },
{ name: "创建人", value: "createUserName" },
{ name: "创建时间", value: "createTime" },
],
fltHeader: [
{ name: "航班日期", value: "fltDate" },
{ name: "航班号", value: "fltNo" },
{ name: "航班路线", value: "route" },
{ name: "航班类型", value: "typeName" },
{ name: "总重量", value: "totalWeight" },
{ name: "额外增重百分比", value: "extraWeightPercent" },
{ name: "已配重量", value: "alloctedWeight" },
{ name: "配舱优先级", value: "priorityRuleName" },
{ name: "是否开启高地价", value: "highLowPriceFlg" },
{ name: "航班起飞时间", value: "takeOffTime" },
{ name: "创建人", value: "createUserName" },
{ name: "创建时间", value: "createTime" },
],
fltData: [],
};
},
methods: {
submit() {
this.$emit("dialogBeforeClose", false);
},
dialogBeforeClose() {
this.$emit("dialogBeforeClose", false);
},
},
watch:{
},
computed: {
fltNo: {
get: function () {
return this.formData.fltNo;
},
set: function (val) {
this.formData.fltNo = val.toUpperCase();
},
},
},
};
</script>
<style>
</style>
\ No newline at end of file
......@@ -2,6 +2,7 @@
<div class="cargoPage">
<el-form
ref="cargoForm"
class="form-header"
size="small"
:model="formData"
label-position="top"
......@@ -307,14 +308,14 @@
<!-- <el-button type="primary" size="small" @click="checks(tableData)"
>全选/全否</el-button
> -->
<el-button type="primary" size="small" @click="xlse(0)" v-dbClick :disabled="tableData.length==0" :loading="downloading"
>导出本页查询结果</el-button
<el-button :type="downLoadingTip.downloading?'warning':'primary'" size="small" @click="xlse(0)" :disabled="tableData.length==0" :loading="downLoadingTip.downloading"
>{{downLoadingTip.downloading?downLoadingTip.tip:"导出本页查询结果"}}</el-button
>
<el-button type="primary" size="small" @click="xlse(1)" v-dbClick :disabled="tableData.length==0" :loading="downloading"
>导出全部查询结果</el-button
<el-button :type="downLoadingTip.downloading?'warning':'primary'" size="small" @click="xlse(1)" :disabled="tableData.length==0" :loading="downLoadingTip.downloading"
>{{downLoadingTip.downloading?downLoadingTip.tip:"导出全部查询结果"}}</el-button
>
<div class="tips">
<span style="paddingright: 50px">总重量:{{ allWeight }}</span>
<span style="paddingRight: 50px">总重量:{{ allWeight }}</span>
<span>总件数:{{ allQty }}</span>
</div>
</div>
......@@ -340,6 +341,7 @@
:key="item.name"
header-align="center"
align="center"
:show-overflow-tooltip="true"
:width="item.value=='bigPretrialOpinion'?'300':'170'"
:formatter="formatter"
sortable
......@@ -447,7 +449,10 @@ export default {
start: -1,
valueFormat: "yyyy-MM-dd",
tableLoading: false,
downLoadingTip:{
tip:"",
downloading:false,
},
totalCount: 0,
selectTable: [],
flightTime: [],
......@@ -649,7 +654,7 @@ export default {
},
// 导出表格
xlse(page) {
this.downloading = true;
this.downLoadingTip.downloading = true;
let cargoXlse = {title:"货物导出表",cargoConditionDto:{}};
if(this.formData.customsReceiptStatusId != null && this.formData.customsReceiptStatusId.length < 1){
this.formData.customsReceiptStatusId = null;
......@@ -686,16 +691,35 @@ export default {
cargoXlse.cargoConditionDto.limitSize = this.limitSize;
if (page == 0) {
this.downLoadingTip.tip = "正在导出本页结果集"
cargoXlse.cargoConditionDto.limitStart = this.limitStart;
cargoXlsx("/cargo/excel",cargoXlse).then(()=>{
this.downLoadingTip.downloading = false;
this.downLoadingTip.tip = ""
}).catch(()=>{
this.downLoadingTip.downloading = false;
this.downLoadingTip.tip = ""
})
} else {
if(this.totalCount < 100000){
this.downLoadingTip.tip = "正在导出全部结果集"
cargoXlse.cargoConditionDto.limitStart = 0;
cargoXlse.cargoConditionDto.limitSize = -1;
}
cargoXlsx("/cargo/excel",cargoXlse).then(()=>{
this.downloading = false;
this.downLoadingTip.downloading = false;
this.downLoadingTip.tip = ""
}).catch(()=>{
this.downloading = false;
this.downLoadingTip.downloading = false;
this.downLoadingTip.tip = ""
})
}else{
this.downLoadingTip.downloading = false;
this.$message({
message: "数据量过大无法导出",
type: "warning",
});
}
}
},
//表格格式化
formatter(row,column,cellValue,index){
......@@ -753,8 +777,4 @@ export default {
font-size: 14px;
margin-right: 40px;
}
.formItem {
width:100%;
max-width: 300px;
}
</style>
\ No newline at end of file
......