|
|
@@ -1,6 +1,348 @@
|
|
|
import { transDecimalPlace, getDecimalPlaces } from '../common/customTable';
|
|
|
export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ copyCells: [],
|
|
|
+ dragState: {}, // 记录子表的列宽移动的一些数值
|
|
|
+ dragState1: {}, // 记录子表的行高移动的一些数值
|
|
|
+ dragging: false,//列宽
|
|
|
+ dragging1: false,//行高
|
|
|
+ isMouseOver: false//鼠标是否在表格内
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('keydown', this.handleEvent)
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('keydown', this.handleEvent)
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 鼠标拖动行高
|
|
|
+ handleMouseMoveHeight(event) {
|
|
|
+ if (!['/addMixedSheet', '/editBalanceSheet'].includes(this.$route.path)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let target = event.target
|
|
|
+ while (target && target.tagName !== 'TH') {
|
|
|
+ target = target.parentNode
|
|
|
+ }
|
|
|
+ if (!this.dragging1) {
|
|
|
+ let rect = target.getBoundingClientRect()
|
|
|
+ const bodyStyle = event.target.style
|
|
|
+ if (rect.height > 12 && rect.bottom - event.pageY < 8) {
|
|
|
+ // 拖拽的鼠标样式
|
|
|
+ bodyStyle.cursor = 'row-resize'
|
|
|
+ } else if (!this.dragging1) {
|
|
|
+ bodyStyle.cursor = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleMouseOutHeight(event) {
|
|
|
+ event.target.style.cursor = ''
|
|
|
+ },
|
|
|
+ handleMouseDownHeight(event, rowIndex) {
|
|
|
+ if (!['/addMixedSheet', '/editBalanceSheet'].includes(this.$route.path)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let target = event.target
|
|
|
+ while (target && target.tagName !== 'TH') {
|
|
|
+ target = target.parentNode
|
|
|
+ }
|
|
|
+ let rect = target.getBoundingClientRect()
|
|
|
+ console.log(rect,event)
|
|
|
+ if (rect.height > 12 && rect.bottom - event.pageY < 8) {
|
|
|
+ // 开始拖拽
|
|
|
+ this.dragging1 = true
|
|
|
+ // 当前拖拽的列所在的表格
|
|
|
+ let tableEl = event.target
|
|
|
+ // 当前所在列（单元格）
|
|
|
+ let thEL = event.target
|
|
|
+ while (tableEl && tableEl.tagName !== 'TABLE') {
|
|
|
+ tableEl = tableEl.parentNode
|
|
|
+ }
|
|
|
+ // 获取列宽拖拽的显示线（拖拽线）
|
|
|
+ let resizeProxy = tableEl.querySelector(
|
|
|
+ 'thead'
|
|
|
+ )
|
|
|
+ while (thEL && thEL.tagName !== 'TH') {
|
|
|
+ thEL = thEL.parentNode
|
|
|
+ }
|
|
|
+ const columnRect = thEL.getBoundingClientRect()
|
|
|
+ thEL.classList.add('noclick')
|
|
|
+ this.dragState1 = {
|
|
|
+ startMouseTop: event.clientY, // 鼠标开始的地方
|
|
|
+ columnHeight: columnRect.height, // th开始拖拽的宽度
|
|
|
+ }
|
|
|
+ resizeProxy.classList.remove('dn')
|
|
|
+ document.onselectstart = function () {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ document.ondragstart = function () {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseMove = event => {
|
|
|
+ // 拖拽中，拖拽线与鼠标的位置同步
|
|
|
+ resizeProxy.style.top = event.clientY + 'px'
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseUp = () => {
|
|
|
+ if (this.dragging1) {
|
|
|
+ // 拖拽完毕
|
|
|
+ // console.log(this.dragState1)
|
|
|
+ // console.log(resizeProxy.style.top)
|
|
|
+ const { startMouseTop, columnHeight } = this.dragState1
|
|
|
+ const finalTop = parseInt(resizeProxy.style.top, 10)
|
|
|
+ const columnHeightDiff = finalTop - startMouseTop
|
|
|
+ const finalColumnHeight = columnHeightDiff + columnHeight
|
|
|
+ // console.log(finalColumnHeight)
|
|
|
+ // thEL.style.width = finalColumnWidth + 'px'
|
|
|
+ // console.log(finalColumnWidth)
|
|
|
+ this.config.data[rowIndex].forEach((el, index) => {
|
|
|
+ let cellValueStyle = el.ShowStyle?JSON.parse(el.ShowStyle) : {}
|
|
|
+ this.$set(this.config.data[rowIndex][index], 'ShowStyle', JSON.stringify({ ...cellValueStyle, height: finalColumnHeight }))
|
|
|
+ })
|
|
|
+ resizeProxy.style.top = '0px'
|
|
|
+ event.target.style.cursor = ''
|
|
|
+ this.dragging1 = false
|
|
|
+ this.dragState1 = {}
|
|
|
+ resizeProxy.classList.add('dn')
|
|
|
+ }
|
|
|
+
|
|
|
+ document.removeEventListener('mousemove', handleMouseMove)
|
|
|
+ document.removeEventListener('mouseup', handleMouseUp)
|
|
|
+ document.onselectstart = null
|
|
|
+ document.ondragstart = null
|
|
|
+ setTimeout(function () {
|
|
|
+ thEL.classList.remove('noclick')
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', handleMouseMove)
|
|
|
+ document.addEventListener('mouseup', handleMouseUp)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 鼠标拖动列宽
|
|
|
+ handleMouseMove(event) {
|
|
|
+ if (!['/addMixedSheet', '/editBalanceSheet'].includes(this.$route.path)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let target = event.target
|
|
|
+ while (target && target.tagName !== 'TH') {
|
|
|
+ target = target.parentNode
|
|
|
+ }
|
|
|
+ if (!this.dragging) {
|
|
|
+ let rect = target.getBoundingClientRect()
|
|
|
+ const bodyStyle = event.target.style
|
|
|
+ if (rect.width > 12 && rect.right - event.pageX < 8) {
|
|
|
+ // 拖拽的鼠标样式
|
|
|
+ bodyStyle.cursor = 'col-resize'
|
|
|
+ } else if (!this.dragging) {
|
|
|
+ bodyStyle.cursor = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleMouseOut(event) {
|
|
|
+ event.target.style.cursor = ''
|
|
|
+ },
|
|
|
+ handleMouseDown(event, colIndex) {
|
|
|
+ if (!['/addMixedSheet', '/editBalanceSheet'].includes(this.$route.path)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let target = event.target
|
|
|
+ while (target && target.tagName !== 'TH') {
|
|
|
+ target = target.parentNode
|
|
|
+ }
|
|
|
+ let rect = target.getBoundingClientRect()
|
|
|
+ // console.log(rect.width > 12 && rect.right - event.pageX < 8)
|
|
|
+ if (rect.width > 12 && rect.right - event.pageX < 8) {
|
|
|
+ // 开始拖拽
|
|
|
+ this.dragging = true
|
|
|
+ // 当前拖拽的列所在的表格
|
|
|
+ let tableEl = event.target
|
|
|
+ // 当前所在列（单元格）
|
|
|
+ let thEL = event.target
|
|
|
+ while (tableEl && tableEl.tagName !== 'TABLE') {
|
|
|
+ tableEl = tableEl.parentNode
|
|
|
+ }
|
|
|
+ // 获取列宽拖拽的显示线（拖拽线）
|
|
|
+ let resizeProxy = tableEl.querySelector(
|
|
|
+ 'thead'
|
|
|
+ )
|
|
|
+ while (thEL && thEL.tagName !== 'TH') {
|
|
|
+ thEL = thEL.parentNode
|
|
|
+ }
|
|
|
+ const columnRect = thEL.getBoundingClientRect()
|
|
|
+ thEL.classList.add('noclick')
|
|
|
+ this.dragState = {
|
|
|
+ startMouseLeft: event.clientX, // 鼠标开始的地方
|
|
|
+ columnWidth: columnRect.width, // th开始拖拽的宽度
|
|
|
+ }
|
|
|
+ resizeProxy.classList.remove('dn')
|
|
|
+ document.onselectstart = function () {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ document.ondragstart = function () {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseMove = event => {
|
|
|
+ // 拖拽中，拖拽线与鼠标的位置同步
|
|
|
+ resizeProxy.style.left = event.clientX + 'px'
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseUp = () => {
|
|
|
+ if (this.dragging) {
|
|
|
+ // 拖拽完毕
|
|
|
+ const { startMouseLeft, columnWidth } = this.dragState
|
|
|
+ const finalLeft = parseInt(resizeProxy.style.left, 10)
|
|
|
+ const columnWidthDiff = finalLeft - startMouseLeft
|
|
|
+ const finalColumnWidth = columnWidthDiff + columnWidth
|
|
|
+ // thEL.style.width = finalColumnWidth + 'px'
|
|
|
+ // console.log(finalColumnWidth)
|
|
|
+ this.config.data.forEach((el, index) => {
|
|
|
+ let cellValueStyle = el[colIndex].ShowStyle ? JSON.parse(el[colIndex].ShowStyle) : {}
|
|
|
+ this.$set(this.config.data[index][colIndex], 'ShowStyle', JSON.stringify({ ...cellValueStyle, width: finalColumnWidth }))
|
|
|
+ })
|
|
|
+ this.getTableWidth()
|
|
|
+ resizeProxy.style.left = '0px'
|
|
|
+ event.target.style.cursor = ''
|
|
|
+ this.dragging = false
|
|
|
+ this.dragState = {}
|
|
|
+ resizeProxy.classList.add('dn')
|
|
|
+ }
|
|
|
+
|
|
|
+ document.removeEventListener('mousemove', handleMouseMove)
|
|
|
+ document.removeEventListener('mouseup', handleMouseUp)
|
|
|
+ document.onselectstart = null
|
|
|
+ document.ondragstart = null
|
|
|
+ setTimeout(function () {
|
|
|
+ thEL.classList.remove('noclick')
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', handleMouseMove)
|
|
|
+ document.addEventListener('mouseup', handleMouseUp)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取表格宽度
|
|
|
+ getTableWidth() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ $(document.getElementById('myTable').querySelector('#row-col-select')).css({
|
|
|
+ 'top': 0,
|
|
|
+ 'left': 0,
|
|
|
+ 'visibility': `hidden`,
|
|
|
+ 'height': 0,
|
|
|
+ 'width': 0
|
|
|
+ })
|
|
|
+ var totalWidth = 36;
|
|
|
+ this.config.data.forEach((el, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ el.forEach(item => {
|
|
|
+ let cellValueStyle = item.ShowStyle ? JSON.parse(item.ShowStyle) : {}
|
|
|
+ totalWidth += cellValueStyle.width ? cellValueStyle.width : 140
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(totalWidth)
|
|
|
+ // 设置table的宽度为所有列宽度之和
|
|
|
+ $('table').width(totalWidth);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMouseOver() {
|
|
|
+ this.isMouseOver = true;
|
|
|
+ },
|
|
|
+ handleMouseOut() {
|
|
|
+ this.isMouseOver = false;
|
|
|
+ },
|
|
|
+ // 键盘事件
|
|
|
+ async handleEvent(event) {
|
|
|
+ if (!['/addMixedSheet', '/editBalanceSheet'].includes(this.$route.path)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const cellsKey=this.$route.path=='/addMixedSheet'?'selectedCells':'mergeSelectedCells'
|
|
|
+ if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
|
|
|
+ // console.log('ctrl + c')
|
|
|
+ const cellCopy = this.selectCell ? this.selectCell : this[cellsKey]
|
|
|
+ this.copyCells = Array.isArray(cellCopy) ? cellCopy : [cellCopy]
|
|
|
+ if (this.selectCell) {
|
|
|
+ if (!this.isMouseOver) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // console.log(this.selectCell.ShowValue)
|
|
|
+ // 创建一个临时的 textarea 元素。
|
|
|
+ const el = document.createElement('textarea');
|
|
|
+ // 将需要复制的文本内容赋值给 textarea 元素。
|
|
|
+ el.value = this.selectCell.ShowValue;
|
|
|
+ //将 textarea 元素添加到页面中。
|
|
|
+ document.body.appendChild(el);
|
|
|
+ //选中 textarea 元素中的文本。
|
|
|
+ el.select();
|
|
|
+ // 执行复制命令，将选中的文本复制到剪贴板
|
|
|
+ document.execCommand('copy');
|
|
|
+ //从页面中移除 textarea 元素。
|
|
|
+ document.body.removeChild(el);
|
|
|
+ }
|
|
|
+ } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
|
|
|
+ // console.log('ctrl + v')
|
|
|
+ // console.log(this.copyCells)
|
|
|
+ if (this.selectCell && this.selectCell.CanEdit) {
|
|
|
+ // console.log(this.selectCell,this.selectCell.CanEdit)
|
|
|
+ return
|
|
|
+ // event.preventDefault();
|
|
|
+ }
|
|
|
+ const cell = this.selectCell ? this.selectCell : this[cellsKey]
|
|
|
+ const pasteFirstCell = Array.isArray(cell) ? cell[0] : cell
|
|
|
+ const copyFitstCell = this.copyCells[0]
|
|
|
+ // console.log(pasteFirstCell, copyFitstCell)
|
|
|
+ if (!copyFitstCell) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const rowNum = pasteFirstCell.rIndex - copyFitstCell.rIndex
|
|
|
+ const colNum = pasteFirstCell.cIndex - copyFitstCell.cIndex
|
|
|
+ // console.log(rowNum, colNum, this.copyCells)
|
|
|
+ this.copyCells.forEach(item => {
|
|
|
+ let el = JSON.parse(JSON.stringify(item))
|
|
|
+ if (this.config.data[el.rIndex + rowNum] && this.config.data[el.rIndex + rowNum][el.cIndex + colNum]) {
|
|
|
+ const styleCss = el.ShowStyle ? JSON.parse(el.ShowStyle) : {};
|
|
|
+ el.ShowStyle = JSON.stringify({
|
|
|
+ ...styleCss,
|
|
|
+ glObj: null,
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ DataType: el.DataType,
|
|
|
+ ShowValue: el.ShowValue,
|
|
|
+ Value: el.Value,
|
|
|
+ DataTimeType: el.DataTimeType,
|
|
|
+ DataTime: el.DataTime,
|
|
|
+ EdbInfoId: el.EdbInfoId,
|
|
|
+ Extra: el.Extra,
|
|
|
+ ShowStyle: el.ShowStyle ? this.filterWidth(el.ShowStyle) : '',
|
|
|
+ ShowFormatValue: el.ShowFormatValue,
|
|
|
+ }
|
|
|
+ for (let i in obj) {
|
|
|
+ this.config.data[el.rIndex + rowNum][el.cIndex + colNum][i] = obj[i]
|
|
|
+ }
|
|
|
+ // // console.log(this.config.data[el.rIndex + rowNum][el.cIndex + colNum])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.commonInitCell()
|
|
|
+ // 禁止外部粘贴
|
|
|
+ // event.preventDefault();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 过滤宽度高度
|
|
|
+ filterWidth(str) {
|
|
|
+ let obj = JSON.parse(str)
|
|
|
+ if (obj.width) {
|
|
|
+ delete obj.width
|
|
|
+ }
|
|
|
+ if (obj.height) {
|
|
|
+ delete obj.height
|
|
|
+ }
|
|
|
+ return JSON.stringify(obj)
|
|
|
+ },
|
|
|
// 判断时间
|
|
|
isDateInRange(dateStr) {
|
|
|
const today = new Date();
|
|
|
@@ -293,16 +635,30 @@ export default {
|
|
|
this.config.data[rindex][cindex]["rowIndex"] = row;
|
|
|
},
|
|
|
// 设置背景色及字体颜色
|
|
|
- getShowCss(style) {
|
|
|
+ getShowCss(style, type = '') {
|
|
|
const styleCss = JSON.parse(style);
|
|
|
let color = styleCss.glObj ? styleCss.glObj["color"] : styleCss["color"];
|
|
|
let BackgroundColor = styleCss.glObj
|
|
|
? styleCss.glObj["background-color"]
|
|
|
: styleCss["background-color"];
|
|
|
- return {
|
|
|
+ let obj = {
|
|
|
color: color,
|
|
|
"background-color": BackgroundColor,
|
|
|
- };
|
|
|
+ 'text-align': styleCss.align ? styleCss.align : 'center',
|
|
|
+ 'width': styleCss.width ? styleCss.width + 'px' : '140px',
|
|
|
+ 'height': styleCss.height ? styleCss.height + 'px' : '35px',
|
|
|
+ }
|
|
|
+ if (type == 'header') {
|
|
|
+ obj = {
|
|
|
+ 'width': styleCss.width ? styleCss.width + 'px' : '140px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'height') {
|
|
|
+ obj = {
|
|
|
+ 'height': styleCss.height ? styleCss.height + 'px' : '35px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
},
|
|
|
},
|
|
|
};
|
ldong