Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
e74b44cb 1 parent 5f8aedb7

无用代码删除，代码更新

Inline Side-by-side
Showing 4 changed files with 309 additions and 178 deletions
<template>
<div class="Tables">
<div class="w-table" :class="{ 'w-table_moving': dragState.dragging }">
<el-table
:ref="tableName"
:data="data"
:headerData="headerData"
:border="border"
:stripe="stripe"
:size="size"
......@@ -25,24 +24,33 @@
@select-change="SelectChange"
>
<el-table-column
v-for="(item, index) in headerData"
:column-key="item.value"
v-for="(item, index) in newHeader"
:type="item.type"
:prop="item.value"
:label="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:column-key="index.toString()"
:show-overflow-tooltip="showOverflowTooltip"
:sortable="item.sorTable"
:formatter="formatter"
header-align="center"
:sort-orders="['descending', 'ascending', null]"
:slotHeader="slotHeader"
:render-header="renderHeader"
:key="index"
v-if="item.disabled"
>
<!-- <template v-if="item.slot" slot-scope="">
<Item :dom="item.slot" @change="itemChange"></Item>
<!-- <template slot-scope="scope">
<exSlot
v-if="item.render"
:render="item.render"
:row="scope.row"
:index="scope.$index"
:column="item"
></exSlot>
<span v-else>{{ scope.row[item.value] || "" }}</span>
</template> -->
</el-table-column>
<slot></slot>
......@@ -52,41 +60,87 @@
:page-size.sync="limitSize"
:current-page.sync="pageNum"
background
layout="prev, pager, next, jumper, ->, total, slot"
layout="prev, pager, next, jumper, ->, sizes, total"
class="tablePagination"
@size-change="sizeChange"
@next-click="nextClick"
@prev-click="prevClick"
@current-change="currentChange"
>
</el-pagination>
<!-- <infoTable
v-bind="$attrs"
@checkChange="checkChange"
@top="top"
@bottom="bottom"
></infoTable> -->
<div class="tableInfo" v-if="infoShow">
<ul class="tableList" v-show="show">
<el-checkbox-group v-model="checkDisabled">
<li
class="flexList"
v-for="(item, index) in newHeader"
:key="index"
v-if="!item.type"
:title="item.name"
>
<div>
<el-checkbox
:label="item.name"
@change="newHeader[index].disabled = !item.disabled"
>{{ item.name }}</el-checkbox
>
</div>
</li>
</el-checkbox-group>
</ul>
<el-button
type="primary"
icon="el-icon-edit"
size="medium"
circle
@click="show = !show"
></el-button>
</div>
</div>
</template>
<script>
// import infoTable from "./info.vue";
import Item from "./item.vue";
let exSlot = {
fucntional: true,
props: {
row: Object,
render: Function,
index: [Number, String],
column: {
type: Object,
default: null,
},
},
render: (h, data) => {
console.log(data);
if (data) {
const params = {
row: data.props.row,
index: data.props.index,
};
if (data.props.column) params.column = data.props.column;
return data.props.render(h, params);
}
},
};
import dictLabels from "../../assets/languages/dictLabels.js";
import { scrollTo } from "@/utils/scroll-to";
export default {
name: "Table",
components: {
// infoTable,
Item,
exSlot,
},
props: {
//dom名称
tableName: { type: String, default: "tables" },
//表格数据
data: {
type: Array,
default() {
return [];
},
},
//表头数据
headerData: {
type: Array,
default: null,
......@@ -104,7 +158,7 @@ export default {
default: "mini",
},
height: {
type: [String, Number],
type: [String,Number],
default: "400",
},
fit: {
......@@ -143,18 +197,26 @@ export default {
type: Boolean,
default: true,
},
//shift键状态
shiftKey: {
type: Boolean,
default: false,
},
//页数
page: {
type: Number,
default: 1,
},
// pageSizes:{
// type:Array,
// default:[10, 20, 30, 40, 50, 100]
// },
//每页长度
limitSize: {
type: Number,
default: 20,
},
//开始位置
limitStart: {
type: Number,
default: 0,
......@@ -167,6 +229,7 @@ export default {
type: Number,
default: 20,
},
//总数量
totalCount: {
type: Number,
default: 0,
......@@ -179,28 +242,43 @@ export default {
type: Boolean,
default: false,
},
infoShow:{
type:Boolean,
default:false,
}
},
inheritAttrs: false,
data() {
return {
newHeader: [],
newHeader: this.headerData,
selectTable: [],
checkDisabled: [],
pageNum: 1,
start: -1,
show: false,
dragState: {
start: -9, // 起始元素的 index
end: -9, // 移动鼠标时所覆盖的元素 index
dragging: false, // 是否正在拖动
direction: undefined, // 拖动方向
},
//表头数据格式
// {
// type: "selection",
// type: "",
// name: "",
// value: "",
// slot: null,
// width: "",
// align: "center",
// sorTable: false,
// fixed:false,
// disabled:true,
// },
};
},
created() {
this.newHeader = this.headerData;
this.newHeader.map((item) => {
this.checkDisabled.push(item.name);
});
},
watch: {
page() {
......@@ -214,9 +292,15 @@ export default {
this.$refs.tables.doLayout()
})
},
headerData(val, oldVal) {
this.newHeader = val;
},
},
mounted() {},
methods: {
sizeChange(val){
this.$emit("sizeChange",val)
},
//下一页
nextClick() {
this.$emit("currentChange", {
page: this.pageNum + 1,
......@@ -224,6 +308,7 @@ export default {
});
scrollTo(0, 800);
},
//上一页
prevClick() {
this.$emit("currentChange", {
page: this.pageNum - 1,
......@@ -231,6 +316,7 @@ export default {
});
scrollTo(0, 800);
},
//某页
currentChange(val) {
this.$emit("currentChange", {
page: val,
......@@ -238,6 +324,7 @@ export default {
});
scrollTo(0, 800);
},
//表格多选，shift连续选择
tableSelect(selection, row) {
let end = row.index;
if (this.shiftKey) {
......@@ -285,18 +372,23 @@ export default {
selection = this.selectTable.sort(this.compare("index", "ascending"));
this.$emit("tableSelect", { selection, row });
},
//表格全选
tableSelectAll(selection) {
this.selectTable = selection;
this.$emit("tableSelectAll", selection);
},
//多选框改变
SelectChange(selection) {
this.$emit("SelectChange", selection);
},
//表格选择清空
clearTable() {
this.selectTable = [];
this.$refs.tables.clearSelection();
},
//排序
sortChange({ column, prop, order }) {
this.selectTable = [];
this.$emit("sortChange", { prop: prop, order: order });
},
compare(propertyName, sort) {
......@@ -315,6 +407,105 @@ export default {
}
};
},
//自定义表头
renderHeader(createElement, { column }) {
return createElement(
"div",
{
class: ["thead-cell"],
// on: {
// mousedown: ($event) => {
// this.handleMouseDown($event, column);
// },
// mousemove: ($event) => {
// this.handleMouseMove($event, column);
// },
// },
},
[
// 添加 <a> 用于显示表头 label
createElement("a", column.label),
// 添加一个空标签用于显示拖动动画
createElement("span", {
class: ["virtual"],
}),
]
);
},
// 按下鼠标开始拖动
// handleMouseDown(e, column) {
// this.dragState.dragging = true;
// this.dragState.start = parseInt(column.columnKey);
// // 给拖动时的虚拟容器添加宽高
// let table = document.getElementsByClassName("w-table")[0];
// let virtual = document.getElementsByClassName("virtual");
// for (let item of virtual) {
// item.style.height = table.clientHeight - 1 + "px";
// item.style.width = item.parentElement.parentElement.clientWidth + "px";
// }
// document.addEventListener("mouseup", this.handleMouseUp);
// },
// 鼠标放开结束拖动
// handleMouseUp() {
// this.dragColumn(this.dragState);
// // 初始化拖动状态
// this.dragState = {
// start: -9,
// end: -9,
// dragging: false,
// direction: undefined,
// };
// document.removeEventListener("mouseup", this.handleMouseUp);
// },
// 拖动中
// handleMouseMove(e, column) {
// if (this.dragState.dragging) {
// let index = parseInt(column.columnKey); // 记录起始列
// if (index - this.dragState.start !== 0) {
// this.dragState.direction =
// index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向
// this.dragState.end = parseInt(column.columnKey);
// } else {
// this.dragState.direction = undefined;
// }
// } else {
// return false;
// }
// },
// 拖动易位
// dragColumn({ start, end, direction }) {
// let tempData = [];
// let left = direction === "left";
// let min = left ? end : start - 1;
// let max = left ? start + 1 : end;
// for (let i = 0; i < this.newHeader.length; i++) {
// if (i === end) {
// tempData.push(this.newHeader[start]);
// } else if (i > min && i < max) {
// tempData.push(this.newHeader[left ? i - 1 : i + 1]);
// } else {
// tempData.push(this.newHeader[i]);
// }
// }
// this.newHeader = tempData;
// },
// headerCellClassName({ column, columnIndex }) {
// let active =
// columnIndex - 1 === this.dragState.end
// ? `darg_active_${this.dragState.direction}`
// : "";
// let start = columnIndex - 1 === this.dragState.start ? `darg_start` : "";
// return `${active} ${start}`;
// },
// cellClassName({ column, columnIndex }) {
// return columnIndex - 1 === this.dragState.start ? `darg_start` : "";
// },
//数据格式化
formatter(row, column, cellValue, index) {
if (dictLabels[column.property]) {
if (dictLabels[column.property][cellValue]) {
......@@ -330,14 +521,104 @@ export default {
};
</script>
<style>
.Tables {
width: 100%;
margin-top: 20px;
}
<style lang="scss">
.tablePagination {
margin-top: 40px;
text-align: right;
}
.w-table {
height:100%;
　.el-table .darg_start {
background-color: #f3f3f3;
}
.el-table th {
padding: 0;
.virtual {
position: absolute;
display: block;
width: 0;
height: 0;
top: 0px;
left: 0px;
background: none;
border: none;
}
&.darg_active_left {
.virtual {
border-left: 2px dotted #666;
z-index: 99;
}
}
&.darg_active_right {
.virtual {
border-right: 2px dotted #666;
z-index: 99;
}
}
}
.thead-cell {
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: left;
cursor: pointer;
overflow: initial;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
&.w-table_moving {
.el-table th .thead-cell {
cursor: move !important;
}
.el-table__fixed {
cursor: not-allowed;
}
}
}
.tableInfo {
position: fixed;
right: 30px;
bottom: 100px;
z-index: 99999999;
}
.tableList {
width: 200px;
max-height: 500px;
padding: 5px;
margin: 0;
position: absolute;
bottom: 35px;
right: 0px;
border: 1px solid #ccc;
border-radius: 3%;
background: #fff;
overflow-y: scroll;
}
.tableList::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.tableList::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.tableList::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.2);
}
.flexList {
width: 100%;
display: flex;
height: 20px;
line-height: 20px;
}
</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>
......@@ -138,8 +138,6 @@
v-hasPermi="['base:flightInfo:close']"
>自动配舱关闭</el-button
>
<!-- <el-button type="primary" icon="el-icon-circle-check" size="mini">自动推送开启</el-button>
<el-button type="primary" icon="el-icon-circle-close" size="mini">自动推送关闭</el-button> -->
</el-form>
<Tables
ref="flightInfoTable"
......@@ -222,18 +220,6 @@
</el-date-picker>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="cutOff时间" prop="cutOffTime">
<el-select v-model="form.cutOffTime" clearable placeholder="选择时间" type="string">
<el-option
v-for="item in selectOption.cutOffTime"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="航班路线" prop="route">
<el-input
......@@ -536,16 +522,6 @@ export default {
fixed: false,
disabled: true,
},
// {
// type: "",
// name: "cutOff时间",
// value: "cutOffTime",
// width: "110",
// align: "center",
// sorTable: false,
// fixed: false,
// disabled:true
// },
{
type: "",
name: "航班号",
......