|
|
@@ -6,68 +6,109 @@
|
|
|
<div class="status flex-wrap">
|
|
|
<div class="manageTitle">菜单管理</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </Minheader>
|
|
|
+ </template></Minheader
|
|
|
+ >
|
|
|
<div class="app-containers">
|
|
|
- <el-table :data="tableData" style="width: 100%" :row-style="rowStyle" :row-class-name="tableRowClassName" :cell-class-name="cellClassName" :row-key="
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :cell-class-name="cellClassName"
|
|
|
+ :row-key="
|
|
|
props.tableProperty.rowKey
|
|
|
? props.tableProperty.rowKey
|
|
|
: tablePropertyDefault.rowKey
|
|
|
- " :height="
|
|
|
+ "
|
|
|
+ :height="
|
|
|
props.tableProperty.height
|
|
|
? props.tableProperty.height
|
|
|
: tablePropertyDefault.height
|
|
|
- " :max-height="
|
|
|
+ "
|
|
|
+ :max-height="
|
|
|
props.tableProperty.maxHeight
|
|
|
? props.tableProperty.maxHeight
|
|
|
: tablePropertyDefault.maxHeight
|
|
|
- " :stripe="
|
|
|
+ "
|
|
|
+ :stripe="
|
|
|
props.tableProperty.stripe
|
|
|
? props.tableProperty.stripe
|
|
|
: tablePropertyDefault.stripe
|
|
|
- " :border="
|
|
|
+ "
|
|
|
+ :border="
|
|
|
props.tableProperty.border
|
|
|
? props.tableProperty.border
|
|
|
: tablePropertyDefault.border
|
|
|
- " :highlight-current-row="
|
|
|
+ "
|
|
|
+ :highlight-current-row="
|
|
|
props.tableProperty.highlightCurrentRow
|
|
|
? props.tableProperty.highlightCurrentRow
|
|
|
: tablePropertyDefault.highlightCurrentRow
|
|
|
- " :header-cell-class-name="
|
|
|
+ "
|
|
|
+ :header-cell-class-name="
|
|
|
props.tableProperty.headerRowClassName
|
|
|
? props.tableProperty.headerRowClassName
|
|
|
: tablePropertyDefault.headerRowClassName
|
|
|
- " :tooltip-effect="
|
|
|
+ "
|
|
|
+ :tooltip-effect="
|
|
|
props.tableProperty.tooltipEffect
|
|
|
? props.tableProperty.tooltipEffect
|
|
|
: tablePropertyDefault.tooltipEffect
|
|
|
- " :show-summary="
|
|
|
+ "
|
|
|
+ :show-summary="
|
|
|
props.tableProperty.showSummary
|
|
|
? props.tableProperty.showSummary
|
|
|
: tablePropertyDefault.showSummary
|
|
|
- ">
|
|
|
+ "
|
|
|
+ >
|
|
|
<el-table-column label="菜单名称" class="infinite-list-item">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
- <el-icon>
|
|
|
- <timer />
|
|
|
- </el-icon>
|
|
|
+ <component
|
|
|
+ :is="scope.row.icon"
|
|
|
+ style="width: 2rem; height: 2rem"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
<span style="margin-left: 10px">{{ scope.row.menuName }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="menuCode" label="菜单编码" class="infinite-list-item" />
|
|
|
- <el-table-column prop="treeSort" label="排序" class="infinite-list-item" />
|
|
|
- <el-table-column prop="menuType" label="菜单类型" class="infinite-list-item">
|
|
|
+ <el-table-column
|
|
|
+ prop="menuCode"
|
|
|
+ label="菜单编码"
|
|
|
+ class="infinite-list-item"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="treeSort"
|
|
|
+ label="排序"
|
|
|
+ class="infinite-list-item"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="menuType"
|
|
|
+ label="菜单类型"
|
|
|
+ class="infinite-list-item"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
<div class="catalogue">
|
|
|
<span>{{ scope.row.menuType }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="visible" label="可见" class="infinite-list-item" />
|
|
|
- <el-table-column prop="perms" label="权限标识" class="infinite-list-item" />
|
|
|
- <el-table-column prop="component" label="组件路径" class="infinite-list-item" />
|
|
|
+ <el-table-column
|
|
|
+ prop="visible"
|
|
|
+ label="可见"
|
|
|
+ class="infinite-list-item"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="perms"
|
|
|
+ label="权限标识"
|
|
|
+ class="infinite-list-item"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="component"
|
|
|
+ label="组件路径"
|
|
|
+ class="infinite-list-item"
|
|
|
+ />
|
|
|
<el-table-column label="状态" class="infinite-list-item">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
@@ -76,9 +117,21 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="tableBtnGroup.length" label="操作" width="300px" :align="props.tableColumnProperty.align">
|
|
|
+ <el-table-column
|
|
|
+ v-if="tableBtnGroup.length"
|
|
|
+ label="操作"
|
|
|
+ width="300px"
|
|
|
+ :align="props.tableColumnProperty.align"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-button v-for="(btn, index) in tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{ btn.name }}</el-button>
|
|
|
+ <el-button
|
|
|
+ v-for="(btn, index) in tableBtnGroup"
|
|
|
+ :key="index"
|
|
|
+ size="small"
|
|
|
+ @click="handleClick(scope.$index, scope.row, btn.param)"
|
|
|
+ :class="btn.className"
|
|
|
+ >{{ btn.name }}</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -90,20 +143,49 @@
|
|
|
@btnClick="btnClick"
|
|
|
/> -->
|
|
|
</div>
|
|
|
- <Dialog width="628px" :flag="flag" :type="type" :msgTitle="msgTitle" @resetForm="resetForm" @delRest="delRest">
|
|
|
+ <Dialog
|
|
|
+ width="628px"
|
|
|
+ :flag="flag"
|
|
|
+ :type="type"
|
|
|
+ :msgTitle="msgTitle"
|
|
|
+ @resetForm="resetForm"
|
|
|
+ @delRest="delRest"
|
|
|
+ >
|
|
|
<div class="diacont">
|
|
|
- <el-form :model="tableForm" :rules="formRules" ref="systemconfiguration">
|
|
|
+ <el-form
|
|
|
+ :model="tableForm"
|
|
|
+ :rules="formRules"
|
|
|
+ ref="systemconfiguration"
|
|
|
+ >
|
|
|
<el-row :gutter="24">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="上级菜单" size="default">
|
|
|
- <el-select style="width: 100%" v-model="tableForm.parentId" class="input-shadow" filterable default-first-option clearable placeholder="主目录">
|
|
|
- <el-option v-for="item in tableOptionser" :key="item.v" :label="item.k" :value="item.v">
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="tableForm.parentId"
|
|
|
+ class="input-shadow"
|
|
|
+ filterable
|
|
|
+ default-first-option
|
|
|
+ clearable
|
|
|
+ placeholder="主目录"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableOptionser"
|
|
|
+ :key="item.v"
|
|
|
+ :label="item.k"
|
|
|
+ :value="item.v"
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="菜单类型" size="default" :rules="formRules.isNotNull" prop="menuType">
|
|
|
+ <el-form-item
|
|
|
+ label="菜单类型"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="menuType"
|
|
|
+ >
|
|
|
<el-radio-group v-model="tableForm.menuType" size="default">
|
|
|
<el-radio-button label="目录" />
|
|
|
<el-radio-button label="菜单" />
|
|
|
@@ -112,30 +194,87 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col>
|
|
|
- <el-form-item label="图标" size="default">
|
|
|
- <el-select style="width: 100%" v-model="tableForm.icon" class="input-shadow" filterable default-first-option clearable placeholder="">
|
|
|
- <el-option v-for="item in tableOptionser" :key="item.v" :label="item.k" :value="item.v">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <!-- <el-icon v-for="(name, index) in icons">
|
|
|
+ <name />
|
|
|
+ </el-icon> -->
|
|
|
+ <el-form-item label="图标" size="default" prop="icon">
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-input
|
|
|
+ v-model="tableForm.icon"
|
|
|
+ placeholder="请输入"
|
|
|
+ @focus="focus()"
|
|
|
+ />
|
|
|
+ <component
|
|
|
+ :is="tableForm.icon"
|
|
|
+ style="width: 2rem; height: 2rem; margin-left: 5px"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 300px;
|
|
|
+ overflow: scroll;
|
|
|
+ "
|
|
|
+ v-if="isShow"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(name, index) in icons"
|
|
|
+ :index="index"
|
|
|
+ :key="index"
|
|
|
+ style="cursor: pointer; padding: 1rem"
|
|
|
+ @click="iconck(name)"
|
|
|
+ >
|
|
|
+ <component :is="name" style="width: 2rem; height: 2rem">
|
|
|
+ </component>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="菜单编码" size="default" :rules="formRules.isNotNull" prop="menuCode">
|
|
|
- <el-input v-model="tableForm.menuCode" placeholder="请输入菜单编码" />
|
|
|
+ <el-form-item
|
|
|
+ label="菜单编码"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="menuCode"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="tableForm.menuCode"
|
|
|
+ placeholder="请输入菜单编码"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="菜单名称" size="default" :rules="formRules.isNotNull" prop="menuName">
|
|
|
- <el-input v-model="tableForm.menuName" placeholder="请输入菜单名称" />
|
|
|
+ <el-form-item
|
|
|
+ label="菜单名称"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="menuName"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="tableForm.menuName"
|
|
|
+ placeholder="请输入菜单名称"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="排序" size="default" :rules="formRules.isNotNull" prop="treeSort">
|
|
|
+ <el-form-item
|
|
|
+ label="排序"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="treeSort"
|
|
|
+ >
|
|
|
<el-input v-model="tableForm.treeSort" placeholder="" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="是否外链" size="default" :rules="formRules.isNotNull" prop="isFrame">
|
|
|
+ <el-form-item
|
|
|
+ label="是否外链"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="isFrame"
|
|
|
+ >
|
|
|
<el-radio-group v-model="tableForm.isFrame" size="default">
|
|
|
<el-radio-button label="是" />
|
|
|
<el-radio-button label="否" />
|
|
|
@@ -143,12 +282,22 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="路由地址" size="default" :rules="formRules.isNotNull" prop="path">
|
|
|
+ <el-form-item
|
|
|
+ label="路由地址"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="path"
|
|
|
+ >
|
|
|
<el-input v-model="tableForm.path" placeholder="" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="是否显示" size="default" :rules="formRules.isNotNull" prop="visible">
|
|
|
+ <el-form-item
|
|
|
+ label="是否显示"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="visible"
|
|
|
+ >
|
|
|
<el-radio-group v-model="tableForm.visible" size="default">
|
|
|
<el-radio-button label="是" />
|
|
|
<el-radio-button label="否" />
|
|
|
@@ -156,17 +305,32 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="组件路径" size="default" :rules="formRules.isNotNull" prop="component">
|
|
|
+ <el-form-item
|
|
|
+ label="组件路径"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="component"
|
|
|
+ >
|
|
|
<el-input v-model="tableForm.component" placeholder="" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="权限标识" size="default" :rules="formRules.isNotNull" prop="perms">
|
|
|
+ <el-form-item
|
|
|
+ label="权限标识"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="perms"
|
|
|
+ >
|
|
|
<el-input v-model="tableForm.perms" placeholder="" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="状态" size="default" :rules="formRules.isNotNull" prop="status">
|
|
|
+ <el-form-item
|
|
|
+ label="状态"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="status"
|
|
|
+ >
|
|
|
<el-radio-group v-model="tableForm.status" size="default">
|
|
|
<el-radio-button label="开启" />
|
|
|
<el-radio-button label="关闭" />
|
|
|
@@ -174,7 +338,12 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="是否缓存" size="default" :rules="formRules.isNotNull" prop="isCache">
|
|
|
+ <el-form-item
|
|
|
+ label="是否缓存"
|
|
|
+ size="default"
|
|
|
+ :rules="formRules.isNotNull"
|
|
|
+ prop="isCache"
|
|
|
+ >
|
|
|
<el-radio-group v-model="tableForm.isCache" size="default">
|
|
|
<el-radio-button label="缓存" />
|
|
|
<el-radio-button label="不缓存" />
|
|
|
@@ -183,7 +352,11 @@
|
|
|
</el-col>
|
|
|
<el-col>
|
|
|
<el-form-item label="备注" size="default">
|
|
|
- <el-input type="textarea" v-model="tableForm.remark" placeholder="请输入备注" />
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="tableForm.remark"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -199,6 +372,7 @@ import DataTable from "@/components/tableTemp/index.vue";
|
|
|
import Minheader from "@/components/minheader/index.vue";
|
|
|
import Dialog from "@/components/dialog/index.vue";
|
|
|
import { Timer } from "@element-plus/icons-vue";
|
|
|
+import * as ElIcons from "@element-plus/icons-vue";
|
|
|
const formRules = useElement().formRules;
|
|
|
const router = useRouter();
|
|
|
const props = defineProps({
|
|
|
@@ -245,11 +419,12 @@ const tablePropertyDefault = {
|
|
|
rowKey: "",
|
|
|
};
|
|
|
const tableOptionser = ref([]); //弹窗下拉
|
|
|
+const isShow = ref<Boolean>(false);
|
|
|
const flag = ref<Boolean>(false); //弹窗开关
|
|
|
const type = ref<String>(""); //判断是否删除
|
|
|
-const TagsAll = ref<any>([]);
|
|
|
+const TagsAll = ref<Array>([]);
|
|
|
const currentval = ref<String>("");
|
|
|
-const TagsAlls = ref<any>([]);
|
|
|
+const TagsAlls = ref<Array>([]);
|
|
|
const currentvals = ref<String>("");
|
|
|
const msgTitle = ref<String>("新增登录策略"); //弹窗标题
|
|
|
const tableColsCopys = reactive<Object>({}); //弹窗
|
|
|
@@ -436,6 +611,22 @@ const deleteTagss = () => {
|
|
|
// style.width = `${inputLength}px`;
|
|
|
// return style;
|
|
|
// };
|
|
|
+let icons = [];
|
|
|
+const getData = () => {
|
|
|
+ for (const name in ElIcons) {
|
|
|
+ icons.push(name);
|
|
|
+ }
|
|
|
+ return icons;
|
|
|
+};
|
|
|
+const focus = () => {
|
|
|
+ isShow.value = true;
|
|
|
+};
|
|
|
+const iconck = (data) => {
|
|
|
+ isShow.value = false;
|
|
|
+ tableForm.icon = data;
|
|
|
+};
|
|
|
+getData();
|
|
|
+console.log(icons);
|
|
|
defineExpose({
|
|
|
cellClass,
|
|
|
});
|
