|
|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <!--工具栏-->
|
|
|
+ <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
|
|
|
+ <el-form :inline="true" :model="filters" :size="size">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="filters.name" placeholder="名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <kt-button style="background-color: #5DADFF ;border:#5DADFF;" icon="fa fa-search" :label="$t('action.search')" perms="sys:menu:view" type="primary" @click="findTreeData(null)"/>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item>
|
|
|
+ <kt-button style="background-color: #52C578;border:#52C578;" icon="fa fa-plus" :label="$t('action.add')" perms="sys:menu:add" type="primary" @click="handleAdd"/>
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!--表格树内容栏-->
|
|
|
+ <el-table :data="tableTreeDdata" stripe size="mini" style="width: 100%;"
|
|
|
+ rowKey="id" v-loading="loading" element-loading-text="$t('action.loading')">
|
|
|
+ <el-table-column
|
|
|
+ prop="id" header-align="center" align="center" width="100" label="ID">
|
|
|
+ </el-table-column>
|
|
|
+ <table-tree-column
|
|
|
+ prop="name" header-align="center" treeKey="id" width="220" label="名称">
|
|
|
+ </table-tree-column>
|
|
|
+ <el-table-column header-align="center" align="center" label="图标">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <i :class="scope.row.icon || ''"></i> -->
|
|
|
+ <!-- <svg class="icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-chexianjiesuan-yixuanzhong"></use>
|
|
|
+ </svg> -->
|
|
|
+ <svg aria-hidden="true" style=" width: 15px;height: 15px;" >
|
|
|
+ <use :href="`#${scope.row.icon}`"></use>
|
|
|
+ </svg>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type" header-align="center" align="center" label="类型">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="url" header-align="center" align="center" width="150"
|
|
|
+ :show-overflow-tooltip="true" label="菜单URL">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="perms" header-align="center" align="center" width="150"
|
|
|
+ :show-overflow-tooltip="true" label="授权标识">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="orderNum" header-align="center" align="center" label="排序">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ fixed="right" header-align="center" align="center" width="185" :label="$t('action.operation')">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <kt-button
|
|
|
+ label="数据权限"
|
|
|
+ sperms="sys:menu:edit"
|
|
|
+ @click="handPermissions(scope.row)"/>
|
|
|
+ <!-- <kt-button icon="fa fa-trash" :label="$t('action.delete')" perms="sys:menu:delete" type="danger" @click="handleDelete(scope.row)"/> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-dialog title="数据权限设置" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="form" label-width="150px" :rules="rules" ref="ruleForm">
|
|
|
+ <el-form-item label="规则名称" prop="ruleName">
|
|
|
+ <el-input v-model="form.ruleName" size="small" ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规则字段" prop="ruleField">
|
|
|
+ <el-input v-model="form.ruleField" size="small" ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="条件规则" prop="ruleCondition">
|
|
|
+ <el-select v-model="form.ruleCondition" placeholder="请选择条件规则" size="small" @change="ruleChange">
|
|
|
+ <el-option v-for="item in conditionalRule" :key="item.value" :label="item.label" :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ <!-- <el-option label="区域二" value="beijing"></el-option> -->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规则值" prop="ruleValue" v-if="form.ruleCondition!='9'">
|
|
|
+ <el-input v-model="form.ruleValue" size="small"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="接口地址" prop="interfaceUrl">
|
|
|
+ <el-input v-model="form.interfaceUrl" size="small"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="接口地址" >
|
|
|
+ <el-input v-model="form.interfaceUrl" size="small"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="自定义SQL" v-if="form.ruleCondition=='9'">
|
|
|
+ <el-input v-model="form.customSql" size="small"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status" size="mini">
|
|
|
+ <el-radio-button label="有效" :value="1"></el-radio-button>
|
|
|
+ <el-radio-button label="无效" :value="0"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" :disabled="btnDisabled">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import KtButton from "@/views/Core/KtButton";
|
|
|
+import TableTreeColumn from "@/views/Core/TableTreeColumn";
|
|
|
+import PopupTreeInput from "@/components/PopupTreeInput";
|
|
|
+import FaIconTooltip from "@/components/FaIconTooltip";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ PopupTreeInput,
|
|
|
+ KtButton,
|
|
|
+ TableTreeColumn,
|
|
|
+ FaIconTooltip
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ size: "small",
|
|
|
+ loading: false,
|
|
|
+ filters: {
|
|
|
+ name: ""
|
|
|
+ },
|
|
|
+ tableTreeDdata: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ menuTypeList: ["目录", "菜单", "按钮"],
|
|
|
+ dataForm: {
|
|
|
+ id: 0,
|
|
|
+ type: 1,
|
|
|
+ name: "",
|
|
|
+ parentId: 0,
|
|
|
+ parentName: "",
|
|
|
+ url: "",
|
|
|
+ perms: "",
|
|
|
+ orderNum: 0,
|
|
|
+ icon: "",
|
|
|
+ iconList: []
|
|
|
+ },
|
|
|
+ dataRule: {
|
|
|
+ name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }]
|
|
|
+ },
|
|
|
+ popupTreeData: [],
|
|
|
+ popupTreeProps: {
|
|
|
+ label: "name",
|
|
|
+ children: "children"
|
|
|
+ },
|
|
|
+ dialogFormVisible:false,
|
|
|
+ form:{
|
|
|
+
|
|
|
+ interfaceUrl: "",//接口地址
|
|
|
+ menuId: "",//菜单id
|
|
|
+ ruleCondition: "",//条件规则
|
|
|
+ ruleField: "",//规则字段
|
|
|
+ ruleName: "",//规则名称
|
|
|
+ ruleValue: "",//规则值
|
|
|
+ status: "",//状态
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ ruleName: [
|
|
|
+ {required: true,message: '请输入规则名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ ruleField: [
|
|
|
+ {required: true, message: '请选择规则字段', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ ruleCondition: [
|
|
|
+ { required: true, message: '请选择条件规则', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ ruleValue: [
|
|
|
+ {required: true, message: '请输入规则值', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ interfaceUrl: [
|
|
|
+ {required: true, message: '请输入接口地址', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ { required: true, message: '请选择状态', trigger: 'change' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ conditionalRule:[],
|
|
|
+ btnDisabled:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.findTreeData();
|
|
|
+ this.getRulesMenu()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //条件规则更改
|
|
|
+ ruleChange(val){
|
|
|
+ // console.log(val)
|
|
|
+ if(val==9){
|
|
|
+ this.form.ruleValue=''
|
|
|
+ }else{
|
|
|
+ this.form.customSql=''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取字典
|
|
|
+ getRulesMenu(){
|
|
|
+ this.$api.dict.findByLableName('permission_operator').then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ this.conditionalRule=[...res.data]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.ruleForm.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //新增
|
|
|
+ submit() {
|
|
|
+ this.$refs["ruleForm"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.btnDisabled = true;
|
|
|
+
|
|
|
+ this.$api.sys
|
|
|
+ .dataPermissionsUpdate({
|
|
|
+ ...this.form,
|
|
|
+
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.btnDisabled = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.ruleForm.clearValidate();
|
|
|
+ });
|
|
|
+ this.findTreeData();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ this.btnDisabled = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ findTreeData: function() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.menu.findMenuTree().then(res => {
|
|
|
+ this.tableTreeDdata = res.data;
|
|
|
+ this.popupTreeData = this.getParentMenuTree(res.data);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取上级菜单树
|
|
|
+ getParentMenuTree: function(tableTreeDdata) {
|
|
|
+ let parent = {
|
|
|
+ parentId: 0,
|
|
|
+ name: "顶级菜单",
|
|
|
+ children: tableTreeDdata
|
|
|
+ };
|
|
|
+ return [parent];
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm("确认删除选中记录吗？", "提示", {
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ let params = this.getDeleteIds([], row);
|
|
|
+ this.$api.menu.batchDelete(params).then(res => {
|
|
|
+ this.findTreeData();
|
|
|
+ this.$message({ message: "删除成功", type: "success" });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取删除的包含子菜单的id列表
|
|
|
+ getDeleteIds(ids, row) {
|
|
|
+ ids.push({ id: row.id });
|
|
|
+ if (row.children != null) {
|
|
|
+ for (let i = 0, len = row.children.length; i < len; i++) {
|
|
|
+ this.getDeleteIds(ids, row.children[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ids;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图标选中
|
|
|
+ iconActiveHandle(iconName) {
|
|
|
+ this.dataForm.icon = iconName;
|
|
|
+ },
|
|
|
+ handPermissions(data){
|
|
|
+ console.log(data)
|
|
|
+ this.dialogFormVisible=true
|
|
|
+ this.form.menuId=data.id
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+</style>
|
刘恒