Skip to content

M
mes-ui
Commit 4c41de86 authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

系统管理

parent a210f0d0
Show whitespace changes
Inline Side-by-side
Showing with 243 additions and 166 deletions
pages/basicData/menu/index.vue
View file @ 4c41de86
<template> <template>
<div> <Layout class="full">
<TreeGrid :columns="columns" ref="grid" :items="list"> <Sider
hide-trigger
:style="{ background: '#fff' }"
class="menu"
width="240"
>
<h3 class="title">
新增系统
<ButtonGroup class="fr" size="small">
<Button icon="md-add" title="新增顶级" @click="add()"></Button>
</ButtonGroup>
</h3>
<Menu :theme="theme3" active-name="0" @on-select="clickSelect">
<MenuItem :name="index" v-for="(item, index) in list" :key="index">
{{ item.name }}
</MenuItem>
</Menu>
<!-- <ul>
<li
v-for="(item, index) in list"
:key="index"
:class="{ active: index == isActive }"
@click="itemClick(index)"
>
{{ item.name }}
</li>
</ul> -->
</Sider>
<Content class="content">
<TreeGrid :columns="columns" ref="grid" :items="newList">
<template slot="buttons"> <template slot="buttons">
<Button type="primary" @click="add()">新增系统</Button> <!-- <Button type="primary" @click="add()">新增系统</Button> -->
<!-- <Button type="primary" @click="importModal=true">导入菜单</Button> --> <!-- <Button type="primary" @click="importModal=true">导入菜单</Button> -->
</template> </template>
</TreeGrid> </TreeGrid>
...@@ -18,49 +48,64 @@ ...@@ -18,49 +48,64 @@
<Modal v-model="detailModal" title="详情"> <Modal v-model="detailModal" title="详情">
<Detail :eid="curId" /> <Detail :eid="curId" />
</Modal> </Modal>
<Modal v-model="importModal" title="导入系统菜单" width="800" @on-ok="importOk"> <Modal
<h1 v-if="systemList.length==0">请先创建系统</h1> v-model="importModal"
title="导入系统菜单"
width="800"
@on-ok="importOk"
>
<h1 v-if="systemList.length == 0">请先创建系统</h1>
<div v-else> <div v-else>
<Select placeholder="请选择系统" v-model="systemId" :data="systemList"> <Select
<Option v-for="(li,i) in systemList" :value="li.id" :key="li.id">{{li.name}}</Option> placeholder="请选择系统"
v-model="systemId"
:data="systemList"
>
<Option v-for="(li, i) in systemList" :value="li.id" :key="li.id">{{
li.name
}}</Option>
</Select> </Select>
<!-- <div class="h400"> <!-- <div class="h400">
<json-viewer :value="systemRouters" :expand-depth="5"></json-viewer> <json-viewer :value="systemRouters" :expand-depth="5"></json-viewer>
</div> --> </div> -->
</div> </div>
</Modal> </Modal>
</div> </Content>
</Layout>
</template> </template>
<script> <script>
import Api from './api' import Api from "./api";
import Add from './add' import Add from "./add";
import AddApi from './addApi' import AddApi from "./addApi";
import Edit from './edit' import Edit from "./edit";
import Detail from './detail' import Detail from "./detail";
import Search from './search' import Search from "./search";
// import { appRouter } from '@/router/router.js' // import { appRouter } from '@/router/router.js'
import JsonViewer from 'vue-json-viewer' import JsonViewer from "vue-json-viewer";
export default { export default {
name: 'list', name: "list",
components: { components: {
Add, Add,
AddApi, AddApi,
Edit, Edit,
Detail, Detail,
Search, Search,
JsonViewer JsonViewer,
}, },
data() { data() {
return { return {
action: Api.index, action: Api.index,
easySearch: { easySearch: {
keys: { op: 'name,code,icon,url,description,app', value: null } keys: { op: "name,code,icon,url,description,app", value: null },
}, },
newList: [],
name: 0,
curModel: { curModel: {
id: 0, id: 0,
type: 0, type: 0,
name: '根级' name: "根级",
}, },
theme3: "light",
testModal: true, testModal: true,
addModal: false, addModal: false,
apiModal: false, apiModal: false,
...@@ -75,67 +120,67 @@ export default { ...@@ -75,67 +120,67 @@ export default {
curId: 0, curId: 0,
columns: [ columns: [
{ {
key: 'name', key: "name",
title: this.l('name'), title: this.l("name"),
align: 'left', align: "left",
easy: true, easy: true,
high: true high: true,
}, },
// { key: 'upId', title: this.l('upId'), align: 'left', high: true ,hide:true}, // { key: 'upId', title: this.l('upId'), align: 'left', high: true ,hide:true},
{ {
key: 'type', key: "type",
width: 60, width: 60,
title: this.l('type'), title: this.l("type"),
align: 'center', align: "center",
high: true, high: true,
code: 'mes_xingchi_system.menu.type' code: "mes_xingchi_system.menu.type",
}, },
{ {
key: 'code', key: "code",
title: this.l('code'), title: this.l("code"),
align: 'left', align: "left",
easy: true, easy: true,
high: true high: true,
}, },
{ {
key: 'icon', key: "icon",
title: this.l('icon'), title: this.l("icon"),
align: 'center', align: "center",
type: 'icons', type: "icons",
easy: true, easy: true,
high: true high: true,
}, },
{ {
key: 'target', key: "target",
title: this.l('target'), title: this.l("target"),
align: 'center', align: "center",
high: true, high: true,
code: 'mes_xingchi_system.menu.target' code: "mes_xingchi_system.menu.target",
}, },
{ {
key: 'url', key: "url",
title: this.l('url'), title: this.l("url"),
align: 'left', align: "left",
easy: true, easy: true,
width:200, width: 200,
high: true, high: true,
render(h,params) { render(h, params) {
return h('Ellipsis',{ return h("Ellipsis", {
attrs:{ attrs: {
text:params.row.url, text: params.row.url,
length:50, length: 50,
tooltip:true tooltip: true,
} },
}) });
}, },
}, },
{ {
key: 'status', key: "status",
title: this.l('status'), title: this.l("status"),
align: 'center', align: "center",
width:100, width: 100,
high: true, high: true,
code: 'mes_xingchi_system.menu.status' code: "mes_xingchi_system.menu.status",
}, },
// { // {
// key: 'description', // key: 'description',
...@@ -145,172 +190,183 @@ export default { ...@@ -145,172 +190,183 @@ export default {
// high: true // high: true
// }, // },
{ {
key: 'source', key: "source",
title: this.l('source'), title: this.l("source"),
align: 'left', align: "left",
high: true, high: true,
width:150, width: 150,
code: 'mes_xingchi_system.menu.source' code: "mes_xingchi_system.menu.source",
}, },
{ {
key: 'app', key: "app",
title: this.l('app'), title: this.l("app"),
align: 'left', align: "left",
easy: true, easy: true,
high: true high: true,
}, },
{ {
key: 'priority', key: "priority",
title: this.l('priority'), title: this.l("priority"),
align: 'left', align: "left",
high: true high: true,
}, },
{ {
title: '操作', title: "操作",
key: 'id', key: "id",
width: 120, width: 120,
align: 'center', align: "center",
render: (h, params) => { render: (h, params) => {
return h('div', { class: 'action' }, [ return h("div", { class: "action" }, [
h( h(
'op', "op",
{ {
attrs: { attrs: {
oprate: 'add' oprate: "add",
}, },
on: { click: () => this.add(params.row) } on: { click: () => this.add(params.row) },
}, },
'新增' "新增"
), ),
h( h(
'op', "op",
{ {
attrs: { attrs: {
oprate: 'edit' oprate: "edit",
}, },
on: { click: () => this.edit(params.row) } on: { click: () => this.edit(params.row) },
}, },
'编辑' "编辑"
), ),
h( h(
'op', "op",
{ {
attrs: { attrs: {
oprate: 'delete' oprate: "delete",
}, },
on: { click: () => this.removeOk(params.row) } on: { click: () => this.removeOk(params.row) },
}, },
'删除' "删除"
) ),
]) ]);
} },
} },
] ],
} };
}, },
mounted() { mounted() {
this.init() this.init();
}, },
async fetch({ store, params }) { async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典 await store.dispatch("loadDictionary"); // 加载数据字典
}, },
methods: { methods: {
clickSelect(name) {
// console.log(name);
this.newList = [];
this.name = name;
this.list.map((e, index) => {
if (index == this.name) {
this.newList.push(e);
}
});
},
init() { init() {
Api.getSystem().then((r) => { Api.getSystem().then((r) => {
this.systemList = r.result this.systemList = r.result;
}) });
Api.getTree().then((r) => { Api.getTree().then((r) => {
this.list = r.result this.list = r.result;
}) this.newList=r.result;
});
}, },
add(row) { add(row) {
if (row) { if (row) {
if (row.type == 2) { if (row.type == 2) {
this.apiModal = true this.apiModal = true;
this.curModel = { this.curModel = {
id: row.id, id: row.id,
name: row.name, name: row.name,
type: row.type, type: row.type,
app: row.app app: row.app,
} };
return return;
} else { } else {
this.addModal = true this.addModal = true;
this.curModel = { this.curModel = {
id: row.id, id: row.id,
name: row.name, name: row.name,
type: row.type, type: row.type,
app: row.app app: row.app,
} };
} }
} else { } else {
this.addModal = true this.addModal = true;
this.curModel = { this.curModel = {
id: 0, id: 0,
name: '根级', name: "根级",
type: -1, type: -1,
app: '' app: "",
} };
} }
}, },
addOk() { addOk() {
this.init() this.init();
this.addModal = false this.addModal = false;
this.detailModal = false this.detailModal = false;
this.editModal = false this.editModal = false;
this.curId = 0 this.curId = 0;
}, },
apiOk() { apiOk() {
this.apiModal = false this.apiModal = false;
this.init() this.init();
}, },
importMenu() { importMenu() {
this.importModal = true this.importModal = true;
}, },
importOk() { importOk() {
Api.importRouters({ Api.importRouters({
id: this.systemId, id: this.systemId,
routers: appRouter routers: appRouter,
}).then((r) => { }).then((r) => {
console.warn(r) console.warn(r);
this.importModal = false this.importModal = false;
}) });
}, },
search() { search() {
this.$refs.grid.reload(this.easySearch) this.$refs.grid.reload(this.easySearch);
}, },
detail(id) { detail(id) {
this.detailModal = true this.detailModal = true;
this.curId = id this.curId = id;
}, },
edit(row) { edit(row) {
this.editModal = true this.editModal = true;
this.curId = row.id this.curId = row.id;
this.curModel = row this.curModel = row;
}, },
remove(id) { remove(id) {
this.deletelModal = true this.deletelModal = true;
this.curId = id this.curId = id;
}, },
removeOk(row) { removeOk(row) {
Api.delete({ id: row.id }).then((r) => { Api.delete({ id: row.id }).then((r) => {
if (r.success) { if (r.success) {
this.init() this.init();
this.deletelModal = false this.deletelModal = false;
this.$Message.success('删除成功') this.$Message.success("删除成功");
} }
}) });
}, },
removeCancel() { removeCancel() {
this.deletelModal = false this.deletelModal = false;
}, },
cancel() { cancel() {
this.curId = 0 this.curId = 0;
this.addModal = false this.addModal = false;
this.detailModal = false this.detailModal = false;
this.editModal = false this.editModal = false;
this.deletedlModal = false this.deletedlModal = false;
}, },
l(key) { l(key) {
/* /*
...@@ -337,11 +393,32 @@ export default { ...@@ -337,11 +393,32 @@ export default {
priority:'排序', priority:'排序',
} }
*/ */
let vkey = 'menu' + '.' + key let vkey = "menu" + "." + key;
return this.$t(vkey) || key return this.$t(vkey) || key;
} },
},
};
</script>
<style lang="less" scoped>
.full {
margin-top: 0;
.menu {
overflow-x: hidden;
height: 86vh;
} }
} }
</script> .content {
<style lang="less"> height: 86vh;
overflow: auto;
}
// .ivu-color-picker-confirm {
// .ivu-input {
// width: 130px;
// height: 30px;
// float: left;
// }
// .ivu-btn-small {
// height: 30px !important;
// }
// }
</style> </style>
\ No newline at end of file
pages/basicData/systemUser/index.vue
View file @ 4c41de86
<template> <template>
<Layout class="full"> <Layout class="full">
<Sider hide-trigger :style="{background: '#fff'}" width="260" class="menu" style=" flex:0;border:none"> <Sider hide-trigger :style="{background: '#fff'}" width="260" class="menu">
<div class="zh-tree" :style="{height:treeHeight+'px'}"> <div class="zh-tree" :style="{height:treeHeight+'px'}">
<h3 class="zh-title">部门结构</h3> <h3 class="zh-title">部门结构</h3>
<div class="zh-box"> <div class="zh-box">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment