|
|
@@ -30,253 +30,267 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" name="system-menu" setup>
|
|
|
- import { nextTick, ref,onMounted } from 'vue';
|
|
|
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
- import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
- import { useDrawer } from '/@/components/Drawer';
|
|
|
- import MenuDrawer from './MenuDrawer.vue';
|
|
|
- import DataRuleList from '../components/DataRuleList.vue';
|
|
|
- import { columns,searchFormSchema } from './menu.data';
|
|
|
- import { list, deleteMenu, batchDeleteMenu } from './menu.api';
|
|
|
- import { useDefIndexStore } from "@/store/modules/defIndex";
|
|
|
- import { useI18n } from "/@/hooks/web/useI18n";
|
|
|
+import { nextTick, ref, onMounted, watch } from 'vue';
|
|
|
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+import { useDrawer } from '/@/components/Drawer';
|
|
|
+import MenuDrawer from './MenuDrawer.vue';
|
|
|
+import DataRuleList from '../components/DataRuleList.vue';
|
|
|
+import { columns, searchFormSchema } from './menu.data';
|
|
|
+import { list, deleteMenu, batchDeleteMenu, appList as getAppList } from './menu.api';
|
|
|
+import { useDefIndexStore } from '@/store/modules/defIndex';
|
|
|
+import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
|
|
|
- const checkedKeys = ref<Array<string | number>>([]);
|
|
|
- const showFooter = ref(true);
|
|
|
- const [registerDrawer, { openDrawer }] = useDrawer();
|
|
|
- const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
|
|
|
- const { t } = useI18n();
|
|
|
+const checkedKeys = ref<Array<string | number>>([]);
|
|
|
+const showFooter = ref(true);
|
|
|
+const [registerDrawer, { openDrawer }] = useDrawer();
|
|
|
+const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
|
|
|
+const { t } = useI18n();
|
|
|
|
|
|
- // 自定义菜单名称列渲染
|
|
|
- columns[0].customRender = function ({text, record}) {
|
|
|
- const isDefIndex = checkDefIndex(record)
|
|
|
- if (isDefIndex) {
|
|
|
- text += '（默认首页）'
|
|
|
+// 自定义菜单名称列渲染
|
|
|
+columns[0].customRender = function ({ text, record }) {
|
|
|
+ const isDefIndex = checkDefIndex(record);
|
|
|
+ if (isDefIndex) {
|
|
|
+ text += '（默认首页）';
|
|
|
+ }
|
|
|
+ // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
|
|
|
+ if (text.includes("t('") && t) {
|
|
|
+ return new Function('t', `return ${text}`)(t);
|
|
|
+ }
|
|
|
+ // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
|
|
|
+ return text;
|
|
|
+};
|
|
|
+const appList = ref([]);
|
|
|
+import { useAppStore } from '/@/store/modules/app';
|
|
|
+const appStore = useAppStore();
|
|
|
+onMounted(async () => {
|
|
|
+ initHrefModal();
|
|
|
+ appList.value = await getAppList();
|
|
|
+});
|
|
|
+function initHrefModal() {
|
|
|
+ let params = appStore.getMessageHrefParams;
|
|
|
+ if (params) {
|
|
|
+ let anntId = params.id;
|
|
|
+ if (anntId) {
|
|
|
+ alert('消息跳转' + anntId);
|
|
|
}
|
|
|
- // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
|
|
|
- if (text.includes("t('") && t) {
|
|
|
- return new Function('t', `return ${text}`)(t);
|
|
|
+ let detailId = params.detailId;
|
|
|
+ if (detailId) {
|
|
|
+ alert('消息跳转' + detailId);
|
|
|
}
|
|
|
- // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
|
|
|
- return text
|
|
|
+ appStore.setMessageHrefParams('');
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- import { useAppStore } from '/@/store/modules/app';
|
|
|
- const appStore = useAppStore();
|
|
|
- onMounted(()=>{
|
|
|
- initHrefModal();
|
|
|
- });
|
|
|
- function initHrefModal(){
|
|
|
- let params = appStore.getMessageHrefParams;
|
|
|
- if(params){
|
|
|
- let anntId = params.id;
|
|
|
- if(anntId){
|
|
|
- alert('消息跳转'+anntId)
|
|
|
- }
|
|
|
- let detailId = params.detailId;
|
|
|
- if(detailId){
|
|
|
- alert('消息跳转'+detailId)
|
|
|
- }
|
|
|
- appStore.setMessageHrefParams('')
|
|
|
- }
|
|
|
- }
|
|
|
+watch(appList, () => loadData());
|
|
|
|
|
|
- // 列表页面公共参数、方法
|
|
|
- const { prefixCls, tableContext } = useListPage({
|
|
|
- tableProps: {
|
|
|
- title: '菜单列表',
|
|
|
- api: list,
|
|
|
- columns: columns,
|
|
|
- size: 'small',
|
|
|
- pagination: false,
|
|
|
- isTreeTable: true,
|
|
|
- expandIconColumnIndex:1,
|
|
|
- striped: true,
|
|
|
- useSearchForm: true,
|
|
|
- showTableSetting: true,
|
|
|
- bordered: true,
|
|
|
- showIndexColumn: false,
|
|
|
- tableSetting: { fullScreen: true },
|
|
|
- formConfig: {
|
|
|
- // update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
|
|
|
- labelWidth:60,
|
|
|
- owProps: { gutter: 24 },
|
|
|
- // update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
|
|
|
- schemas: searchFormSchema,
|
|
|
- autoAdvancedCol: 4,
|
|
|
- baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
|
|
- actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
|
|
- },
|
|
|
- actionColumn: {
|
|
|
- width: 120,
|
|
|
- },
|
|
|
+function loadData() {
|
|
|
+ reload();
|
|
|
+}
|
|
|
+// 列表页面公共参数、方法
|
|
|
+const { prefixCls, tableContext } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ title: '菜单列表',
|
|
|
+ api: list,
|
|
|
+ columns: columns,
|
|
|
+ immediate: false,
|
|
|
+ beforeFetch: (params) => {
|
|
|
+ if (appList.value.length > 0) {
|
|
|
+ const ids = appList.value.map((item) => item.id);
|
|
|
+ const idsString = ids.join(',');
|
|
|
+ params.ids = idsString;
|
|
|
+ }
|
|
|
},
|
|
|
- });
|
|
|
- //注册table数据
|
|
|
- const [registerTable, { reload, expandAll, collapseAll,getForm }] = tableContext;
|
|
|
+ size: 'small',
|
|
|
+ pagination: false,
|
|
|
+ isTreeTable: true,
|
|
|
+ expandIconColumnIndex: 1,
|
|
|
+ striped: true,
|
|
|
+ useSearchForm: true,
|
|
|
+ showTableSetting: true,
|
|
|
+ bordered: true,
|
|
|
+ showIndexColumn: false,
|
|
|
+ tableSetting: { fullScreen: true },
|
|
|
+ formConfig: {
|
|
|
+ // update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
|
|
|
+ labelWidth: 70,
|
|
|
+ owProps: { gutter: 24 },
|
|
|
+ // update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5873】查询区域lablel默认居左
|
|
|
+ schemas: searchFormSchema,
|
|
|
+ autoAdvancedCol: 4,
|
|
|
+ baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
|
|
+ actionColOptions: { push:1,xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
|
|
+ },
|
|
|
+ actionColumn: {
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+//注册table数据
|
|
|
+const [registerTable, { reload, expandAll, collapseAll, getForm }] = tableContext;
|
|
|
|
|
|
- /**
|
|
|
- * 选择列配置
|
|
|
- */
|
|
|
- const rowSelection = {
|
|
|
- type: 'checkbox',
|
|
|
- columnWidth: 25,
|
|
|
- selectedRowKeys: checkedKeys,
|
|
|
- onChange: onSelectChange,
|
|
|
- };
|
|
|
+/**
|
|
|
+ * 选择列配置
|
|
|
+ */
|
|
|
+const rowSelection = {
|
|
|
+ type: 'checkbox',
|
|
|
+ columnWidth: 25,
|
|
|
+ selectedRowKeys: checkedKeys,
|
|
|
+ onChange: onSelectChange,
|
|
|
+};
|
|
|
|
|
|
- /**
|
|
|
- * 选择事件
|
|
|
- */
|
|
|
- function onSelectChange(selectedRowKeys: (string | number)[]) {
|
|
|
- checkedKeys.value = selectedRowKeys;
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 选择事件
|
|
|
+ */
|
|
|
+function onSelectChange(selectedRowKeys: (string | number)[]) {
|
|
|
+ checkedKeys.value = selectedRowKeys;
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * 新增
|
|
|
- */
|
|
|
- function handleCreate() {
|
|
|
- showFooter.value = true;
|
|
|
- let {getFieldsValue} = getForm();
|
|
|
- openDrawer(true, {
|
|
|
- record: { appId:getFieldsValue().appId?getFieldsValue().appId:'0' },
|
|
|
- isUpdate: false,
|
|
|
- });
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 新增
|
|
|
+ */
|
|
|
+function handleCreate() {
|
|
|
+ showFooter.value = true;
|
|
|
+ let { getFieldsValue } = getForm();
|
|
|
+ openDrawer(true, {
|
|
|
+ record: { appId: getFieldsValue().appId ? getFieldsValue().appId : '0' },
|
|
|
+ isUpdate: false,
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * 编辑
|
|
|
- */
|
|
|
- function handleEdit(record) {
|
|
|
- showFooter.value = true;
|
|
|
- openDrawer(true, {
|
|
|
- record,
|
|
|
- isUpdate: true,
|
|
|
- });
|
|
|
- }
|
|
|
- /**
|
|
|
- * 详情
|
|
|
- */
|
|
|
- function handleDetail(record) {
|
|
|
- showFooter.value = false;
|
|
|
- openDrawer(true, {
|
|
|
- record,
|
|
|
- isUpdate: true,
|
|
|
- });
|
|
|
- }
|
|
|
- /**
|
|
|
- * 添加下级
|
|
|
- */
|
|
|
- function handleAddSub(record) {
|
|
|
- openDrawer(true, {
|
|
|
- record: { parentId: record.id, menuType: 1,appId:record.appId },
|
|
|
- isUpdate: false,
|
|
|
- });
|
|
|
- }
|
|
|
- /**
|
|
|
- * 数据权限弹窗
|
|
|
- */
|
|
|
- function handleDataRule(record) {
|
|
|
- openDataRule(true, { id: record.id });
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 编辑
|
|
|
+ */
|
|
|
+function handleEdit(record) {
|
|
|
+ showFooter.value = true;
|
|
|
+ openDrawer(true, {
|
|
|
+ record,
|
|
|
+ isUpdate: true,
|
|
|
+ });
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 详情
|
|
|
+ */
|
|
|
+function handleDetail(record) {
|
|
|
+ showFooter.value = false;
|
|
|
+ openDrawer(true, {
|
|
|
+ record,
|
|
|
+ isUpdate: true,
|
|
|
+ });
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 添加下级
|
|
|
+ */
|
|
|
+function handleAddSub(record) {
|
|
|
+ openDrawer(true, {
|
|
|
+ record: { parentId: record.id, menuType: 1, appId: record.appId },
|
|
|
+ isUpdate: false,
|
|
|
+ });
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 数据权限弹窗
|
|
|
+ */
|
|
|
+function handleDataRule(record) {
|
|
|
+ openDataRule(true, { id: record.id });
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * 删除
|
|
|
- */
|
|
|
- async function handleDelete(record) {
|
|
|
- await deleteMenu({ id: record.id }, reload);
|
|
|
- }
|
|
|
- /**
|
|
|
- * 批量删除事件
|
|
|
- */
|
|
|
- async function batchHandleDelete() {
|
|
|
- await batchDeleteMenu({ ids: checkedKeys.value }, reload);
|
|
|
- }
|
|
|
- /**
|
|
|
- * 成功回调
|
|
|
- */
|
|
|
- function handleSuccess() {
|
|
|
- reload();
|
|
|
- reloadDefIndex();
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 删除
|
|
|
+ */
|
|
|
+async function handleDelete(record) {
|
|
|
+ await deleteMenu({ id: record.id }, reload);
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 批量删除事件
|
|
|
+ */
|
|
|
+async function batchHandleDelete() {
|
|
|
+ await batchDeleteMenu({ ids: checkedKeys.value }, reload);
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 成功回调
|
|
|
+ */
|
|
|
+function handleSuccess() {
|
|
|
+ reload();
|
|
|
+ reloadDefIndex();
|
|
|
+}
|
|
|
|
|
|
- function onFetchSuccess() {
|
|
|
- // 演示默认展开所有表项
|
|
|
- nextTick(expandAll);
|
|
|
- }
|
|
|
+function onFetchSuccess() {
|
|
|
+ // 演示默认展开所有表项
|
|
|
+ nextTick(expandAll);
|
|
|
+}
|
|
|
|
|
|
- // --------------- begin 默认首页配置 ------------
|
|
|
+// --------------- begin 默认首页配置 ------------
|
|
|
|
|
|
- const defIndexStore = useDefIndexStore()
|
|
|
+const defIndexStore = useDefIndexStore();
|
|
|
|
|
|
- // 设置默认主页
|
|
|
- async function handleSetDefIndex(record: Recordable) {
|
|
|
- defIndexStore.update(record.url, record.component, record.route)
|
|
|
- }
|
|
|
+// 设置默认主页
|
|
|
+async function handleSetDefIndex(record: Recordable) {
|
|
|
+ defIndexStore.update(record.url, record.component, record.route);
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * 检查是否为默认主页
|
|
|
- * @param record
|
|
|
- */
|
|
|
- function checkDefIndex(record: Recordable) {
|
|
|
- return defIndexStore.check(record.url)
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 检查是否为默认主页
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+function checkDefIndex(record: Recordable) {
|
|
|
+ return defIndexStore.check(record.url);
|
|
|
+}
|
|
|
|
|
|
- // 重新加载默认首页配置
|
|
|
- function reloadDefIndex() {
|
|
|
- try {
|
|
|
- defIndexStore.query();
|
|
|
- } catch (e) {
|
|
|
- console.error(e)
|
|
|
- }
|
|
|
+// 重新加载默认首页配置
|
|
|
+function reloadDefIndex() {
|
|
|
+ try {
|
|
|
+ defIndexStore.query();
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- reloadDefIndex()
|
|
|
+reloadDefIndex();
|
|
|
|
|
|
- // --------------- end 默认首页配置 ------------
|
|
|
+// --------------- end 默认首页配置 ------------
|
|
|
|
|
|
- /**
|
|
|
- * 操作栏
|
|
|
- */
|
|
|
- function getTableAction(record) {
|
|
|
- return [
|
|
|
- {
|
|
|
- label: '编辑',
|
|
|
- onClick: handleEdit.bind(null, record),
|
|
|
- },
|
|
|
- ];
|
|
|
- }
|
|
|
+/**
|
|
|
+ * 操作栏
|
|
|
+ */
|
|
|
+function getTableAction(record) {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ onClick: handleEdit.bind(null, record),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * 下拉操作栏
|
|
|
- */
|
|
|
- function getDropDownAction(record) {
|
|
|
- return [
|
|
|
- // {
|
|
|
- // label: '详情',
|
|
|
- // onClick: handleDetail.bind(null, record),
|
|
|
- // },
|
|
|
- {
|
|
|
- label: '添加下级',
|
|
|
- onClick: handleAddSub.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '数据规则',
|
|
|
- onClick: handleDataRule.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '设为默认首页',
|
|
|
- onClick: handleSetDefIndex.bind(null, record),
|
|
|
- ifShow: () => !record.internalOrExternal && record.component && !checkDefIndex(record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '删除',
|
|
|
- color: 'error',
|
|
|
- popConfirm: {
|
|
|
- title: '是否确认删除',
|
|
|
- confirm: handleDelete.bind(null, record),
|
|
|
- },
|
|
|
+/**
|
|
|
+ * 下拉操作栏
|
|
|
+ */
|
|
|
+function getDropDownAction(record) {
|
|
|
+ return [
|
|
|
+ // {
|
|
|
+ // label: '详情',
|
|
|
+ // onClick: handleDetail.bind(null, record),
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ label: '添加下级',
|
|
|
+ onClick: handleAddSub.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '数据规则',
|
|
|
+ onClick: handleDataRule.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设为默认首页',
|
|
|
+ onClick: handleSetDefIndex.bind(null, record),
|
|
|
+ ifShow: () => !record.internalOrExternal && record.component && !checkDefIndex(record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ color: 'error',
|
|
|
+ popConfirm: {
|
|
|
+ title: '是否确认删除',
|
|
|
+ confirm: handleDelete.bind(null, record),
|
|
|
},
|
|
|
- ];
|
|
|
- }
|
|
|
+ },
|
|
|
+ ];
|
|
|
+}
|
|
|
</script>
|
ZL
danch