137 lines
3.7 KiB
Vue
137 lines
3.7 KiB
Vue
<template>
|
|
<el-drawer :title="detail.title + '菜单'" v-model="visible" size="80%" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="right-panel-search">
|
|
<el-input v-model="search.title" placeholder="名称" clearable></el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :params="search" hidePagination>
|
|
<el-table-column type="selection" />
|
|
<template #client="scope">
|
|
{{ scope.row.client?.title }}
|
|
</template>
|
|
<template #operation="scope">
|
|
<el-button-group>
|
|
<el-button type="primary" @click="edit(scope.row, scope.$index)">编辑</el-button>
|
|
<el-button type="primary" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
|
<el-popconfirm title="确定删除吗？" @confirm="table_delete(scope.row, scope.$index)">
|
|
<template #reference>
|
|
<el-button type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</el-button-group>
|
|
</template>
|
|
</scTable>
|
|
</el-main>
|
|
</el-drawer>
|
|
<save ref="saveBox" v-if="dialog.save" @success="upsearch" @closed="dialog.save=false" />
|
|
</template>
|
|
|
|
<script>
|
|
import save from './menuform.vue'
|
|
|
|
export default {
|
|
emits: ['success', 'closed'],
|
|
components: { save },
|
|
data(){
|
|
return {
|
|
detail: {},
|
|
visible: false,
|
|
isSaveing: false,
|
|
dialog: {search: false, menu: false, save: false},
|
|
list: {
|
|
apiObj: this.$API.system.client.menu.list,
|
|
column: [
|
|
{prop: 'id', label: 'ID', width: 80},
|
|
{prop: 'title', label: '名称'},
|
|
{prop: 'client', label: '所属客户端', width: 180},
|
|
{prop: 'url', label: '链接', width: 260},
|
|
{prop: 'sort', label: '排序', width: 80},
|
|
{prop: 'created_at', label: '添加时间', width: 160},
|
|
{prop: 'updated_at', label: '更新时间', width: 160},
|
|
{prop: 'operation', label: '操作', width: 160, fixed: 'right'}
|
|
],
|
|
},
|
|
searchFields: [
|
|
{title: '标题', key: 'title', type: 'string'},
|
|
],
|
|
actions: {
|
|
add: {title: '', icon: 'a-icon-plus-outlined', type: 'primary'},
|
|
},
|
|
selection: [],
|
|
search: {is_tree: 1}
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
methods:{
|
|
//显示
|
|
open(){
|
|
this.visible = true;
|
|
return this;
|
|
},
|
|
//表单注入数据
|
|
setData(data){
|
|
this.loading = true
|
|
this.detail = data
|
|
},
|
|
upsearch(){
|
|
this.$refs.table.reload(this.search);
|
|
},
|
|
moreUpsearch(search){
|
|
this.search = search;
|
|
this.upsearch();
|
|
},
|
|
moreSearch(){
|
|
this.dialog.search = true
|
|
this.$nextTick(() => {
|
|
this.$refs.searchBox.open().setData(this.search)
|
|
})
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection){
|
|
this.selection = selection;
|
|
console.log(selection)
|
|
},
|
|
add(){
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
this.$refs.saveBox.open('add').setData()
|
|
})
|
|
},
|
|
edit(item){
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
this.$refs.saveBox.open('edit').setData(item)
|
|
})
|
|
},
|
|
table_show(item){
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
this.$refs.saveBox.open('show').setData(item)
|
|
})
|
|
},
|
|
async table_delete(item){
|
|
let res = await this.$API.system.client.delete.post({id: item.id});
|
|
if(res.code == 1){
|
|
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
|
this.upsearch()
|
|
this.$message.success("删除成功")
|
|
}else{
|
|
this.$message.error(res.message)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|