|
|
@@ -10,26 +10,24 @@
|
|
|
</Button>
|
|
|
</template>
|
|
|
<template #action="{ record }">
|
|
|
- <TableAction
|
|
|
- :actions="[
|
|
|
- {
|
|
|
- label: '编辑',
|
|
|
- tooltip: '编辑',
|
|
|
- icon: 'clarity:note-edit-line',
|
|
|
- onClick: handleEdit.bind(null, record),
|
|
|
+ <TableAction :actions="[
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ tooltip: '编辑',
|
|
|
+ icon: 'clarity:note-edit-line',
|
|
|
+ onClick: handleEdit.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ tooltip: '删除',
|
|
|
+ icon: 'ant-design:delete-outlined',
|
|
|
+ color: 'error',
|
|
|
+ popConfirm: {
|
|
|
+ title: getDeleteTitle(),
|
|
|
+ confirm: handleDelete.bind(null, record),
|
|
|
},
|
|
|
- {
|
|
|
- label: '删除',
|
|
|
- tooltip: '删除',
|
|
|
- icon: 'ant-design:delete-outlined',
|
|
|
- color: 'error',
|
|
|
- popConfirm: {
|
|
|
- title: getDeleteTitle(),
|
|
|
- confirm: handleDelete.bind(null, record),
|
|
|
- },
|
|
|
- },
|
|
|
- ]"
|
|
|
- />
|
|
|
+ },
|
|
|
+ ]" />
|
|
|
</template>
|
|
|
</BasicTable>
|
|
|
|
|
|
@@ -38,153 +36,153 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- //导入所需插件
|
|
|
- import { computed, defineComponent, nextTick } from 'vue';
|
|
|
+//导入所需插件
|
|
|
+import { computed, defineComponent, nextTick } from 'vue';
|
|
|
|
|
|
- // 导入表格组件,表格事件
|
|
|
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
+// 导入表格组件,表格事件
|
|
|
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
|
|
|
- // 加载表格数据
|
|
|
- import { getMenuList, delMenu } from '/@/api/sys/menu';
|
|
|
- // 加载自定义侧边弹出框 组件
|
|
|
- import { useDrawer } from '/@/components/Drawer';
|
|
|
+// 加载表格数据
|
|
|
+import { getMenuList, delMenu } from '/@/api/twoAndThree/menu';
|
|
|
+// 加载自定义侧边弹出框 组件
|
|
|
+import { useDrawer } from '/@/components/Drawer';
|
|
|
|
|
|
- // 导入子页面【新增、修改】
|
|
|
- import MenuDrawer from './MenuDrawer.vue';
|
|
|
+// 导入子页面【新增、修改】
|
|
|
+import MenuDrawer from './MenuDrawer.vue';
|
|
|
|
|
|
- // 导入列 属性,和搜索栏内容
|
|
|
- import { columns } from './menu.data';
|
|
|
- import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
- import { Button, notification } from 'ant-design-vue';
|
|
|
- import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
|
|
|
- import { isArray } from '/@/utils/is';
|
|
|
- // 自定义表格组件和属性
|
|
|
- export default defineComponent({
|
|
|
- name: 'MenuManagement',
|
|
|
- components: { BasicTable, MenuDrawer, TableAction, Button },
|
|
|
- setup() {
|
|
|
- const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
|
|
|
- const { t } = useI18n(); //加载国际化
|
|
|
- // 新增菜单
|
|
|
- const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
|
|
|
+// 导入列 属性,和搜索栏内容
|
|
|
+import { columns } from './menu.data';
|
|
|
+import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
+import { Button, notification } from 'ant-design-vue';
|
|
|
+import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
|
|
|
+import { isArray } from '/@/utils/is';
|
|
|
+// 自定义表格组件和属性
|
|
|
+export default defineComponent({
|
|
|
+ name: 'MenuManagement',
|
|
|
+ components: { BasicTable, MenuDrawer, TableAction, Button },
|
|
|
+ setup() {
|
|
|
+ const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
|
|
|
+ const { t } = useI18n(); //加载国际化
|
|
|
+ // 新增菜单
|
|
|
+ const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
|
|
|
|
|
|
- const [
|
|
|
- registerTable,
|
|
|
- { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
|
|
|
- ] = useTable({
|
|
|
- title: t('routes.common.system.pageSystemTitleMenuList'), //'菜单列表'
|
|
|
- api: getMenuList, //加载数据
|
|
|
- columns, //加载列
|
|
|
- isTreeTable: true,
|
|
|
- pagination: false,
|
|
|
- striped: false,
|
|
|
- showTableSetting: true,
|
|
|
- bordered: true,
|
|
|
- showIndexColumn: false,
|
|
|
- canResize: false,
|
|
|
- rowKey: (record) => record.id,
|
|
|
- actionColumn: {
|
|
|
- width: 200,
|
|
|
- title: t('routes.common.system.pageSystemTitleOperation'), //操作
|
|
|
- dataIndex: 'action',
|
|
|
- slots: { customRender: 'action' },
|
|
|
- fixed: 'right',
|
|
|
- },
|
|
|
- rowSelection: {
|
|
|
- type: 'checkbox',
|
|
|
- },
|
|
|
- });
|
|
|
+ const [
|
|
|
+ registerTable,
|
|
|
+ { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
|
|
|
+ ] = useTable({
|
|
|
+ title: t('routes.common.system.pageSystemTitleMenuList'), //'菜单列表'
|
|
|
+ api: getMenuList, //加载数据
|
|
|
+ columns, //加载列
|
|
|
+ isTreeTable: true,
|
|
|
+ pagination: false,
|
|
|
+ striped: false,
|
|
|
+ showTableSetting: true,
|
|
|
+ bordered: true,
|
|
|
+ showIndexColumn: false,
|
|
|
+ canResize: false,
|
|
|
+ rowKey: (record) => record.id,
|
|
|
+ actionColumn: {
|
|
|
+ width: 200,
|
|
|
+ title: t('routes.common.system.pageSystemTitleOperation'), //操作
|
|
|
+ dataIndex: 'action',
|
|
|
+ slots: { customRender: 'action' },
|
|
|
+ fixed: 'right',
|
|
|
+ },
|
|
|
+ rowSelection: {
|
|
|
+ type: 'checkbox',
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
- const getCanBatchDelete = computed(() => {
|
|
|
- const rowSelection = getRowSelection();
|
|
|
- return !rowSelection.selectedRowKeys?.length;
|
|
|
- });
|
|
|
- const { createSyncConfirm } = useSyncConfirm();
|
|
|
- const handleBatchDelete = async () => {
|
|
|
- const rowKeys = getSelectRowKeys();
|
|
|
- try {
|
|
|
- await createSyncConfirm({
|
|
|
- iconType: 'warning',
|
|
|
- content: '确认后所有选中的菜单将被删除',
|
|
|
- });
|
|
|
- await handleDelete({ id: rowKeys });
|
|
|
- setSelectedRowKeys([]);
|
|
|
- reload();
|
|
|
- } catch (error) {}
|
|
|
- };
|
|
|
+ const getCanBatchDelete = computed(() => {
|
|
|
+ const rowSelection = getRowSelection();
|
|
|
+ return !rowSelection.selectedRowKeys?.length;
|
|
|
+ });
|
|
|
+ const { createSyncConfirm } = useSyncConfirm();
|
|
|
+ const handleBatchDelete = async () => {
|
|
|
+ const rowKeys = getSelectRowKeys();
|
|
|
+ try {
|
|
|
+ await createSyncConfirm({
|
|
|
+ iconType: 'warning',
|
|
|
+ content: '确认后所有选中的菜单将被删除',
|
|
|
+ });
|
|
|
+ await handleDelete({ id: rowKeys });
|
|
|
+ setSelectedRowKeys([]);
|
|
|
+ reload();
|
|
|
+ } catch (error) { }
|
|
|
+ };
|
|
|
|
|
|
- /**
|
|
|
- * 获得删除提示框的文字
|
|
|
- */
|
|
|
- function getDeleteTitle(): string {
|
|
|
- let labelText = t('routes.common.system.pageSystemTitleWhetherDelete');
|
|
|
- return labelText;
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 获得删除提示框的文字
|
|
|
+ */
|
|
|
+ function getDeleteTitle(): string {
|
|
|
+ let labelText = t('routes.common.system.pageSystemTitleWhetherDelete');
|
|
|
+ return labelText;
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 打开新增菜单
|
|
|
- */
|
|
|
- function handleCreate() {
|
|
|
- openDrawer(true, {
|
|
|
- isUpdate: false,
|
|
|
- });
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 打开新增菜单
|
|
|
+ */
|
|
|
+ function handleCreate() {
|
|
|
+ openDrawer(true, {
|
|
|
+ isUpdate: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 打开 编辑菜单
|
|
|
- * @param record
|
|
|
- */
|
|
|
- function handleEdit(record: Recordable) {
|
|
|
- openDrawer(true, {
|
|
|
- record,
|
|
|
- isUpdate: true,
|
|
|
- });
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 打开 编辑菜单
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ function handleEdit(record: Recordable) {
|
|
|
+ openDrawer(true, {
|
|
|
+ record,
|
|
|
+ isUpdate: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 执行 删除操作
|
|
|
- * @param record
|
|
|
- */
|
|
|
- async function handleDelete(record: Recordable) {
|
|
|
- try {
|
|
|
- let ids = isArray(record.id) ? record.id : [record.id];
|
|
|
- await delMenu(ids);
|
|
|
- notification.success({
|
|
|
- message: '成功',
|
|
|
- description: '删除菜单成功',
|
|
|
- duration: 3,
|
|
|
- });
|
|
|
- await reload();
|
|
|
- } catch (e) {
|
|
|
- return Promise.reject(e);
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 执行 删除操作
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ async function handleDelete(record: Recordable) {
|
|
|
+ try {
|
|
|
+ let ids = isArray(record.id) ? record.id : [record.id];
|
|
|
+ await delMenu(ids);
|
|
|
+ notification.success({
|
|
|
+ message: '成功',
|
|
|
+ description: '删除菜单成功',
|
|
|
+ duration: 3,
|
|
|
+ });
|
|
|
+ await reload();
|
|
|
+ } catch (e) {
|
|
|
+ return Promise.reject(e);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 操作成功,重新加载页面
|
|
|
- */
|
|
|
- function handleSuccess() {
|
|
|
- reload();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 操作成功,重新加载页面
|
|
|
+ */
|
|
|
+ function handleSuccess() {
|
|
|
+ reload();
|
|
|
+ }
|
|
|
|
|
|
- function onFetchSuccess() {
|
|
|
- // 演示默认展开所有表项
|
|
|
- nextTick(collapseAll);
|
|
|
- }
|
|
|
+ function onFetchSuccess() {
|
|
|
+ // 演示默认展开所有表项
|
|
|
+ nextTick(collapseAll);
|
|
|
+ }
|
|
|
|
|
|
- return {
|
|
|
- getDeleteTitle,
|
|
|
- getI18nCreateMenu,
|
|
|
- registerTable,
|
|
|
- registerDrawer,
|
|
|
- handleCreate,
|
|
|
- handleEdit,
|
|
|
- handleDelete,
|
|
|
- handleSuccess,
|
|
|
- onFetchSuccess,
|
|
|
- getCanBatchDelete,
|
|
|
- handleBatchDelete,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ return {
|
|
|
+ getDeleteTitle,
|
|
|
+ getI18nCreateMenu,
|
|
|
+ registerTable,
|
|
|
+ registerDrawer,
|
|
|
+ handleCreate,
|
|
|
+ handleEdit,
|
|
|
+ handleDelete,
|
|
|
+ handleSuccess,
|
|
|
+ onFetchSuccess,
|
|
|
+ getCanBatchDelete,
|
|
|
+ handleBatchDelete,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|