测试组织结构

src/api/modules/system/user.js

@@ -2,13 +2,11 @@ import {httpApi} from "../../request/httpApi";
 
 export default {
     //列表数据
-    async deptList() {
+    async page(form) {
         return httpApi({
-            url: '/api/blade-system/dept/tree',
+            url: '/api/blade-user/page',
             method: 'get',
-            params: {
-                tenantId: useAppState.tenantId,
-            }
+            params: form
         }, false);
     },
     //删除

src/utils/tools.js

@@ -1,6 +1,6 @@
 //删除提醒
-export const delMessage = (cbk) => {
-    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
+export const delMessage = (cbk, title = '') => {
+    window?.$messageBox?.alert(title ? title : '请谨慎考虑后，确认是否需要删除？', '删除提醒', {
         showCancelButton: true,
         confirmButtonText: '确认删除',
         cancelButtonText: '取消',
@@ -47,11 +47,11 @@ export const getDiffDay=(date_1, date_2)=> {
     let myDate_2 = Date.parse(date_2)
     // 将两个日期都转换为毫秒格式，然后做差
     diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
-   
+
     totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
-    console.log(totalDays,'天数')    
-   
+    console.log(totalDays,'天数')
+
     return totalDays    // 相差的天数
   }
-   
+
 

src/views/system/components/HcTreeData.vue

@@ -1,23 +1,14 @@
 <template>
-    <ElTree ref="ElTreeRef"
-        :class="ui"
-        :data="treeDatas"
-        default-expand-all
-        :indent="0"
-        :props="ElTreeProps"
-        class="hc-tree-node tree-line"
-        highlight-current
-        node-key="id"
-        @node-click="ElTreeClick"
-    >
+    <ElTree ref="ElTreeRef" :class="ui" :data="treeDatas" default-expand-all :indent="0" :props="ElTreeProps"
+        class="hc-tree-node tree-line" highlight-current node-key="id" @node-click="ElTreeClick">
         <template #default="{ node, data }">
             <div class="data-custom-tree-node">
                 <div :class="node.level === 1?'level-name':''" class="label">
                     <span class="mr-5">{{ node.label }}</span>
-                    <HcIcon name="add-box" @click.stop="addClick(node, data)" style=" color: rgb(84, 188, 189);" v-if="data.children"/>
-                    <HcIcon name="edit" @click.stop="editClick(node, data)" style="margin-left: 8px;color: rgb(84, 188, 189);" />
-                    <HcIcon name="delete-bin" @click.stop="delClick(node, data)" style="margin-left: 8px;color: orange;" />
-                    <HcIcon name="vip-crown-2" @click.stop="authorityClick(node, data)" style="margin-left: 8px;color: purple;"/>
+                    <HcIcon class="hc-tree-node-icon-add" name="add-box" @click.stop="addClick(node, data)" v-if="node.level < 3"/>
+                    <HcIcon class="hc-tree-node-icon-edit" name="edit" @click.stop="editClick(node, data)"/>
+                    <HcIcon class="hc-tree-node-icon-del" name="delete-bin" @click.stop="delClick(node, data)" v-if="node.level !== 1"/>
+                    <HcIcon class="hc-tree-node-icon-vip" name="vip-crown-2" @click.stop="authorityClick(node, data)" v-if="node.level !== 1"/>
                 </div>
             </div>
         </template>
@@ -93,4 +84,21 @@ const authorityClick = (node, data) => {
 
 <style lang="scss" scoped>
 @import "~src/styles/app/tree.scss";
+.data-custom-tree-node {
+    .hc-tree-node-icon-add {
+        color: rgb(84, 188, 189);
+        margin-right: 8px;
+    }
+    .hc-tree-node-icon-edit {
+        color: rgb(84, 188, 189);
+    }
+    .hc-tree-node-icon-del {
+        margin-left: 8px;
+        color: orange;
+    }
+    .hc-tree-node-icon-vip {
+        margin-left: 8px;
+        color: purple;
+    }
+}
 </style>

src/views/system/organization.vue

@@ -1,102 +1,53 @@
 <template>
-    <HcCard :scrollbar="!isShowIcon && isedit">
+    <HcCard>
         <template #extra>
-            <el-button type="primary" @click="editClick" size="large" v-if="!isShowIcon && !isedit">
+            <el-button type="primary" @click="isedit = true" size="large" v-if="!isedit">
                 <span>编辑组织机构</span>
             </el-button>
-            <el-button type="primary" @click="goback" size="large" v-if="!isShowIcon && isedit">
+            <el-button type="primary" @click="isedit = false" size="large" v-if="isedit">
                 <span>返回上一级</span>
             </el-button>
         </template>
-
-        <div class="content-box" v-if="isShowIcon">
-            <HcIcon name="add-box" class="add_icon" @click="addClick"/>
-        </div>
-        <div class="h-full text-center" v-if="!isShowIcon && !isedit">
-            <vue3-tree-org :data="testdata" :horizontal="false" :collapsable="false" :node-draggable="false" draggable
+        <div class="h-full text-center" v-if="!isedit">
+            <vue3-tree-org :data="deptTreeData" :horizontal="false" :collapsable="false" :node-draggable="false" draggable
                 center :scalable="false" :default-expand-level="5" :define-menus="[]" disabled @on-node-click="onNodeClick">
                 <template v-slot="{node}">
                     <div class="hac-node-vue3-tree-org-label">{{ node.label }}</div>
                 </template>
             </vue3-tree-org>
         </div>
-        <div v-if="!isShowIcon&&isedit">
-            <div class="tree-box blue">
-                <el-scrollbar class="h-100p">
-                    <HcTreeData :datas="testdata" @menuTap="treeMenuTap"/>
-
-                    <el-tree
-                        class="tree-line1"
-                        :data="dataSource"
-                        node-key="id"
-                        default-expand-all
-                        :expand-on-click-node="false"
-                        v-if="false"
-                    >
-                        <template #default="{ node, data }">
-                        <span class="custom-tree-node">
-                                <span :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
-                            <span>
-                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"
-                                        v-if="data.children"/>
-                                <HcIcon name="edit" @click="addClick"
-                                        style="margin-left: 8px;color: rgb(84, 188, 189);"/>
-                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;"/>
-                                <HcIcon name="vip-crown-2" @click="authorityClick"
-                                        style="margin-left: 8px;color: purple;"/>
-                            </span>
-                        </span>
-
-                        </template>
-                    </el-tree>
-                </el-scrollbar>
-            </div>
+        <div class="h-full" v-if="isedit">
+            <el-scrollbar>
+                <HcTreeData :datas="deptTreeData" @menuTap="treeMenuTap"/>
+            </el-scrollbar>
         </div>
 
-        <HcDialog bgColor="#ffffff" isToBody :show="testModal" title="新增机构信息" @close="testModalClose"
-                  widths="70rem">
-            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto"
-                     size="large">
-
-                <el-form-item label="上级组织节点名称:" prop="topname">
-                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
-                        <el-option
-                            v-for="item in topMenuoptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
+        <HcDialog bgColor="#ffffff" isToBody :show="formModal" :title="formModalTitle"
+                  @save="formModalSave" @close="formModalClose" widths="26rem"
+        >
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" size="large">
+                <el-form-item label="上级组织节点名称:" prop="parentId">
+                    <el-input v-model="formModel.parentDeptName" placeholder="已为顶级节点" disabled/>
                 </el-form-item>
-
-
                 <el-form-item label="组织节点类别:" prop="type">
-                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
-                        <el-option
-                            v-for="item in topMenuoptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
+                    <el-select block v-model="formModel.type" disabled>
+                        <el-option label="公司" :value="1"/>
+                        <el-option label="部门" :value="2"/>
+                        <el-option label="岗位" :value="3"/>
                     </el-select>
                 </el-form-item>
-
-
-                <el-form-item label="组织节点名称:" prop="name">
-                    <el-input v-model="formModel.deptId" placeholder=""/>
+                <el-form-item label="组织节点名称:" prop="deptName">
+                    <el-input v-model="formModel.deptName"/>
                 </el-form-item>
-
-
             </el-form>
         </HcDialog>
-        <HcDialog bgColor="#ffffff" isToBody isTable :show="authorityModal" title="权限配置"
-                  @close="authorityModalClose" widths="60rem">
-            <el-tree
-                :props="props"
-                :data="autoritydata"
-                show-checkbox
-                @check-change="handleCheckChange"
-            />
+
+        <HcDialog bgColor="#ffffff" isToBody isTable :show="authModal" title="权限配置"
+                  @save="authModalSave" @close="authModalClose" widths="60rem"
+        >
+            <el-scrollbar>
+                <HcDataTree :h-props="treeProps" :datas="treeMenuNode"/>
+            </el-scrollbar>
         </HcDialog>
     </HcCard>
 
@@ -106,7 +57,12 @@
 import {onActivated, ref} from "vue";
 import mainApi from "~api/system/organization";
 import HcTreeData from "./components/HcTreeData.vue";
-import {getArrValue} from "js-fast-way";
+import {formValidate, getArrValue} from "js-fast-way";
+import menuApi from "~api/system/menu";
+import {delMessage} from "~uti/tools";
+
+//显示模式
+const isedit = ref(true)
 
 //页面被激活时
 onActivated(() => {
@@ -114,17 +70,14 @@ onActivated(() => {
 })
 
 //获取树数据
-const deptTreeData = ref([])
+const deptTreeData = ref({})
 const getTreeData = async () => {
     const {error, code, data} = await mainApi.deptList()
     if (!error && code === 200) {
-        const res = getArrValue(data)
-        console.log(res)
-        const testData = await setDeptTreeData(res)
-        console.log(testData)
-        //tableData.value =
+        const res = await setDeptTreeData(data)
+        deptTreeData.value = res[0]
     } else {
-        //tableData.value = []
+        deptTreeData.value = {}
     }
 }
 
@@ -139,364 +92,133 @@ const lavel3_style = {
 //遍历处理组织结构数据树
 //公司1，部门2，岗位3
 const setDeptTreeData = async (data) => {
-
+    let res = [], arr = getArrValue(data)
+    for (let i = 0; i < arr.length; i++) {
+        const {deptName, type, children} = arr[i]
+        const obj = {...arr[i], label: deptName, children: [],
+            style: type === 1 ? lavel1_style : type === 2 ? lavel2_style : lavel3_style
+        }
+        if (children && children.length > 0) {
+            obj.children = await setDeptTreeData(children)
+        }
+        res.push(obj)
+    }
+    return res
 }
 
+//树节点表单弹窗
+const formModal = ref(false)
+const formModalTitle = ref('')
 
-
-
-const isShowIcon = ref(false)
-const isedit = ref(false)
-const editClick = () => {
-    isedit.value = true
-}
-const addClick = () => {
-    testModal.value = true
-}
-const testModal = ref(false)
-
-//弹窗关闭
-const testModalClose = () => {
-    console.log('弹窗关闭')
-    testModal.value = false
-}
+//树节点表单
+const formRef = ref(null)
 const formModel = ref({})
 const formRules = {
-    topname: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入菜单名称"
-    },
-    name: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入路由地址"
-    },
-    type: {
-        required: true,
-        trigger: 'blur',
-        message: "请选择类型"
-    }
+    name: {required: true, trigger: 'blur', message: "请输入组织节点名称"}
 }
-const topMenuoptions = ref([])
 
-const delClick = (node, data) => {
-    console.log(node, 'node');
-    window?.$messageBox?.alert('您确定要注销[xxx] 的机构信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
-        showCancelButton: true,
-        confirmButtonText: '确认注销',
-        cancelButtonText: '取消',
-        type: 'warning',
-        callback: (action) => {
-            if (action === 'confirm') {
-                console.log(11111);
+//树节点的菜单点击事件
+const treeMenuTap = ({key, node, data}) => {
+    if (key === 'add') {
+        formModel.value = {
+            parentId: data.id,
+            parentDeptName: data.deptName,
+            //如果当前节点为顶级节点，则为部门类型，如果为部门节点，则为岗位类型
+            type: node.level === 1 ? 2 : node.level === 2 ? 3 : 0
+        }
+        const type = node.level === 1 ? '部门' : node.level === 2 ? '岗位' : '未知'
+        formModalTitle.value = '新增' + type + '信息'
+        formModal.value = true
+    } else if (key === 'edit') {
+        if (node.level > 1) {
+            const parent = node.parent.data;
+            formModel.value = {
+                parentDeptName: parent.deptName,
+                data
             }
+        } else {
+            formModel.value = data
         }
-    })
-}
-const authorityModal = ref(false)
-const authorityClick = () => {
-    authorityModal.value = true
-}
-const authorityModalClose = () => {
-    console.log('弹窗关闭')
-    authorityModal.value = false
-}
-const props = {
-    label: 'label',
-    children: 'children',
-}
-const autoritydata=ref([
-{
-    label: '项目管理',
-    children: [
-      {
-        label: '新增',
-        children: [
-          {
-            label: 'Level three 1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: '系统配置',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: '表单管理',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-])
-const goback = () => {
-    isedit.value = false
-}
-const handleCheckChange = (
-    data,
-    checked,
-    indeterminate
-) => {
-    console.log(data, checked, indeterminate)
+        const type = node.level === 1 ? '公司' : node.level === 2 ? '部门' : node.level === 3 ? '岗位' :'未知'
+        formModalTitle.value = '编辑' + type + '信息'
+        formModal.value = true
+    } else if (key === 'del') {
+        delMessage(() => {
+            delNodeClick(data)
+        }, '您确定要删除【' + data.deptName + '】的机构信息吗？一旦注销数据将彻底清除，请谨慎操作')
+    } else if (key === 'auth') {
+        authModalShow(data)
+    }
 }
 
-const loadNode = (node, resolve) => {
-    if (node.level === 0) {
-        return resolve([{name: 'region'}])
+//保存数据
+const formModalSave = async () => {
+    const isForm = await formValidate(formRef.value)
+    if (isForm) {
+        const {error, code, msg} = await mainApi.submit(formModel.value)
+        if (!error && code === 200) {
+            window?.$message?.success(msg)
+            getTreeData().then()
+            formModalClose()
+        } else {
+            window?.$message?.error(msg)
+        }
     }
-    if (node.level > 1) return resolve([])
-    setTimeout(() => {
-        const data = [
-            {
-                name: 'leaf',
-                leaf: true,
-            },
-            {
-                name: 'zone',
-            },
-        ]
+}
 
-        resolve(data)
-    }, 500)
+
+//弹窗关闭
+const formModalClose = () => {
+    formModal.value = false
+    formModalTitle.value = ''
+    formModel.value = {}
 }
 
+//删除节点
+const delNodeClick = async (data) => {
+    const {error, code, msg} = await mainApi.remove(data.id)
+    if (!error && code === 200) {
+        window?.$message?.success(msg)
+        getTreeData().then()
+    } else {
+        window?.$message?.error(msg)
+    }
+}
 
-const testdata = ref({
-    id: 1,
-    label: "总监办(常洪)",
-    style: lavel1_style,
-    children: [
-        {
-            id: 2,
-            label: '技术部(祝炜)',
-            style: lavel2_style,
-            children: [
-                {
-                    id: 6,
-                    label: '研发经理',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 14,
-                            label: '祝炜',
-                            style: lavel3_style,
-                        }
-                    ],
-                },
-                {
-                    id: 7,
-                    label: '产品经理',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 15,
-                            label: '豆海涛',
-                            style: lavel3_style,
-                        }
-                    ],
-                },
-                {
-                    id: 8,
-                    label: 'JAVA技术',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 16,
-                            label: '王文龙',
-                            style: lavel3_style,
-                        },
-                        {
-                            id: 17,
-                            label: '刘依程',
-                            style: lavel3_style,
-                        }
-                    ],
-                },
-                {
-                    id: 9,
-                    label: '前端技术',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 18,
-                            label: '杜英',
-                            style: lavel3_style,
-                        },
-                        {
-                            id: 19,
-                            label: '黄飞鸿',
-                            style: lavel3_style,
-                        }
-                    ],
-                },
-                {
-                    id: 10,
-                    label: '测试',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 18,
-                            label: '彭成田',
-                            style: lavel3_style,
-                        }
-                    ],
-                },
-            ],
-        },
-        {
-            id: 3,
-            label: '人事部(屈发青)',
-            style: lavel2_style,
-            children: [
-                {
-                    id: 11,
-                    label: '人事管理',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 19,
-                            label: '屈发青',
-                            style: lavel3_style,
-                        }
-                    ],
-                }
-            ],
-        },
-        {
-            id: 4,
-            label: '维护部(覃焕)',
-            style: lavel2_style,
-            children: [
-                {
-                    id: 12,
-                    label: '客服维护',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 20,
-                            label: '代潘',
-                            style: lavel3_style,
-                        },
-                        {
-                            id: 21,
-                            label: '陈佳',
-                            style: lavel3_style,
-                        },
-                        {
-                            id: 22,
-                            label: '张东珍',
-                            style: lavel3_style,
-                        }
-                    ],
-                }
-            ],
-        },
-        {
-            id: 5,
-            label: '业务部(覃焕)',
-            style: lavel2_style,
-            children: [
-                {
-                    id: 13,
-                    label: '业务实施',
-                    style: lavel3_style,
-                    children: [
-                        {
-                            id: 23,
-                            label: '覃焕',
-                            style: lavel3_style,
-                        },
-                        {
-                            id: 24,
-                            label: '黄飞洋',
-                            style: lavel3_style,
-                        },
-                    ],
-                }
-            ],
-        },
-    ]
+//权限配置
+const authModal = ref(false)
+const treeMenuNode = ref([])
+const treeProps = ref({
+    label: 'name',
+    children: 'children'
 })
 
-const onNodeClick = (e, data) => {
-    console.log(e, data)
+const authModalShow = (data) => {
+    treeMenuNode.value = []
+    authModal.value = true
+    getMenuData()
 }
 
-//树节点的菜单点击事件
-const treeMenuTap = ({key, node, data}) => {
-    if (key === 'add') {
-        addClick(data)
-    } else if (key === 'edit') {
-        editClick(data)
-    } else if (key === 'del') {
-        delClick(data)
-    } else if (key === 'auth') {
-        authorityClick(data)
+const getMenuData = async () => {
+    const {error, code, data} = await menuApi.lazyList({})
+    if (!error && code === 200) {
+        treeMenuNode.value = getArrValue(data)
+    } else {
+        treeMenuNode.value = []
     }
 }
-</script>
 
-<style lang="scss" scoped>
-@import "~src/styles/system/organization.scss";
-</style>
+//权限配置弹窗保存
+const authModalSave = () => {
 
-<style lang="scss">
-.content-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: calc(100vh - 386px);
-    text-align: center;
-    width: 100%;
-    color: rgb(84, 188, 189);
 }
-.content-box1 {
-    text-align: center;
-}
-.add_icon {
-    font-size: 8rem;
-    cursor: pointer;
 
+//权限配置弹窗关闭
+const authModalClose = () => {
+    authModal.value = false
 }
-.h-100p {
-    height: 100%;
-}
+</script>
 
-.tree-org-node__content .tree-org-node__inner {
-    margin: 0 2px;
-}
+<style lang="scss" scoped>
+@import "~src/styles/system/organization.scss";
 </style>

src/views/system/user.vue

@@ -2,12 +2,12 @@
     <HcCard>
         <template #header>
             <div class="w-40">
-                <el-select v-model="searchForm.postType" placeholder="选择岗位类型" clearable size="large">
+                <el-select v-model="searchForm.deptId" placeholder="选择岗位类型" clearable size="large">
                     <el-option v-for="item in postOptions" :key="item.value" :label="item['label']" :value="item['value']"/>
                 </el-select>
             </div>
             <div class="w-64 ml-3">
-                <el-input v-model="searchForm.name" size="large" placeholder="请输入名称搜索" clearable @keyup="keyUpEvent"/>
+                <el-input v-model="searchForm.realName" size="large" placeholder="请输入名称搜索" clearable @keyup="keyUpEvent"/>
             </div>
             <div class="ml-3">
                 <el-button type="primary" @click="searchClick" size="large">
@@ -118,33 +118,6 @@ onMounted(() => {
 })
 
 const value = ref('')
-const tableLoaing=ref(false)
-const getTableData=async()=>{
-    tableLoaing.value=true
-    //mainApi
-    /*const { error, code, data,msg } = await getSelectUserlist({
-       ...searchForm.value
-    })
-    tableLoaing.value=false
-    if (!error && code === 200) {
-        console.log(data,'data');
-        tableData.value = getArrValue(data['records'])
-        searchForm.value.total=data['total']
-    }
-    else {
-        window.$message?.warning(msg)
-    }*/
-}
-const searchForm = ref({
-    current: 1, size: 20, total: 0
-})
-
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
 const postOptions = ref([
     {label: '所有', value: '1'},
     {label: '财务', value: '2'},
@@ -160,24 +133,51 @@ const options = ref([
     {label: 'bb', value: '4'},
 ])
 
+const searchForm = ref({deptId: null, realName: '', current: 1, size: 20, total: 0})
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
 const searchClick = () => {
+    searchForm.value.current = 1
     getTableData()
 }
 const keyUpEvent = () => {
 
 }
+
+//表格数据
 const tableColumn = [
-    {key: 'dictName', name: '用户名称'},
-    {key: 'name', name: '账号ID'},
-    {key: 'name', name: '密码'},
-    {key: 'text', name: '所属部门'},
-    {key: 'text', name: '岗位'},
-    {key: 'text', name: '创建日期'},
-    {key: 'text', name: '启用状态'},
+    {key: 'name', name: '用户名称'},
+    {key: 'id', name: '账号ID'},
+    {key: 'password', name: '密码'},
+    {key: 'postName', name: '所属部门'},
+    {key: 'position', name: '岗位'},
+    {key: 'createTime', name: '创建日期'},
+    {key: 'status', name: '启用状态'},
     {key: 'action', name: '操作', width: 100}
 ]
-
 const tableData = ref([])
+
+//获取表格数据
+const tableLoaing = ref(false)
+const getTableData = async()=>{
+    tableLoaing.value = true
+    const { error, code, data } = await mainApi.page(searchForm.value)
+    tableLoaing.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+        searchForm.value.total = data['total']
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
+}
+
+
 const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows