|
@@ -0,0 +1,135 @@
|
|
|
+<template>
|
|
|
+ <div id="menus">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <cSearch :is_title="false" :is_back="true" @toBack="toBack"> </cSearch>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <cButton @toAdd="toAdd"></cButton>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="thr"> 列表 </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <cDialog :dialog="dialog" @handleClose="toClose">
|
|
|
+ <template v-slot:info>
|
|
|
+ <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
|
|
|
+ <cForm :fields="fields" :form="form" labelWidth="auto" @save="toSave" @dataChange="dataChange">
|
|
|
+ <template #type>
|
|
|
+ <el-option v-for="(i, index) in typeList" :key="`t${index}`" :label="i.label" :value="i.value"></el-option>
|
|
|
+ </template>
|
|
|
+ <!-- <template #parent_id>
|
|
|
+ <el-option v-for="(i, index) in getOneDimensionList()" :key="`m${index}`" :label="i.name" :value="i._id"></el-option>
|
|
|
+ </template>
|
|
|
+ <template #icon>
|
|
|
+ <el-option v-for="i in iconList" :key="i.dict_value" :label="i.dict_label" :value="i.dict_value">
|
|
|
+ <span style="float: left" :class="['iconfont', i.dict_label]"></span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 13px">{{ i.dict_label }}</span>
|
|
|
+ </el-option>
|
|
|
+ </template>
|
|
|
+ <template #status>
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio label="0">使用</el-radio>
|
|
|
+ <el-radio label="1">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </template> -->
|
|
|
+ </cForm>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </cDialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+// 基础
|
|
|
+import type { Ref } from 'vue';
|
|
|
+import { onMounted, ref } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+
|
|
|
+// 接口
|
|
|
+import { MenusStore } from '@common/src/stores/system/menus';
|
|
|
+import type { IQueryResult } from '@/util/types.util';
|
|
|
+const menusAxios = MenusStore();
|
|
|
+
|
|
|
+// 路由
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+// 模块id
|
|
|
+const module_id: Ref<any> = ref(['']);
|
|
|
+// 菜单列表
|
|
|
+const list: Ref<any> = ref([]);
|
|
|
+
|
|
|
+// 弹框
|
|
|
+const dialog: Ref<any> = ref({ title: '菜单管理', show: false, type: '1' });
|
|
|
+const form: Ref<any> = ref({});
|
|
|
+const fields: Ref<any> = ref([
|
|
|
+ { label: '菜单名称', model: 'name' },
|
|
|
+ { label: '菜单类型', model: 'type', type: 'select' },
|
|
|
+ { label: '父级菜单', model: 'parent_id', type: 'select' },
|
|
|
+ { label: '顺序', model: 'order_num', type: 'number' },
|
|
|
+ { label: '图标', model: 'icon', type: 'select' },
|
|
|
+ { label: '状态', model: 'status', custom: true },
|
|
|
+ { label: '备注', model: 'remark', type: 'textarea' }
|
|
|
+]);
|
|
|
+
|
|
|
+// 字典
|
|
|
+const typeList: Ref<any> = ref([
|
|
|
+ { label: '目录', value: '0' },
|
|
|
+ { label: '菜单', value: '1' },
|
|
|
+ { label: '子页面', value: '2' }
|
|
|
+]);
|
|
|
+// 请求
|
|
|
+onMounted(async () => {
|
|
|
+ let id = route.query.id;
|
|
|
+ if (id) module_id.value = id;
|
|
|
+ await search();
|
|
|
+});
|
|
|
+const search = async () => {
|
|
|
+ if (module_id.value) {
|
|
|
+ let res: IQueryResult;
|
|
|
+ res = await menusAxios.query({ module_id: module_id.value });
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ list.value = res.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 添加
|
|
|
+const toAdd = () => {
|
|
|
+ form.value = { module_id: module_id.value };
|
|
|
+ dialog.value = { title: '菜单管理', show: true, type: '1' };
|
|
|
+};
|
|
|
+// 选择
|
|
|
+const dataChange = ({ model, value }) => {
|
|
|
+ if (model == 'type') {
|
|
|
+ if (value == '0') {
|
|
|
+ fields.value = fields.value.filter((i) => i.model != 'path' && i.model != 'component');
|
|
|
+ } else {
|
|
|
+ let data = fields.value.find((i) => i.model == 'path');
|
|
|
+ if (!data) {
|
|
|
+ fields.value.splice(3, 0, { label: '路由地址', model: 'path' }, { label: '组件地址', model: 'component' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 提交保存
|
|
|
+const toSave = async (e) => {
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
+// 关闭弹框
|
|
|
+const toClose = () => {
|
|
|
+ dialog.value = { title: '菜单管理', show: false, type: '1' };
|
|
|
+ search();
|
|
|
+};
|
|
|
+// 返回上一页
|
|
|
+const toBack = () => {
|
|
|
+ window.history.go(-1);
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ .two {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|