机构管理分页

components.d.ts

@@ -18,7 +18,9 @@ declare module 'vue' {
     ATable: typeof import('ant-design-vue/es')['Table']
     Layout: typeof import('./src/components/Layout.vue')['default']
     QmButton: typeof import('./src/components/QmButton.vue')['default']
+    RootOrgSelect: typeof import('./src/components/RootOrgSelect.vue')['default']
     StateSelect: typeof import('./src/components/StateSelect.vue')['default']
+    'StateSelect copy': typeof import('./src/components/StateSelect copy.vue')['default']
   }
 }
 

src/api/subOrgPage.ts

@@ -0,0 +1,13 @@
+import { httpApp } from "@/plugins/axiosApp";
+
+/** 顶级机构分页查询 */
+export function getSubOrgList(params: {
+  code?: string;
+  name?: string;
+  enable?: string;
+  rootOrgId: string;
+  pageNo?: number;
+  pageSize?: number;
+}) {
+  return httpApp.post("/api/ess/org/page", params);
+}

src/components/RootOrgSelect.vue

@@ -0,0 +1,37 @@
+<template>
+  <a-select
+    placeholder="请选择顶级机构"
+    allowClear
+    :value="props.value"
+    @change="handleChange"
+    style="width: 140px"
+  >
+    <a-select-option
+      v-for="(item, index) in optionList"
+      :key="index"
+      :value="item.id"
+    >
+      {{ item.name }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+import { getRootOrgList } from "@/api/rootOrgPage";
+import { onMounted } from "vue-demi";
+
+const props = defineProps({ value: null });
+const emit = defineEmits(["update:value"]);
+
+let optionList = $ref<{ id: number; name: string }[]>([]);
+
+onMounted(async () => {
+  const res = await getRootOrgList({});
+  optionList = res.data.content;
+});
+
+function handleChange(v: string) {
+  console.log(v);
+  emit("update:value", v);
+}
+</script>

src/features/subOrg/SubOrg.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
+      <RootOrgSelect style="display: none" v-model:value="rootOrgId" />
+      <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>
+
+      <div class="tw-mt-4">
+        <a-button>新增</a-button>
+      </div>
+    </div>
+
+    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
+      <a-table
+        row-key="code"
+        :columns="columns"
+        :data-source="data"
+        :pagination="{
+          pageSize: pageSize,
+          current: pageNo,
+          total: totalElements,
+          showTotal: (total: number) => `总数：${total}`,
+          onChange: (pageNoChanged: number, pageSizeChanged: number) => {
+            pageNo = pageNoChanged; 
+            pageSize = pageSizeChanged;
+          }
+        }"
+      >
+        <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 { getSubOrgList } from "@/api/subOrgPage";
+import { useMainStore } from "@/store";
+import { watch, onMounted } from "vue";
+
+const store = useMainStore();
+
+let rootOrgId = $ref(null);
+let code = $ref("");
+let name = $ref("");
+let enable = $ref(undefined as undefined | string);
+
+let data = $ref([]);
+let pageSize = $ref(10);
+let pageNo = $ref(1);
+let totalElements = $ref(0);
+
+async function search() {
+  await fetchData();
+}
+
+watch(() => [pageNo, pageSize], fetchData);
+
+async function fetchData() {
+  const res = await getSubOrgList({
+    code,
+    name,
+    enable,
+    rootOrgId: store.userInfo.rootOrgId,
+    pageSize,
+    pageNo,
+  });
+  console.log(res);
+  data = res.data.content;
+  pageNo = res.data.pageNo;
+  pageSize = res.data.pageSize;
+  totalElements = res.data.totalElements;
+}
+
+const columns = [
+  {
+    title: "顶级机构名称",
+    dataIndex: "rootOrgName",
+    width: 150,
+  },
+  {
+    title: "机构代码",
+    dataIndex: "code",
+    width: 150,
+  },
+  {
+    title: "机构名称",
+    dataIndex: "name",
+    width: 150,
+  },
+  {
+    title: "状态",
+    dataIndex: "enable",
+    slots: { customRender: "enable" },
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createTime",
+  },
+  {
+    title: "创建人",
+    dataIndex: "creator",
+  },
+  {
+    title: "更新时间",
+    dataIndex: "updateTime",
+  },
+  {
+    title: "更新人",
+    dataIndex: "updater",
+  },
+  {
+    title: "Action",
+    key: "action",
+    slots: { customRender: "action" },
+  },
+];
+
+onMounted(async () => {
+  await search();
+});
+</script>

src/router/index.ts

@@ -15,6 +15,10 @@ const routes = [
         path: "rootOrg",
         component: () => import("@/features/rootOrg/RootOrg.vue"),
       },
+      {
+        path: "subOrg",
+        component: () => import("@/features/subOrg/SubOrg.vue"),
+      },
     ],
     component: Layout,
   },