276 lines
8.3 KiB
Vue
276 lines
8.3 KiB
Vue
<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: 'propertyAuth',
|
|
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){
|
|
var res = await this.$http.post(this.operation.delete.url, {[this.key]: row[this.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>
|