From a1ca7883ab0f58dad07533ff5855a31d5f6bfc9d Mon Sep 17 00:00:00 2001 From: denghy Date: Tue, 5 Mar 2019 16:30:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E6=95=B0=E6=8D=AE=E8=A1=A8=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Domains/Real/Services/OrderService.php | 5 +- .../vue-bigdata-table/components/button.vue | 81 ---- .../components/input-render.js | 59 --- .../vue-bigdata-table/components/input.vue | 46 -- .../components/item-table.vue | 279 ----------- .../vue-bigdata-table/components/renderDom.js | 11 - .../components/sort-button.vue | 51 -- .../src/components/vue-bigdata-table/index.js | 2 - .../vue-bigdata-table/mixins/data-handle.js | 217 --------- .../vue-bigdata-table/mixins/edit.js | 90 ---- .../vue-bigdata-table/mixins/empty-table.js | 31 -- .../vue-bigdata-table/mixins/filter.js | 14 - .../vue-bigdata-table/mixins/header-move.js | 65 --- .../vue-bigdata-table/mixins/index.js | 9 - .../vue-bigdata-table/mixins/sort.js | 40 -- .../vue-bigdata-table/mixins/style-compute.js | 202 -------- .../vue-bigdata-table/util/index.js | 136 ------ .../vue-bigdata-table/vue-bigdata-table.less | 311 ------------ .../vue-bigdata-table/vue-bigdata-table.vue | 441 ------------------ frontend/src/store/module/order.js | 9 +- frontend/src/views/virtual/orders/cards.vue | 2 +- frontend/src/views/virtual/orders/js/cards.js | 88 +--- 22 files changed, 13 insertions(+), 2176 deletions(-) delete mode 100644 frontend/src/components/vue-bigdata-table/components/button.vue delete mode 100644 frontend/src/components/vue-bigdata-table/components/input-render.js delete mode 100644 frontend/src/components/vue-bigdata-table/components/input.vue delete mode 100755 frontend/src/components/vue-bigdata-table/components/item-table.vue delete mode 100644 frontend/src/components/vue-bigdata-table/components/renderDom.js delete mode 100644 frontend/src/components/vue-bigdata-table/components/sort-button.vue delete mode 100644 frontend/src/components/vue-bigdata-table/index.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/data-handle.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/edit.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/empty-table.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/filter.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/header-move.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/index.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/sort.js delete mode 100644 frontend/src/components/vue-bigdata-table/mixins/style-compute.js delete mode 100644 frontend/src/components/vue-bigdata-table/util/index.js delete mode 100755 frontend/src/components/vue-bigdata-table/vue-bigdata-table.less delete mode 100644 frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue diff --git a/app/Domains/Real/Services/OrderService.php b/app/Domains/Real/Services/OrderService.php index 3c36b0ed..4d3d604f 100644 --- a/app/Domains/Real/Services/OrderService.php +++ b/app/Domains/Real/Services/OrderService.php @@ -59,7 +59,8 @@ class OrderService extends Service */ public function cards(array $conditions = []) { - $cards = $this->orderCardPartitionRepository->select(['sim', 'virtual_order_id', 'counts'])->withConditions($conditions)->applyConditions()->get(); + $cards = $this->orderCardPartitionRepository->select(['sim', 'virtual_order_id', 'counts']) + ->withConditions($conditions)->applyConditions()->get(); $cards->load(['virtual:id,company_id,package_id']); @@ -70,6 +71,6 @@ class OrderService extends Service } }); - return $cards; + return $cards->sortBy('sim')->values(); } } diff --git a/frontend/src/components/vue-bigdata-table/components/button.vue b/frontend/src/components/vue-bigdata-table/components/button.vue deleted file mode 100644 index a4a473c3..00000000 --- a/frontend/src/components/vue-bigdata-table/components/button.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - diff --git a/frontend/src/components/vue-bigdata-table/components/input-render.js b/frontend/src/components/vue-bigdata-table/components/input-render.js deleted file mode 100644 index 6f0f28cc..00000000 --- a/frontend/src/components/vue-bigdata-table/components/input-render.js +++ /dev/null @@ -1,59 +0,0 @@ -import Input from './input.vue'; -import Button from './button.vue'; -export default (h, { row, col, value, beforeSave, initRowIndex }, table) => { - return h('div', { - 'class': 'edit-item-con' - }, [ - h(Input, { - 'class': 'edit-item-input', - props: { - value: value - }, - on: { - input(res) { - table.editContent = res; - } - } - }), - h('div', { - 'class': 'edit-item-btn-con' - }, [ - h(Button, { - 'class': 'edit-btn', - props: { - type: 'confirm' - }, - on: { - click() { - if (beforeSave({ row, col, value, initRowIndex })) { - table.$emit('on-success-save', { - row: row, - col: col, - value: table.editContent, - initRowIndex: initRowIndex - }); - } else { - table.$emit('on-fail-save', { - row: row, - col: col, - value: table.editContent, - initRowIndex: initRowIndex - }); - } - } - } - }), - h(Button, { - 'class': 'edit-btn', - props: { - type: 'cancel' - }, - on: { - click() { - table.$emit('on-cancel-edit'); - } - } - }) - ]) - ]); -}; diff --git a/frontend/src/components/vue-bigdata-table/components/input.vue b/frontend/src/components/vue-bigdata-table/components/input.vue deleted file mode 100644 index 7b68ab32..00000000 --- a/frontend/src/components/vue-bigdata-table/components/input.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/frontend/src/components/vue-bigdata-table/components/item-table.vue b/frontend/src/components/vue-bigdata-table/components/item-table.vue deleted file mode 100755 index ce8911c9..00000000 --- a/frontend/src/components/vue-bigdata-table/components/item-table.vue +++ /dev/null @@ -1,279 +0,0 @@ - - diff --git a/frontend/src/components/vue-bigdata-table/components/renderDom.js b/frontend/src/components/vue-bigdata-table/components/renderDom.js deleted file mode 100644 index 75649b7a..00000000 --- a/frontend/src/components/vue-bigdata-table/components/renderDom.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - name: 'RenderCell', - functional: true, - props: { - render: Function, - backValue: [Number, Object] - }, - render: (h, ctx) => { - return ctx.props.render(h, ctx.props.backValue, ctx.parent); - } -}; diff --git a/frontend/src/components/vue-bigdata-table/components/sort-button.vue b/frontend/src/components/vue-bigdata-table/components/sort-button.vue deleted file mode 100644 index a4dc8fc5..00000000 --- a/frontend/src/components/vue-bigdata-table/components/sort-button.vue +++ /dev/null @@ -1,51 +0,0 @@ - - diff --git a/frontend/src/components/vue-bigdata-table/index.js b/frontend/src/components/vue-bigdata-table/index.js deleted file mode 100644 index 25dd4ff8..00000000 --- a/frontend/src/components/vue-bigdata-table/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import bigdataTable from './vue-bigdata-table.vue'; -export default bigdataTable; diff --git a/frontend/src/components/vue-bigdata-table/mixins/data-handle.js b/frontend/src/components/vue-bigdata-table/mixins/data-handle.js deleted file mode 100644 index 2efdde3d..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/data-handle.js +++ /dev/null @@ -1,217 +0,0 @@ -import ItemTable from '../components/item-table.vue'; -import { iteratorByTimes, getHeaderWords } from '../util'; -export default { - data() { - return { - times0: 0, // 当前是第几轮 - times1: 0, - times2: -1, - table1Data: [], - table2Data: [], - table3Data: [], - currentIndex: 0, // 当前展示的表格是第几个 - itemNum: 0, // 一块数据显示的数据条数 - timer: null, - scrollLeft: 0, - insideTableData: [], - initTableData: [] // 初始表格数据，用于恢复搜索和筛选, - }; - }, - computed: { - cellNum() { // 表格列数 - return this.columnsHandled.length; - }, - columnsHandled() { - let columns = [...this.columns]; - if (this.colNum > this.columns.length) { - let colLength = this.colNum - this.columns.length; - let headerWordsArr = getHeaderWords(colLength); - iteratorByTimes(colLength, (i) => { - columns.push({ - title: headerWordsArr[i] - }); - }); - } - if (this.showIndex) { - columns.unshift({ - title: 'No', - align: 'center', - width: this.indexWidthInside - }); - } - return columns; - } - }, - methods: { - getComputedTableDataIndex(colIndex) { - return this.showIndex ? (colIndex - 1) : colIndex; - }, - handleScroll(e) { - let ele = e.srcElement || e.target; - let { scrollTop, scrollLeft } = ele; - this.scrollLeft = scrollLeft; - // let direction = (scrollTop - this.scrollTop) > 0 ? 1 : ((scrollTop - this.scrollTop) < 0 ? -1 : 0); // 1 => down -1 => up 0 => stop - this.currentIndex = parseInt((scrollTop % (this.moduleHeight * 3)) / this.moduleHeight); - this.scrollTop = scrollTop; - this.$nextTick(() => { - this.setTopPlace(); - }); - }, - setTableData() { - let count1 = this.times0 * this.itemNum * 3; - this.table1Data = this.insideTableData.slice(count1, count1 + this.itemNum); - let count2 = this.times1 * this.itemNum * 3; - this.table2Data = this.insideTableData.slice(count2 + this.itemNum, count2 + this.itemNum * 2); - let count3 = this.times2 * this.itemNum * 3; - this.table3Data = this.insideTableData.slice(count3 + this.itemNum * 2, count3 + this.itemNum * 3); - }, - getTables(h) { - let table1 = this.getItemTable(h, this.table1Data, 1); - let table2 = this.getItemTable(h, this.table2Data, 2); - let table3 = this.getItemTable(h, this.table3Data, 3); - if (this.currentIndex === 0) { - return [table1, table2, table3]; - } else if (this.currentIndex === 1) { - return [table2, table3, table1]; - } else { - return [table3, table1, table2]; - } - }, - renderTable(h) { - return h('div', { - style: this.tableWidthStyles - }, this.getTables(h)); - }, - getItemTable(h, data, index) { - return h(ItemTable, { - props: { - times: this['times' + (index - 1)], - tableIndex: index, - itemData: data, - itemNum: this.itemNum, - rowStyles: this.rowStyles, - widthArr: this.colWidthArr, - columns: this.columnsHandled, - showIndex: this.showIndex, - indexRender: this.indexRender, - stripe: this.stripe, - fixedCol: this.fixedCol, - currentScrollToRowIndex: this.currentScrollToRowIndex, - canEdit: this.canEdit, - edittingTd: this.edittingTd, - startEditType: this.startEditType, - showFixedBoxShadow: this.showFixedBoxShadow, - editCellRender: this.editCellRender, - beforeSave: this.beforeSave, - canSelectText: this.canSelectText, - startSelect: this.startSelect, - endSelect: this.endSelect, - disabledHover: this.disabledHover, - highlightRow: this.highlightRow, - highlightRowIndex: this.highlightRowIndex, - indexRenderParams: this.indexRenderParams - }, - on: { - 'on-click-tr': (index, initRowIndex) => { - if (this.highlightRow) this.highlightRowIndex = index; - this.$emit('on-click-tr', index, initRowIndex); - }, - 'on-click-td': (params) => { - this.$emit('on-click-td', params); - }, - 'on-edit-cell': (row, col) => { - // this.edittingTd = `${row}-${col}`; - this._editCell(row, col, false); - }, - 'on-success-save': ({ row, col, value, initRowIndex, oldValue }) => { - let data = [...this.value]; - data[initRowIndex][col] = value; - this.$emit('input', data); - this.$emit('on-success-save', { row, col, value, initRowIndex, oldValue }); - this.edittingTd = ''; - }, - 'on-fail-save': ({ row, col, value, initRowIndex }) => { - this.$emit('on-fail-save', { row, col, value, initRowIndex }); - }, - 'on-cancel-edit': () => { - this.edittingTd = ''; - }, - 'on-paste': (data) => { - if (!this.paste) return; - let value = [...this.value]; - let rowLength = data.length; - let startSelect = this.startSelect; - let endSelect = this.endSelect; - let startRow = startSelect.row; - let startCol = startSelect.col; - let endRow = endSelect.row; - let endCol = endSelect.col; - let selectRow = endRow - startRow + 1; - let selectCol = endCol - startCol + 1; - // let lastColLength = value[0].length - startCol; - // let lastRowLength = value.length - startRow; - if (rowLength === 0) return; - let colLength = data[0].length; - if (colLength === 0) return; - // 使用复制的数据替换原数据 - for (let r = 0; r < rowLength && r < selectRow; r++) { - for (let c = 0; c < colLength && c < selectCol; c++) { - let valueRow = startRow + r; - let valueCol = startCol + c; - if (typeof value[valueRow][valueCol] === 'object') { - value[valueRow][valueCol].value = data[r][c]; - } else { - value[valueRow][valueCol] = data[r][c]; - } - } - } - // for (let r = startRow; r < selectRow; r++) { - // for (let c = startCol; c < selectCol; c++) { - // // - // } - // } - this.$emit('input', value); - this.$emit('on-paste', data); - this._tableResize(); - } - }, - key: 'table-item-key' + index, - ref: 'itemTable' + index, - attrs: { - 'data-index': index - } - }); - }, - _scrollToIndexRow(index) { - index = parseInt(index); - if (isNaN(index) || index >= this.insideTableData.length || index < 0) return; - let scrollTop = index * this.itemRowHeight; - this.$refs.outer.scrollTop = scrollTop; - this.currentScrollToRowIndex = index; - clearTimeout(this.timer); - this.timer = setTimeout(() => { - this.currentScrollToRowIndex = -1; - }, 1800); - }, - // 给表格数据添加行号，用于排序后正确修改数据 - setInitIndex(tableData) { - return tableData.map((item, i) => { - let row = item; - row.initRowIndex = i; - return row; - }); - }, - // 获取指定行的初始行号 - _getInitRowIndexByIndex(index) { - return this.insideTableData[index].initRowIndex; - }, - _getIndexByInitRowIndex(index) { - let i = -1; - let len = this.insideTableData.length; - while (++i < len) { - let row = this.insideTableData[i]; - if (row.initRowIndex === index) return i; - } - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/edit.js b/frontend/src/components/vue-bigdata-table/mixins/edit.js deleted file mode 100644 index 0ba5d304..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/edit.js +++ /dev/null @@ -1,90 +0,0 @@ -import { findNodeUpper } from '../util'; -export default { - data() { - return { - edittingTd: '', // 正在编辑的单元格的行号和列号拼接的字符串 `${row}-${col}` - editContent: '', // 用来保存编辑的内容 - selectCellsStart: {}, // 编辑模式下可选中多行多列，此用来保存其实单元格行列号 - selectCellsEnd: {}, - selectTotalColStartIndex: -1, // 选取整列起始序列号 - selectTotalColEndIndex: -1 - }; - }, - computed: { - startSelect() { - return { - row: Math.min(this.selectCellsStart.row, this.selectCellsEnd.row), - col: Math.min(this.selectCellsStart.col, this.selectCellsEnd.col) - }; - }, - endSelect() { - return { - row: Math.max(this.selectCellsStart.row, this.selectCellsEnd.row), - col: Math.max(this.selectCellsStart.col, this.selectCellsEnd.col) - }; - } - }, - watch: { - selectable() { - this.selectCellsStart = { - row: -1, - col: -1 - }; - this.selectCellsEnd = { - row: -1, - col: -1 - }; - } - }, - methods: { - _editCell(row, col, scrollToView = true) { - if (!this.canEdit || row < 0 || row > this.insideTableData.length || col < 0 || col > this.columns.length || this.edittingTd === `${row}-${col}`) return; - if (scrollToView && parseInt(this.edittingTd.split('-')[0]) !== row) this.scrollToRow(row); - this.edittingTd = `${row}-${col}`; - }, - handleMousedownOnTable(e) { - if (e.button !== 0 || (!this.paste && !this.selectable)) return; - let currentTd = e.target.tagName === 'TD' ? e.target : findNodeUpper(e.target, 'td'); - this.selectCellsStart = { - row: currentTd.getAttribute('data-row'), - col: currentTd.getAttribute('data-col') - }; - this.selectCellsEnd = { - row: currentTd.getAttribute('data-row'), - col: currentTd.getAttribute('data-col') - }; - this.canSelectText = false; - document.addEventListener('mousemove', this.handleMoveOnTable); - document.addEventListener('mouseup', this.handleUpOnTable); - }, - handleMoveOnTable(e) { - if (!(e.target.tagName === 'TD' || findNodeUpper(e.target, 'td'))) return; - let currentTd = e.target.tagName === 'TD' ? e.target : findNodeUpper(e.target, 'td'); - this.selectCellsEnd = { - row: currentTd.getAttribute('data-row'), - col: currentTd.getAttribute('data-col') - }; - }, - handleUpOnTable(e) { - if (!this.paste && !this.selectable) return; - this.canSelectText = true; - this.handleMoveOnTable(e); - document.removeEventListener('mousemove', this.handleMoveOnTable); - document.removeEventListener('mouseup', this.handleUpOnTable); - this.$emit('on-select-cells', { - start: { - row: this.startSelect.row, - col: this.startSelect.col - }, - end: { - row: this.endSelect.row, - col: this.endSelect.col - } - }); - }, - _selectCell(row, col) { - this.selectCellsStart = { row, col }; - this.selectCellsEnd = { row, col }; - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/empty-table.js b/frontend/src/components/vue-bigdata-table/mixins/empty-table.js deleted file mode 100644 index 221f7cd1..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/empty-table.js +++ /dev/null @@ -1,31 +0,0 @@ -export default { - methods: { - _createEmptyData() { - // this.$nextTick(() => { - let rowNum = this.rowNum; - let colNum = this.colNum; - if (this.rowNum && this.colNum) { - console.log(this.value.length, this.rowNum, this.colNum); - let valueRowNum = this.value.length; - let valueColNum = this.value[0] ? this.value[0].length : 0; - let totalRowNum = valueRowNum + rowNum; - let totalColNum = valueColNum + colNum; - let value = [...this.value]; - console.log(totalRowNum, valueRowNum); - for (let r = valueRowNum; r < totalRowNum; r++) { - value.push([]); - for (let c = valueColNum; c < totalColNum; c++) { - value[r].push(''); - } - } - // this. - console.log(value); - this.$emit('input', value); - // this.$nextTick(() => { - // this._tableResize(); - // }) - } - // }); - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/filter.js b/frontend/src/components/vue-bigdata-table/mixins/filter.js deleted file mode 100644 index bcb2c13f..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/filter.js +++ /dev/null @@ -1,14 +0,0 @@ -import { hasOneOf } from '../util'; -export default { - methods: { - _filter(col, queryArr) { - let value = [...this.value]; - this.insideTableData = value.filter(item => hasOneOf(item[col], queryArr)); - this._tableResize(); - }, - _cancelFilter() { - this.insideTableData = [...this.value]; - this._tableResize(); - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/header-move.js b/frontend/src/components/vue-bigdata-table/mixins/header-move.js deleted file mode 100644 index cb03dc63..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/header-move.js +++ /dev/null @@ -1,65 +0,0 @@ -import { findNodeUpper } from '../util'; -export default { - data() { - return { - isOnCellEdge: false, // 鼠标是否在表头的两个单元格之间的边框上 - canResizeCell: false, - initCellX: 0, // 用于计算鼠标移动的距离 - scrollLeft: 0, - colIndex: 0, // 在表头上移动时鼠标所在列的序号, - atLeftGivenArea: false, // 是否在表头单元格指定区域(距左侧) - atRightGivenArea: false // 是否在表头单元格指定区域(距右侧) - }; - }, - methods: { - handleMousemove(e) { - const target = e.srcElement || e.target; - let cell = target.tagName.toUpperCase() === 'TH' ? target : findNodeUpper(target, 'th'); - let cellDomRect = cell.getBoundingClientRect(); - let atLeft = (e.pageX - cellDomRect.left) < (cellDomRect.width / 2); - let atLeftGivenArea = (cellDomRect.left + this.atLeftCellPosi) >= e.pageX; - let atRightGivenArea = (cellDomRect.right - e.pageX) <= this.atRightCellPosi; - let cellIndex = parseInt(cell.getAttribute('data-index')); // 当前单元格的序号 - if (atLeft && cellIndex !== 0) { - this.isOnCellEdge = (e.pageX - cellDomRect.left) <= 1 && cellIndex - 1 !== this.fixedCol; - } else if (!atLeft && cellIndex !== this.cellNum - 1) { - this.isOnCellEdge = (cellDomRect.right - e.pageX) <= 1 && cellIndex !== this.fixedCol; - } - e.atRightGivenArea = atRightGivenArea; - e.atLeftGivenArea = atLeftGivenArea; - this.atRightGivenArea = atRightGivenArea; - this.atLeftGivenArea = atLeftGivenArea; - let index = 0; // 调整表格列宽的左侧的表格的序列 - e.colIndex = cellIndex; - this.colIndex = cellIndex; - this.$emit('on-moving-on-header', e); - if (this.canResizeCell) { - if (atLeft) { - index = cellIndex - 1; - } else { - index = cellIndex; - } - if (index === this.fixedCol) return; - let widthLeft = this.widthArr[index] + e.pageX - this.initCellX; - let widthRight = this.widthArr[index + 1] + this.initCellX - e.pageX; - this.widthArr.splice(index, 2, widthLeft, widthRight); - this.initCellX = e.pageX; - } - }, - handleMousedown(e) { - e.colIndex = this.cellIndex; - this.$emit('on-mousedown-on-header', e); - if (this.isOnCellEdge) { - this.canResizeCell = true; - this.initCellX = e.pageX; - } - }, - canNotMove(e) { - this.canResizeCell = false; - e.colIndex = this.colIndex; - e.atLeftGivenArea = this.atLeftGivenArea; - e.atRightGivenArea = this.atRightGivenArea; - this.$emit('on-mouseup-on-header', e); - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/index.js b/frontend/src/components/vue-bigdata-table/mixins/index.js deleted file mode 100644 index 426f0de6..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import headerMove from './header-move'; -import styleComputed from './style-compute'; -import dataHandle from './data-handle'; -import edit from './edit'; -import emptyTable from './empty-table'; -import sort from './sort'; -import filter from './filter'; - -export default [headerMove, styleComputed, dataHandle, edit, emptyTable, sort, filter]; diff --git a/frontend/src/components/vue-bigdata-table/mixins/sort.js b/frontend/src/components/vue-bigdata-table/mixins/sort.js deleted file mode 100644 index d30daa30..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/sort.js +++ /dev/null @@ -1,40 +0,0 @@ -import { sortArr, sortDesArr } from '../util'; -export default { - data() { - return { - sortedByColIndex: -1, - sortedType: '' - }; - }, - methods: { - showSortBtn(colIndex) { - const sortable = this.sortable ? true : this.sortIndex !== undefined; - return (sortable && !(this.showIndex && colIndex === 0) && (typeof this.sortIndex === 'number' ? colIndex <= this.sortIndex : this.sortIndex.indexOf(colIndex) >= 0)) || this.columnsHandled[colIndex].sortable; - }, - handleSort(colIndex, sortType) { - this.sortedByColIndex = colIndex; - this.sortedType = sortType; - let valueArr = [...this.value]; - colIndex = this.showIndex ? colIndex - 1 : colIndex; - if (sortType === 'up') { - sortArr(valueArr, colIndex); - } else { - sortDesArr(valueArr, colIndex); - } - this.insideTableData = [...valueArr]; - }, - handleCancelSort() { - this.sortedByColIndex = -1; - this.sortedType = ''; - this.insideTableData = [...this.value]; - }, - initSort() { - if (this.defaultSort) { - const colIndex = parseInt(Object.keys(this.defaultSort)[0]); - if (!(colIndex || colIndex === 0)) return; - const sortType = this.defaultSort[colIndex]; - this.handleSort(colIndex, sortType); - } - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/mixins/style-compute.js b/frontend/src/components/vue-bigdata-table/mixins/style-compute.js deleted file mode 100644 index f7958a1b..00000000 --- a/frontend/src/components/vue-bigdata-table/mixins/style-compute.js +++ /dev/null @@ -1,202 +0,0 @@ -import { getScrollbarWidth } from '../util'; -export default { - data() { - return { - wrapperHeight: 0, - scrollTop: 0, - moduleHeight: 0, // 三个tr块中的一块的高度 - topPlaceholderHeight: 0, // 顶部占位容器高度 - tableWidth: 0, - widthArr: [], // 用于给数据表格传递列宽 - totalRowHeight: 0, // 如果全量渲染应该是多高，用于计算占位 - currentScrollToRowIndex: -1, // 当前跳转到的行号，用于做闪烁提示 - canSelectText: true, // 用于控制是否可选中表格文字 - indexWidthInside: 0, - outerWidth: 0, // 外面容器宽度 - oldTableWidth: 0, // 旧的表格宽度，用于重新计算列宽 - highlightRowIndex: -1, // 高亮行号 - updateID: 0 - }; - }, - computed: { - fixedColCom() { - return this.showIndex ? (this.fixedCol + 1) : this.fixedCol; - }, - wrapperClasses() { - return [ - this.prefix, - this.fixed ? `${this.prefix}-fixed` : '' - ]; - }, - headerStyle() { - return { - height: this.headerHeight + 'px', - transform: 'translateX(0)' - }; - }, - showFixedBoxShadow() { - return this.scrollLeft !== 0; - }, - tableWidthStyles() { - return { width: this.tableWidth + 'px' }; - }, - rowStyles() { - return this.rowHeight !== undefined ? { height: `${this.rowHeight}px` } : {}; - }, - placeholderHeight() { - return this.totalRowHeight - this.moduleHeight * 3; // 占位容器的总高度(上 + 下) - }, - bottomPlaceholderHeight() { - return (this.placeholderHeight - this.topPlaceholderHeight) < 0 ? 0 : this.placeholderHeight - this.topPlaceholderHeight; - }, - itemRowHeight() { - return this.rowHeight === undefined ? 48 : this.rowHeight; - }, - colWidthArr() { - let len = this.cellNum; - let colWidthArr = []; - if (this.fixedWrapperWidth) { - let width = this.outerWidth; - let num = this.cellNum; - if (this.showIndex) { - colWidthArr.push(this.indexWidth); - width -= this.indexWidth; - num -= 1; - } - let i = -1; - let itemColWidth = width / num; - while (++i < num) { - colWidthArr.push(itemColWidth); - } - } else { - let i = 0; - let hasWidthCellCount = 0; // 统计设置了width的列的数量，从而为没有设置width的列分配宽度 - let noWidthCellIndexArr = []; // 没有设置宽度的列的序列 - let hasWidthCellTotalWidth = 0; // 设置了width的列一共多宽 - while (i < len) { - if (this.columnsHandled[i].width) { - hasWidthCellCount++; - hasWidthCellTotalWidth += this.columnsHandled[i].width; - colWidthArr.push(this.columnsHandled[i].width); - } else { - noWidthCellIndexArr.push(i); - colWidthArr.push(0); - } - i++; - } - let noWidthCellWidth = (this.tableWidth - hasWidthCellTotalWidth) / (len - hasWidthCellCount); - let w = 0; - let indexArrLen = noWidthCellIndexArr.length; - while (w < indexArrLen) { - colWidthArr[noWidthCellIndexArr[w]] = noWidthCellWidth; - w++; - } - // this.widthArr = colWidthArr; - } - return colWidthArr; - }, - cursorOnHeader() { - return this.headerTrStyle.cursor ? this.headerTrStyle.cursor : ((this.isOnCellEdge || this.canResizeCell) ? 'col-resize' : 'default'); - } - }, - watch: { - highlightRow() { - this._clearCurrentRow(); - } - }, - methods: { - _tableResize() { - this.$nextTick(() => { - this.updateHeight(); - this.setComputedProps(); - let scrollBarWidth = this.totalRowHeight > this.wrapperHeight ? getScrollbarWidth() : 0; - this.outerWidth = this.$refs.outer.offsetWidth - 2 - scrollBarWidth; - let width = this.colWidth * this.columns.length + (this.showIndex ? this.indexWidthInside : 0); - // this.tableWidth = width > this.outerWidth ? width : this.outerWidth; - this.tableWidth = this.fixedWrapperWidth ? this.outerWidth : (width > this.outerWidth ? width : this.outerWidth); - if (width < this.outerWidth) this._setColWidthArr(); - this.widthArr = this.colWidthArr; - }); - }, - updateHeight() { - this.$nextTick(() => { - let wrapperHeight = this.$refs.outer.offsetHeight; - this.itemNum = Math.ceil((wrapperHeight - this.headerHeight) / this.itemRowHeight) + this.appendNum; - this.moduleHeight = this.itemNum * this.itemRowHeight; - this.wrapperHeight = wrapperHeight; - this.setTopPlace(); - }); - }, - setComputedProps() { - const len = this.insideTableData.length; - this.totalRowHeight = len * this.itemRowHeight; - }, - setIndexWidth(len) { - let width = 70; - if (len <= 99) { - width = 50; - } else if (len > 99 && len <= 1000) { - width = 60; - } else if (len > 1000 && len <= 10000) { - width = 70; - } else if (len > 10000 && len <= 100000) { - width = 90; - } else { - width = 100; - } - return width; - }, - setTopPlace() { - let scrollTop = this.scrollTop; - let t0 = 0; - let t1 = 0; - let t2 = 0; - if (scrollTop > this.moduleHeight) { - switch (this.currentIndex) { - case 0: - t0 = parseInt(scrollTop / (this.moduleHeight * 3)); - t1 = t2 = t0; - break; - case 1: - t1 = parseInt((scrollTop - this.moduleHeight) / (this.moduleHeight * 3)); - t0 = t1 + 1; - t2 = t1; - break; - case 2: - t2 = parseInt((scrollTop - this.moduleHeight * 2) / (this.moduleHeight * 3)); - t0 = t1 = t2 + 1; - } - } - this.times0 = t0; - this.times1 = t1; - this.times2 = t2; - this.topPlaceholderHeight = parseInt(scrollTop / this.moduleHeight) * this.moduleHeight; - this.setTableData(); - }, - _initMountedHandle() { - if (this.indexWidth === undefined) this.indexWidthInside = this.setIndexWidth(this.insideTableData.length); - else this.indexWidthInside = this.indexWidth; - this.oldTableWidth = this.colWidthArr.reduce((sum, b) => { - return sum + b; - }, 0); - this.widthArr = this.colWidthArr; - if ((this.colWidth * this.columns.length + (this.showIndex ? this.indexWidthInside : 0)) < this.outerWidth) this._setColWidthArr(); - }, - _setColWidthArr() { - let widthArr = this.widthArr.map(width => { - return width / this.oldTableWidth * this.tableWidth; - }); - this.oldTableWidth = this.tableWidth; - this.widthArr = widthArr; - }, - _clearCurrentRow() { - this.highlightRowIndex = -1; - }, - refreshHeader() { - this.updateID++; - }, - _setHighlightRow(row) { - this.highlightRowIndex = row; - } - } -}; diff --git a/frontend/src/components/vue-bigdata-table/util/index.js b/frontend/src/components/vue-bigdata-table/util/index.js deleted file mode 100644 index d235b557..00000000 --- a/frontend/src/components/vue-bigdata-table/util/index.js +++ /dev/null @@ -1,136 +0,0 @@ -export const findNodeUpper = (ele, tag) => { - if (ele.parentNode) { - if (ele.parentNode.tagName === tag.toUpperCase()) { - return ele.parentNode; - } else { - if (ele.parentNode) return findNodeUpper(ele.parentNode, tag); - else return false; - } - } -}; - -export const getScrollbarWidth = () => { - let oP = document.createElement('p'); - let styles = { - width: '100px', - height: '100px', - overflowY: 'scroll' - }; - for (let i in styles) { - oP.style[i] = styles[i]; - } - document.body.appendChild(oP); - let scrollbarWidth = oP.offsetWidth - oP.clientWidth; - oP.remove(); - return scrollbarWidth; -}; - -export const createNewArray = (length, content = undefined) => { - let i = -1; - let arr = []; - while (++i < length) { - let con = Array.isArray(content) ? content[i] : content; - arr.push(con); - } - return arr; -}; - -export const iteratorByTimes = (times, fn) => { - let i = -1; - while (++i < times) { - fn(i); - } -}; - -export const getHeaderWords = (length) => { - let wordsArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; - let headerArr = []; - if (length <= 26) { - headerArr = wordsArr.slice(0, length); - } else { - headerArr = [...wordsArr]; - let num = length - 26; - let firstWordIndex = 0; - let secondWordIndex = 0; - let i = -1; - while (++i < num) { - firstWordIndex = Math.floor(i / 26); - secondWordIndex = i % 26; - let sumWord = `${wordsArr[firstWordIndex]}${wordsArr[secondWordIndex]}`; - headerArr.push(sumWord); - } - } - return headerArr; -}; - -// 获取数组中第一个不为空的值 -export const getFirstNotNullValue = (array, index) => { - if (!(array && array.length)) return false; - let r = -1; - let rowLength = array.length; - while (++r < rowLength) { - let item = array[r][index]; - if (item || item === 0) return item; - } - return false; -}; - -export const sortArr = (arr, index) => { - const isChineseReg = new RegExp('[\\u4E00-\\u9FFF]+', 'g'); - if (arr.length <= 1) return; - const firstNotNullValue = getFirstNotNullValue(arr, index); - if (!firstNotNullValue && firstNotNullValue !== 0) return; - if (!isChineseReg.test(firstNotNullValue)) { - if (isNaN(Number(firstNotNullValue))) { - // 非中文非数值 - arr.sort(); - } else { - // 数值型 - arr.sort((a, b) => { - return a[index] - b[index]; - }); - } - } else { - arr.sort((a, b) => { - return a[index].localeCompare(b[index], 'zh'); - }); - } -}; - -// 倒序 -export const sortDesArr = (arr, index) => { - const isChineseReg = new RegExp('[\\u4E00-\\u9FFF]+', 'g'); - if (arr.length <= 1) return; - const firstNotNullValue = getFirstNotNullValue(arr, index); - if (!firstNotNullValue && firstNotNullValue !== 0) return; - if (!isChineseReg.test(firstNotNullValue)) { - if (isNaN(Number(firstNotNullValue))) { - // 非中文非数值 - arr.sort().reverse(); - } else { - // 数值型 - arr.sort((a, b) => { - return b[index] - a[index]; - }); - } - } else { - arr.sort((a, b) => { - return b[index].localeCompare(a[index], 'zh'); - }); - } -}; - -export const hasOneOf = (str, targetArr) => { - let len = targetArr.length; - let i = -1; - while (++i < len) { - if (str.indexOf(targetArr[i]) >= 0) { - return true; - } - } - return false; -}; - -export const oneOf = (ele, targetArr) => { - return targetArr.indexOf(ele) > -1; -}; diff --git a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less deleted file mode 100755 index 4dbe6a15..00000000 --- a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less +++ /dev/null @@ -1,311 +0,0 @@ -@prefix: ~"vue-bigdata-table"; -@select-border-color: #3695FE; - -@keyframes scroll-tip { - 0% { - background: #fff; - } - - 50% { - background: #d0e8ff; - } -} - -.@{prefix} { - width: 100%; - box-sizing: border-box; - - * { - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; - color: #495060; - font-size: 12px; - font-weight: 400; - } - - &-outer { - width: 100%; - height: 100%; - overflow: auto; - border: 1px solid #e9eaec; - box-sizing: border-box; - position: relative; - - .@{prefix}-header-wrapper { - box-sizing: border-box; - z-index: 70; - - &.header-wrapper-fixed { - position: -webkit-sticky; - position: sticky; - } - - table { - table-layout: fixed; - height: 100%; - - tr th { - border-right: 1px solid #e9eaec; - border-bottom: 1px solid #e9eaec; - background: #fff; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; - - // &:last-child{ - // border-right: none; - // } - .@{prefix}-header-inside-wrapper { - box-sizing: border-box; - padding: 0 8px; - } - } - } - } - } - - &-fixed-header { - position: -webkit-sticky; - position: sticky; - transform: translateX(0); - left: 0; - z-index: 110; - transition: box-shadow .2s ease; - - &.box-shadow { - box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2); - transition: box-shadow .2s ease; - } - } - - &-wrapper { - width: 100%; - border-bottom: none; - - .@{prefix}-content { - width: 100%; - height: auto; - // &.noselect-text{ - // -webkit-touch-callout: none; - // -webkit-user-select: none; - // -khtml-user-select: none; - // -moz-user-select: none; - // -ms-user-select: none; - // user-select: none; - // } - } - - &:nth-child(2) { - border-top: 1px solid #e9eaec; - } - - &:nth-child(4) { - border-bottom: 1px solid #e9eaec; - } - - .@{prefix}-data-table { - &.@{prefix}-content-table { - - left: 0; - top: 0; - } - - border-bottom: none; - border-top: none; - table-layout: fixed; - - tr { - background: #fff; - - &.scroll-to-row-tip { - animation: scroll-tip .6s 3; - } - - td { - min-width: 0; - height: 48px; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - border-bottom: 1px solid #e9eaec; - border-right: 1px solid #e9eaec; - - border-left: 1px solid transparent; - border-top: 1px solid transparent; // 表格选中 - - .@{prefix}-cell { - box-sizing: border-box; - padding: 0 18px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; - } - - // &:last-child{ - // border-right: none; - // } - .edit-item-con { - width: 100%; - text-align: left; - padding: 0 6px; - box-sizing: border-box; - - .edit-item { - &-input { - width: ~"calc(100% - 50px)"; - float: left; - } - - &-btn-con { - float: left; - - .edit-btn { - width: 20px; - margin: 7px 4px 0 0; - } - } - } - } - - &.start-select-cell { - border-left: 1px solid @select-border-color; - border-top: 1px solid @select-border-color; - } - - &.end-select-cell { - border-right: 1px solid @select-border-color; - border-bottom: 1px solid @select-border-color; - } - - &.right-top-select-cell { - border-right: 1px solid @select-border-color; - border-top: 1px solid @select-border-color; - } - - &.left-bottom-select-cell { - border-left: 1px solid @select-border-color; - border-bottom: 1px solid @select-border-color; - } - - &.top-center-select-cell { - border-top: 1px solid @select-border-color; - } - - &.bottom-center-select-cell { - border-bottom: 1px solid @select-border-color; - } - - &.left-center-select-cell { - border-left: 1px solid @select-border-color; - } - - &.right-center-select-cell { - border-right: 1px solid @select-border-color; - } - } - - &.stripe-gray { - background: #f8f8f9; - } - - &.highlight-row { - background: #ebf7ff; - } - } - - &-left { - text-align: left; - } - - &-center { - text-align: center; - } - - &-right { - text-align: right; - } - } - } - - &-fixed { - .@{prefix}-header-wrapper { - top: 0; - left: 0; - box-sizing: border-box; - } - } - - &-fixed-table { - position: -webkit-sticky; - position: sticky; - left: 0; - z-index: 60; - transition: box-shadow .2s ease; - - &.box-shadow { - box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2); - transition: box-shadow .2s ease; - } - - td { - border-right: 1px solid #e9eaec; - // &:last-child{ - // border-right: 1px solid #e9eaec !important; - // } - } - } - - &-item-table { - position: relative; - } - - .sort-button { - &-wrapper { - display: inline-block; - position: relative; - width: 10px; - height: 11px; - transform: translateY(1px); - } - - &-item { - position: absolute; - display: inline-block; - width: 0; - height: 0; - border: 4px solid transparent; - margin: 0; - padding: 0; - cursor: pointer; - transition: border-color .2s ease; - - &-up { - top: -4px; - border-bottom: 4px solid #bbbec4; - - &:hover { - border-bottom: 4px solid #495060; - } - - &-active { - border-bottom: 4px solid #2d8cf0; - } - } - - &-down { - bottom: -4px; - border-top: 4px solid #bbbec4; - - &:hover { - border-top: 4px solid #495060; - } - - &-active { - border-top: 4px solid #2d8cf0; - } - } - } - } -} diff --git a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue deleted file mode 100644 index 65bd8c1e..00000000 --- a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue +++ /dev/null @@ -1,441 +0,0 @@ - - - - diff --git a/frontend/src/store/module/order.js b/frontend/src/store/module/order.js index 0b537c2b..bae9627c 100644 --- a/frontend/src/store/module/order.js +++ b/frontend/src/store/module/order.js @@ -3,7 +3,8 @@ import * as API from 'api/real/orders'; const state = { real_orders: {}, cards: [], - selected: [] + selected: [], + params: {} }; const mutations = { @@ -40,6 +41,12 @@ const actions = { }, getCards(context, params) { return new Promise((resolve, reject) => { + if (JSON.stringify(this.params) == JSON.stringify(params)) { + return resolve(context.state.cards); + } + + this.params = params; + API.cards(params).then(res => { if (res.code === 0) { let data = res.data.map(item => { diff --git a/frontend/src/views/virtual/orders/cards.vue b/frontend/src/views/virtual/orders/cards.vue index 65aa8957..85f766a4 100644 --- a/frontend/src/views/virtual/orders/cards.vue +++ b/frontend/src/views/virtual/orders/cards.vue @@ -131,7 +131,7 @@ ref="cardSelection" size="small" :loading="cardLoading" - :columns="cardColumns2" + :columns="cardColumns" :data="cards" :height="449" > diff --git a/frontend/src/views/virtual/orders/js/cards.js b/frontend/src/views/virtual/orders/js/cards.js index 74499809..a5fba784 100644 --- a/frontend/src/views/virtual/orders/js/cards.js +++ b/frontend/src/views/virtual/orders/js/cards.js @@ -148,7 +148,7 @@ export default { width: 90 } ], - cardColumns2: [ + cardColumns: [ { width: 60, align: "center", @@ -208,11 +208,6 @@ export default { }); } }, - { - title: "序号", - key: "_index", - width: 140 - }, { title: "SIM", key: "sim", @@ -243,87 +238,6 @@ export default { key: "package_name", width: 200 } - ], - - cardColumns: [ - { - width: 60, - align: 'center', - render: (h) => { - let value = false; - let indeterminate = false; - - let select = this.selected.find(item => { - return item.id === this.order_id; - }); - - value = !!select; - - indeterminate = - select && - select.cards && - select.cards.length !== this.cards.length; - - return h("Checkbox", { - props: { - indeterminate: value && indeterminate, - value: value - }, - on: { - input: value => { - console.log(value); - } - } - }); - }, - cellRender: (h, context) => { - let value = !!context.value; - - return h("Checkbox", { - props: { - value: value - }, - on: { - input: value => { - console.log(value); - } - } - }); - } - }, - { - title: "SIM", - width: 135, - align: 'center' - }, - { - title: "状态", - width: 100, - align: 'center', - cellRender: (h, context) => { - return h( - "Tag", { - props: { - color: context.value ? "error" : "primary" - } - }, - context.value ? "已使用" : "未使用" - ); - } - }, - { - title: "数量", - width: 80, - align: 'center' - }, - { - title: "VD企业", - width: 210 - }, - { - title: "VD套餐", - width: 150 - } ] }; },