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>

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

@ -24,36 +24,7 @@
</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>
@ -63,12 +34,37 @@
<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-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>

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>

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

@ -1,325 +1,279 @@
<template>
<div style="padding: 10px;">
<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-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="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 @click="filterChange" type="primary">
<el-iconSearch style="width: 14px; color: #fff;" /> 搜索
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<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>
<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>
<script setup>
const queryParams = {};
<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() {
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
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
}
}
});
}
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
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
}
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
watch: {
groupFilterText(val) {
this.$refs.group.filter(val);
}
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
methods: {
//树过滤
groupFilterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//树点击事件
groupClick(data) {
this.search[this.aside.searchkey || 'groupid'] = data[this.aside.key || 'id'];
this.$refs.table.reload(this.search)
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
// 筛选回调
filterChange(data) {
var info = Object.assign({}, this.search, data)
this.$refs.table.reload(info)
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//标签切换
tabChange() {
this.$refs.table.reload(this.search)
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//本地更新数据
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;
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//增加
plus() {
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData({}).setConfig(this.operation.plus)
})
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//编辑
operationEdit(row) {
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit)
})
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//打开统计
openStat(o) {
this.dialog.stat = true
this.$nextTick(() => {
this.$refs.xstatdialog.open().setData(o);
})
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//删除
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' });
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//批量删除
async batchdeletion() {
if (this.selection.length == 0) {
this.$alert('请勾选你要删除的项目', "提示", { type: 'error' });
return;
}
if (!this.operation.batchdeletion.url) {
this.$alert('没有批量删除相关配置', "提示", { type: 'error' });
return;
}
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
const ids = this.selection.map(obj => obj[this.key]);
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(() => {
})
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
//表格选择后回调事件
selectionChange(selection) {
this.selection = selection;
},
{
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>
<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
//全局代码错误捕捉