exam-score-statistic-web/src/features/subOrg/SubOrg.vue

<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();
store.currentLocation = "基础管理 / 机构管理";

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>