XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

table

Browse Source
This commit is contained in:
小陌 2023-12-19 19:03:28 +08:00
parent d04d30b477
commit 3dcd95bdaa
7 changed files with 728 additions and 706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/ContentWrap/index.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<ElCard :class="['mb-15px']" shadow="never">
<template v-if="title" #header>
<div class="flex items-center">
<span class="text-16px font-700">{{ title }}</span>
<ElTooltip v-if="message" effect="dark" placement="right">
<template #content>
<div class="max-w-200px">{{ message }}</div>
</template>
<el-iconQuestionFilled style="width: 18px; margin-left: 5px; color: #9E9E9E;;" class="ml-5px" />
</ElTooltip>
</div>
</template>
<div>
<slot></slot>
</div>
</ElCard>
</template>
<style>
.-mb-15px {
margin-bottom: -15px;
}
</style>
<script>
export default {
props: {
title: { type: String, default: "" },
message: { type: String, default: "" },
},
data() {
return {
// data: this.modelValue,
copiedData: this.data,
visible: false,
}
},
watch: {
},
mounted() {
},
methods: {
closeUser() {
this.visible = false;
},
getUser() {
// 无法找到会员
if (!this.data.uid && !this.data.uin) {
return false;
}
this.visible = true
},
}
}
</script>

