From 6714080a17d13e68b3bebb92650c79ed407cd30c Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Fri, 25 Apr 2025 13:18:11 +0800
Subject: [PATCH] dev

---
 src/components/common/Header.vue       |  14 ++
 src/components/settings/ItemEdit.vue   |   3 +-
 src/components/settings/MemberEdit.vue |  15 +-
 src/views/inventory/apply.vue          |   4 +-
 src/views/inventory/inventory.vue      |   3 +-
 src/views/settings/index.vue           |   4 +
 src/views/settings/item.vue            | 200 ++++++++++++-------------
 src/views/settings/member.vue          | 133 +++++++++++++---
 src/views/settings/section.vue         | 147 ++++++++++++++----
 9 files changed, 356 insertions(+), 167 deletions(-)

diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index 35aeced..fae1979 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -11,8 +11,11 @@
         <router-link to="/social" class="menu-item" active-class="active active7">医保</router-link>
         <router-link to="/statistics" class="menu-item" active-class="active active8">统计</router-link>
         <router-link to="/settings" class="menu-item" active-class="active active9">设置</router-link>
+        <el-button style="float: right;color: #fff" @click="logout" type="text">退出登录</el-button>
       </div>
+
     </div>
+
   </header>
 </template>
 
@@ -142,4 +145,15 @@ header {
 }
 </style>
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+let logout = function () {
+  localStorage.removeItem('token')
+  useRouter().push("/manager/login")
+  ElMessage({
+    message: "退出成功，即将为您跳转到登陆页面",
+    type: 'success',
+    duration: 1000,
+  })
+}
 </script>
diff --git a/src/components/settings/ItemEdit.vue b/src/components/settings/ItemEdit.vue
index f5452eb..5e3ab4b 100644
--- a/src/components/settings/ItemEdit.vue
+++ b/src/components/settings/ItemEdit.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="header" style="width: 100%;display: flex;justify-content: center">
+    <div class="header" style="width: 100%;display: flex;justify-content: center;margin-bottom: 10px">
       <el-button type="primary" style="margin-top:10px" round class="btn" @click="openCreateSearch"
                  plain>
         一键建档
@@ -8,7 +8,6 @@
     </div>
     <el-form :model="form" label-width="auto">
       <el-descriptions
-          :title="props.id?'编辑' : '新增'"
           :column="3"
           direction="vertical"
           border
