顶级机构页面查询

components.d.ts

@@ -13,9 +13,13 @@ declare module 'vue' {
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
+    ATable: typeof import('ant-design-vue/es')['Table']
     Layout: typeof import('./src/components/Layout.vue')['default']
+    StateSelect: typeof import('./src/components/StateSelect.vue')['default']
   }
 }
 

src/api/loginPage.ts

@@ -15,5 +15,5 @@ export function loginByUsername(loginInfo: {
 /** 登出 */
 export function logout() {
   const router = useRouter();
-  return httpApp.post("/api/ess/auth/logout").catch();
+  return httpApp.post("/api/ess/auth/logout").catch(() => {});
 }

src/api/rootOrgPage.ts

@@ -4,7 +4,7 @@ import { httpApp } from "@/plugins/axiosApp";
 export function getRootOrgList(params: {
   code?: string;
   name?: string;
-  enable?: boolean;
+  enable?: string;
   pageNo?: number;
   pageSize?: number;
 }) {

src/components/Layout.vue

@@ -6,8 +6,16 @@
         <a-sub-menu key="sub1">
           <template #icon> icon </template>
           <template #title>基础管理</template>
-          <a-menu-item key="1">顶级机构管理</a-menu-item>
-          <a-menu-item key="2">机构管理</a-menu-item>
+          <a-menu-item key="1">
+            <router-link active-class="active-route" to="/rootOrg">
+              顶级机构管理
+            </router-link>
+          </a-menu-item>
+          <a-menu-item key="2">
+            <router-link active-class="active-route" to="/subOrg">
+              机构管理
+            </router-link>
+          </a-menu-item>
           <a-menu-item key="3">角色管理</a-menu-item>
           <a-menu-item key="4">用户管理</a-menu-item>
           <a-menu-item key="5">科目管理</a-menu-item>
@@ -48,3 +56,9 @@ async function doLogout() {
   logout().then(() => routeLogout({ cause: "主动退出", redirectTo: "/" }));
 }
 </script>
+
+<style scoped>
+.active-route {
+  color: #4d66fd;
+}
+</style>

src/components/StateSelect.vue

@@ -0,0 +1,22 @@
+<template>
+  <a-select
+    placeholder="状态"
+    allowClear
+    :value="props.value"
+    @change="handleChange"
+    style="width: 80px"
+  >
+    <a-select-option value="true">启用</a-select-option>
+    <a-select-option value="false">禁止</a-select-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({ value: null });
+const emit = defineEmits(["update:value"]);
+
+function handleChange(v: string) {
+  console.log(v);
+  emit("update:value", v);
+}
+</script>

src/features/rootOrg/RootOrg.vue

@@ -1,3 +1,99 @@
 <template>
-  <div>org</div>
+  <div>
+    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
+      <a-input
+        v-model:value="code"
+        style="width: 178px"
+        placeholder="顶级机构代码"
+        allowClear
+      ></a-input>
+      <span class="tw-mr-4"></span>
+      <a-input
+        v-model:value="name"
+        class="tw-mr-4"
+        style="width: 178px"
+        placeholder="顶级机构名称"
+        allowClear
+      ></a-input>
+      <span class="tw-mr-4"></span>
+      <StateSelect v-model:value="enable" />
+      <span class="tw-mr-4"></span>
+      <a-button @click="search">查询</a-button>
+
+      <a-button style="float: right">同步</a-button>
+    </div>
+
+    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
+      <a-table
+        row-key="code"
+        :columns="columns"
+        :data-source="data"
+        :pagination="{ pageSize: 10 }"
+      >
+        <template #enable="{ text }">
+          <a>{{ $filters.booleanEnableDisableFilter(text) }}</a>
+        </template>
+        <template #action="{ record }">
+          <span>
+            <a-button>编辑</a-button>
+          </span>
+        </template>
+      </a-table>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { getRootOrgList } from "@/api/rootOrgPage";
+import { ref, onMounted } from "vue";
+
+let code = ref("");
+let name = ref("");
+let enable = ref(undefined as undefined | string);
+
+let data = ref([]);
+async function search() {
+  const res = await getRootOrgList({
+    code: code.value,
+    name: name.value,
+    enable: enable.value,
+  });
+  console.log(res);
+  data.value = res.data.content;
+}
+
+const columns = [
+  {
+    title: "顶级机构代码",
+    dataIndex: "code",
+    width: 150,
+  },
+  {
+    title: "顶级机构名称",
+    dataIndex: "name",
+    width: 150,
+  },
+  {
+    title: "状态",
+    dataIndex: "enable",
+    slots: { customRender: "enable" },
+  },
+  {
+    title: "顶级机构域名",
+    dataIndex: "domainName",
+  },
+  {
+    title: "更新时间",
+    dataIndex: "updateTime",
+  },
+  {
+    title: "Action",
+    key: "action",
+    slots: { customRender: "action" },
+  },
+];
+
+onMounted(async () => {
+  await search();
+});
+</script>

src/filters/index.ts

@@ -6,4 +6,8 @@ export default {
   datetimeFilter(epochTime: number) {
     return moment(epochTime).format(YYYYMMDDHHmmss);
   },
+  booleanEnableDisableFilter(val: boolean) {
+    if (typeof val !== "boolean") return "无";
+    return { true: "启用", false: "禁用" }[val + ""];
+  },
 };