Initial commit

2024-04-24 16:36:46 +08:00
commit 121348e011
991 changed files with 158700 additions and 0 deletions
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <a-space style="margin-bottom: 10px">
+      <a-button
+        type="primary"
+        class="ele-btn-icon"
+        v-if="data"
+        @click="openEdit"
+      >
+        <span>添加</span>
+      </a-button>
+    </a-space>
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="appId"
+      :columns="columns"
+      class="sys-org-table"
+      :toolbar="false"
+      :datasource="datasource"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'menuType'">
+          <a-tag v-if="record.menuType === '0'" color="blue">菜单</a-tag>
+          <a-tag v-else-if="record.menuType === '1'">按钮</a-tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="openEdit(record)">修改</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </div>
+  <!-- 编辑弹窗 -->
+  <MenuEdit
+    v-model:visible="showEdit"
+    :data="current"
+    :parentId="parentId"
+    @done="reload"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import type {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { EleProTable } from 'ele-admin-pro';
+  import MenuEdit from './menu-edit.vue';
+  import { App, AppParam } from '@/api/dashboard/appstore/model';
+  import { listApp, removeApp } from '@/api/dashboard/appstore';
+
+  const props = defineProps<{
+    // 菜单类型
+    menuType?: number;
+    // 修改回显的数据
+    data?: App | null;
+    showView?: boolean;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '组件名称',
+      key: 'appName',
+      dataIndex: 'appName',
+      ellipsis: true
+    },
+    {
+      title: '路由地址',
+      dataIndex: 'path'
+    },
+    {
+      title: '组件路径',
+      dataIndex: 'component'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 表格数据源 */
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.parentId = props.data?.appId;
+    where.menuType = props.menuType;
+    return listApp({ ...where, ...orders, page, limit });
+  };
+
+  // 当前编辑数据
+  const current = ref<App | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 上级菜单id
+  const parentId = ref<number>();
+
+  // 菜单数据
+  // const menuData = ref<App[]>([]);
+
+  // 表格展开的行
+  // const expandedRowKeys = ref<number[]>([]);
+
+  /* 表格渲染完成回调 */
+  // const onDone: EleProTableDone<App> = ({ data }) => {
+  //   menuData.value = data;
+  // };
+
+  /* 刷新表格 */
+  const reload = (where?: AppParam) => {
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: App | null, id?: number) => {
+    parentId.value = props.data?.appId;
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: App) => {
+    if (row.children?.length) {
+      message.error('请先删除子节点');
+      return;
+    }
+    const hide = message.loading('请求中..', 0);
+    removeApp(row.appId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => props.data?.appId,
+    (visible) => {
+      if (visible) {
+        reload();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
+
+  export default {
+    name: 'Authority',
+    components: MenuIcons
+  };
+</script>