772
src/components/xTable/index.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="xTable" :style="{'height':_height}" ref="xTableMain" v-loading="loading">
<div class="xTable-table" :style="{'height':_table_height}">
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :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="xTable" :style="{ 'height': _height }" ref="xTableMain" v-loading="loading">
<div class="xTable-table" :style="{ 'height': _table_height }">
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :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 column" :key="index">
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length>0">
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop||items.name" :label="items.label" :prop="items.prop||items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter||!items.filters?null:filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
<template #default="{ row }">
<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
</template>
</el-table-column>
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length > 0">
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop || items.name" :label="items.label" :prop="items.prop || items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter || !items.filters ? null : filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
<template #default="{ row }">
<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
</template>
</el-table-column>
</el-table-column>
<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop||item.name" :label="item.label" :prop="item.prop||item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :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-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop || item.name" :label="item.label" :prop="item.prop || item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<template #default="{ row }">
<columnItem :row="row" :item="item" @xtableupdate="xtableupdate"> </columnItem>
</template>
@ -24,405 +24,401 @@
</el-table>
</div>
<div class="xTable-page" v-if="!hidePagination || !hideDo">
<div class="xTable-pagination" v-if="!hidePagination">
<el-pagination 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="xTable-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="name" placement="top" title="列设置" :width="850" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
<template #reference>
<el-button v-auths="['columnsetting']" 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="column"></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>
<el-pagination :small="true" background :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>
<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey=''"></x-update>
<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey = ''"></x-update>
<xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog"></xTabledialog>
</template>
<style scoped>
.xTable {}
.xTable-table {height: calc(100% - 50px);}
.xTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
.xTable-do {white-space: nowrap;}
.xTable:deep(.el-table__footer) .cell {font-weight: bold;}
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
.xTable {}
.xTable-table {
height: calc(100% - 50px);
}
.xTable-page {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
float: right;
}
.xTable-do {
white-space: nowrap;
}
.xTable:deep(.el-table__footer) .cell {
font-weight: bold;
}
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
height: 12px;
border-radius: 12px;
}
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
width: 12px;
border-radius: 12px;
}
</style>
<script>
import config from "@/config/table";
import columnSetting from './columnSetting'
import columnItem from './columnItem'
import config from "@/config/table";
import columnSetting from './columnSetting'
import columnItem from './columnItem'
export default {
name: 'xTable',
components: {
columnSetting,
columnItem,
},
props: {
name: { type: String, default: "" },
tableColumn: { type: Object, default: () => {} },
api: { 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 },
columnSetting: { 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 },
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: {
export default {
name: 'xTable',
components: {
columnSetting,
columnItem,
},
props: {
name: { type: String, default: "" },
tableColumn: { type: Object, default: () => { } },
api: { 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 },
columnSetting: { 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 },
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();
},
api(){
this.tableParams = this.params;
this.refresh();
},
tableColumn(){
this.column = this.tableColumn;
}
},
computed: {
_height() {
return Number(this.height)?Number(this.height)+'px':this.height
},
_table_height() {
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
}
},
//监听从props里拿到值了
data() {
return {
scPageSize: this.pageSize,
isActivat: true,
emptyText: "暂无数据",
toggleIndex: 0,
tableData: [],
total: 0,
currentPage: 1,
prop: null,
order: null,
loading: false,
visible: false,
tableHeight:'100%',
tableParams: this.params,
column: [],
customColumnShow: false,
tableUpdateKey: '',
xtabledialog: '',
summary: {},
visibleInfo: {},
config: {
size: this.size,
border: this.border,
stripe: this.stripe
},
}
this.tableData = this.data;
this.total = this.tableData.length;
},
mounted() {
this.column = this.tableColumn
//判断是否静态数据
if(this.apiObj || this.api){
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.xTable.doLayout()
}
api() {
this.tableParams = this.params;
this.refresh();
},
deactivated(){
this.isActivat = false;
tableColumn() {
this.column = this.tableColumn;
}
},
computed: {
_height() {
return Number(this.height) ? Number(this.height) + 'px' : this.height
},
methods: {
xtableupdate(row, options=[], componenttype, type){
_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,
visible: false,
tableHeight: '100%',
tableParams: this.params,
column: [],
customColumnShow: false,
tableUpdateKey: '',
xtabledialog: '',
summary: {},
visibleInfo: {},
config: {
size: this.size,
border: this.border,
stripe: this.stripe
},
}
},
mounted() {
this.column = this.tableColumn
//判断是否静态数据
if (this.apiObj || this.api) {
this.getData();
} else if (this.data) {
this.tableData = this.data;
this.total = this.tableData.length
}
},
activated() {
if (!this.isActivat) {
this.$refs.xTable.doLayout()
}
},
deactivated() {
this.isActivat = false;
},
methods: {
xtableupdate(row, options = [], componenttype, type) {
if (type=='update') {
this.tableUpdateKey = options.name || this.name;
this.$nextTick(() => {
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
})
return ;
}
this.xtabledialog = options.name || this.name;
if (type == 'update') {
this.tableUpdateKey = options.name || this.name;
this.$nextTick(() => {
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
})
},
//获取数据
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 xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
xawait.then((res) => {
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.message;
}else{
this.emptyText = "暂无数据";
this.tableData = (this.hidePagination? response.data : response.rows) || [];
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
this.$refs.xTable.setScrollTop(0)
// 回调
this.$emit('dataChange', res, this.tableData)
});
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
return false;
}
},
//分页点击
paginationChange(){
this.getData();
},
//条数变化
pageSizeChange(size){
this.scPageSize = size
this.getData();
},
//刷新数据
refresh(){
this.$refs.xTable.clearSelection();
this.getData();
},
//更新数据 合并上一次params
upData(params, page=1){
this.currentPage = page;
this.$refs.xTable.clearSelection();
Object.assign(this.tableParams, params || {})
this.getData()
},
//重载数据 替换params
reload(params, page=1){
this.currentPage = page;
this.tableParams = params || {}
this.$refs.xTable.clearSelection();
this.$refs.xTable.clearSort()
this.$refs.xTable.clearFilter()
this.getData()
},
//自定义变化事件
columnSettingChange(column){
this.column = column;
this.toggleIndex += 1;
},
//自定义列保存
async columnSettingSave(column){
this.$refs.columnSetting.isSave = true
try {
await config.columnSettingSave(this.name, column)
this.$message.success('保存成功')
this.$refs.columnSetting.isSave = false
}catch(error){
this.$message.error('保存失败')
this.$refs.columnSetting.isSave = false
}
},
//自定义列重置
async columnSettingBack(){
this.$refs.columnSetting.isSave = true
try {
await config.columnSettingReset(this.name, this.column)
this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column||[]))
}catch(error){
this.$message.error('重置失败')
this.$refs.columnSetting.isSave = false
}
this.$refs.columnSetting.isSave = false
},
//排序事件
sortChange(obj){
if(!this.remoteSort){
return false
}
if(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.xTable.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.xTable.clearSelection()
},
toggleRowSelection(row, selected){
this.$refs.xTable.toggleRowSelection(row, selected)
},
toggleAllSelection(){
this.$refs.xTable.toggleAllSelection()
},
toggleRowExpansion(row, expanded){
this.$refs.xTable.toggleRowExpansion(row, expanded)
},
setCurrentRow(row){
this.$refs.xTable.setCurrentRow(row)
},
clearSort(){
this.$refs.xTable.clearSort()
},
clearFilter(columnKey){
this.$refs.xTable.clearFilter(columnKey)
},
doLayout(){
this.$refs.xTable.doLayout()
},
sort(prop, order){
this.$refs.xTable.sort(prop, order)
return;
}
this.xtabledialog = options.name || this.name;
this.$nextTick(() => {
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
})
},
//获取数据
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 xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
xawait.then((res) => {
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.message;
} else {
this.emptyText = "暂无数据";
this.tableData = (this.hidePagination ? response.data : response.rows) || [];
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
this.$refs.xTable.setScrollTop(0)
// 回调
this.$emit('dataChange', res, this.tableData)
});
} catch (error) {
this.loading = false;
this.emptyText = error.statusText;
return false;
}
},
//分页点击
paginationChange() {
this.getData();
},
//条数变化
pageSizeChange(size) {
this.scPageSize = size
this.getData();
},
//刷新数据
refresh() {
this.$refs.xTable.clearSelection();
this.getData();
},
//更新数据 合并上一次params
upData(params, page = 1) {
this.currentPage = page;
this.$refs.xTable.clearSelection();
Object.assign(this.tableParams, params || {})
this.getData()
},
//重载数据 替换params
reload(params, page = 1) {
this.currentPage = page;
this.tableParams = params || {}
this.$refs.xTable.clearSelection();
this.$refs.xTable.clearSort()
this.$refs.xTable.clearFilter()
this.getData()
},
//自定义变化事件
columnSettingChange(column) {
this.column = column;
this.toggleIndex += 1;
},
//自定义列保存
async columnSettingSave(column) {
this.$refs.columnSetting.isSave = true
try {
await config.columnSettingSave(this.name, column)
this.$message.success('保存成功')
this.$refs.columnSetting.isSave = false
} catch (error) {
this.$message.error('保存失败')
this.$refs.columnSetting.isSave = false
}
},
//自定义列重置
async columnSettingBack() {
this.$refs.columnSetting.isSave = true
try {
await config.columnSettingReset(this.name, this.column)
this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column || []))
} catch (error) {
this.$message.error('重置失败')
this.$refs.columnSetting.isSave = false
}
this.$refs.columnSetting.isSave = false
},
//排序事件
sortChange(obj) {
if (!this.remoteSort) {
return false
}
if (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.xTable.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.xTable.clearSelection()
},
toggleRowSelection(row, selected) {
this.$refs.xTable.toggleRowSelection(row, selected)
},
toggleAllSelection() {
this.$refs.xTable.toggleAllSelection()
},
toggleRowExpansion(row, expanded) {
this.$refs.xTable.toggleRowExpansion(row, expanded)
},
setCurrentRow(row) {
this.$refs.xTable.setCurrentRow(row)
},
clearSort() {
this.$refs.xTable.clearSort()
},
clearFilter(columnKey) {
this.$refs.xTable.clearFilter(columnKey)
},
doLayout() {
this.$refs.xTable.doLayout()
},
sort(prop, order) {
this.$refs.xTable.sort(prop, order)
}
}
}
</script>