diff --git a/src/components/settings/MemberEdit.vue b/src/components/settings/MemberEdit.vue
index 767abcb..a415f8c 100644
--- a/src/components/settings/MemberEdit.vue
+++ b/src/components/settings/MemberEdit.vue
@@ -189,16 +189,20 @@ const onSubmit = () => {
 }
 const ruleFormRef= ref<any>('')
 const save = () => {
+  let form={
+    memberInfo:memberInfo.value,
+    userInfo:userInfo.value,
+  }
   ruleFormRef.value.validate((valid: any) => {
     if (valid) {
       if (props.id) {
-        post("organization/member/edit", {data: memberInfo.value}).then((res) => {
+        post("organization/member/edit", {data: form}).then((res) => {
           onSubmit()
           memberInfo.value = {}
           userInfo.value = {}
         })
       } else {
-        post("organization/member/add", {data: memberInfo.value}).then((res) => {
+        post("organization/member/add", {data: form}).then((res) => {
           onSubmit()
           memberInfo.value = {}
         })
@@ -223,8 +227,13 @@ const options = Object.entries(depts).map(([key, value]) => {
 });
 const uploadRef = ref<any>('')
 const init = (id: any) => {
+  memberInfo.value = {}
+  userInfo.value = {}
   post("organization/member/getById", {id}).then((res: any) => {
-    memberInfo.value = res
+    memberInfo.value = res.memberInfo
+    if(res.userInfo){
+      userInfo.value = res.userInfo
+    }
     if(memberInfo.value.electronicSignature){
     uploadRef.value?.getImageUrl(memberInfo.value.electronicSignature)
     }
diff --git a/src/views/inventory/apply.vue b/src/views/inventory/apply.vue
index c249c5a..b836b59 100644
--- a/src/views/inventory/apply.vue
+++ b/src/views/inventory/apply.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-wrapper">
     <div class="top">
-      <el-button type="primary" @click="is_add = true">新增领用</el-button>
+      <el-button type="primary" :icon="Plus" @click="is_add = true">新增领用</el-button>
     </div>
     <div class="content">
       <el-table :data="dataList" style="width: 100%" @row-click="rowClick">
@@ -37,12 +37,12 @@
   </div>
 </template>
 <script setup lang="ts">
-
 import Mask from "@/components/common/Mask.vue";
 import AddApply from "@/components/inventory/apply/AddApply.vue";
 import {onMounted, ref} from "vue";
 import {post} from "@/utils/request.ts";
 import DetailApply from "@/components/inventory/apply/DetailApply.vue";
+import {Plus} from "@element-plus/icons-vue";
 
 const is_add = ref(false)
 const is_detail = ref(false)
diff --git a/src/views/inventory/inventory.vue b/src/views/inventory/inventory.vue
index c47c076..2034e6c 100644
--- a/src/views/inventory/inventory.vue
+++ b/src/views/inventory/inventory.vue
@@ -2,7 +2,7 @@
 <div class="container-wrapper">
   <div class="top">
     <el-dropdown>
-      <el-button type="primary" @click="open_add(null)">新增采购</el-button>
+      <el-button type="primary" :icon="Plus" @click="open_add(null)">新增采购</el-button>
     </el-dropdown>
   </div>
     <div class="content_list">
@@ -63,6 +63,7 @@ import {useRoute} from "vue-router";
 import AddOrder from "@/components/inventory/purchase/AddOrder.vue";
 import Mask from "@/components/common/Mask.vue";
 import EditOrder from "@/components/inventory/purchase/EditOrder.vue";
+import {Plus} from "@element-plus/icons-vue";
 
 let tableData = ref([])
 let is_add = ref(false)
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index aa43bdc..c9d417d 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -119,6 +119,10 @@ const options = Array.from({length: 10000}).map((_, idx) => ({
 }))
 </script>
 <style scoped lang="scss">
+.container-wrapper{
+  padding:0 24px;
+  background: #fff;
+}
 .form {
   width: 100%;
   padding: 0 24px;
diff --git a/src/views/settings/item.vue b/src/views/settings/item.vue
index 1446ddb..f7d83a9 100644
--- a/src/views/settings/item.vue
+++ b/src/views/settings/item.vue
@@ -1,80 +1,59 @@
 <template>
   <div class="container-wrapper">
     <div class="title">
-      <el-select-v2
-          v-model="state"
-          filterable
-          remote
-          ref="selectRef"
-          :remote-method="querySearchAsync"
-          :options="options"
-          placeholder="输入关键字搜索"
-          style="width: 200px"
-      >
-        <template #prefix>
-          <div class="prefix-wrapper">
-            <el-icon>
-              <Search/>
-            </el-icon>
-          </div>
-        </template>
-        <template #header>
-          <div class="header">
-            <div class="text">药品</div>
-            <div class="text">规格</div>
-            <div class="text">库存</div>
-            <div class="text">厂家</div>
-            <div class="text">最近供应商</div>
-          </div>
-        </template>
-        <template #default="{ item }">
-          <div class="row" @click="handleSelect(item)">
-            <div class="text" style="margin-left: 0">{{ item.name }}</div>
-            <div class="text">{{ item.minPackagingNumber }}*{{ item.minPackagingUnit }}/{{ item.packagingUnit }}</div>
-            <div class="text">
-              {{ item.inventoryWholeNumber }}{{ item.packagingUnit }}
-              <template v-if="item.inventoryFragmentNumber > 0">
-                {{ item.inventoryFragmentNumber }}{{ item.minPackagingUnit }}
-              </template>
-            </div>
-            <div class="text">{{ item.producer }}</div>
-            <div class="text" style="margin-left: 15px">无</div>
-          </div>
-        </template>
-        <template #footer>
-        </template>
-      </el-select-v2>
-      <div class="search_box">
-        <el-input
-            v-model="state"
-            placeholder="输入关键字搜索药品"
-            clearable
-            style="width: 200px"
+      <div class="title-search">
+        <el-form
+            :model="search"
+            label-width="auto"
+            :inline="true"
+            class="demo-form-inline"
         >
-          <template #prefix>
-            <el-icon>
-              <Search/>
-            </el-icon>
-          </template>
-        </el-input>
+          <el-form-item>
+            <el-input v-model="search.itemSocialCode" placeholder="医保码编码" style="width: 200px"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="search.itemName" placeholder="项目名称" style="width: 200px"></el-input>
+          </el-form-item>
+        </el-form>
       </div>
-      <div class="search_box">
-        <el-button type="primary" @click="isShow=true">新建项目</el-button>
+      <div class="title-btn">
+        <el-button type="primary" @click="initData()">查询</el-button>
+        <el-button type="primary" @click="search={}">重置</el-button>
+        <el-button type="primary" :icon="Plus" @click="isShow=true">新建项目</el-button>
         <el-button type="primary" @click="openSetMenu">组套</el-button>
       </div>
     </div>
-    <div class="content_list">
-      <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
-        <el-table-column prop="itemSocialCode" label="医保码编码" width="200"
-                         :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="itemName" label="项目名称"></el-table-column>
-        <el-table-column prop="unit" label="单位"></el-table-column>
-        <el-table-column prop="purchaseUnitPrice" label="原价"></el-table-column>
-        <el-table-column prop="unitPrice" label="售价"></el-table-column>
-      </el-table>
+    <div class="table">
+      <el-scrollbar>
+        <el-table :data="tableData" @row-click="rowClick">
+          <el-table-column prop="itemSocialCode" label="医保码编码" width="200"
+                           :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column prop="itemName" label="项目名称"></el-table-column>
+          <el-table-column prop="unit" label="单位"></el-table-column>
+          <el-table-column prop="purchaseUnitPrice" label="原价"></el-table-column>
+          <el-table-column prop="unitPrice" label="售价"></el-table-column>
+          <el-table-column prop="createDatetime" label="创建时间">
+            <template #default="scope">
+              {{ formatDate(scope.row.createDatetime) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-scrollbar>
+    </div>
+    <div class="bottom">
+      <div class="page_btn_list">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="page"
+            :total="total"
+            @current-change="changePage"
+        />
+      </div>
     </div>
   </div>
-  <Mask :is-show="isShow" @close="initData()">
+  <Mask :is-show="isShow" @close="initData()" :title="id?'项目编辑':'项目新增'">
     <ItemEdit :id="id" ref="ItemEditRef" @close="initData()"></ItemEdit>
   </Mask>
   <SetMenu ref="setMenuRef"></SetMenu>
@@ -85,6 +64,8 @@ import {post} from "@/utils/request.ts";
 import Mask from "@/components/common/Mask.vue";
 import ItemEdit from "@/components/settings/ItemEdit.vue";
 import SetMenu from "@/components/settings/SetMenu.vue";
+import {formatDate} from "@/utils/dateUtils.ts";
+import {Plus} from "@element-plus/icons-vue"
 
 const state = ref([])
 const options = ref([
@@ -145,10 +126,11 @@ const rowClick = ((row: any) => {
 
 const tableData = ref<any>([])
 const initData = () => {
-  post('item/list', {page: 1, size: 20}).then((res: any) => {
+  post('item/list', {page: page.value, size: pageSize.value}).then((res: any) => {
     tableData.value = res.list
+    total.value = res.total_count
   })
-  id.value=''
+  id.value = ''
   isShow.value = false
 }
 onMounted(() => {
@@ -160,52 +142,56 @@ const openSetMenu = () => {
     setMenuRef.value?.init();
   });
 }
+const changePage = (val: any) => {
+  page.value = val
+};
+const pageSize = ref(20);
+const page = ref(1);
+const total = ref(0);
+const search = ref<any>({})
 </script>
 <style scoped lang="scss">
-.title {
+.container-wrapper {
+  padding: 24px;
+  background: #fff;
   display: flex;
-  height: 60px;
-  align-items: center;
+  flex-direction: column;
 
-  .search_box {
-    //background-color: rgb(148.6, 212.3, 117.1);
-    background-color: #fff;
-    padding: 10px;
-    border-radius: 10px;
+  .title {
+    display: flex;
+    height: 60px;
+    align-items: center;
+    justify-content: space-between;
+
+    .title-search {
+      padding: 10px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      display: flex;
+    }
+
+    .el-popper.is-pure {
+      padding: 10px;
+    }
+  }
+
+  .table {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .bottom {
+    height: 60px;
+    background-color: #FFF;
     box-sizing: border-box;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
-  .header {
     padding: 10px;
-    font-size: 18px;
+    border-top: 1px solid #EEE;
     display: flex;
-
-    .text {
-      font-size: 16px;
-      width: 200px;
-      color: #6a6a6a;
-    }
-  }
-
-  .row {
-    display: flex;
-    max-height: 500px;
-
-    .text {
-      font-size: 12px;
-      width: 150px;
-      margin-left: 10px;
-      overflow: hidden; /* 隐藏超出部分 */
-      text-overflow: ellipsis; /* 显示省略号 */
-      white-space: nowrap; /* 防止换行 */
-    }
-  }
-
-  .el-popper.is-pure {
-    padding: 10px;
+    justify-content: flex-end;
   }
 }
 
+
 </style>
\ No newline at end of file
diff --git a/src/views/settings/member.vue b/src/views/settings/member.vue
index aa911e7..29398d0 100644
--- a/src/views/settings/member.vue
+++ b/src/views/settings/member.vue
@@ -1,25 +1,73 @@
 <template>
   <div class="container-wrapper">
-    <el-button type="primary" @click="isShow=true">新增</el-button>
-    <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
-      <el-table-column prop="date" label="日期" width="180">
-        <template #default="scope">
-          {{ formatDate(scope.row.createDatetime) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="name" label="姓名" width="180"/>
-      <el-table-column prop="role" label="角色" width="180">
-        <template #default="scope">
-          {{ roleList.find((item: any) => item.value === scope.row.role)?.label || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="sectionId" label="科室">
-        <template #default="scope">
-          {{ sectionList.find((item: any) => item.id === scope.row.sectionId)?.name || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="memo" label="备注"/>
-    </el-table>
+    <div class="title">
+      <div class="title-search">
+        <el-form
+            :model="search"
+            label-width="auto"
+            :inline="true"
+            class="demo-form-inline"
+        >
+          <el-form-item>
+            <el-input v-model="search.name" placeholder="请输入姓名" style="width: 200px"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="search.sectionId" placeholder="请选择" style="width: 200px">
+              <el-option
+                  v-for="item in roleList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="title-btn">
+        <el-button type="primary" @click="init()">查询</el-button>
+        <el-button type="primary" @click="search={}">重置</el-button>
+        <el-button type="primary" :icon="Plus" @click="isShow=true">新增</el-button>
+      </div>
+    </div>
+
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
+        <el-table-column prop="date" label="日期" width="180">
+          <template #default="scope">
+            {{ formatDate(scope.row.memberInfo.createDatetime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="180">
+          <template #default="scope">
+            {{ scope.row.memberInfo.name }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="role" label="角色" width="180">
+          <template #default="scope">
+            {{ roleList.find((item: any) => item.value === scope.row.memberInfo.role)?.label || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sectionId" label="科室">
+          <template #default="scope">
+            {{ sectionList.find((item: any) => item.id === scope.row.memberInfo.sectionId)?.name || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="memo" label="备注"/>
+      </el-table>
+    </div>
+    <div class="bottom">
+      <div class="page_btn_list">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="page"
+            :total="total"
+            @current-change="changePage"
+        />
+      </div>
+    </div>
     <Mask :is-show="isShow" @close="isShow=false" :width="800" :height="600" title="成员管理">
       <MemberEdit :id="id" ref="memberEditRef" @onSubmit="init()"></MemberEdit>
     </Mask>
@@ -31,16 +79,17 @@ import Mask from '@/components/common/Mask.vue'
 import MemberEdit from "@/components/settings/MemberEdit.vue";
 import {post} from "@/utils/request.ts";
 import {formatDate} from "@/utils/dateUtils.ts";
+import {Plus} from "@element-plus/icons-vue";
 
 const id = ref<any>("")
 const isShow = ref(false)
 const tableData = ref<any>([]);
 const memberEditRef = ref<any>(null)
 const rowClick = (row: any) => {
-  id.value = row.id
+  id.value = row.memberInfo.id
   isShow.value = true
   nextTick(() => {
-    memberEditRef.value?.init(row.id)
+    memberEditRef.value?.init(id.value)
   })
 }
 const roleList = [
@@ -79,7 +128,7 @@ const roleList = [
 ]
 const init = (() => {
   isShow.value = false
-  post('organization/member/list ', {page: 1, size: 100}).then((res: any) => {
+  post('organization/member/list ', {page: page.value, size: pageSize.value}).then((res: any) => {
     tableData.value = res.list
     list()
   })
@@ -88,7 +137,6 @@ const deleteDoctor = (row: any) => {
   post('organization/member/list ', {id}).then((res: any) => {
     init()
   })
-  console.log(row)
 }
 const sectionList = ref<any>([]);
 const list = () => {
@@ -99,8 +147,45 @@ const list = () => {
 onMounted(() => {
   init()
 })
+const changePage = (val: any) => {
+  page.value = val
+};
+const pageSize = ref(20);
+const page = ref(1);
+const total = ref(0);
+
+const search = ref<any>({})
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base.scss";
 
+.container-wrapper {
+  background: #fff;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .title {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+
+  .table {
+    flex: 1;
+  }
+
+  .bottom {
+    height: 60px;
+    background-color: #FFF;
+    box-sizing: border-box;
+    padding: 10px;
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/settings/section.vue b/src/views/settings/section.vue
index 1988e68..245195b 100644
--- a/src/views/settings/section.vue
+++ b/src/views/settings/section.vue
@@ -1,31 +1,66 @@
 <template>
   <div class="container-wrapper">
-    <el-button type="primary" @click="isShow=true">新增</el-button>
-    <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
-      <el-table-column prop="bedCnt" label="病床数量" width="80"/>
-      <el-table-column prop="beginDate" label="开始日期" width="100"/>
-      <el-table-column prop="caty" label="类别"></el-table-column>
-      <el-table-column prop="code" label="编码" width="180"/>
-      <el-table-column prop="createDatetime" label="创建日期时间" width="120">
-        <template #default="scope">
-          {{ scope.row.createDatetime ? formatDate(scope.row.createDatetime) : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="creationDate" label="创建日期" width="120"/>
-      <el-table-column prop="delFlag" label="删除标志"/>
-      <el-table-column prop="drPsncnt" label="医生人数"/>
-      <el-table-column prop="endDate" label="结束日期" width="120"/>
-      <el-table-column prop="info" label="信息"/>
-      <el-table-column prop="medServScp" label="医疗服务范围"/>
-      <el-table-column prop="memo" label="备注"/>
-      <el-table-column prop="name" label="内科"/>
-      <el-table-column prop="nursPsncnt" label="护士人数"/>
-      <el-table-column prop="pharPsncnt" label="药剂师人数"/>
-      <el-table-column prop="resperName" label="负责人姓名"/>
-      <el-table-column prop="resperTel" label="负责人电话"/>
-      <el-table-column prop="socialBedCnt" label="社会病床数量"/>
-      <el-table-column prop="tecnPsncnt" label="技术人员人数"/>
-    </el-table>
+    <div class="title">
+      <div class="title-search">
+        <el-form
+            :model="search"
+            label-width="auto"
+            :inline="true"
+            class="demo-form-inline"
+        >
+          <el-form-item>
+            <el-input v-model="search.resperName" placeholder="负责人姓名" style="width: 200px"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-cascader :props="{ checkStrictly: true }" v-model="search.caty" :options="options" placeholder="科室类别"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="title-btn">
+        <el-button type="primary" @click="init()">查询</el-button>
+        <el-button type="primary" @click="search={}">重置</el-button>
+        <el-button type="primary" :icon="Plus" @click="isShow=true">新增</el-button>
+      </div>
+    </div>
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
+        <el-table-column prop="bedCnt" label="病床数量" width="80"/>
+        <el-table-column prop="beginDate" label="开始日期" width="100"/>
+        <el-table-column prop="caty" label="类别"></el-table-column>
+        <el-table-column prop="code" label="编码" width="180"/>
+        <el-table-column prop="createDatetime" label="创建日期时间" width="120">
+          <template #default="scope">
+            {{ scope.row.createDatetime ? formatDate(scope.row.createDatetime) : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="creationDate" label="创建日期" width="120"/>
+        <el-table-column prop="delFlag" label="删除标志"/>
+        <el-table-column prop="drPsncnt" label="医生人数"/>
+        <el-table-column prop="endDate" label="结束日期" width="120"/>
+        <el-table-column prop="info" label="信息"/>
+        <el-table-column prop="medServScp" label="医疗服务范围"/>
+        <el-table-column prop="memo" label="备注"/>
+        <el-table-column prop="name" label="内科"/>
+        <el-table-column prop="nursPsncnt" label="护士人数"/>
+        <el-table-column prop="pharPsncnt" label="药剂师人数"/>
+        <el-table-column prop="resperName" label="负责人姓名"/>
+        <el-table-column prop="resperTel" label="负责人电话"/>
+        <el-table-column prop="socialBedCnt" label="社会病床数量"/>
+        <el-table-column prop="tecnPsncnt" label="技术人员人数"/>
+      </el-table>
+    </div>
+    <div class="bottom">
+      <div class="page_btn_list">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="page"
+            :total="total"
+            @current-change="changePage"
+        />
+      </div>
+    </div>
   </div>
   <Mask :is-show="isShow" @close="init()" :height="570">
     <SectionEdit :id="id" ref="sectionRef" @onSubmit="init()"></SectionEdit>
@@ -38,6 +73,8 @@ import SectionEdit from "@/components/settings/SectionEdit.vue";
 import {post} from "@/utils/request.ts";
 import deptsObj from '@/assets/config/directory/depts.json'
 import {formatDate} from '@/utils/dateUtils.ts'
+import depts from "@/assets/config/directory/depts.json";
+import {Plus} from "@element-plus/icons-vue";
 
 const id = ref<any>("")
 const isShow = ref(false)
@@ -67,18 +104,72 @@ const rowClick = (row: any) => {
 onMounted(() => {
   init()
 })
+
+interface Dept {
+  [key: string]: string | { name: string; children: { [key: string]: string } };
+}
+
 const init = () => {
   isShow.value = false
-  post('organization/section/list', {page: 1, size: 10}).then((res: any) => {
+  post('organization/section/list', {page: page.value, size: pageSize.value}).then((res: any) => {
     tableData.value = res.list
     tableData.value.forEach((item: any) => {
-      item.caty = deptsObj[item.caty]
+      let dept: Dept = deptsObj
+      item.caty = dept[item.caty]
       console.log(item.caty)
     })
   })
 }
+const changePage = (val: any) => {
+  page.value = val
+};
+const pageSize = ref(20);
+const page = ref(1);
+const total = ref(0);
+const search = ref<any>({})
+const options = Object.entries(depts).map(([key, value]) => {
+  if (typeof value === 'string') {
+    return {value: key, label: value};
+  } else {
+    return {
+      value: key,
+      label: value.name,
+      children: Object.entries(value.children).map(([childKey, childValue]) => ({
+        value: childKey,
+        label: childValue,
+      })),
+    };
+  }
+});
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base.scss";
 
+.container-wrapper {
+  background: #fff;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .title {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .table {
+    flex: 1;
+  }
+
+  .bottom {
+    height: 60px;
+    background-color: #FFF;
+    box-sizing: border-box;
+    padding: 10px;
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>
\ No newline at end of file