|
|
@@ -1,197 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="p-4">
|
|
|
- <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
|
|
|
- <template #toolbar>
|
|
|
- <Button type="primary" @click="handleCreate">
|
|
|
- {{ getI18nCreateMenu }}
|
|
|
- </Button>
|
|
|
- <!-- <Button type="primary" danger :disabled="getCanBatchDelete" @click="handleBatchDelete">
|
|
|
- 批量删除
|
|
|
- </Button> -->
|
|
|
- </template>
|
|
|
- <template #action="{ 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),
|
|
|
- },
|
|
|
- },
|
|
|
- ]" />
|
|
|
- </template>
|
|
|
- </BasicTable>
|
|
|
-
|
|
|
- <!-- 弹出框 -->
|
|
|
- <AppDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script lang="ts">
|
|
|
-//导入所需插件
|
|
|
-import { computed, defineComponent, nextTick } from 'vue';
|
|
|
-
|
|
|
-// 导入表格组件,表格事件
|
|
|
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
-
|
|
|
-// 加载表格数据
|
|
|
-import { list, deleteApp } from '/@/api/authorize/authorize';
|
|
|
-// 加载自定义侧边弹出框 组件
|
|
|
-import { useDrawer } from '/@/components/Drawer';
|
|
|
-
|
|
|
-// 导入子页面【新增、修改】
|
|
|
-import AppDrawer from './AppDrawer.vue';
|
|
|
-
|
|
|
-// 导入列 属性,和搜索栏内容
|
|
|
-import { columns } from './app.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, AppDrawer, TableAction, Button },
|
|
|
- setup() {
|
|
|
- const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
|
|
|
- const { t } = useI18n(); //加载国际化
|
|
|
- // 新增菜单
|
|
|
- const getI18nCreateMenu = computed(() => ('新增应用'));
|
|
|
-
|
|
|
- const [
|
|
|
- registerTable,
|
|
|
- { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
|
|
|
- ] = useTable({
|
|
|
- title: '应用列表', //'菜单列表'
|
|
|
- api: list, //加载数据
|
|
|
- columns, //加载列
|
|
|
- isTreeTable: true,
|
|
|
- pagination: false,
|
|
|
- striped: false,
|
|
|
- showTableSetting: true,
|
|
|
- bordered: true,
|
|
|
- showIndexColumn: true,
|
|
|
- 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',
|
|
|
- },
|
|
|
- tableSetting: {
|
|
|
- redo: true,
|
|
|
- size: true,
|
|
|
- setting: false,
|
|
|
- fullScreen: false
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- 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 handleCreate() {
|
|
|
- openDrawer(true, {
|
|
|
- isUpdate: false,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 打开 编辑菜单
|
|
|
- * @param record
|
|
|
- */
|
|
|
- function handleEdit(record: Recordable) {
|
|
|
- openDrawer(true, {
|
|
|
- record,
|
|
|
- isUpdate: true,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 执行 删除操作
|
|
|
- * @param record
|
|
|
- */
|
|
|
- async function handleDelete(record: Recordable) {
|
|
|
- try {
|
|
|
- // let ids = isArray(record.departid) ? record.departid : [record.departid];
|
|
|
- await deleteApp({
|
|
|
- "systemId": record.SYSID,
|
|
|
- "systemKey": record.KEY,
|
|
|
- });
|
|
|
- notification.success({
|
|
|
- message: '成功',
|
|
|
- description: '删除应用成功',
|
|
|
- duration: 3,
|
|
|
- });
|
|
|
- await reload();
|
|
|
- } catch (e) {
|
|
|
- return Promise.reject(e);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 操作成功,重新加载页面
|
|
|
- */
|
|
|
- function handleSuccess() {
|
|
|
- reload();
|
|
|
- }
|
|
|
-
|
|
|
- function onFetchSuccess() {
|
|
|
- // 演示默认展开所有表项
|
|
|
- nextTick(collapseAll);
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- getDeleteTitle,
|
|
|
- getI18nCreateMenu,
|
|
|
- registerTable,
|
|
|
- registerDrawer,
|
|
|
- handleCreate,
|
|
|
- handleEdit,
|
|
|
- handleDelete,
|
|
|
- handleSuccess,
|
|
|
- onFetchSuccess,
|
|
|
- getCanBatchDelete,
|
|
|
- handleBatchDelete,
|
|
|
- };
|
|
|
- },
|
|
|
-});
|
|
|
-</script>
|