Skip to content

S
smart-office-platform
Commit 0fb6d868 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

tui

parent 6461b14a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 396 additions and 296 deletions
smart-office-manager-ui/admin/src/views/system/menu/dialogshow.vue
View file @ 0fb6d868
...@@ -6,24 +6,48 @@ ...@@ -6,24 +6,48 @@
<el-col :span="24" v-if="form.parentId !== 0"> <el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级节点" prop="parentId"> <el-form-item label="上级节点" prop="parentId">
<treeselect <treeselect
v-model="form.parentId" v-model="form.parentId"
:options="menuOptions" :options="menuOptions"
:normalizer="normalizer" :normalizer="normalizer"
placeholder="选择上级菜单信息" placeholder="选择上级菜单信息"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!--<Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />--> <!--<Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />-->
<Field label="名称" prop="name" v-model="form.name"/> <Field label="名称" prop="name" v-model="form.name" />
<Field label="权限类型" prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' /> <Field
<Field label="访问地址" prop="url" v-model="form.url" /> label="权限类型"
<Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' /> prop="authType"
<Field class="radio-group-container" label="图标" prop="imgPath" :span='24'> v-model="form.authType"
<el-radio-group v-model="form.imgPath" class='form-el-radio-group'> :enumData="dict.authType"
<el-radio-button style="width: 180px" label="">不需要图标</el-radio-button> type="select"
<el-radio-button style="width: 180px" v-for='(icon, index) in icons' :key='index' :label="icon"> />
<i :class="'el-icon-'+icon" style="font-size: 20px"></i> <Field label="访问地址" prop="url" v-model="form.url" />
{{icon}} <Field
label="状态"
prop="status"
v-model="form.status"
:enumData="dict.status"
type="radio"
/>
<Field
class="radio-group-container"
label="图标"
prop="imgPath"
:span="24"
>
<el-radio-group v-model="form.imgPath" class="form-el-radio-group">
<el-radio-button style="width: 180px" label=""
>不需要图标</el-radio-button
>
<el-radio-button
style="width: 180px"
v-for="(icon, index) in icons"
:key="index"
:label="icon"
>
<i :class="'el-icon-' + icon" style="font-size: 20px"></i>
{{ icon }}
</el-radio-button> </el-radio-button>
</el-radio-group> </el-radio-group>
</Field> </Field>
...@@ -40,7 +64,7 @@ ...@@ -40,7 +64,7 @@
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios' import axios from "axios";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
...@@ -48,16 +72,43 @@ export default { ...@@ -48,16 +72,43 @@ export default {
}, },
data() { data() {
return { return {
fileContent:"", fileContent: "",
id:null, id: null,
icons: [ icons: [
'info', 'error', 'success', 'warning', 'question', "info",
'tickets', 'document', 'goods', 'sold-out', 'news', "error",
'message', 'date', 'printer', 'time', 'bell', "success",
'mobile-phone', 'service', 'view', 'menu', 'star-on', "warning",
'location', 'phone', 'picture', 'delete', 'search', "question",
'edit', 'rank', 'refresh', 'share', 'setting', "tickets",
'upload', 'upload2', 'download', 'loading', "document",
"goods",
"sold-out",
"news",
"message",
"date",
"printer",
"time",
"bell",
"mobile-phone",
"service",
"view",
"menu",
"star-on",
"location",
"phone",
"picture",
"delete",
"search",
"edit",
"rank",
"refresh",
"share",
"setting",
"upload",
"upload2",
"download",
"loading",
], ],
menuOptions: [], menuOptions: [],
// 遮罩层 // 遮罩层
...@@ -66,44 +117,36 @@ export default { ...@@ -66,44 +117,36 @@ export default {
title: "菜单信息", title: "菜单信息",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
toString:[ toString: ["status", "linkType", "commMenu", "menuType", "authType"],
"status",
"linkType",
"commMenu",
"menuType",
"authType",
],
// 表单校验 // 表单校验
rules: { rules: {},
}
}; };
}, },
created() { created() {
axios.get('/icon.txt') axios.get("/icon.txt").then((response) => {
.then(response => { this.fileContent = response.data;
this.fileContent = response.data this.icons = this.fileContent.split("\n");
this.icons = this.fileContent.split('\n') });
})
}, },
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row, menuOptions) { edit(row, menuOptions) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "修改菜单信息"; this.title = "修改菜单信息";
}, },
/** 新增 */ /** 新增 */
add(row, menuOptions) { add(row, menuOptions) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
if(row.id){ if (row.id) {
this.id=row.id this.id = row.id;
this.form.parentId=row.id this.form.parentId = row.id;
} }
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "新增菜单信息"; this.title = "新增菜单信息";
...@@ -111,7 +154,7 @@ export default { ...@@ -111,7 +154,7 @@ export default {
/** 查看*/ /** 查看*/
view(row, menuOptions) { view(row, menuOptions) {
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "菜单信息详细"; this.title = "菜单信息详细";
...@@ -122,8 +165,8 @@ export default { ...@@ -122,8 +165,8 @@ export default {
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
if(this.id){ if (this.id) {
this.form.parentId=this.id this.form.parentId = this.id;
} }
this.open = true; this.open = true;
}, },
...@@ -147,28 +190,27 @@ export default { ...@@ -147,28 +190,27 @@ export default {
reset() { reset() {
this.resetForm("form"); this.resetForm("form");
this.form = { this.form = {
name : "", name: "",
url : null, url: null,
ancestors : null, ancestors: null,
parentId : null, parentId: null,
orderId : null, orderId: null,
status : 1, status: 1,
linkType : 0, linkType: 0,
groupId : 1, groupId: 1,
groupName : null, groupName: null,
imgPath : null, imgPath: null,
buttonImgPath : null, buttonImgPath: null,
imgCommPath : null, imgCommPath: null,
commMenu : 0, commMenu: 0,
menuType : 0, menuType: 0,
authType : 3, authType: 3,
createUserName : null, createUserName: null,
}; };
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
console.log("重置表单") console.log("重置表单");
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
...@@ -196,10 +238,10 @@ export default { ...@@ -196,10 +238,10 @@ export default {
box-shadow: none; box-shadow: none;
} }
.el-radio-button__orig-radio:checked+.el-radio-button__inner { .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 1px solid #3E7BFA !important; border: 1px solid #3e7bfa !important;
color: #3E7BFA; color: #3e7bfa;
line-height: 14px; line-height: 14px;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
......
smart-office-manager-ui/admin/src/views/system/menu/list.vue
View file @ 0fb6d868
<template> <template>
<div className="page"> <div
class="page"
style="padding: 0 !important;height: 81% !important; min-height: 81% !important;"
>
<el-card> <el-card>
<LayoutTable notPagination ref="layoutTable" :data="tableData" :config="tableConfig"/> <LayoutTable
notPagination
ref="layoutTable"
:data="tableData"
:config="tableConfig"
/>
</el-card> </el-card>
<dialog-show ref="dialogform" @ok="getData"/> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
import {handleTree} from "@/assets/utils/table"; import { handleTree } from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
...@@ -17,15 +25,15 @@ import dialogShow from "./dialogshow"; ...@@ -17,15 +25,15 @@ import dialogShow from "./dialogshow";
export default { export default {
name: "Menu", name: "Menu",
mixins: [table], mixins: [table],
components: {Treeselect, dialogShow}, components: { Treeselect, dialogShow },
created() { created() {
this.query={"page":1,"size":-1} this.query = { page: 1, size: -1 };
}, },
methods: { methods: {
afterRender(data) { afterRender(data) {
data.data = handleTree(data.data, "id", "parentId"); data.data = handleTree(data.data, "id", "parentId");
this.menuOptions = data.data; this.menuOptions = data.data;
this.$refs.layoutTable.showType = "treetable" this.$refs.layoutTable.showType = "treetable";
}, },
handleUp(data) { handleUp(data) {
...@@ -46,17 +54,17 @@ export default { ...@@ -46,17 +54,17 @@ export default {
id: id, id: id,
type: type, type: type,
}) })
.then((res) => { .then((res) => {
if (res && res.code && res.code == 1) { if (res && res.code && res.code == 1) {
this.getData() this.getData();
this.loading = false;
this.$message.success("更新排序成功！");
}
})
.catch((error) => {
this.loading = false; this.loading = false;
this.$message.error(error.message); this.$message.success("更新排序成功！");
}); }
})
.catch((error) => {
this.loading = false;
this.$message.error(error.message);
});
}, },
handleAdd(row) { handleAdd(row) {
...@@ -70,17 +78,17 @@ export default { ...@@ -70,17 +78,17 @@ export default {
/** 重写编辑方法 */ /** 重写编辑方法 */
toEdit(row) { toEdit(row) {
this.loading = true; this.loading = true;
this.$post(this.pageInfo.exclude, {id: row.id}) this.$post(this.pageInfo.exclude, { id: row.id })
.then((res) => { .then((res) => {
if (res && res.code && res.code == 1) { if (res && res.code && res.code == 1) {
this.menuOptions = handleTree(res.data.data); this.menuOptions = handleTree(res.data.data);
this.$refs.dialogform.edit(row, this.menuOptions); this.$refs.dialogform.edit(row, this.menuOptions);
this.loading = false; this.loading = false;
} }
}) })
.catch((error) => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) });
}, },
/** 重写查看方法 */ /** 重写查看方法 */
toView(row) { toView(row) {
...@@ -89,145 +97,144 @@ export default { ...@@ -89,145 +97,144 @@ export default {
// 展示菜单图标 // 展示菜单图标
showIcon(row, column) { showIcon(row, column) {
return <i class={'el-icon-'+row.imgPath}></i> return <i class={"el-icon-" + row.imgPath}></i>;
}, },
handleStatus(row){ handleStatus(row) {
if(row.status==1){ if (row.status == 1) {
this.$post("/menu/change/status", {id:row.id,status:0}) this.$post("/menu/change/status", { id: row.id, status: 0 })
.then(res => { .then((res) => {
if(res.code==1){ if (res.code == 1) {
row.status=0; row.status = 0;
} }
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) });
}else{ } else {
this.$post("/menu/change/status", {id:row.id,status:1}) this.$post("/menu/change/status", { id: row.id, status: 1 })
.then(res => { .then((res) => {
if(res.code==1){ if (res.code == 1) {
row.status=1; row.status = 1;
} }
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) });
} }
}, },
}, },
data() { data() {
return { return {
value: '1', value: "1",
config: { config: {
isshowTabPane:true, isshowTabPane: true,
/** 树表是否默认展开 */ /** 树表是否默认展开 */
expand: false, expand: false,
showType: "treetable", showType: "treetable",
search: [], search: [],
columns: [ columns: [
{ {
type: 'selection', type: "selection",
width: 60, width: 60,
}, },
{ {
prop: 'id', prop: "id",
label: 'ID', label: "ID",
width: 120, width: 120,
}, },
{ {
prop: 'name', prop: "name",
label: '名称', label: "名称",
width: 160, width: 160,
}, },
{ {
prop: 'imgPath', prop: "imgPath",
label: '图标', label: "图标",
width: 50, width: 50,
formatter: this.showIcon, formatter: this.showIcon,
}, },
{ {
prop: 'authType', prop: "authType",
label: '权限类型', label: "权限类型",
formatter: this.formatter, formatter: this.formatter,
}, },
{ {
prop: 'parentId', prop: "parentId",
label: '父ID', label: "父ID",
width: 160,
}, },
{ {
prop: 'url', prop: "url",
label: '地址', label: "地址",
width: 160,
}, },
{ {
prop: 'status', prop: "status",
label: '状态', label: "状态",
width: 100, width: 100,
formatter: row => { formatter: (row) => {
return ( return (
<el-switch <el-switch
value={row.status+""} value={row.status + ""}
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value='1' active-value="1"
inactive-value='0' inactive-value="0"
onChange={() => { onChange={() => {
this.handleStatus(row); this.handleStatus(row);
}} }}
> ></el-switch>
</el-switch>
); );
} },
}, },
{ {
label: "操作", label: "操作",
width: 280, width: 280,
formatter: row => { formatter: (row) => {
return ( return (
<div> <div>
<el-link <el-link
style="margin-right:5px;margin-left:5px" style="margin-right:5px;margin-left:5px"
icon="el-icon-top" icon="el-icon-top"
onClick={() => { onClick={() => {
this.handleUp(row); this.handleUp(row);
}} }}
></el-link> ></el-link>
<el-link <el-link
style="margin-right:5px;margin-left:5px" style="margin-right:5px;margin-left:5px"
icon="el-icon-bottom" icon="el-icon-bottom"
onClick={() => { onClick={() => {
this.handleDown(row); this.handleDown(row);
}} }}
></el-link>
></el-link> <el-button
size="mini"
<el-button type="text"
size="mini" icon="el-icon-edit-outline"
type="text" onClick={() => {
icon="el-icon-edit-outline" this.handleAdd(row);
onClick={() => { }}
this.handleAdd(row); >
}} 新增
> </el-button>
新增 <table-buttons
</el-button> noAdd
<table-buttons noView
noAdd row={row}
noView onEdit={this.toEdit}
row={row} onView={this.toView}
onEdit={this.toEdit} onDel={this.toDel}
onView={this.toView} />
onDel={this.toDel} </div>
/>
</div>
); );
} },
} },
] ],
} },
}; };
} },
}; };
</script> </script>
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