| | |
| | | <el-table-column prop="orderNum" label="排序" width="60px"></el-table-column>
|
| | | <el-table-column prop="perms" label="权限标识" width="130px" :show-overflow-tooltip="true"></el-table-column>
|
| | | <el-table-column prop="component" label="组件路径" width="180px" :show-overflow-tooltip="true"></el-table-column>
|
| | | <el-table-column prop="visible" label=" 可见" :formatter="visibleFormat" width="80px"></el-table-column>
|
| | | <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80px"></el-table-column>
|
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
| | | <template slot-scope="scope">
|
| | | <span>{{ dateFormat(scope.row.createTime) }}</span>
|
| | | <span>{{ parseTime(scope.row.createTime) }}</span>
|
| | | </template>
|
| | | </el-table-column>
|
| | | <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
|
| | |
| | | v-hasPermi="['system:menu:add']"
|
| | | >新增</el-button>
|
| | | <el-button
|
| | | v-if="scope.row.parentId != 0"
|
| | | size="mini"
|
| | | type="text"
|
| | | icon="el-icon-delete"
|
| | |
| | | <el-dialog :title="title" :visible.sync="open" width="600px">
|
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
| | | <el-row>
|
| | | <el-col :span="24" v-if="form.parentId !== 0">
|
| | | <el-form-item label="上级菜单" prop="parentId">
|
| | | <el-col :span="24">
|
| | | <el-form-item label="上级菜单">
|
| | | <treeselect
|
| | | v-model="form.parentId"
|
| | | :options="menuOptions"
|
| | |
| | | </el-form-item>
|
| | | </el-col>
|
| | | <el-col :span="12">
|
| | | <el-form-item v-if="form.menuType == 'C'" label="权限标识">
|
| | | <el-form-item v-if="form.menuType != 'M'" label="权限标识">
|
| | | <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" />
|
| | | </el-form-item>
|
| | | </el-col>
|
| | |
| | | import IconSelect from "@/components/IconSelect";
|
| | |
|
| | | export default {
|
| | | name: "Menu",
|
| | | components: { Treeselect, IconSelect },
|
| | | data() {
|
| | | return {
|
| | |
| | | // 菜单表格树数据
|
| | | menuList: [],
|
| | | // 菜单树选项
|
| | | menuOptions: undefined,
|
| | | menuOptions: [],
|
| | | // 弹出层标题
|
| | | title: "",
|
| | | // 是否显示弹出层
|
| | |
| | | form: {},
|
| | | // 表单校验
|
| | | rules: {
|
| | | parentId: [
|
| | | { required: true, message: "上级菜单不能为空", trigger: "blur" }
|
| | | ],
|
| | | menuName: [
|
| | | { required: true, message: "菜单名称不能为空", trigger: "blur" }
|
| | | ],
|
| | |
| | | /** 查询菜单下拉树结构 */
|
| | | getTreeselect() {
|
| | | treeselect().then(response => {
|
| | | this.menuOptions = response.data;
|
| | | this.menuOptions = [];
|
| | | const menu = { id: 0, label: '主类目', children: [] };
|
| | | menu.children = response.data;
|
| | | this.menuOptions.push(menu);
|
| | | });
|
| | | },
|
| | | // 菜单显示状态字典翻译
|