root
/
cy_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

字体调小,间隙调小

Browse Source
master
Mr.sun 2 years ago
parent 679856cb5d
commit a5c41b8779
2 changed files with 185 additions and 184 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 368
      src/components/heavyTable/index.vue
  2. 1
      src/views/basicData/locationData/config.js

368
src/components/heavyTable/index.vue
Unescape View File

@ -16,9 +16,11 @@
:value="item.istrue" :value="item.istrue"
></el-checkbox> ></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<el-button slot="reference" plain :disabled="ColumnFilteringFlag" <el-button
><i class="el-icon-arrow-down el-icon-menu" slot="reference"
/></el-button> plain
:disabled="ColumnFilteringFlag"
><i class="el-icon-arrow-down el-icon-menu" /></el-button>
</el-popover> </el-popover>
<!-- <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }"> --> <!-- <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }"> -->
<el-table <el-table
@ -35,8 +37,11 @@
@row-click="rowClick" @row-click="rowClick"
@cell-dblclick="cellDblclick" @cell-dblclick="cellDblclick"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
:row-style="selectedHighlight" :row-style="{height:'0px'}"
:cell-style="{padding:'2px'}"
style="font-size: 12px"
> >
<!-- :row-style="selectedHighlight" -->
<!-- v-table-drag --> <!-- v-table-drag -->
<template v-for="(item, index) in config"> <template v-for="(item, index) in config">
<el-table-column <el-table-column
@ -68,8 +73,7 @@
(status) => (status) =>
item.event && item.event(status, scope.row, item.prop) item.event && item.event(status, scope.row, item.prop)
" "
>{{ "" }}</el-radio >{{ "" }}</el-radio>
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -117,7 +121,10 @@
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<template v-if="!item.children" slot-scope="scope"> <template
v-if="!item.children"
slot-scope="scope"
>
<table-cell <table-cell
:item="item" :item="item"
:scope="scope" :scope="scope"
@ -129,7 +136,10 @@
</el-table> </el-table>
<!-- </div> --> <!-- </div> -->
<!-- <div v-if="paging && paging.total / paging.size > 1" class="shim"></div> --> <!-- <div v-if="paging && paging.total / paging.size > 1" class="shim"></div> -->
<div v-if="paging" class="pagination"> <div
v-if="paging"
class="pagination"
>
<el-pagination <el-pagination
background background
v-if="paging.total / paging.size > 1" v-if="paging.total / paging.size > 1"
@ -148,192 +158,187 @@
</template> </template>
<script> <script>
import TableCell from "./item.vue"; import TableCell from './item.vue'
import elementOffsetTop from "./elementOffsetTop"; import elementOffsetTop from './elementOffsetTop'
import debounce from "./debounce"; import debounce from './debounce'
import Vue from "vue"; import Vue from 'vue'
// v-table-drag 自定义指令拖动的方式 存在bug // v-table-drag 自定义指令拖动的方式 存在bug
Vue.directive("tableDrag", { Vue.directive('tableDrag', {
update: function (el, binding, vnode) { update: function (el, binding, vnode) {
var container = el.parentNode; var container = el.parentNode
var tbody = el.getElementsByClassName("el-table__body-wrapper")[0]; var tbody = el.getElementsByClassName('el-table__body-wrapper')[0]
var thead = el.getElementsByClassName("el-table__header-wrapper")[0]; var thead = el.getElementsByClassName('el-table__header-wrapper')[0]
// 更新数据时，先还原数据本来的顺序，不然新加载的数据和表头对不上 // 更新数据时，先还原数据本来的顺序，不然新加载的数据和表头对不上
var trCollection = container.getElementsByTagName("tr"); var trCollection = container.getElementsByTagName('tr')
for (var i = 0; i < trCollection.length; i++) { for (var i = 0; i < trCollection.length; i++) {
var tr = trCollection[i]; var tr = trCollection[i]
if (i == 0) { if (i == 0) {
var collection = tr.getElementsByTagName("th"); var collection = tr.getElementsByTagName('th')
} else { } else {
var collection = tr.getElementsByTagName("td"); var collection = tr.getElementsByTagName('td')
} }
if (collection.length > 1) { if (collection.length > 1) {
let cellArr = []; let cellArr = []
for (let j = 0; j < collection.length; j++) { for (let j = 0; j < collection.length; j++) {
let cell = collection[j]; let cell = collection[j]
let classNames = cell.className; let classNames = cell.className
let className = classNames.split(" ")[0]; let className = classNames.split(' ')[0]
let arr = className.split("_"); let arr = className.split('_')
if (arr.length) { if (arr.length) {
let index = arr[arr.length - 1]; let index = arr[arr.length - 1]
cellArr[index - 1] = cell; cellArr[index - 1] = cell
} }
} }
for (let k = 0; k < cellArr.length; k++) { for (let k = 0; k < cellArr.length; k++) {
tr.insertBefore(cellArr[k], collection[k]); tr.insertBefore(cellArr[k], collection[k])
} }
} }
} }
// 列拖拽开始... // 列拖拽开始...
if (!container.className.includes("drag-table")) if (!container.className.includes('drag-table')) container.className = ' drag-table'
container.className = " drag-table";
thead.onmousedown = function (e) { thead.onmousedown = function (e) {
const clickX = event.clientX; const clickX = event.clientX
const rect = event.target.getBoundingClientRect(); const rect = event.target.getBoundingClientRect()
const divLeft = rect.left; const divLeft = rect.left
const divRight = rect.right; const divRight = rect.right
//拖动列 //拖动列
if ( if (event.target.tagName == 'DIV' && clickX > divLeft + 5 && clickX < divRight - 5) {
event.target.tagName == "DIV" &&
clickX > divLeft + 5 &&
clickX < divRight - 5
) {
//被拖动的th //被拖动的th
var ev_th = event.target.parentNode; var ev_th = event.target.parentNode
var scrollLeft = tbody.scrollLeft; var scrollLeft = tbody.scrollLeft
//算出鼠标相对元素的位置 //算出鼠标相对元素的位置
let disX = e.clientX + scrollLeft - ev_th.offsetLeft; let disX = e.clientX + scrollLeft - ev_th.offsetLeft
let disY = e.clientY - ev_th.offsetTop; let disY = e.clientY - ev_th.offsetTop
let thWidthArr = []; // 记录所有的th的宽度,依次累加 let thWidthArr = [] // 记录所有的th的宽度,依次累加
let thWidthObj = {}; // 记录所有的th的宽度,依次累加 let thWidthObj = {} // 记录所有的th的宽度,依次累加
let finallIndex = 0; //最终的th index let finallIndex = 0 //最终的th index
let directionIndex = 0; // 单击的是第几个th let directionIndex = 0 // 单击的是第几个th
let move = 0; // 移动的方向 1-右 2-左 let move = 0 // 移动的方向 1-右 2-左
const ths = ev_th.parentNode.children; const ths = ev_th.parentNode.children
var len = ths.length - 1; // 删除elementUI最后的class="gutter"的元素 var len = ths.length - 1 // 删除elementUI最后的class="gutter"的元素
for (let thi = 0; thi < len; thi++) { for (let thi = 0; thi < len; thi++) {
const itemth = ths[thi]; const itemth = ths[thi]
itemth.index = thi; itemth.index = thi
thWidthArr.push(itemth.offsetLeft); thWidthArr.push(itemth.offsetLeft)
} }
directionIndex = ev_th.index; directionIndex = ev_th.index
// 以鼠标按下的这个th处,创建一个和th内容一样的div, // 以鼠标按下的这个th处,创建一个和th内容一样的div,
const createDiv = document.createElement("div"); const createDiv = document.createElement('div')
createDiv.id = "created-div"; createDiv.id = 'created-div'
container.appendChild(createDiv); container.appendChild(createDiv)
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX; let left = e.clientX - disX
let top = e.clientY - disY; let top = e.clientY - disY
if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) { if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
return; return
} }
//绑定元素位置到positionX和positionY上面 //绑定元素位置到positionX和positionY上面
//移动当前元素 //移动当前元素
const thText = ev_th.innerHTML; const thText = ev_th.innerHTML
createDiv.innerHTML = thText; createDiv.innerHTML = thText
createDiv.style.position = "absolute"; createDiv.style.position = 'absolute'
createDiv.style.width = ev_th.offsetWidth + "px"; createDiv.style.width = ev_th.offsetWidth + 'px'
createDiv.style.height = ev_th.offsetHeight + "px"; createDiv.style.height = ev_th.offsetHeight + 'px'
createDiv.style.background = "rgb(242, 242, 242)"; createDiv.style.background = 'rgb(242, 242, 242)'
createDiv.style.lineHeight = ev_th.offsetHeight + "px"; createDiv.style.lineHeight = ev_th.offsetHeight + 'px'
createDiv.style.textAlign = "center"; createDiv.style.textAlign = 'center'
createDiv.style.left = left + "px"; createDiv.style.left = left + 'px'
createDiv.style.top = top + "px"; createDiv.style.top = top + 'px'
createDiv.style.whiteSpace = "nowrap"; createDiv.style.whiteSpace = 'nowrap'
createDiv.style.textOverflow = "ellipsis"; createDiv.style.textOverflow = 'ellipsis'
createDiv.style.overflow = "hidden"; createDiv.style.overflow = 'hidden'
finallIndex = 0; //鼠标拖动过程中所停留在的th的index finallIndex = 0 //鼠标拖动过程中所停留在的th的index
var distance = createDiv.offsetLeft + scrollLeft; var distance = createDiv.offsetLeft + scrollLeft
var i = thWidthArr.length - 1; var i = thWidthArr.length - 1
while (i >= 0) { while (i >= 0) {
if (distance >= thWidthArr[i]) { if (distance >= thWidthArr[i]) {
finallIndex = i; finallIndex = i
break; break
} }
i--; i--
} }
}; }
document.onmouseup = (e) => { document.onmouseup = (e) => {
if (directionIndex < finallIndex) { if (directionIndex < finallIndex) {
move = 1; move = 1
} //右移 } //右移
else if (directionIndex > finallIndex) { else if (directionIndex > finallIndex) {
move = 2; move = 2
} //左移 } //左移
const th_trs = thead.getElementsByTagName("tr"); const th_trs = thead.getElementsByTagName('tr')
const td_trs = tbody.getElementsByTagName("tr"); const td_trs = tbody.getElementsByTagName('tr')
container.removeChild(createDiv); container.removeChild(createDiv)
// 取消鼠标拖动和鼠标抬起事件 // 取消鼠标拖动和鼠标抬起事件
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
// 如果没有进行拖动操作(鼠标点下就抬起) // 如果没有进行拖动操作(鼠标点下就抬起)
if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) { if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
thWidthArr = []; thWidthArr = []
disX = 0; disX = 0
return; return
} }
// 遍历tr,将th和td放到最终的位置上 // 遍历tr,将th和td放到最终的位置上
var itemtr = th_trs[0]; var itemtr = th_trs[0]
if (itemtr.getElementsByTagName("th").length) { if (itemtr.getElementsByTagName('th').length) {
const ths = itemtr.getElementsByTagName("th"); const ths = itemtr.getElementsByTagName('th')
if (move === 1) { if (move === 1) {
itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1]); itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1])
} else if (move === 2) { } else if (move === 2) {
itemtr.insertBefore(ths[directionIndex], ths[finallIndex]); itemtr.insertBefore(ths[directionIndex], ths[finallIndex])
} }
} }
for (let i = 0; i < td_trs.length; i++) { for (let i = 0; i < td_trs.length; i++) {
const itemtr = td_trs[i]; const itemtr = td_trs[i]
if (itemtr.getElementsByTagName("td").length) { if (itemtr.getElementsByTagName('td').length) {
const tds = itemtr.getElementsByTagName("td"); const tds = itemtr.getElementsByTagName('td')
if (move === 1) { if (move === 1) {
itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1]); itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1])
} else if (move === 2) { } else if (move === 2) {
itemtr.insertBefore(tds[directionIndex], tds[finallIndex]); itemtr.insertBefore(tds[directionIndex], tds[finallIndex])
} }
} }
} }
// 重置thWidthArr和disX // 重置thWidthArr和disX
thWidthArr = []; thWidthArr = []
disX = 0; disX = 0
}; }
} }
}; }
}, }
}); })
export default { export default {
name: "RfHeavyTable", name: 'RfHeavyTable',
components: { components: {
TableCell, TableCell
}, },
props: { props: {
ColumnFilteringFlag: { ColumnFilteringFlag: {
type: Boolean, type: Boolean,
default: false, default: false,
require: false, require: false
}, },
config: { config: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
data: { data: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
paging: { paging: {
type: Object, type: Object,
@ -343,13 +348,13 @@ export default {
total: 0, total: 0,
autoSize: false, autoSize: false,
lineHeight: null, lineHeight: null,
offsetBottom: null, offsetBottom: null
}), })
}, },
loading: Boolean, loading: Boolean,
tableClass: { tableClass: {
type: String, type: String,
default: "heavyTable", default: 'heavyTable'
}, },
tableProps: Object, tableProps: Object,
@ -359,20 +364,20 @@ export default {
*/ */
colorStatus: { colorStatus: {
type: Object, type: Object,
default: () => ({}), default: () => ({})
}, },
// 是否显示点击样式 // 是否显示点击样式
isSelectedHighlight: { isSelectedHighlight: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}, },
data() { data() {
return { return {
radioSlot: "", radioSlot: '',
selecteddata: [], //选中数据 selecteddata: [], //选中数据
sortdata: {}, //排序 sortdata: {}, //排序
getIndex: "", //行点击 getIndex: '', //行点击
checkedColumns: [], //列筛选 checkedColumns: [], //列筛选
checkBoxGroup: [], //列筛选 checkBoxGroup: [], //列筛选
// dragState: { // dragState: {
@ -382,28 +387,26 @@ export default {
// dragging: false, // 是否正在拖动 // dragging: false, // 是否正在拖动
// direction: undefined, // 拖动方向 // direction: undefined, // 拖动方向
// }, // },
tableHeader: this.config, //表头 tableHeader: this.config //表头
}; }
}, },
computed: { computed: {
changeId() { changeId() {
return this.tableProps && this.tableProps["row-key"] return this.tableProps && this.tableProps['row-key'] ? this.tableProps['row-key'] : 'id'
? this.tableProps["row-key"] }
: "id";
},
}, },
beforeUpdate() { beforeUpdate() {
// 重新布局表格 // 重新布局表格
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.heavyTable.doLayout(); this.$refs.heavyTable.doLayout()
}); })
}, },
// 监控列隐藏 // 监控列隐藏
watch: { watch: {
checkedColumns: { checkedColumns: {
handler(val) { handler(val) {
this.$emit("configChangeShow", val); this.$emit('configChangeShow', val)
let arr = this.checkBoxGroup.filter((i) => !val.includes(i)); // 未选中 let arr = this.checkBoxGroup.filter((i) => !val.includes(i)) // 未选中
/** /**
* 是否记录本地缓存 * 是否记录本地缓存
* localStorage.setItem(this.colTable, JSON.stringify(arr)); * localStorage.setItem(this.colTable, JSON.stringify(arr));
@ -412,29 +415,29 @@ export default {
this.config.filter((i) => { this.config.filter((i) => {
if (arr.indexOf(i.label) != -1) { if (arr.indexOf(i.label) != -1) {
this.$nextTick(function () { this.$nextTick(function () {
i.istrue = false; i.istrue = false
this.$refs.heavyTable.doLayout(); this.$refs.heavyTable.doLayout()
}); })
} else { } else {
this.$nextTick(function () { this.$nextTick(function () {
i.istrue = true; i.istrue = true
this.$refs.heavyTable.doLayout(); this.$refs.heavyTable.doLayout()
}); })
} }
}); })
}, },
immediate: false, immediate: false
}, }
}, },
created() { created() {
// 列筛选 // 列筛选
this.config.forEach((item, index) => { this.config.forEach((item, index) => {
this.checkBoxGroup.push(item.label); this.checkBoxGroup.push(item.label)
if (item.istrue || item.istrue === undefined) { if (item.istrue || item.istrue === undefined) {
// 初始化并不是所有都为true,且会存在不写istrue属性的(这时为undefined) // 初始化并不是所有都为true,且会存在不写istrue属性的(这时为undefined)
this.checkedColumns.push(item.label); this.checkedColumns.push(item.label)
} }
}); })
/** /**
* 是否记录本地缓存 * 是否记录本地缓存
* *
@ -451,69 +454,66 @@ export default {
}, },
mounted() { mounted() {
if (this.paging.autoSize) { if (this.paging.autoSize) {
this.autoTableContentHeight(); this.autoTableContentHeight()
window.addEventListener( window.addEventListener('resize', debounce(this.autoTableContentHeight, 1000))
"resize",
debounce(this.autoTableContentHeight, 1000)
);
} }
}, },
methods: { methods: {
// 处理点击表格当前项目按钮事件 // 处理点击表格当前项目按钮事件
handlerEvent(event, row, currItemKey) { handlerEvent(event, row, currItemKey) {
this.$emit(event, row, currItemKey); this.$emit(event, row, currItemKey)
}, },
// 翻页 // 翻页
handlePageChange(val) { handlePageChange(val) {
this.operatBtnClick("handlePageChange", val, this.propdata); this.operatBtnClick('handlePageChange', val, this.propdata)
}, },
// 选择框改变事件 // 选择框改变事件
handleSelectionChange(val) { handleSelectionChange(val) {
this.selecteddata = val; this.selecteddata = val
this.$emit("handleselection", val); this.$emit('handleselection', val)
this.$emit("selectionChange", val); this.$emit('selectionChange', val)
}, },
// 过滤改变事件 // 过滤改变事件
sortChange(val) { sortChange(val) {
console.log(val); console.log(val)
this.sortdata = val; this.sortdata = val
this.$emit("sortChange", val); this.$emit('sortChange', val)
}, },
// 行点击事件 // 行点击事件
rowClick(row) { rowClick(row) {
this.getIndex = row.index; this.getIndex = row.index
this.$emit("rowClick", row); this.$emit('rowClick', row)
}, },
// 双击某个单元格 // 双击某个单元格
cellDblclick(row, column) { cellDblclick(row, column) {
this.$emit("cell-dblclick", row, column); this.$emit('cell-dblclick', row, column)
}, },
// 清除或者设置点击样式 // 清除或者设置点击样式
setIndex(index = "") { setIndex(index = '') {
this.getIndex = index; this.getIndex = index
}, },
// 行点击事件 // 行点击事件
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
//把每一行的索引放进row //把每一行的索引放进row
row.index = rowIndex; row.index = rowIndex
}, },
// 行点击事件 // 行点击事件
selectedHighlight({ row, rowIndex }) { selectedHighlight({ row, rowIndex }) {
if (this.getIndex === rowIndex && this.isSelectedHighlight) { if (this.getIndex === rowIndex && this.isSelectedHighlight) {
return { return {
"background-color": "#e6f1fe", 'background-color': '#e6f1fe'
}; }
} }
const { fieldName, colorList } = this.colorStatus; const { fieldName, colorList } = this.colorStatus
if (!fieldName || !colorList) return; if (!fieldName || !colorList) return
const status = row[fieldName]; const status = row[fieldName]
const item = colorList.find((it) => it.status === status); const item = colorList.find((it) => it.status === status)
if (item && item.color) { if (item && item.color) {
return { return {
"background-color": `${item.color}`, 'background-color': `${item.color}`
}; }
} }
}, },
// // //拖拽列 // // //拖拽列
@ -638,26 +638,26 @@ export default {
// 设置表格一页最大行数 // 设置表格一页最大行数
autoTableContentHeight() { autoTableContentHeight() {
if (!this.$refs["heavyTable"]) return; if (!this.$refs['heavyTable']) return
const el = this.$refs["heavyTable"].bodyWrapper; const el = this.$refs['heavyTable'].bodyWrapper
// const ele = this.$refs["heavyTable"].bodyWrapper.firstChild.children[1].children[0]//el-table__cell // const ele = this.$refs["heavyTable"].bodyWrapper.firstChild.children[1].children[0]//el-table__cell
// console.log(ele.offsetHeight) // console.log(ele.offsetHeight)
const fullHeight = document.body.clientHeight; const fullHeight = document.body.clientHeight
const offsetTop = elementOffsetTop(el); const offsetTop = elementOffsetTop(el)
const offsetBottom = this.paging.offsetBottom || 92; const offsetBottom = this.paging.offsetBottom || 92
const tableLineHeight = this.paging.lineHeight || 57; const tableLineHeight = this.paging.lineHeight || 57
const visibleHeight = fullHeight - offsetTop - offsetBottom; const visibleHeight = fullHeight - offsetTop - offsetBottom
const rows = Math.floor(visibleHeight / tableLineHeight); const rows = Math.floor(visibleHeight / tableLineHeight)
const oldPages = Math.ceil(this.paging.total / this.paging.size); const oldPages = Math.ceil(this.paging.total / this.paging.size)
const nowPages = Math.ceil(this.paging.total / rows); const nowPages = Math.ceil(this.paging.total / rows)
if (oldPages > nowPages && this.paging.page > nowPages) { if (oldPages > nowPages && this.paging.page > nowPages) {
this.paging.page = nowPages; this.paging.page = nowPages
} }
this.paging.size = rows < 1 ? 1 : rows; this.paging.size = rows < 1 ? 1 : rows
this.$emit("current-change", this.paging.page); this.$emit('current-change', this.paging.page)
}, }
}, }
}; }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>

1
src/views/basicData/locationData/config.js
Unescape View File

@ -10,6 +10,7 @@ export function tableConfig() {
prop: "index", prop: "index",
type: "index", type: "index",
istrue: true, istrue: true,
}, },
{ {
label: "货位id", label: "货位id",

Write Preview
Loading…
Cancel
Save