Przeglądaj źródła

地图工具配置

XiaXxxxxx 2 lat temu
rodzic
commit
7a0e82e97f

+ 33 - 15
src/api/resource/map.ts

@@ -36,8 +36,26 @@ export function list() {
         defHttp.post({ url: Api.Login, params: formData, ...interfaceType })
             .then((r) => {
                 let result = r.result === '' ? {} : JSON.parse(r.result)
-                if(result?.items){
-                    result.items.forEach((item,index) => {
+                if (result?.items) {
+                    result.items.forEach((item, index) => {
+                        item['xh'] = index + 1
+                    })
+                }
+                resolve(result);
+            })
+    })
+}
+
+/**
+ * @description:获取地图资源列表
+ */
+export function mapList(params) {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ url: Api.Login, params: params, ...interfaceType })
+            .then((r) => {
+                let result = r.result === '' ? {} : JSON.parse(r.result)
+                if (result?.items) {
+                    result.items.forEach((item, index) => {
                         item['xh'] = index + 1
                     })
                 }
@@ -50,7 +68,7 @@ export function list() {
 /**
  * @description:获取资源类型字典
  */
- export function getServiceTypes() {
+export function getServiceTypes() {
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.sservicebase.SServicebaseProvider");
     formData.append("methodName", "getSServiceTypes");
@@ -69,7 +87,7 @@ export function list() {
 /**
  * @description:获取资源标签
  */
- export function queryServiceTags() {
+export function queryServiceTags() {
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.tags.TagsProvider");
     formData.append("methodName", "getAllByType");
@@ -88,7 +106,7 @@ export function list() {
 /**
  * @description:根据标签获取字典
  */
- export function queryDicsByName(name) {
+export function queryDicsByName(name) {
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.tags.TagsProvider");
     formData.append("methodName", "getAllByType");
@@ -107,7 +125,7 @@ export function list() {
 /**
  * @description:获取坐标系列表
  */
- export function queryCoors() {
+export function queryCoors() {
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.geomname.GeomNameCDProvider");
     formData.append("methodName", "getGeomNameList");
@@ -124,14 +142,14 @@ export function list() {
 /**
  * @description:新增地图资源
  */
- export function insertService(params) {
-    if(!params) return
+export function insertService(params) {
+    if (!params) return
     const str = JSON.stringify(params)
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
     formData.append("methodName", "insert");
     formData.append("args[]", session.getItem('tokenV2'));
-    formData.append("args[]",str)
+    formData.append("args[]", str)
     return new Promise<void>((resolve, reject) => {
         defHttp.post({ url: Api.Login, params: formData, ...interfaceType })
             .then((r) => {
@@ -144,14 +162,14 @@ export function list() {
 /**
  * @description:修改地图资源
  */
- export function updateService(params) {
-    if(!params) return
+export function updateService(params) {
+    if (!params) return
     const str = JSON.stringify(params)
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
     formData.append("methodName", "update");
     formData.append("args[]", session.getItem('tokenV2'));
-    formData.append("args[]",str)
+    formData.append("args[]", str)
     return new Promise<void>((resolve, reject) => {
         defHttp.post({ url: Api.Login, params: formData, ...interfaceType })
             .then((r) => {
@@ -164,13 +182,13 @@ export function list() {
 /**
  * @description:删除地图资源
  */
- export function deleteService(param) {
-    if(!param) return
+export function deleteService(param) {
+    if (!param) return
     const formData = new FormData();
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
     formData.append("methodName", "delete");
     formData.append("args[]", session.getItem('tokenV2'));
-    formData.append("args[]",param)
+    formData.append("args[]", param)
     return new Promise<void>((resolve, reject) => {
         defHttp.post({ url: Api.Login, params: formData, ...interfaceType })
             .then((r) => {

+ 64 - 61
src/views/dataAdmin/dataAdmin/mapUpload/index.vue

@@ -1,21 +1,12 @@
 <template>
   <div>
-    <BasicTable
-      :rowSelection="{ type: 'checkbox' }"
-      @register="registerTable"
-      :clickToRowSelect="false"
-    >
+    <BasicTable :rowSelection="{ type: 'checkbox' }" @register="registerTable" :clickToRowSelect="false">
       <template #toolbar>
         <Authority>
           <a-button type="primary" @click="handleCreate">新增地图</a-button>
         </Authority>
         <Authority>
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
+          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
             <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
           </Popconfirm>
         </Authority>
@@ -25,52 +16,47 @@
           @change="(checked: boolean) => statusChange(checked, record)" />
       </template> -->
       <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '浏览',
-              icon: '' /**clarity:note-edit-line*/,
-              onClick: handleViewMap.bind(null, record),
+        <TableAction :actions="[
+          {
+            label: '浏览',
+            icon: '' /**clarity:note-edit-line*/,
+            onClick: handleViewMap.bind(null, record),
+          },
+          {
+            label: '查看',
+            icon: '' /**clarity:note-edit-line*/,
+            onClick: handleView.bind(null, record),
+          },
+          {
+            label: '编辑',
+            icon: '' /**clarity:note-edit-line*/,
+            color: 'warning',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            icon: '' /**ant-design:delete-outlined'*/,
+            color: 'error',
+            ifShow: record.roleType != RoleEnum.SYS_ADMIN,
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
             },
-            {
-              label: '查看',
-              icon: '' /**clarity:note-edit-line*/,
-              onClick: handleView.bind(null, record),
-            },
-            {
-              label: '编辑',
-              icon: '' /**clarity:note-edit-line*/,
-              color: 'warning',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              label: '删除',
-              icon: '' /**ant-design:delete-outlined'*/,
-              color: 'error',
-              ifShow: record.roleType != RoleEnum.SYS_ADMIN,
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
+          },
+        ]" />
       </template>
       <template #pdate="{ record }">
-        <Tag
-          :color="'red'"
-        >
+        <Tag :color="'red'">
           {{
-           record.publishdate ? moment(record.publishdate).format('YYYY-MM-DD HH:mm:ss') : ''
+            record.publishdate ? moment(record.publishdate).format('YYYY-MM-DD HH:mm:ss') : ''
           }}
         </Tag>
       </template>
       <template #status="{ record }">
-        <Tag
-          :style="`color:${ record.status === 3 || record.status === 3 ? 'red' : '#05B069' };`"
-        >
+        <Tag :style="`color:${record.status === 3 || record.status === 3 ? 'red' : '#05B069'};`">
           {{
-           record.status === 0 ? '待审核' : (record.status === 1 ? '审核通过' : (record.status === 2 ? '审核不通过' : ( record.status === 3 ? '被驳回' : '未提交' )))
+            record.status === 0 ? '待审核' : (record.status === 1 ? '审核通过' : (record.status === 2 ? '审核不通过' : (record.status
+              === 3 ? '被驳回' : '未提交')))
           }}
         </Tag>
       </template>
@@ -80,7 +66,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick,onBeforeMount } from 'vue';
+import { defineComponent, nextTick, onBeforeMount,ref } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
 // import { useDrawer } from '/@/components/Drawer';
@@ -93,18 +79,32 @@ import { Authority } from '/@/components/Authority';
 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { Switch, Popconfirm } from 'ant-design-vue';
-import { list,deleteService } from '/@/api/resource/map';
-import Moment from 'moment'
+import { list, deleteService, mapList } from '/@/api/resource/map';
+import Moment from 'moment';
+import { session } from "/@/utils/Memory.js";
 
 export default defineComponent({
   name: 'RoleManagement',
   components: { BasicTable, MapDrawer, MapSourceModal, TableAction, Authority, Switch, Popconfirm },
   setup() {
+    const tagValue = ref('')
+    const getData = () => {
+      const formData = new FormData();
+      formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
+      formData.append("methodName", "getResourcePagedList");
+      formData.append("args[]", session.getItem('tokenV2'));
+      formData.append("args[]", `{"type":"MR","fields":{"DATA":["serviceid","servicename","servicetype","servicealiasname"],"METADATA":["publisher ","publishdate"]},"pageIndex":1,"pageSize":10, "tagValue":"${tagValue.value||""}" }`);
+      return new Promise((resolve) => {
+        mapList(formData).then((res) => {
+          resolve(res)
+        })
+      })
+    }
     //const [registerDrawer, { openDrawer }] = useDrawer();
     const [registerModal, { openModal }] = useModal();
     const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
       title: '地图资源列表',
-      api: list,
+      api: getData,
       columns,
       formConfig: {
         labelWidth: 100,
@@ -124,6 +124,9 @@ export default defineComponent({
       pagination: {
         hideOnSinglePage: false,
       },
+      handleSearchInfoFn: (t) => {
+        tagValue.value = t.resTag
+      }
     });
     const moment = Moment
     const { createMessage } = useMessage();
@@ -162,19 +165,19 @@ export default defineComponent({
       });
     }
 
-    function handleViewMap(record: Recordable){
-      window.open(`http://106.12.170.138:8080/onemapV5.0/mapview.html?${record.serviceid}`,'target',"")
+    function handleViewMap(record: Recordable) {
+      window.open(`http://106.12.170.138:8080/onemapV5.0/mapview.html?${record.serviceid}`, 'target', "")
     }
 
-    const handleDelete = async(record: Recordable) => {
-      if(record?.serviceid){
+    const handleDelete = async (record: Recordable) => {
+      if (record?.serviceid) {
         const res = await deleteService(record?.serviceid)
-        if(res?.status !== '-1'){
+        if (res?.status !== '-1') {
           reload();
-          createMessage.success('删除成功!',1)
+          createMessage.success('删除成功!', 1)
         }
-        else{
-          createMessage.error('删除失败!失败原因:'+res?.message,1)
+        else {
+          createMessage.error('删除失败!失败原因:' + res?.message, 1)
         }
       }
     }
@@ -207,7 +210,7 @@ export default defineComponent({
         reload();
       }
     };
-    onBeforeMount(async()=>{
+    onBeforeMount(async () => {
 
     })
 

+ 14 - 3
src/views/dataAdmin/dataAdmin/resourceCataloging/index.vue

@@ -39,11 +39,11 @@
                 </a-select>
               </a-col>
               <a-col :span="5">
-                资源名称:<a-input-search v-model:value="value" placeholder="支持名称搜索" style="width: 150px" @search="onSearch" />
+                资源名称:<a-input-search v-model:value="inputValue" placeholder="支持名称搜索" style="width: 150px" @search="onSearch" />
               </a-col>
               <a-col :span="4" style="display: flex;justify-content: flex-end;">
-                <a-button style="margin-right: 10px;" @click="">重置</a-button>
-                <a-button type="primary">查询</a-button>
+                <a-button style="margin-right: 10px;" @click="resetKeyWord">重置</a-button>
+                <a-button type="primary" @click="getKeyWordData">查询</a-button>
               </a-col>
             </a-row>
           </a-card>
@@ -281,6 +281,14 @@ export default defineComponent({
       })
     }
 
+    const inputValue = ref(null)
+    const getKeyWordData = ()=>{
+
+    }
+    const resetKeyWord = () => {
+      inputValue.value = ''
+    }
+
     // 坐标系下拉框处理函数
     const handleChange = value1 => {
       coordinateChangeValue.value = value1
@@ -456,6 +464,9 @@ export default defineComponent({
       cancleUseValue,
       cancleUsedData,
       cancelAssociateData,
+      inputValue,
+      getKeyWordData,
+      resetKeyWord
     };
   },
 

+ 5 - 0
src/views/systemAdmin/system/mapTools/baseConfig/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="tools">
+        基础配置
+    </div>
+</template>

+ 5 - 0
src/views/systemAdmin/system/mapTools/layer2d/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="tools">
+        二维图层
+    </div>
+</template>

+ 5 - 0
src/views/systemAdmin/system/mapTools/layer3d/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="tools">
+        三维图层
+    </div>
+</template>

+ 5 - 0
src/views/systemAdmin/system/mapTools/menus/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="tools">
+        菜单
+    </div>
+</template>

+ 420 - 0
src/views/systemAdmin/system/mapTools/tools/index.vue

@@ -0,0 +1,420 @@
+<template>
+    <div class="tools p-4">
+        <BasicTable @register="registerTable">
+            <template #toolbar>
+                <Button type="primary" @click="openDialog(null)">
+                    新增工具
+                </Button>
+                <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
+                    批量删除
+                </Button>
+            </template>
+            <template #func="{ record }">
+                <TableAction :actions="[
+                    {
+                        label: '',
+                        tooltip: '编辑',
+                        icon: 'ant-design:edit-outlined',
+                        onClick: openDialog.bind(null, record),
+                    },
+                    {
+                        label: '',
+                        tooltip: '删除',
+                        icon: 'ant-design:delete-outlined',
+                        onClick: onDelete.bind(null, record.id),
+                    },
+                ]" />
+            </template>
+        </BasicTable>
+    </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } from 'vue';
+// 导入表格组件,表格事件
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { Button } from 'ant-design-vue';
+
+import { message, Modal } from 'ant-design-vue';
+import moment from 'moment'
+import { session } from '/@/utils/Memory';
+
+export default defineComponent({
+    components: { BasicTable, TableAction, Button },
+    name: "tools",
+    setup() {
+        const toolsData = [
+            {
+                group: "常用工具",
+                isQuick: false,
+                label: "全图",
+                option: {},
+                idx: 0,
+                id: "418d4040-df24-4f44-a718-2d4c1729532a",
+                tip: "显示全图范围",
+                icon: "at-icon-quantu",
+                action: "zoomfull"
+            },
+            {
+                "group": "常用工具",
+                "isQuick": false,
+                "label": "环境设置",
+                "option": {},
+                "idx": 1,
+                "id": "418d4040-df24-4f44-a718-2d4c1720032a",
+                "tip": "环境设置",
+                "icon": "at-icon-quanjingtu",
+                "action": "envConfig"
+            },
+            {
+                "action": "lookdown3D",
+                "label": "俯视",
+                "option": {},
+                "icon": "at-icon-fushi",
+                "idx": 2,
+                "group": "常用工具",
+                "isQuick": true,
+                "id": "7a3e12c5-e39b-4466-bbf7-c7f38e691ca7",
+                "tip": "俯视看图,仰角-90°"
+            },
+            {
+                "idx": 3,
+                "icon": "at-icon-zhengbei",
+                "isQuick": false,
+                "action": "looknorth3D",
+                "label": "正北",
+                "tip": "朝正北看图,方位角为0°",
+                "option": {},
+                "id": "3f4bc0ec-20fa-4ec5-856a-48b7ec1997f0",
+                "group": "常用工具"
+            },
+            {
+                "label": "量长度",
+                "option": {
+                    "measureType": "length"
+                },
+                "idx": 16,
+                "icon": "at-icon-liangchangdu",
+                "isQuick": false,
+                "id": "1b136e85-159d-4d01-90f8-3f1e8b545898",
+                "action": "MeasureAction",
+                "group": "测量/多屏",
+                "tip": "测量长度"
+            },
+            {
+                "tip": "测量高度",
+                "icon": "at-icon-lianggaodu",
+                "label": "量高度",
+                "group": "测量/多屏",
+                "option": {
+                    "measureType": "height"
+                },
+                "idx": 17,
+                "isQuick": false,
+                "action": "MeasureAction",
+                "id": "2a894bf2-7d7e-44fc-ba6e-219135a57741"
+            },
+            {
+                "icon": "at-icon-liangmianji",
+                "tip": "测量面积",
+                "isQuick": false,
+                "label": "量面积",
+                "idx": 18,
+                "group": "测量/多屏",
+                "option": {
+                    "measureType": "area"
+                },
+                "id": "e2a2050f-3822-4bbe-83fa-34991790e058",
+                "action": "MeasureAction"
+            },
+            {
+                "group": "测量/多屏",
+                "label": "双屏",
+                "isQuick": true,
+                "idx": 19,
+                "tip": "两屏对比",
+                "icon": "at-icon-liangping",
+                "id": "d34d9973-2841-4c4b-8d1b-161b41ce57c9",
+                "option": {
+                    "screenNum": 2
+                },
+                "action": "AttachedMapAction"
+            },
+            {
+                "option": {
+                    "screenNum": 3
+                },
+                "tip": "三屏对比",
+                "action": "AttachedMapAction",
+                "idx": 20,
+                "group": "测量/多屏",
+                "label": "三屏",
+                "id": "0bedfcc9-91a1-4e57-939c-af1506097a94",
+                "icon": "at-icon-sanping",
+                "isQuick": false
+            },
+            {
+                "group": "测量/多屏",
+                "icon": "at-icon-siping",
+                "id": "4c56a30b-e82f-4d03-b09c-5c73911e11b7",
+                "label": "四屏",
+                "option": {
+                    "screenNum": 4
+                },
+                "isQuick": false,
+                "tip": "四屏对比",
+                "action": "AttachedMapAction",
+                "idx": 21
+            },
+            {
+                "id": "4342fbea-6e6e-4e9b-ac1e-730b8abc02b6",
+                "idx": 22,
+                "action": "DrawAction",
+                "group": "绘制工具",
+                "option": {
+                    "drawType": "point"
+                },
+                "tip": "绘制点",
+                "isQuick": false,
+                "label": "绘点",
+                "icon": "at-icon-huizhidian"
+            },
+            {
+                "idx": 23,
+                "icon": "at-icon-huizhixian",
+                "isQuick": false,
+                "label": "绘线",
+                "tip": "绘制线",
+                "id": "0f3e694b-df62-4fa0-96d1-1a1dfbc1ec14",
+                "action": "DrawAction",
+                "option": {
+                    "drawType": "polyline"
+                },
+                "group": "绘制工具"
+            },
+            {
+                "action": "DrawAction",
+                "isQuick": true,
+                "option": {
+                    "drawType": "polygon"
+                },
+                "idx": 24,
+                "group": "绘制工具",
+                "label": "绘面",
+                "tip": "绘制多边形",
+                "icon": "at-icon-huizhimian1",
+                "id": "34498b42-a0a6-4388-b099-e0b7ac8515db"
+            },
+            {
+                "group": "绘制工具",
+                "icon": "at-icon-huizhijuxing",
+                "option": {
+                    "drawType": "extent"
+                },
+                "tip": "绘制矩形",
+                "isQuick": false,
+                "idx": 25,
+                "action": "DrawAction",
+                "label": "绘矩形",
+                "id": "c00f16b2-29b2-4f5a-90b5-f27185785456"
+            },
+            {
+                "icon": "at-icon-huizhiyuan",
+                "label": "绘圆",
+                "isQuick": false,
+                "idx": 26,
+                "option": {
+                    "drawType": "circle"
+                },
+                "id": "4057f545-219d-4e1a-a6d9-4c0145123cfe",
+                "tip": "绘制圆形",
+                "action": "DrawAction",
+                "group": "绘制工具"
+            },
+            {
+                "id": "fd585e8d-a9e8-4de9-b13a-de17350459ec",
+                "option": {},
+                "label": "出图",
+                "isQuick": false,
+                "icon": "at-icon-tupian",
+                "tip": "导出当前地图为图片",
+                "idx": 32,
+                "group": "其他工具",
+                "action": "ExportImgAction"
+            },
+            {
+                "option": {},
+                "id": "a05acc83-4859-49fe-a12d-02bf154cc7ee",
+                "tip": "打印当前地图",
+                "action": "PrintAction",
+                "group": "其他工具",
+                "idx": 33,
+                "isQuick": false,
+                "label": "打印",
+                "icon": "at-icon-dayin"
+            },
+            {
+                "group": "其他工具",
+                "option": {},
+                "icon": "at-icon-huanchongfenxi",
+                "action": "BufferPointAction",
+                "tip": "缓冲绘制图形进行分析",
+                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa8",
+                "label": "点缓冲",
+                "idx": 35,
+                "isQuick": false
+            },
+            {
+                "group": "其他工具",
+                "option": {},
+                "icon": "at-icon-minus",
+                "action": "BufferLineAction",
+                "tip": "缓冲绘制图形进行分析",
+                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa4",
+                "label": "线缓冲",
+                "idx": 35,
+                "isQuick": false
+            },
+            {
+                "group": "其他工具",
+                "option": {},
+                "icon": "at-icon-icon_duobianxing",
+                "action": "BufferPolygonAction",
+                "tip": "缓冲绘制图形进行分析",
+                "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efb4",
+                "label": "面缓冲",
+                "idx": 35,
+                "isQuick": false
+            },
+            {
+                "isQuick": true,
+                "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
+                "option": {},
+                "group": "其他工具",
+                "tip": "清除缓冲分析",
+                "icon": "at-icon-qingchu1",
+                "idx": 36,
+                "action": "ClearBufferAction",
+                "label": "清除缓冲"
+            },
+            {
+                "isQuick": true,
+                "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
+                "option": {},
+                "group": "常用工具",
+                "tip": "清除所有绘制",
+                "icon": "at-icon-qingchu1",
+                "idx": 37,
+                "action": "ClearDrawAction",
+                "label": "清除"
+            },
+            {
+                "option": {
+                    "data": [
+                        {
+                            "wkid": "EPSG:4525",
+                            "name": "国家2000高斯投影3°分带37°带"
+                        }
+                    ]
+                },
+                "label": "定位",
+                "isQuick": false,
+                "id": "b4940bbe-ca14-497c-b51f-726744db787b",
+                "tip": "定位到输入的位置",
+                "icon": "at-icon-dingwei",
+                "group": "常用工具",
+                "action": "MapToPointAction",
+                "idx": 38
+            }
+        ]
+        const columns = [
+            {
+                title: '分组名称',
+                dataIndex: 'group',
+                key: 'group',
+                align: 'center'
+            },
+            {
+                title: 'id',
+                dataIndex: 'id',
+                key: 'id',
+                align: 'center'
+            },
+            {
+                title: '显示名称',
+                dataIndex: 'label',
+                key: 'label',
+                align: 'center'
+            },
+            {
+                title: '提示文字',
+                dataIndex: 'tip',
+                key: 'tip',
+                align: 'center'
+            },
+            {
+                title: '图标',
+                dataIndex: 'icon',
+                key: 'icon',
+                align: 'center'
+            },
+            {
+                title: '功能',
+                dataIndex: 'action',
+                key: 'action',
+                align: 'center'
+            }
+        ]
+        const openDialog = () => {
+
+        }
+        const onDelete = () => {
+
+        }
+        //判断是否选中数据
+        const hasSelected = computed(() => {
+            const rowSelection = getRowSelection();
+            return !rowSelection.selectedRowKeys?.length;
+        });
+        //注册tag表格
+        const [
+            registerTable,
+            { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys }
+        ] = useTable({
+            title: '工具列表', //'菜单列表'
+            // api: getTagsData, //加载数据
+            dataSource: toolsData,
+            columns: columns,
+            useSearchForm: false,     //开启搜索区域
+            bordered: true,
+            showTableSetting: true,  // 显示表格设置
+            tableSetting: { fullScreen: false },
+            showIndexColumn: true,
+            pagination: {
+                // pageSize: 10,
+                hideOnSinglePage: false
+            },
+            rowKey: (record) => record.id,
+            actionColumn: {
+                width: 100,
+                title: '操作',
+                dataIndex: 'func',
+                slots: { customRender: 'func' },
+            },
+            rowSelection: {
+                type: 'checkbox',
+            },
+        });
+        return {
+            hasSelected,
+            registerTable,
+            reload,
+            getRowSelection,
+            getSelectRowKeys,
+            setSelectedRowKeys,
+            openDialog,
+            onDelete
+        }
+    }
+})
+</script>