6
src/style/global.module.scss Normal file
View File

@ -0,0 +1,6 @@
@import './variables.scss';
// 导出变量
:export {
namespace: $namespace;
elNamespace: $elNamespace;
}

4
src/style/variables.scss Normal file
View File

@ -0,0 +1,4 @@
// 命名空间
$namespace: v;
// el命名空间
$elNamespace: el;

3
src/views/system/table/index.vue
View File

@ -21,8 +21,7 @@
</div>
<div class="right-panel" v-if="filter.length>0 || stat.length>0">
<el-button v-for="(s,index) in stat" :key="index" class="hidden-xs-only" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
</xFilterBar>
<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange"> </xFilterBar>
</div>
</el-header>

586
src/views/user/index/index.vue
View File

@ -1,325 +1,279 @@
<template>
<el-container>
<el-main>
<ContentWrap style="margin-bottom: 10px;" v-if="filter && filter.length > 0">
<el-form ref="queryFormRef" :inline="true" :model="search" class="-mb-15px" label-width="">
<el-form-item :label="i.label" :prop="i.name" v-for="(i, index) in filter" :key="index">
<x-item :item="i" v-model="search"></x-item>
</el-form-item>
<el-form-item>
<el-button @click="filterChange" type="primary">
<el-iconSearch style="width: 14px; color: #fff;" /> 搜索
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<div style="padding: 10px;">
<ContentWrap class="xtable">
<el-tabs v-if="tabs && tabs.length > 0" v-model="search[tabskey]" @tab-click="tabChange">
<el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label + (item.count ? '(' + item.count + ')' : '')" :name="item.value" />
</el-tabs>
<xTable ref="table" :tableColumn="column" :name="tablename" :params="search" :api="api" :row-key="key" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe>
<el-table-column v-if="isselection" type="selection" width="50"></el-table-column>
<el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete">
<template #default="scope">
<el-button-group>
<el-button v-if="operation.edit" :type="operation.edit.type || 'primary'" :size="operation.edit.size || 'small'" @click="operationEdit(scope.row, scope.$index)">{{ operation.edit.label || '编辑' }}</el-button>
<el-popconfirm v-if="operation.delete" :title="operation.delete.title || '确定删除吗？'" @confirm="operationDelete(scope.row, scope.$index)">
<template #reference>
<el-button :type="operation.delete.type || 'info'" :size="operation.delete.size || 'small'">{{ operation.delete.label || '删除' }}</el-button>
</template>
</el-popconfirm>
</el-button-group>
</template>
</el-table-column>
</xTable>
</ContentWrap>
</el-main>
</el-container>
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></x-update>
</template>
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="商品名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader
v-model="queryParams.categoryId"
:options="categoryList"
:props="defaultProps"
class="w-1/1"
clearable
filterable
placeholder="请选择商品分类"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
v-hasPermi="['product:spu:create']"
plain
type="primary"
@click="openForm(undefined)"
>
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button
v-hasPermi="['product:spu:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" />
导出
</el-button>
</el-form-item>
</el-form>
<script>
export default {
name: 'systemTable',
components: {},
props: {
name: { type: String, default: "" },
},
data() {
return {
dialog: {
save: false,
stat: false,
},
isselection: true,
selection: [],
column: [],
aside: {
items: []
},
filter: [],
api: '',
operation: {},
key: 'id',
search: {},
tabs: [
// {label:'所有', value:0},
],
stat: [],
chartoption: {},
// tablename: this.$route.meta.tablename,
tablename: 'tenement.lists',
tableurl: this.$route.meta.tableurl,
groupFilterText: '',
tabskey: '',
tabsdefaultvalue: ''
}
},
mounted() {
if (this.name) {
this.tablename = this.name || this.$route.meta.tablename;
}
//判断是否开启自定义列
if (this.tablename || this.tableurl) {
var awaitvar = this.tableurl ? this.$http.get(this.tableurl, {}, { cache: true }) : this.$api.system.table.get(this.tablename, { cache: this.$route.meta.tablecache || 0 });
awaitvar.then((res) => {
if (res.code == 200) {
Object.assign(this.$data, res.data);
if (res.data.tabsdefaultvalue && res.data.tabskey) {
this.search[res.data.tabskey] = res.data.tabsdefaultvalue
}
}
});
}
},
computed: {
filterObj() {
const obj = []
this.filter.forEach((item) => {
if (item.component) {
obj.push({
name: item.value,
label: item.label,
component: item.component,
options: item.options,
})
}
})
return obj
}
},
watch: {
groupFilterText(val) {
this.$refs.group.filter(val);
}
},
methods: {
//树过滤
groupFilterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//树点击事件
groupClick(data) {
this.search[this.aside.searchkey || 'groupid'] = data[this.aside.key || 'id'];
this.$refs.table.reload(this.search)
},
// 筛选回调
filterChange(data) {
var info = Object.assign({}, this.search, data)
this.$refs.table.reload(info)
},
//标签切换
tabChange() {
this.$refs.table.reload(this.search)
},
//本地更新数据
handleSuccess(data, mode, message) {
if (mode == 'edit') {
if (data) {
this.$refs.table.tableData.filter(item => item[this.key] === data[this.key]).forEach(item => {
Object.assign(item, data, data)
})
} else {
this.$refs.table.refresh()
}
} else {
if (data) {
this.$refs.table.tableData.unshift(data)
} else {
this.$refs.table.reload({})
}
}
this.$message.success(message || "操作成功")
return;
},
//增加
plus() {
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData({}).setConfig(this.operation.plus)
})
},
//编辑
operationEdit(row) {
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit)
})
},
//打开统计
openStat(o) {
this.dialog.stat = true
this.$nextTick(() => {
this.$refs.xstatdialog.open().setData(o);
})
},
//删除
async operationDelete(row, index) {
const key = typeof this.operation.delete.key !== 'undefined' && this.operation.delete.key ? this.operation.delete.key : this.key;
var res = await this.$http.post(this.operation.delete.url, { [key]: row[key], index: index })
if (res.code == 200) {
this.$refs.table.tableData.splice(index, 1);
return;
}
this.$alert(res.message, "提示", { type: 'error' });
},
//批量删除
async batchdeletion() {
if (this.selection.length == 0) {
this.$alert('请勾选你要删除的项目', "提示", { type: 'error' });
return;
}
<el-table :data="tableData" stripe border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column fixed="right" prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
</template>
if (!this.operation.batchdeletion.url) {
this.$alert('没有批量删除相关配置', "提示", { type: 'error' });
return;
}
<script setup>
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
const ids = this.selection.map(obj => obj[this.key]);
const queryParams = {};
this.$http.post(this.operation.batchdeletion.url, { [this.key]: ids }).then((res) => {
if (res.code == 200) {
this.$refs.table.tableData.forEach((itemI, indexI) => {
if (ids.includes(itemI[this.key])) {
this.$refs.table.tableData.splice(indexI, 1)
}
})
this.$message.success(res.message || "操作成功")
return;
}
this.$alert(res.message, "提示", { type: 'error' });
loading.close();
})
}).catch(() => {
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
})
},
//表格选择后回调事件
selectionChange(selection) {
this.selection = selection;
},
}
}
</script>
<style>
.xtable {
margin-top: 0px;
margin-bottom: 0px !important;
}
.xtable .el-card__body {
padding: 5px
}
.xtable .el-tabs__nav {
padding: 10px
}
.xtable .el-tabs {
padding: 0px 2px 0;
}
.xtable .mt-10px {
margin-top: 15px;
}
.xtable .mb-10px {
margin-bottom: 15px;
}
.xtable .float-right {
float: right;
}
.xtable .el-tabs__header {
margin: 0 0 2px;
}
.xtable .el-tabs__nav-next,
.el-tabs__nav-prev {
padding: 10px 0;
}
</style>

3
src/x.js
View File

@ -28,6 +28,7 @@ import xQrCode from './components/xQrCode'
import xPageHeader from './components/xPageHeader'
import xSelect from './components/xSelect'
import xWaterMark from './components/xWaterMark'
import ContentWrap from './components/ContentWrap'
import store from '@/store'
import {
Flexbox,
@ -92,6 +93,8 @@ export default {
for (let icon in xIcons) {
app.component(`xIcon${icon}`, xIcons[icon])
}
app.component('ContentWrap', ContentWrap);
//关闭async-validator全局控制台警告
window.ASYNC_VALIDATOR_NO_WARNING = 1
//全局代码错误捕捉