no message
This commit is contained in:
parent
3dcd95bdaa
commit
adff317d29
@ -100,6 +100,7 @@
|
||||
</template>
|
||||
<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@media (max-width: 992px){
|
||||
// 移动端样式覆盖
|
||||
.el-form-item {display: block;}
|
||||
.el-form-item__label {display: block;text-align: left;padding: 0 0 10px;}
|
||||
.el-form-item__label {display: block;text-align: left;padding: 0 10px 10px;}
|
||||
.el-dialog {width: 90%!important;}
|
||||
.el-dialog.is-fullscreen {width: 100%!important;}
|
||||
.el-drawer.rtl {width: 90%!important;}
|
||||
|
||||
273
src/views/table/1/index.vue
Normal file
273
src/views/table/1/index.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-aside :width="(aside.width || 160)+'px'" v-if="aside.items.length>0">
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" class="menu" :node-key="aside.key || 'id'" :data="aside.items" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
</el-main>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header class="header-tabs" v-if="tabs.length>0">
|
||||
<el-tabs type="card" v-model="search[tabskey]" @tab-change="tabChange">
|
||||
<el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label" :name="item.value"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-header>
|
||||
<el-header v-if="operation.plus || operation.batchdeletion || filter.length>0">
|
||||
<div class="left-panel">
|
||||
<el-button v-if="operation.plus" type="primary" icon="el-icon-plus" @click="plus"></el-button>
|
||||
<el-button v-if="operation.batchdeletion" type="danger" @click="batchdeletion" plain icon="el-icon-delete"></el-button>
|
||||
</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>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-header style="height:120px;" v-if="typeof chartoption === 'object' && Object.keys(chartoption).length > 0">
|
||||
<xEcharts height="100%" :option="chartoption"></xEcharts>
|
||||
</el-header>
|
||||
|
||||
<el-main class="nopadding">
|
||||
<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>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></x-update>
|
||||
<x-stat v-if="dialog.stat" ref="xstatdialog" @closed="dialog.stat=false"></x-stat>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xStat from './stat'
|
||||
import xFilterBar from '@/components/xFilterBar';
|
||||
import xEcharts from '@/components/xEcharts'
|
||||
export default {
|
||||
name: 'table_1',
|
||||
components: {
|
||||
xStat,
|
||||
xEcharts,
|
||||
xFilterBar
|
||||
},
|
||||
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,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
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(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media (max-width: 992px){
|
||||
|
||||
.adminui-main > .el-container > .el-container > .el-header .right-panel{
|
||||
display: block;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
32
src/views/table/1/stat.vue
Normal file
32
src/views/table/1/stat.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<el-drawer :title="info.title || info.label" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
|
||||
<stat :name="info.value || info.name"></stat>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import stat from '@/views/system/stat';
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
props: {},
|
||||
components: {
|
||||
stat,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(){
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//表单注入数据
|
||||
setData(info){
|
||||
this.info = info;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
278
src/views/table/2/index.vue
Normal file
278
src/views/table/2/index.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<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="68">
|
||||
<el-form-item style="white-space: nowrap;" :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>
|
||||
|
||||
<ContentWrap class="xtable">
|
||||
<el-tabs v-if="tabs && tabs.length > 0" v-model="search[tabskey]" @tab-change="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>
|
||||
export default {
|
||||
name: 'table_2',
|
||||
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,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
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(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
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>
|
||||
@ -1,279 +1,35 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<table2 name="user"></table2>
|
||||
</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>
|
||||
import table2 from './../../table/2'
|
||||
export default {
|
||||
name: 'systemTable',
|
||||
components: {},
|
||||
props: {
|
||||
name: { type: String, default: "" },
|
||||
name: 'user',
|
||||
components: {
|
||||
table2,
|
||||
},
|
||||
|
||||
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: ''
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
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(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
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>
|
||||
@ -1,153 +0,0 @@
|
||||
<template>
|
||||
<div class="ec-container">
|
||||
<!-- <div class="title">
|
||||
<i :class="['title-icon', info.iconClass]" :style="{ backgroundColor: info.color }" />{{ info.name }}
|
||||
<el-tooltip v-if="info.tips" :content="info.tips" effect="dark" placement="top"> <i class="wk wk-help wk-help-tips"/> </el-tooltip>
|
||||
</div> -->
|
||||
<xTable name="url"></xTable>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import xTable from '@/views/system/table'
|
||||
|
||||
export default {
|
||||
name: 'Message',
|
||||
props: {
|
||||
info: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
xTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectionList: [], // 勾选的数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
.filtrate-button {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
&-img {
|
||||
vertical-align: middle;
|
||||
margin: 0 5px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
.filtrate-button:hover {
|
||||
/* color: $xr-color-primary;*/
|
||||
}
|
||||
|
||||
.ec-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
.title-icon {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
/* border-radius: $xr-border-radius-base;*/
|
||||
color: white;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.wk-help {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.option-bar {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
/** 勾选操作 */
|
||||
.selection-bar {
|
||||
font-size: 12px;
|
||||
height: 35px;
|
||||
color: #777;
|
||||
|
||||
.selected—title {
|
||||
flex-shrink: 0;
|
||||
padding-right: 20px;
|
||||
color: #333;
|
||||
.selected—count {
|
||||
/* color: $xr-color-primary;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selection-items-box {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0 15px;
|
||||
|
||||
.el-button {
|
||||
color: #666;
|
||||
/* background-color: $xr--background-color-base;*/
|
||||
/* border-color: $xr--background-color-base;*/
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
/* background: $xr-color-primary;*/
|
||||
/* border-color: $xr-color-primary;*/
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.n-table--border {
|
||||
/* border-top: 1px solid $xr-border-line-color;*/
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain:focus,
|
||||
.el-button--primary.is-plain:active,
|
||||
.el-button--primary.is-plain:hover {
|
||||
/* color: $xr-color-primary;*/
|
||||
}
|
||||
|
||||
// 拉开图标与文字距离
|
||||
.el-button--margin {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,14 +13,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-body-content">
|
||||
<div style="overflow-y: scroll; height: 100%; ">
|
||||
|
||||
<xTable ref="table" :tableColumn="column" :name="tablename" :params="search" :row-key="key" :remoteSort="true" :remoteFilter="true" :hideDo="true" :hideRefresh="true" :hideSetting="true" stripe>
|
||||
<el-table-column prop="msg" label="msg" width="800" />
|
||||
<el-table-column prop="id" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" width="500" />
|
||||
</xTable>
|
||||
</div>
|
||||
<table2></table2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -28,20 +21,20 @@
|
||||
|
||||
<script>
|
||||
import xMenuItem from '@/components/xMenu/item'
|
||||
import table2 from './../../table/2'
|
||||
|
||||
export default {
|
||||
/** 客户管理 的 消息列表 */
|
||||
name: 'trajectory',
|
||||
|
||||
components: {
|
||||
// xTable,
|
||||
table2,
|
||||
xMenuItem,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
// dialogVisible: true,
|
||||
leftType: '',
|
||||
contentHeight: document.documentElement.clientHeight - 84,
|
||||
info: {},
|
||||
@ -251,7 +244,6 @@ export default {
|
||||
.message-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user