table
This commit is contained in:
parent
d04d30b477
commit
3dcd95bdaa
60
src/components/ContentWrap/index.vue
Normal file
60
src/components/ContentWrap/index.vue
Normal 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>
|
||||||
@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="xTable" :style="{'height':_height}" ref="xTableMain" v-loading="loading">
|
<div class="xTable" :style="{ 'height': _height }" ref="xTableMain" v-loading="loading">
|
||||||
<div class="xTable-table" :style="{'height':_table_height}">
|
<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">
|
<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>
|
<slot></slot>
|
||||||
<template v-for="(item, index) in column" :key="index">
|
<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 :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">
|
<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 }">
|
<template #default="{ row }">
|
||||||
<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
|
<columnItem :row="row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</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 }">
|
<template #default="{ row }">
|
||||||
<columnItem :row="row" :item="item" @xtableupdate="xtableupdate"> </columnItem>
|
<columnItem :row="row" :item="item" @xtableupdate="xtableupdate"> </columnItem>
|
||||||
</template>
|
</template>
|
||||||
@ -24,405 +24,401 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div class="xTable-page" v-if="!hidePagination || !hideDo">
|
<div class="xTable-page" v-if="!hidePagination || !hideDo">
|
||||||
<div class="xTable-pagination" v-if="!hidePagination">
|
<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>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog"></xTabledialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.xTable {}
|
.xTable {}
|
||||||
.xTable-table {height: calc(100% - 50px);}
|
|
||||||
.xTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
.xTable-table {
|
||||||
.xTable-do {white-space: nowrap;}
|
height: calc(100% - 50px);
|
||||||
.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-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>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import config from "@/config/table";
|
import config from "@/config/table";
|
||||||
import columnSetting from './columnSetting'
|
import columnSetting from './columnSetting'
|
||||||
import columnItem from './columnItem'
|
import columnItem from './columnItem'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'xTable',
|
name: 'xTable',
|
||||||
components: {
|
components: {
|
||||||
columnSetting,
|
columnSetting,
|
||||||
columnItem,
|
columnItem,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
name: { type: String, default: "" },
|
name: { type: String, default: "" },
|
||||||
tableColumn: { type: Object, default: () => {} },
|
tableColumn: { type: Object, default: () => { } },
|
||||||
api: { type: String, default: () => {} },
|
api: { type: String, default: () => { } },
|
||||||
apiObj: { type: Object, default: () => {} },
|
apiObj: { type: Object, default: () => { } },
|
||||||
params: { type: Object, default: () => ({}) },
|
params: { type: Object, default: () => ({}) },
|
||||||
data: { type: Object, default: () => {} },
|
data: { type: Object, default: () => { } },
|
||||||
height: { type: [String,Number], default: "100%" },
|
height: { type: [String, Number], default: "100%" },
|
||||||
size: { type: String, default: "default" },
|
size: { type: String, default: "default" },
|
||||||
border: { type: Boolean, default: false },
|
border: { type: Boolean, default: false },
|
||||||
stripe: { type: Boolean, default: false },
|
stripe: { type: Boolean, default: false },
|
||||||
columnSetting: { type: Boolean, default: false },
|
columnSetting: { type: Boolean, default: false },
|
||||||
pageSize: { type: Number, default: config.pageSize },
|
pageSize: { type: Number, default: config.pageSize },
|
||||||
pageSizes: { type: Array, default: config.pageSizes },
|
pageSizes: { type: Array, default: config.pageSizes },
|
||||||
rowKey: { type: String, default: "" },
|
rowKey: { type: String, default: "" },
|
||||||
summaryMethod: { type: Function, default: null },
|
summaryMethod: { type: Function, default: null },
|
||||||
remoteSort: { type: Boolean, default: false },
|
remoteSort: { type: Boolean, default: false },
|
||||||
remoteFilter: { type: Boolean, default: false },
|
remoteFilter: { type: Boolean, default: false },
|
||||||
remoteSummary: { type: Boolean, default: false },
|
remoteSummary: { type: Boolean, default: false },
|
||||||
hidePagination: { type: Boolean, default: false },
|
hidePagination: { type: Boolean, default: false },
|
||||||
hideDo: { type: Boolean, default: false },
|
hideDo: { type: Boolean, default: false },
|
||||||
hideRefresh: { type: Boolean, default: false },
|
hideRefresh: { type: Boolean, default: false },
|
||||||
hideSetting: { type: Boolean, default: false },
|
hideSetting: { type: Boolean, default: false },
|
||||||
paginationLayout: { type: String, default: config.paginationLayout },
|
paginationLayout: { type: String, default: config.paginationLayout },
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
||||||
//监听从props里拿到值了
|
//监听从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)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
this.tableData = this.data;
|
||||||
scPageSize: this.pageSize,
|
this.total = this.tableData.length;
|
||||||
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() {
|
apiObj() {
|
||||||
this.column = this.tableColumn
|
this.tableParams = this.params;
|
||||||
//判断是否静态数据
|
this.refresh();
|
||||||
if(this.apiObj || this.api){
|
|
||||||
this.getData();
|
|
||||||
}else if(this.data){
|
|
||||||
this.tableData = this.data;
|
|
||||||
this.total = this.tableData.length
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
activated(){
|
api() {
|
||||||
if(!this.isActivat){
|
this.tableParams = this.params;
|
||||||
this.$refs.xTable.doLayout()
|
this.refresh();
|
||||||
}
|
|
||||||
},
|
},
|
||||||
deactivated(){
|
tableColumn() {
|
||||||
this.isActivat = false;
|
this.column = this.tableColumn;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
_height() {
|
||||||
|
return Number(this.height) ? Number(this.height) + 'px' : this.height
|
||||||
},
|
},
|
||||||
methods: {
|
_table_height() {
|
||||||
xtableupdate(row, options=[], componenttype, type){
|
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') {
|
if (type == 'update') {
|
||||||
this.tableUpdateKey = options.name || this.name;
|
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;
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
|
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
|
||||||
})
|
})
|
||||||
},
|
return;
|
||||||
//获取数据
|
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|||||||
6
src/style/global.module.scss
Normal file
6
src/style/global.module.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import './variables.scss';
|
||||||
|
// 导出变量
|
||||||
|
:export {
|
||||||
|
namespace: $namespace;
|
||||||
|
elNamespace: $elNamespace;
|
||||||
|
}
|
||||||
4
src/style/variables.scss
Normal file
4
src/style/variables.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// 命名空间
|
||||||
|
$namespace: v;
|
||||||
|
// el命名空间
|
||||||
|
$elNamespace: el;
|
||||||
@ -21,8 +21,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right-panel" v-if="filter.length>0 || stat.length>0">
|
<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>
|
<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 v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange"> </xFilterBar>
|
||||||
</xFilterBar>
|
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
|
|
||||||
|
|||||||
@ -1,325 +1,279 @@
|
|||||||
<template>
|
<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
|
<script>
|
||||||
ref="queryFormRef"
|
export default {
|
||||||
:inline="true"
|
name: 'systemTable',
|
||||||
:model="queryParams"
|
components: {},
|
||||||
class="-mb-15px"
|
props: {
|
||||||
label-width="68px"
|
name: { type: String, default: "" },
|
||||||
>
|
},
|
||||||
<el-form-item label="商品名称" prop="name">
|
data() {
|
||||||
<el-input
|
return {
|
||||||
v-model="queryParams.name"
|
dialog: {
|
||||||
class="!w-240px"
|
save: false,
|
||||||
clearable
|
stat: false,
|
||||||
placeholder="请输入商品名称"
|
},
|
||||||
@keyup.enter="handleQuery"
|
isselection: true,
|
||||||
/>
|
selection: [],
|
||||||
</el-form-item>
|
column: [],
|
||||||
<el-form-item label="商品分类" prop="categoryId">
|
aside: {
|
||||||
<el-cascader
|
items: []
|
||||||
v-model="queryParams.categoryId"
|
},
|
||||||
:options="categoryList"
|
filter: [],
|
||||||
:props="defaultProps"
|
api: '',
|
||||||
class="w-1/1"
|
operation: {},
|
||||||
clearable
|
key: 'id',
|
||||||
filterable
|
search: {},
|
||||||
placeholder="请选择商品分类"
|
tabs: [
|
||||||
/>
|
// {label:'所有', value:0},
|
||||||
</el-form-item>
|
],
|
||||||
<el-form-item label="创建时间" prop="createTime">
|
stat: [],
|
||||||
<el-date-picker
|
chartoption: {},
|
||||||
v-model="queryParams.createTime"
|
// tablename: this.$route.meta.tablename,
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
tablename: 'tenement.lists',
|
||||||
class="!w-240px"
|
tableurl: this.$route.meta.tableurl,
|
||||||
end-placeholder="结束日期"
|
groupFilterText: '',
|
||||||
start-placeholder="开始日期"
|
tabskey: '',
|
||||||
type="daterange"
|
tabsdefaultvalue: ''
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
}
|
||||||
/>
|
},
|
||||||
</el-form-item>
|
mounted() {
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery">
|
if (this.name) {
|
||||||
<Icon class="mr-5px" icon="ep:search" />
|
this.tablename = this.name || this.$route.meta.tablename;
|
||||||
搜索
|
}
|
||||||
</el-button>
|
|
||||||
<el-button @click="resetQuery">
|
//判断是否开启自定义列
|
||||||
<Icon class="mr-5px" icon="ep:refresh" />
|
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 });
|
||||||
</el-button>
|
awaitvar.then((res) => {
|
||||||
<el-button
|
if (res.code == 200) {
|
||||||
v-hasPermi="['product:spu:create']"
|
Object.assign(this.$data, res.data);
|
||||||
plain
|
if (res.data.tabsdefaultvalue && res.data.tabskey) {
|
||||||
type="primary"
|
this.search[res.data.tabskey] = res.data.tabsdefaultvalue
|
||||||
@click="openForm(undefined)"
|
}
|
||||||
>
|
|
||||||
<Icon class="mr-5px" icon="ep:plus" />
|
}
|
||||||
新增
|
});
|
||||||
</el-button>
|
}
|
||||||
<el-button
|
},
|
||||||
v-hasPermi="['product:spu:export']"
|
computed: {
|
||||||
:loading="exportLoading"
|
filterObj() {
|
||||||
plain
|
const obj = []
|
||||||
type="success"
|
this.filter.forEach((item) => {
|
||||||
@click="handleExport"
|
if (item.component) {
|
||||||
>
|
obj.push({
|
||||||
<Icon class="mr-5px" icon="ep:download" />
|
name: item.value,
|
||||||
导出
|
label: item.label,
|
||||||
</el-button>
|
component: item.component,
|
||||||
</el-form-item>
|
options: item.options,
|
||||||
</el-form>
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
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%">
|
if (!this.operation.batchdeletion.url) {
|
||||||
<el-table-column prop="date" label="Date" width="180" />
|
this.$alert('没有批量删除相关配置', "提示", { type: 'error' });
|
||||||
<el-table-column fixed="right" prop="name" label="Name" width="180" />
|
return;
|
||||||
<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>
|
|
||||||
|
|
||||||
<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',
|
selectionChange(selection) {
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
this.selection = selection;
|
||||||
},
|
},
|
||||||
{
|
}
|
||||||
date: '2016-05-02',
|
}
|
||||||
name: 'Tom',
|
</script>
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
<style>
|
||||||
{
|
.xtable {
|
||||||
date: '2016-05-04',
|
margin-top: 0px;
|
||||||
name: 'Tom',
|
margin-bottom: 0px !important;
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
}
|
||||||
},
|
|
||||||
{
|
.xtable .el-card__body {
|
||||||
date: '2016-05-01',
|
padding: 5px
|
||||||
name: 'Tom',
|
}
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
.xtable .el-tabs__nav {
|
||||||
{
|
padding: 10px
|
||||||
date: '2016-05-03',
|
}
|
||||||
name: 'Tom',
|
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
.xtable .el-tabs {
|
||||||
},
|
padding: 0px 2px 0;
|
||||||
{
|
}
|
||||||
date: '2016-05-02',
|
|
||||||
name: 'Tom',
|
.xtable .mt-10px {
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
margin-top: 15px;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
date: '2016-05-04',
|
.xtable .mb-10px {
|
||||||
name: 'Tom',
|
margin-bottom: 15px;
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-01',
|
.xtable .float-right {
|
||||||
name: 'Tom',
|
float: right;
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
}
|
||||||
},
|
|
||||||
{
|
.xtable .el-tabs__header {
|
||||||
date: '2016-05-03',
|
margin: 0 0 2px;
|
||||||
name: 'Tom',
|
}
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-02',
|
.xtable .el-tabs__nav-next,
|
||||||
name: 'Tom',
|
.el-tabs__nav-prev {
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
padding: 10px 0;
|
||||||
},
|
}
|
||||||
{
|
</style>
|
||||||
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>
|
|
||||||
3
src/x.js
3
src/x.js
@ -28,6 +28,7 @@ import xQrCode from './components/xQrCode'
|
|||||||
import xPageHeader from './components/xPageHeader'
|
import xPageHeader from './components/xPageHeader'
|
||||||
import xSelect from './components/xSelect'
|
import xSelect from './components/xSelect'
|
||||||
import xWaterMark from './components/xWaterMark'
|
import xWaterMark from './components/xWaterMark'
|
||||||
|
import ContentWrap from './components/ContentWrap'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import {
|
import {
|
||||||
Flexbox,
|
Flexbox,
|
||||||
@ -92,6 +93,8 @@ export default {
|
|||||||
for (let icon in xIcons) {
|
for (let icon in xIcons) {
|
||||||
app.component(`xIcon${icon}`, xIcons[icon])
|
app.component(`xIcon${icon}`, xIcons[icon])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
app.component('ContentWrap', ContentWrap);
|
||||||
//关闭async-validator全局控制台警告
|
//关闭async-validator全局控制台警告
|
||||||
window.ASYNC_VALIDATOR_NO_WARNING = 1
|
window.ASYNC_VALIDATOR_NO_WARNING = 1
|
||||||
//全局代码错误捕捉
|
//全局代码错误捕捉
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user