From a786409d7f6769f43c107159dd84faf4a2927a9a Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期一, 03 六月 2024 17:07:59 +0800 Subject: [PATCH] 1 --- src/components/scTable/index.vue | 718 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 377 insertions(+), 341 deletions(-) diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue index 2c591cc..6416bf1 100644 --- a/src/components/scTable/index.vue +++ b/src/components/scTable/index.vue @@ -3,20 +3,26 @@ * @version: 1.10 * @Author: sakuya * @Date: 2021骞�11鏈�29鏃�21:51:15 - * @LastEditors: gaoshp - * @LastEditTime: 2024-04-08 14:47:10 + * @LastEditors: Sneed + * @LastEditTime: 2024-05-12 13:35:21 --> <template> - <div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading"> - <div class="scTable-table" :style="{'height':_table_height}"> - <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange"> + <div class="scTable" :style="{ 'height': _height }" ref="scTableMain" v-loading="loading"> + <div class="scTable-table" :style="{ 'height': _table_height }"> + <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" + :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" + :stripe="config.stripe" :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" + @sort-change="sortChange" @filter-change="filterChange"> <slot></slot> <template v-for="(item, index) in userColumn" :key="index"> - <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip"> + <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" + :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" + :filter-method="remoteFilter || !item.filters ? null : filterHandler" + :show-overflow-tooltip="item.showOverflowTooltip"> <template #default="scope"> <slot :name="item.prop" v-bind="scope"> - {{scope.row[item.prop]}} + {{ scope.row[item.prop] }} </slot> </template> </el-table-column> @@ -29,17 +35,23 @@ </div> <div class="scTable-page" v-if="!hidePagination || !hideDo"> <div class="scTable-pagination"> - <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination> + <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" + :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" + @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination> </div> <div class="scTable-do" v-if="!hideDo"> - <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button> - <el-popover v-if="column" placement="top" title="鍒楄缃�" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false"> + <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle + style="margin-left:15px"></el-button> + <el-popover v-if="column" placement="top" title="鍒楄缃�" :width="500" trigger="click" :hide-after="0" + @show="customColumnShow = true" @after-leave="customColumnShow = false"> <template #reference> <el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button> </template> - <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting> + <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" + @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting> </el-popover> - <el-popover v-if="!hideSetting" placement="top" title="琛ㄦ牸璁剧疆" :width="400" trigger="click" :hide-after="0"> + <el-popover v-if="!hideSetting" placement="top" title="琛ㄦ牸璁剧疆" :width="400" trigger="click" + :hide-after="0"> <template #reference> <el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button> </template> @@ -63,344 +75,368 @@ </template> <script> - import config from "@/config/table"; - import columnSetting from './columnSetting' +import config from "@/config/table"; +import columnSetting from './columnSetting' - export default { - name: 'scTable', - components: { - columnSetting - }, - props: { - tableName: { type: String, default: "" }, - apiObj: { type: Object, default: () => {} }, - params: { type: Object, default: () => ({}) }, - data: { type: Object, default: () => {} }, - height: { type: [String,Number], default: "100%" }, - size: { type: String, default: "default" }, - border: { type: Boolean, default: false }, - stripe: { type: Boolean, default: false }, - pageSize: { type: Number, default: config.pageSize }, - pageSizes: { type: Array, default: config.pageSizes }, - rowKey: { type: String, default: "" }, - summaryMethod: { type: Function, default: null }, - column: { type: Object, default: () => {} }, - remoteSort: { type: Boolean, default: false }, - remoteFilter: { type: Boolean, default: false }, - remoteSummary: { type: Boolean, default: false }, - hidePagination: { type: Boolean, default: false }, - hideDo: { type: Boolean, default: false }, - hideRefresh: { type: Boolean, default: false }, - hideSetting: { type: Boolean, default: false }, - paginationLayout: { type: String, default: config.paginationLayout }, - }, - watch: { - //鐩戝惉浠巔rops閲屾嬁鍒板�间簡 - data(){ - this.tableData = this.data; - this.total = this.tableData.length; - }, - apiObj(){ - this.tableParams = this.params; - this.refresh(); - }, - column(){ - this.userColumn=this.column; - } - }, - computed: { - _height() { - return Number(this.height)?Number(this.height)+'px':this.height - }, - _table_height() { - return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)" - } - }, +export default { + name: 'scTable', + components: { + columnSetting + }, + props: { + tableName: { type: String, default: "" }, + apiObj: { type: Object, default: () => { } }, + params: { type: Object, default: () => ({}) }, + data: { type: Object, default: () => { } }, + height: { type: [String, Number], default: "100%" }, + size: { type: String, default: "default" }, + border: { type: Boolean, default: false }, + stripe: { type: Boolean, default: false }, + pageSize: { type: Number, default: config.pageSize }, + pageSizes: { type: Array, default: config.pageSizes }, + rowKey: { type: String, default: "" }, + summaryMethod: { type: Function, default: null }, + column: { type: Object, default: () => { } }, + remoteSort: { type: Boolean, default: false }, + remoteFilter: { type: Boolean, default: false }, + remoteSummary: { type: Boolean, default: false }, + hidePagination: { type: Boolean, default: false }, + hideDo: { type: Boolean, default: false }, + hideRefresh: { type: Boolean, default: false }, + hideSetting: { type: Boolean, default: false }, + paginationLayout: { type: String, default: config.paginationLayout }, + }, + watch: { + //鐩戝惉浠巔rops閲屾嬁鍒板�间簡 data() { - return { - scPageSize: this.pageSize, - isActivat: true, - emptyText: "鏆傛棤鏁版嵁", - toggleIndex: 0, - tableData: [], - total: 0, - currentPage: 1, - prop: null, - order: null, - loading: false, - tableHeight:'100%', - tableParams: this.params, - userColumn: [], - customColumnShow: false, - summary: {}, - config: { - size: this.size, - border: this.border, - stripe: this.stripe - } - } + this.tableData = this.data; + this.total = this.tableData.length; }, - mounted() { - //鍒ゆ柇鏄惁寮�鍚嚜瀹氫箟鍒� - if(this.column){ - this.getCustomColumn() - }else{ - this.userColumn = this.column - } - //鍒ゆ柇鏄惁闈欐�佹暟鎹� - if(this.apiObj){ - this.getData(); - }else if(this.data){ - this.tableData = this.data; - this.total = this.tableData.length - } + apiObj() { + this.tableParams = this.params; + this.refresh(); }, - activated(){ - if(!this.isActivat){ - this.$refs.scTable.doLayout() - } + column() { + this.userColumn = this.column; + } + }, + computed: { + _height() { + return Number(this.height) ? Number(this.height) + 'px' : this.height }, - deactivated(){ - this.isActivat = false; - }, - methods: { - //鑾峰彇鍒� - async getCustomColumn(){ - const userColumn = await config.columnSettingGet(this.tableName, this.column) - this.userColumn = userColumn - }, - //鑾峰彇鏁版嵁 - async getData(){ - this.loading = true; - var reqData = { - [config.request.page]: this.currentPage, - [config.request.pageSize]: this.scPageSize, - [config.request.prop]: this.prop, - [config.request.order]: this.order - } - if(this.hidePagination){ - delete reqData[config.request.page] - delete reqData[config.request.pageSize] - } - Object.assign(reqData, this.tableParams) - - try { - var res = await this.apiObj.get(reqData); - }catch(error){ - this.loading = false; - this.emptyText = error.statusText; - return false; - } - try { - var response = config.parseData(res); - }catch(error){ - this.loading = false; - this.emptyText = "鏁版嵁鏍煎紡閿欒"; - return false; - } - if(response.code != config.successCode){ - this.loading = false; - this.emptyText = response.msg; - }else{ - this.emptyText = "鏆傛棤鏁版嵁"; - if(this.hidePagination){ - this.tableData = response.data || []; - }else{ - this.tableData = response.rows || []; - } - this.total = response.total || 0; - this.summary = response.summary || {}; - this.loading = false; - } - this.$refs.scTable.setScrollTop(0) - this.$emit('dataChange', res, this.tableData) - }, - //鍒嗛〉鐐瑰嚮 - paginationChange(){ - this.getData(); - }, - //鏉℃暟鍙樺寲 - pageSizeChange(size){ - this.scPageSize = size - this.getData(); - }, - //鍒锋柊鏁版嵁 - refresh(){ - this.$refs.scTable.clearSelection(); - this.getData(); - }, - //鏇存柊鏁版嵁 鍚堝苟涓婁竴娆arams - upData(params, page=1){ - this.currentPage = page; - this.$refs.scTable.clearSelection(); - Object.assign(this.tableParams, params || {}) - this.getData() - }, - //閲嶈浇鏁版嵁 鏇挎崲params - reload(params, page=1){ - this.currentPage = page; - this.tableParams = params || {} - this.$refs.scTable.clearSelection(); - this.$refs.scTable.clearSort() - this.$refs.scTable.clearFilter() - this.getData() - }, - //鑷畾涔夊彉鍖栦簨浠� - columnSettingChange(userColumn){ - this.userColumn = userColumn; - this.toggleIndex += 1; - }, - //鑷畾涔夊垪淇濆瓨 - async columnSettingSave(userColumn){ - this.$refs.columnSetting.isSave = true - try { - await config.columnSettingSave(this.tableName, userColumn) - }catch(error){ - this.$message.error('淇濆瓨澶辫触') - this.$refs.columnSetting.isSave = false - } - this.$message.success('淇濆瓨鎴愬姛') - this.$refs.columnSetting.isSave = false - }, - //鑷畾涔夊垪閲嶇疆 - async columnSettingBack(){ - this.$refs.columnSetting.isSave = true - try { - const column = await config.columnSettingReset(this.tableName, this.column) - this.userColumn = column - this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[])) - }catch(error){ - this.$message.error('閲嶇疆澶辫触') - this.$refs.columnSetting.isSave = false - } - this.$refs.columnSetting.isSave = false - }, - //鎺掑簭浜嬩欢 - sortChange(obj){ - if(!this.remoteSort){ - return false - } - if(obj.column && obj.prop){ - this.prop = obj.prop - this.order = obj.order - }else{ - this.prop = null - this.order = null - } - this.getData() - }, - //鏈湴杩囨护 - filterHandler(value, row, column){ - const property = column.property; - return row[property] === value; - }, - //杩囨护浜嬩欢 - filterChange(filters){ - if(!this.remoteFilter){ - return false - } - Object.keys(filters).forEach(key => { - filters[key] = filters[key].join(',') - }) - this.upData(filters) - }, - //杩滅▼鍚堣琛屽鐞� - remoteSummaryMethod(param){ - const {columns} = param - const sums = [] - columns.forEach((column, index) => { - if(index === 0) { - sums[index] = '鍚堣' - return - } - const values = this.summary[column.property] - if(values){ - sums[index] = values - }else{ - sums[index] = '' - } - }) - return sums - }, - configSizeChange(){ - this.$refs.scTable.doLayout() - }, - //鎻掑叆琛� unshiftRow - unshiftRow(row){ - this.tableData.unshift(row) - }, - //鎻掑叆琛� pushRow - pushRow(row){ - this.tableData.push(row) - }, - //鏍规嵁key瑕嗙洊鏁版嵁 - updateKey(row, rowKey=this.rowKey){ - this.tableData.filter(item => item[rowKey]===row[rowKey] ).forEach(item => { - Object.assign(item, row) - }) - }, - //鏍规嵁index瑕嗙洊鏁版嵁 - updateIndex(row, index){ - Object.assign(this.tableData[index], row) - }, - //鏍规嵁index鍒犻櫎 - removeIndex(index){ - this.tableData.splice(index, 1) - }, - //鏍规嵁index鎵归噺鍒犻櫎 - removeIndexes(indexes=[]){ - indexes.forEach(index => { - this.tableData.splice(index, 1) - }) - }, - //鏍规嵁key鍒犻櫎 - removeKey(key, rowKey=this.rowKey){ - this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1) - }, - //鏍规嵁keys鎵归噺鍒犻櫎 - removeKeys(keys=[], rowKey=this.rowKey){ - keys.forEach(key => { - this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1) - }) - }, - //鍘熺敓鏂规硶杞彂 - clearSelection(){ - this.$refs.scTable.clearSelection() - }, - toggleRowSelection(row, selected){ - this.$refs.scTable.toggleRowSelection(row, selected) - }, - toggleAllSelection(){ - this.$refs.scTable.toggleAllSelection() - }, - toggleRowExpansion(row, expanded){ - this.$refs.scTable.toggleRowExpansion(row, expanded) - }, - setCurrentRow(row){ - this.$refs.scTable.setCurrentRow(row) - }, - clearSort(){ - this.$refs.scTable.clearSort() - }, - clearFilter(columnKey){ - this.$refs.scTable.clearFilter(columnKey) - }, - doLayout(){ - this.$refs.scTable.doLayout() - }, - sort(prop, order){ - this.$refs.scTable.sort(prop, order) + _table_height() { + return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)" + } + }, + data() { + return { + scPageSize: this.pageSize, + isActivat: true, + emptyText: "鏆傛棤鏁版嵁", + toggleIndex: 0, + tableData: [], + total: 0, + currentPage: 1, + prop: null, + order: null, + loading: false, + tableHeight: '100%', + tableParams: this.params, + userColumn: [], + customColumnShow: false, + summary: {}, + config: { + size: this.size, + border: this.border, + stripe: this.stripe } } + }, + mounted() { + //鍒ゆ柇鏄惁寮�鍚嚜瀹氫箟鍒� + if (this.column) { + this.getCustomColumn() + } else { + this.userColumn = this.column + } + //鍒ゆ柇鏄惁闈欐�佹暟鎹� + if (this.apiObj) { + this.getData(); + } else if (this.data) { + this.tableData = this.data; + this.total = this.tableData.length + } + }, + activated() { + if (!this.isActivat) { + this.$refs.scTable.doLayout() + } + }, + deactivated() { + this.isActivat = false; + }, + methods: { + //鑾峰彇鍒� + async getCustomColumn() { + const userColumn = await config.columnSettingGet(this.tableName, this.column) + this.userColumn = userColumn + }, + //鑾峰彇鏁版嵁 + async getData() { + this.loading = true; + var reqData = { + [config.request.page]: this.currentPage, + [config.request.pageSize]: this.scPageSize, + [config.request.prop]: this.prop, + [config.request.order]: this.order + } + if (this.hidePagination) { + delete reqData[config.request.page] + delete reqData[config.request.pageSize] + } + Object.assign(reqData, this.tableParams) + + try { + var res = await this.apiObj.get(reqData); + } catch (error) { + this.loading = false; + this.emptyText = error?.statusText; + return false; + } + try { + var response = config.parseData(res); + } catch (error) { + this.loading = false; + this.emptyText = "鏁版嵁鏍煎紡閿欒"; + return false; + } + if (response.code != config.successCode) { + this.loading = false; + this.emptyText = response.msg; + } else { + this.emptyText = "鏆傛棤鏁版嵁"; + if (this.hidePagination) { + this.tableData = response.data || []; + } else { + this.tableData = response.rows || []; + } + this.total = response.total || 0; + this.summary = response.summary || {}; + this.loading = false; + } + this.$refs?.scTable?.setScrollTop(0) + this.$emit('dataChange', res, this.tableData) + }, + //鍒嗛〉鐐瑰嚮 + paginationChange() { + this.getData(); + }, + //鏉℃暟鍙樺寲 + pageSizeChange(size) { + this.scPageSize = size + this.getData(); + }, + //鍒锋柊鏁版嵁 + refresh() { + this.$refs.scTable.clearSelection(); + this.getData(); + }, + //鏇存柊鏁版嵁 鍚堝苟涓婁竴娆arams + upData(params, page = 1) { + this.currentPage = page; + this.$refs.scTable.clearSelection(); + Object.assign(this.tableParams, params || {}) + this.getData() + }, + //閲嶈浇鏁版嵁 鏇挎崲params + reload(params, page = 1) { + this.currentPage = page; + this.tableParams = params || {} + this.$refs.scTable.clearSelection(); + this.$refs.scTable.clearSort() + this.$refs.scTable.clearFilter() + this.getData() + }, + //鑷畾涔夊彉鍖栦簨浠� + columnSettingChange(userColumn) { + this.userColumn = userColumn; + this.toggleIndex += 1; + }, + //鑷畾涔夊垪淇濆瓨 + async columnSettingSave(userColumn) { + this.$refs.columnSetting.isSave = true + try { + await config.columnSettingSave(this.tableName, userColumn) + } catch (error) { + this.$message.error('淇濆瓨澶辫触') + this.$refs.columnSetting.isSave = false + } + this.$message.success('淇濆瓨鎴愬姛') + this.$refs.columnSetting.isSave = false + }, + //鑷畾涔夊垪閲嶇疆 + async columnSettingBack() { + this.$refs.columnSetting.isSave = true + try { + const column = await config.columnSettingReset(this.tableName, this.column) + this.userColumn = column + this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn || [])) + } catch (error) { + this.$message.error('閲嶇疆澶辫触') + this.$refs.columnSetting.isSave = false + } + this.$refs.columnSetting.isSave = false + }, + //鎺掑簭浜嬩欢 + sortChange(obj) { + if (!this.remoteSort) { + return false + } + if (obj.column && obj.prop) { + this.prop = obj.prop + this.order = obj.order + } else { + this.prop = null + this.order = null + } + this.getData() + }, + //鏈湴杩囨护 + filterHandler(value, row, column) { + const property = column.property; + return row[property] === value; + }, + //杩囨护浜嬩欢 + filterChange(filters) { + if (!this.remoteFilter) { + return false + } + Object.keys(filters).forEach(key => { + filters[key] = filters[key].join(',') + }) + this.upData(filters) + }, + //杩滅▼鍚堣琛屽鐞� + remoteSummaryMethod(param) { + const { columns } = param + const sums = [] + columns.forEach((column, index) => { + if (index === 0) { + sums[index] = '鍚堣' + return + } + const values = this.summary[column.property] + if (values) { + sums[index] = values + } else { + sums[index] = '' + } + }) + return sums + }, + configSizeChange() { + this.$refs.scTable.doLayout() + }, + //鎻掑叆琛� unshiftRow + unshiftRow(row) { + this.tableData.unshift(row) + }, + //鎻掑叆琛� pushRow + pushRow(row) { + this.tableData.push(row) + }, + //鏍规嵁key瑕嗙洊鏁版嵁 + updateKey(row, rowKey = this.rowKey) { + this.tableData.filter(item => item[rowKey] === row[rowKey]).forEach(item => { + Object.assign(item, row) + }) + }, + //鏍规嵁index瑕嗙洊鏁版嵁 + updateIndex(row, index) { + Object.assign(this.tableData[index], row) + }, + //鏍规嵁index鍒犻櫎 + removeIndex(index) { + this.tableData.splice(index, 1) + }, + //鏍规嵁index鎵归噺鍒犻櫎 + removeIndexes(indexes = []) { + indexes.forEach(index => { + this.tableData.splice(index, 1) + }) + }, + //鏍规嵁key鍒犻櫎 + removeKey(key, rowKey = this.rowKey) { + this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1) + }, + //鏍规嵁keys鎵归噺鍒犻櫎 + removeKeys(keys = [], rowKey = this.rowKey) { + keys.forEach(key => { + this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1) + }) + }, + //鍘熺敓鏂规硶杞彂 + clearSelection() { + this.$refs.scTable.clearSelection() + }, + toggleRowSelection(row, selected) { + this.$refs.scTable.toggleRowSelection(row, selected) + }, + toggleAllSelection() { + this.$refs.scTable.toggleAllSelection() + }, + toggleRowExpansion(row, expanded) { + this.$refs.scTable.toggleRowExpansion(row, expanded) + }, + setCurrentRow(row) { + this.$refs.scTable.setCurrentRow(row) + }, + clearSort() { + this.$refs.scTable.clearSort() + }, + clearFilter(columnKey) { + this.$refs.scTable.clearFilter(columnKey) + }, + doLayout() { + this.$refs.scTable.doLayout() + }, + sort(prop, order) { + this.$refs.scTable.sort(prop, order) + } } +} </script> <style scoped> - .scTable {} - .scTable-table {height: calc(100% - 50px);} - .scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;} - .scTable-do {white-space: nowrap;} - .scTable:deep(.el-table__footer) .cell {font-weight: bold;} - .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;} - .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;} +.scTable {} + +.scTable-table { + height: calc(100% - 50px); +} + +.scTable-page { + height: 50px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15px; +} + +.scTable-do { + white-space: nowrap; +} + +.scTable:deep(.el-table__footer) .cell { + font-weight: bold; +} + +.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal { + height: 12px; + border-radius: 12px; +} + +.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical { + width: 12px; + border-radius: 12px; +} </style> -- Gitblit v1.9.3