构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,23 @@
|
||||
import { h, resolveComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
render() {
|
||||
return h (
|
||||
resolveComponent("el-table-column"),
|
||||
{
|
||||
index: this.index,
|
||||
...this.$attrs
|
||||
},
|
||||
this.$slots
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
index(index){
|
||||
if(this.$attrs.type=="index"){
|
||||
let page = this.$parent.$parent.currentPage
|
||||
let pageSize = this.$parent.$parent.pageSize
|
||||
return (page - 1) * pageSize + index + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
|
||||
<div class="setting-column__title">
|
||||
<span class="move_b"></span>
|
||||
<span class="show_b">显示</span>
|
||||
<span class="name_b">名称</span>
|
||||
<span class="width_b">宽度</span>
|
||||
<span class="sortable_b">排序</span>
|
||||
<span class="fixed_b">固定</span>
|
||||
</div>
|
||||
<div class="setting-column__list" ref="list">
|
||||
<ul>
|
||||
<li v-for="item in usercolumn" :key="item.prop">
|
||||
<span class="move_b">
|
||||
<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
|
||||
</span>
|
||||
<span class="show_b">
|
||||
<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
|
||||
</span>
|
||||
<span class="name_b" :title="item.prop">{{ item.label }}</span>
|
||||
<span class="width_b">
|
||||
<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
|
||||
</span>
|
||||
<span class="sortable_b">
|
||||
<el-switch v-model="item.sortable"></el-switch>
|
||||
</span>
|
||||
<span class="fixed_b">
|
||||
<el-switch v-model="item.fixed"></el-switch>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-column__bottom">
|
||||
<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Sortable
|
||||
},
|
||||
props: {
|
||||
column: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSave: false,
|
||||
usercolumn: JSON.parse(JSON.stringify(this.column||[]))
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
usercolumn: {
|
||||
handler(){
|
||||
this.$emit('userChange', this.usercolumn)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.usercolumn.length>0 && this.rowDrop()
|
||||
},
|
||||
methods: {
|
||||
rowDrop(){
|
||||
const _this = this
|
||||
const tbody = this.$refs.list.querySelector('ul')
|
||||
Sortable.create(tbody, {
|
||||
handle: ".move",
|
||||
animation: 300,
|
||||
ghostClass: "ghost",
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
const tableData = _this.usercolumn
|
||||
const currRow = tableData.splice(oldIndex, 1)[0]
|
||||
tableData.splice(newIndex, 0, currRow)
|
||||
}
|
||||
})
|
||||
},
|
||||
backDefaul(){
|
||||
this.$emit('back', this.usercolumn)
|
||||
},
|
||||
save(){
|
||||
this.$emit('save', this.usercolumn)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.setting-column {}
|
||||
|
||||
.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
|
||||
.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
|
||||
.setting-column__title span.move_b {width: 30px;margin-right:15px;}
|
||||
.setting-column__title span.show_b {width: 60px;}
|
||||
.setting-column__title span.name_b {width: 140px;}
|
||||
.setting-column__title span.width_b {width: 60px;margin-right:15px;}
|
||||
.setting-column__title span.sortable_b {width: 60px;}
|
||||
.setting-column__title span.fixed_b {width: 60px;}
|
||||
|
||||
.setting-column__list {max-height:314px;overflow: auto;}
|
||||
.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
|
||||
.setting-column__list li>span {display: inline-block;font-size: 12px;}
|
||||
.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
|
||||
.setting-column__list li span.show_b {width: 60px;}
|
||||
.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default;}
|
||||
.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
|
||||
.setting-column__list li span.sortable_b {width: 60px;}
|
||||
.setting-column__list li span.fixed_b {width: 60px;}
|
||||
.setting-column__list li.ghost {opacity: 0.3;}
|
||||
|
||||
.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
|
||||
|
||||
.dark .setting-column__title {border-color: var(--el-border-color-light);}
|
||||
.dark .setting-column__bottom {border-color: var(--el-border-color-light);}
|
||||
</style>
|
||||
@@ -0,0 +1,406 @@
|
||||
<!--
|
||||
* @Descripttion: 数据表格组件
|
||||
* @version: 1.10
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月29日21:51:15
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2022年6月4日17:35:26
|
||||
-->
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope">
|
||||
{{scope.row[item.prop]}}
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column min-width="1"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</el-popover>
|
||||
<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>
|
||||
<el-form label-width="80px" label-position="left">
|
||||
<el-form-item label="表格尺寸">
|
||||
<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
|
||||
<el-radio-button label="large">大</el-radio-button>
|
||||
<el-radio-button label="default">正常</el-radio-button>
|
||||
<el-radio-button label="small">小</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
|
||||
<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: {
|
||||
//监听从props里拿到值了
|
||||
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)"
|
||||
}
|
||||
},
|
||||
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();
|
||||
},
|
||||
//更新数据 合并上一次params
|
||||
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;}
|
||||
</style>
|
||||
Reference in New Issue
Block a user