<template>
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<el-input v-model="menuName" clearable placeholder="请输入菜单名称"></el-input>
|
</div>
|
<div class="header_item">
|
<el-button v-if="showButton('search')" icon="el-icon-search" @click="searchWechatMenuList(true)">查询</el-button>
|
<el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="propInsert()">新增</el-button>
|
<el-button v-if="showButton('insert')" icon="el-icon-setting" @click="propUserConfig(1)">管服配置菜单</el-button>
|
<el-button v-if="showButton('insert')" icon="el-icon-setting" @click="propUserConfig(2)">劳务配置菜单</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<el-table
|
v-loading="loading"
|
:data="wechatList"
|
height="100%">
|
<el-table-column label="序号" width="60" align="center">
|
<template #default="scope">
|
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="menuTagName" label="标签名称" align="center"></el-table-column>
|
<el-table-column prop="menuName" label="菜单名称" align="center"></el-table-column>
|
<el-table-column prop="sort" label="菜单排序" align="center"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template #default="{ row }">
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(row)">修改</el-button>
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
@size-change="changePageSize"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<!-- 新增 修改 -->
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ? '新增菜单' : '修改菜单信息'"
|
:visible.sync="asyncWechat"
|
width="35%">
|
<el-form ref="form" :model="formWechat" :rules="rulesWechat" label-width="auto" class="rule_form">
|
<el-form-item label="菜单名称：" prop="menuName">
|
<el-input v-model="formWechat.menuName" clearable placeholder="请输入菜单名称"></el-input>
|
</el-form-item>
|
<el-form-item label="菜单排序：" prop="sort">
|
<el-input-number
|
v-model="formWechat.sort"
|
placeholder="请输入菜单排序"
|
:controls="false"
|
:precision="0"
|
:min="0">
|
</el-input-number>
|
</el-form-item>
|
<el-form-item label="菜单类型：" prop="menuType">
|
<el-radio-group v-model="formWechat.menuType" @change="changeTips">
|
<el-radio :label="1">管服人员</el-radio>
|
<el-radio :label="2">劳务人员</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="菜单标签：" prop="menuTag" v-if="showTips">
|
<el-select v-model="formWechat.menuTag" clearable placeholder="请选择菜单标签">
|
<el-option
|
v-for="item in menuTagData"
|
:key="item.id"
|
:label="item.tagName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="菜单路径：">
|
<el-input v-model="formWechat.menuUrl" clearable placeholder="请输入菜单路径"></el-input>
|
</el-form-item>
|
<el-form-item label="菜单图标：">
|
<upload-image :file-list="formWechat.menuIcon" @delectImage="delectImage" :disabled="false">
|
<template #info>
|
<span>支持jpg、png、gif格式文件</span>
|
</template>
|
</upload-image>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncWechat = false">取 消</el-button>
|
<el-button @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 配置权限 -->
|
<el-dialog
|
class="prop_dialog"
|
title="配置权限"
|
:visible.sync="asyncConfig"
|
width="35%">
|
<div class="dialog_role_menu">
|
<div class="role_menu_item">
|
<el-radio-group v-model="radioValue" @input="changeRoleInfo">
|
<el-radio
|
v-for="item in roleRideoList"
|
:key="item.roleId"
|
:label="item.roleId">
|
{{item.roleName}}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="role_menu_item">
|
<el-checkbox-group v-model="checkValue">
|
<el-checkbox
|
v-for="item in menuCheckData"
|
:key="item.menuId"
|
:label="item.menuId"
|
:checked="item.selected === 1">
|
{{item.menuName}}
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div slot="footer">
|
<el-button @click="asyncConfig = false">取 消</el-button>
|
<el-button class="submit_btn" @click="submitConfigMenu()">提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia';
|
import { throttle } from '../../plugins/public';
|
import UploadImage from '../../components/uploadImage.vue';
|
export default {
|
data() {
|
return {
|
showTips:false,//是否展示菜单标签
|
menuName: '',
|
loading: false,
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
wechatList: [],
|
asyncTitle: true, // true 新增 false 修改
|
asyncWechat: false, // 弹窗
|
formWechat: {
|
menuIcon: []
|
}, // 表单信息
|
rulesWechat: {
|
menuName: [{
|
required: true,
|
message: '请输入菜单名称',
|
trigger: 'blur'
|
}],
|
sort: [{
|
required: true,
|
message: '请输入菜单排序',
|
trigger: 'blur'
|
}],
|
menuTag: [{
|
required: true,
|
message: '请选择菜单标签',
|
trigger: ['blur', 'change']
|
}],
|
menuType: [{
|
required: true,
|
message: '请选择菜单类型',
|
trigger: ['blur', 'change']
|
}]
|
}, // 表单校验规则
|
menuTagData: [],
|
asyncConfig: false, // 配置权限菜单
|
roleRideoList: [],
|
menuCheckData: [],
|
radioValue: '',
|
checkValue: [],
|
userType: '',
|
}
|
},
|
components: {
|
UploadImage
|
},
|
mounted() {
|
this.searchWechatMenuList(true);
|
},
|
methods: {
|
//判断是否展示菜单标签
|
changeTips(val){
|
if(val === 1){
|
this.showTips = true
|
}else{
|
this.showTips = false
|
}
|
},
|
// 获取菜单标签信息
|
async getWechatTagData() {
|
const { data } = await this.$api.System.getWechatTagData();
|
this.menuTagData = data;
|
},
|
// 获取角色信息
|
async getRoleInfo() {
|
const { data } = await this.$api.System.getAllRolesInfo({})
|
this.roleRideoList = data;
|
},
|
// 根据角色信息获取菜单
|
async getUserWechatMneuList(roleId, menuType) {
|
const { data } = await this.$api.System.getUserWechatMneuList({
|
roleId: roleId,
|
menuType: menuType,
|
menuName: ''
|
})
|
return data;
|
},
|
// 查询微信小程序菜单列表
|
searchWechatMenuList(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
this.loading = true;
|
this.wechatList = [];
|
this.$api.System.searchWechatMenuList({
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
menuName: this.menuName
|
}).then((res) => {
|
if(res.success) {
|
this.total = res.data.total;
|
this.wechatList = res.data.list;
|
}
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
});
|
},
|
// 配置权限
|
propUserConfig(number) {
|
this.userType = number;
|
this.asyncConfig = true;
|
},
|
// 打开添加信息
|
propInsert() {
|
this.asyncTitle = true;
|
this.asyncWechat = true;
|
},
|
// 打开修改信息
|
propUpdate(row) {
|
this.$set(this.formWechat, 'menuId', row.menuId);
|
this.$set(this.formWechat, 'menuName', row.menuName);
|
this.$set(this.formWechat, 'sort', row.sort);
|
this.$set(this.formWechat, 'menuUrl', row.menuUrl);
|
this.$set(this.formWechat, 'menuTag', row.menuTag);
|
this.$set(this.formWechat, 'menuType', row.menuType);
|
this.$set(this.formWechat, 'menuIcon', row.menuIcon ? [{
|
id: 1,
|
url:`https://pipe.thhy-tj.com/${row.menuIcon}`,
|
name:row.menuIcon
|
}] : []);
|
this.asyncTitle = false;
|
this.asyncWechat = true;
|
},
|
// 删除菜单信息
|
deleteInfo(row) {
|
this.$confirm("该操作将删除该菜单信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.System.deleteWechatMenuInfo({
|
menuId: row.menuId
|
}).then(res => {
|
if(res.success) {
|
this.searchWechatMenuList(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 删除图片
|
delectImage(item) {
|
let uploadId = item.id;
|
this.formWechat.menuIcon.splice(
|
this.formWechat.menuIcon.findIndex(itm => itm.id === uploadId),1
|
);
|
this.$message.success("删除成功!");
|
},
|
// 选择角色
|
changeRoleInfo(data) {
|
this.checkValue = [];
|
this.menuCheckData = [];
|
this.getUserWechatMneuList(data, this.userType).then((data) => {
|
this.$nextTick(() => {
|
this.menuCheckData = data;
|
})
|
})
|
},
|
// 提交配置信息
|
submitConfigMenu: throttle(function() {
|
this.$api.System.userConfigWechatMenu({
|
roleId: this.radioValue,
|
menuIds: this.checkValue.join(',')
|
}).then((res) => {
|
if(res.success) {
|
this.$message.success('配置成功！');
|
this.asyncConfig = false;
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}, 3000),
|
// 提交添加信息
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formWechat);
|
params.menuIcon = params.menuIcon.length > 0 ? params.menuIcon[0].name : '';
|
this.$api.System.insertWechatMenuInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncWechat = false;
|
this.$message.success('添加成功！');
|
this.searchWechatMenuList(true);
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改信息
|
submitUpdateForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formWechat);
|
params.menuIcon = params.menuIcon.length > 0 ? params.menuIcon[0].name : '';
|
this.$api.System.insertWechatMenuInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncWechat = false;
|
this.$message.success('修改成功！');
|
this.searchWechatMenuList(true);
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 切换页码
|
changePageNum(page) {
|
this.pageNum = page;
|
this.searchWechatMenuList();
|
},
|
// 切换每页条数
|
changePageSize(size) {
|
this.pageSize = size;
|
this.searchWechatMenuList();
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
watch: {
|
asyncWechat(bol) {
|
if(bol) {
|
this.getWechatTagData();
|
} else {
|
this.formWechat = {
|
menuIcon: []
|
};
|
this.$refs.form.resetFields();
|
}
|
},
|
asyncConfig(bol) {
|
if(bol) {
|
this.getRoleInfo();
|
} else {
|
this.userType = '';
|
this.radioValue = '';
|
this.checkValue = [];
|
this.roleRideoList = [];
|
this.menuCheckData = [];
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
.dialog_role_menu {
|
display: flex;
|
padding: 20px 0 0;
|
min-height: 400px;
|
overflow-y: auto;
|
// background: #F49E4E;
|
|
.role_menu_item {
|
position: relative;
|
flex: 1;
|
padding: 20px 10px;
|
border: 1px solid #0A496D;
|
|
&::before {
|
content: '角色列表';
|
position: absolute;
|
top: -25px;
|
left: 0;
|
color: #FFFFFF;
|
}
|
|
&:last-child {
|
margin-left: 30px;
|
flex: 2;
|
|
&::before {
|
content: '菜单列表';
|
position: absolute;
|
top: -25px;
|
left: 0;
|
color: #FFFFFF;
|
}
|
}
|
|
/deep/ .el-radio-group {
|
display: flex;
|
flex-direction: column;
|
}
|
|
/deep/ .el-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
}
|
|
/deep/ .el-checkbox {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
::v-deep .el-radio {
|
padding: 8px !important;
|
}
|
|
// ::v-deep .el-radio-group {
|
// display: flex;
|
// align-items: center;
|
// }
|
</style>
|
