组件工具入库状态和二维图层管理

src/api/dataAdmin/assembly.ts

@@ -52,33 +52,64 @@ export function list(text) {
             })
     })
 }
+// interfaceName:antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider
+// methodName:getRSResourceList
+// args[]:eyJrZXlJZCI6IjIwMjMtMTAtMDkiLCJzdGF0dXMiOiIwIn0.eyJsb2dpbkNvZGUiOiJBRE1JTjIiLCJhcHBrZXkiOiJzcGFjZSIsImV4cCI6IjIwMjMtMTAtMDkgMTk6MTY6MjcifQ.YTA14qTcT8rE9VsOSXbJB6LCdUbToih-tLdHg9OslJNGNnmCr6jk9DaTukRAv3TWG7k6JBahE-EUFH3R1rYh93ioj2atMFkfSM_kava7HjPz0qnwipVkgX0yqjs02I7n8UBGavGXSTOgcnyQlMYWGF9T7XOMkxEeZaUTlqyE3BXUOMbN6AsyNd5rfodBpW8IluydBEaANDAsLu5a4YyCeKaCpG8GKZ8iAanrEBjuDEjFkXMaHl-9UciULvajXK494AjU1VxO9cSe_mMtuMgaEMLCX-QzYLh0rfgvtd6J4E8ARuO-bEWkjvgqGhHb8sKD1v2HNpk5Ixu18g4rThfT4w
+// args[]:{"pagesize":12,"tag":"1","userid":"27AF004A-8BDN-885T-30FU-89DE3388762B","SR":{"index":0,"total":0,"filterField":"SERVICETYPE,SERVICENAME,DESCRIPTION,UPDATEDATE"},"keywords":"","type":"SR","isShowUnLinked":true,"text":""}
+//27AF004A-8BDN-885T-30FU-89DE3388762B
 
+
+/**
+ * @description:获取审核通过的组件
+ */
+export function listApproved2(text: any) {
+    const formData = new FormData();
+    formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
+    formData.append("methodName", "getRSResourceList");
+    formData.append("args[]", session.getItem('tokenV2'));
+    formData.append("args[]", `{"pagesize":10000,"tag":"1","userid":"${session.getItem('userId')}","SR":{"index":0,"total":0,"filterField":"SERVICETYPE,SERVICENAME,DESCRIPTION,UPDATEDATE"},"keywords":"${text && text.key || ''}","type":"SR","isShowUnLinked":true,"text":""}`);
+    return new Promise<void>((resolve, reject) => {
+        defHttp.post({ url: Api.CallProvider, params: formData, ...interfaceType })
+            .then((r) => {
+                var e = r.result ? JSON.parse(r.result) : [];
+                resolve(e.items);
+            })
+    })
+}
 /**
  * @description:获取审核通过的组件
  */
-export function listApproved(text) {
+export async function listApproved(text) {
+    var info = await listApproved2()
     const formData = new FormData();
     var str = '';
-    if (text && text.key) {
-        str = `{ 'type': 'SR', 'servicetype': 'WidgetService',text:'${text.key}' }`
+    if (text) {
+        str = `{ 'type': 'SR', 'servicetype': 'WidgetService',filterValue:'${text}','status':'1' }`
     } else {
         str = `{ 'type': 'SR', 'servicetype': 'WidgetService','status':'1'}`
-        // str = `{ 'type': 'SR', 'servicetype': 'WidgetService'}`
     }
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
-    formData.append("methodName", "getResourceList");
+    formData.append("methodName", "getResourceList2");
     formData.append("args[]", session.getItem('tokenV2'));
     formData.append("args[]", str);
     return new Promise<void>((resolve, reject) => {
         defHttp.post({ url: Api.CallProvider, params: formData, ...interfaceType })
             .then((r) => {
                 var e = r.result ? JSON.parse(r.result) : [];
+                if (info) {
+                    for (var i = 0; i < e.length; i++) {
+                        for (var j = 0; j < info.length; j++) {
+                            if (e[i].serviceid == info[j].SERVICEID) {
+                                e[i].SFJRSQK = info[j].SFJRSQK;
+                            }
+                        }
+                    }
+                }
                 resolve(e);
             })
     })
 }
 
-
 /**
  * @description:查询已经加入到申请库中的组件
  */

src/api/resource/map.ts

@@ -54,7 +54,15 @@ export function listPage(params) {
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
     formData.append("methodName", "getResourcePagedList");
     formData.append("args[]", session.getItem('tokenV2'));
-    formData.append("args[]", `{"type":"${params.type}","pageIndex":${params.page},"pageSize":${params.pageSize}}`);
+    var obj = {
+        type: params.type,
+        pageIndex: params.page,
+        pageSize: params.pageSize,
+    }
+    if (params.keywork) obj.filterValue = params.keywork;
+    if (params.checkStatus != null && params.checkStatus != undefined) obj.status = params.checkStatus;
+
+    formData.append("args[]", JSON.stringify(obj));
     return new Promise<void>((resolve, reject) => {
         defHttp.post({ url: Api.Login, params: formData, ...interfaceType })
             .then((r) => {

src/api/twoAndThree/menu.ts

@@ -5,6 +5,9 @@ import { RoleEnum } from '/@/enums/roleEnum';
 
 enum Api {
   UpdateMenu = '/xld-2And3/updateMenu',
+  UpdateLayer2d = '/xld-2And3/updateLayer2d',
+  SaveOneLayer2d = '/xld-2And3/saveOneLayer2d',
+  RemoveLayer2d = '/xld-2And3/removeLayer2d',
   GetMenuList = '/xld-2And3/findAllMenu',
   RemoveMenu = '/xld-2And3/removeMenu',
   SysAdminMenuList = '/admin/me/menus',
@@ -36,6 +39,50 @@ export const getMenuList = () => {
   }
 };
 
+/**
+ * @description: 跟新二维图层信息
+ */
+export function updateLayer2d(params, _id) {
+  console.log(params);
+  return defHttp.post({
+    url: Api.UpdateLayer2d,
+    ...locationType,
+    data: {
+      id: _id,
+      data: params
+    },
+  });
+}
+
+
+/**
+ * @description: 跟新二维图层信息
+ */
+export function saveOneLayer2d(params) {
+  return defHttp.post({
+    url: Api.SaveOneLayer2d,
+    ...locationType,
+    data: {
+      layer: params
+    },
+  });
+}
+
+/**
+ * @description: 删除二维图层
+ */
+export function removeLayer2d(params) {
+  return defHttp.post({
+    url: Api.RemoveLayer2d,
+    ...locationType,
+    data: {
+      id: params
+    },
+  });
+}
+
+
+
 /**
  * @description: 跟新按钮状态
  */
@@ -44,14 +91,10 @@ export function saveMenuApi(params, mode = 'modal') {
   return defHttp.post({
     url: Api.UpdateMenu,
     ...locationType,
-    // data: params.id,
     data: {
       id: params.id,
       menu: params
     },
-    // headers: {
-    //   'Content-Type': 'application/json;charset=UTF-8'
-    // },
   });
 }
 

src/views/assembly/index.vue

@@ -34,13 +34,6 @@ export default defineComponent({
     const action = ref(-1)
     const actionName = ref('');
     var assemblyType = ref({
-      // '地图基础功能': [],
-      // '底图和模型加载': [],
-      // '覆盖物': [],
-      // '测量工具': [],
-      // '绘制工具': [],
-      // '空间分析': [],
-      // '天气特效': [],
       '地图浏览工具': [],
       '服务加载工具': [],
       'GIS功能工具': [],
@@ -54,16 +47,14 @@ export default defineComponent({
     function getDataList(key) {
       listApproved(key).then(res => {
         if (res && res.length) {
-          var list = [];
+          menu.value = {};
           res.map(i => {
             if (!menu.value[i.source] && i.source) menu.value[i.source] = [];
-            if (i.source) menu.value[i.source].push(i), list.push(i);
+            if (i.source) menu.value[i.source].push(i);
           })
           for (var i in assemblyType.value) {
             assemblyType.value[i] = menu.value[i];
           }
-          // eventBus.emit('assemblylist', list)
-          console.log(assemblyType.value)
           eventBus.emit('assemblylist', assemblyType.value)
         }
       })

src/views/assembly/item/AssemblyData.vue

@@ -3,19 +3,6 @@
   <div>
     <div class="datacenter-right">
       <div class="resource_list" id="map_list">
-        <!-- <div v-for="(i, k) in list" :key="k" class="item">
-          <div><img :src="i.url" srcset=""></div>
-          <b>{{ i.servicename }}</b>
-          <p>
-            <span><a :href="[`../../mapview.html?onlineIde_${i.servicealiasname}`]" target="_blank"
-                rel="noopener noreferrer">浏览</a></span>
-            <span>详情</span>
-            <span>加入库</span>
-            <span>已入库</span>
-          </p>
-        </div> -->
-
-
         <div v-for="(j, key, index) in list" :sjl="key" v-show="(actionName == key || !actionName)" :key="index"
           style="clear: both;">
           <p class="itemName" :id="key" v-if="j && j.length">{{ key }}</p>
@@ -26,8 +13,9 @@
               <span><a :href="[`./mapview.html?onlineIde_${i.servicealiasname}`]" target="_blank"
                   rel="noopener noreferrer">浏览</a></span>
               <span @click="showDrawer(i)">详细</span>
-              <span v-if="i.consumetype == 0" @click="applyWay(i)">加入申请库</span>
-              <span v-if="i.consumetype == 1">已加入申请库</span>
+              <span @click="applyWay(i)" v-if="i.SFJRSQK == '未加入'">{{ i.SFJRSQK }}申请库</span>
+              <span v-else style="cursor: not-allowed;background: rgb(232, 232, 232) !important;">{{
+                i.SFJRSQK }}申请库</span>
             </p>
           </div>
         </div>
@@ -53,7 +41,6 @@
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, ref, defineProps, watch, reactive, getCurrentInstance } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { columns, searchFormSchema } from './sms.data';
 import { Popconfirm, Tooltip } from 'ant-design-vue';
 import { Authority } from '/@/components/Authority';
 import { platList, img, apply } from '/@/api/resource/plat';
@@ -85,7 +72,6 @@ export default defineComponent({
     // });
     const list = ref([]);
     const actionName = ref('');
-    console.log("list", list);
     eventBus.on('assemblylist', async (i) => {
       for (var j in i) {
         if (i[j]) {

src/views/resource/examine/map.data.ts

@@ -1,7 +1,7 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { RoleEnum } from '/@/enums/roleEnum';
-import { getServiceTypes,queryServiceTags,queryDicsByName,queryCoors } from '/@/api/resource/map';
+import { getServiceTypes, queryServiceTags, queryDicsByName, queryCoors } from '/@/api/resource/map';
 
 const resTag = await queryServiceTags()
 let listTag = []
@@ -42,11 +42,11 @@ export const EPSGCodes = await queryDicsByName('EPSG code')
 
 
 const checkStatus = [
-  { label: '未提交', value: 1 },
+  { label: '未提交', value: 3 },
   { label: '审核中', value: 2 },
-  { label: '审核不通过', value: 3 },
+  { label: '审核不通过', value: 0 },
   { label: '被驳回', value: 4 },
-  { label: '审核通过', value: 5 },
+  { label: '审核通过', value: 1 },
 ]
 export enum KeysTypeEnum {
   DISABLED = 'disabled',
@@ -184,7 +184,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'publisher',
     width: 100,
   },
-  
+
   {
     title: '当前环节',
     dataIndex: 'curLink',

src/views/systemAdmin/system/mapTools/layer2d/Modal.vue

@@ -0,0 +1,80 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="40%" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './config.data';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { updateLayer2d, saveOneLayer2d } from '/@/api/twoAndThree/menu';
+import { metaModel } from '/@/api/system/model/menuModel';
+
+export default defineComponent({
+  name: 'MenuDrawer',
+  components: { BasicForm, BasicModal },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+    var _id = null;
+
+    const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+      labelWidth: 100,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
+
+    //默认传递页面数据
+    const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      resetFields();
+      setModalProps({ confirmLoading: false });
+      isUpdate.value = !!data?.isUpdate;
+
+      //如果是编辑操作，设置页面数据
+      if (unref(isUpdate)) {
+        console.log("编辑:", data)
+        //为表单赋值
+        if (data.record.view) data.record.view = JSON.stringify(data.record.view)
+        if (data.record.subdomains) data.record.subdomains = JSON.stringify(data.record.subdomains)
+        _id = data.record._id;
+        setFieldsValue({
+          ...data.record,
+        });
+      }
+    });
+
+    //得到页面标题
+    const getTitle = computed(() => !unref(isUpdate) ? '创建图层' : '编辑图层');
+
+    //提交按钮
+    async function handleSubmit() {
+      try {
+        const values = await validate();
+        setModalProps({ confirmLoading: true });
+        console.log("values:", values)
+
+        if (values.view) values.view = JSON.parse(values.view);
+        if (values.subdomains) values.subdomains = JSON.parse(values.subdomains);
+        if (values.title) values.name = values.title;
+
+
+        if (unref(isUpdate)) {
+          // updateMenu
+          await updateLayer2d(values, unref(isUpdate) ? _id : null);
+        } else {
+          // saveMenu
+          await saveOneLayer2d(values);
+        }
+        closeModal(); //关闭侧框
+        emit('success');
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+
+    return { registerDrawer, registerForm, getTitle, handleSubmit };
+  },
+});
+</script>

src/views/systemAdmin/system/mapTools/layer2d/config.data.ts

@@ -0,0 +1,147 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { Icon } from '/@/components/Icon';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+//二维图层管理表格列
+export const columns = [
+    {
+        title: '底图名称',
+        dataIndex: 'title',
+    },
+    {
+        title: '底图标识',
+        dataIndex: 'id',
+    },
+    {
+        title: '底图类型',
+        dataIndex: 'type',
+        slots: { customRender: 'type' },
+    },
+    {
+        title: '坐标编码',
+        dataIndex: 'epsg',
+    },
+    {
+        title: '底图地址',
+        dataIndex: 'url',
+    },
+    {
+        title: '显示隐藏',
+        dataIndex: 'show',
+        slots: { customRender: 'show' },
+    },
+    // {
+    //     title: '层级范围',
+    //     dataIndex: 'level',
+    //     slots: { customRender: 'level' },
+    // }
+
+    // {
+    //     title: '审核状态',
+    //     dataIndex: 'status',
+    //     width: 110,
+    //     slots: { customRender: 'status' },
+    //   },
+];
+
+
+//----------------------------------新增、编辑----------------------------------------------------------
+export const formSchema: FormSchema[] = [
+    {
+        field: 'title',
+        label: '底图名称',
+        component: 'Input',
+        required: true,
+        componentProps: {
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'id',
+        label: '底图标识',
+        component: 'Input',
+        required: true,
+        componentProps: {
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'epsg',
+        label: '坐标编码',
+        component: 'Input',
+        componentProps: {
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'index',
+        label: '图层层级',
+        component: 'Input',
+        componentProps: {
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'show',
+        label: '显示隐藏',
+        component: 'RadioButtonGroup',
+        defaultValue: true,
+        componentProps: {
+            options: [
+                { label: '显示', value: true },
+                { label: '隐藏', value: false },
+            ],
+        },
+    },
+    {
+        field: 'type',
+        label: '底图类型',
+        required: true,
+        component: 'Select',
+        defaultValue: 'SUPRE',
+        componentProps: {
+            options: [
+                { label: '超图底图', value: 'SUPRE' },
+                { label: '超图三维', value: 'SUPRE_3D' },
+                { label: '高德底图', value: 'GD' },
+                { label: '百度底图', value: 'BD' },
+                { label: '天地图', value: 'TDT' },
+            ],
+        },
+        colProps: { span: 6 },
+    },
+    {
+        field: 'subdomains',
+        label: '地图子域',
+        component: 'Input',
+        componentProps: {
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'url',
+        label: '底图地址',
+        component: 'InputTextArea',
+        required: true,
+        colProps: { span: 24 },
+        componentProps: {
+            rows: 8,
+            maxLength: 255,
+        },
+    },
+    {
+        field: 'view',
+        label: '观察视角',
+        component: 'InputTextArea',
+        colProps: { span: 24 },
+        componentProps: {
+            rows: 6,
+            maxLength: 255,
+        },
+    },
+
+];

src/views/systemAdmin/system/mapTools/layer2d/index.vue

@@ -3,16 +3,24 @@
         <div class="layer2d-body">
             <BasicTable @register="registerTable">
                 <template #toolbar>
-                    <Button type="primary" @click="openDialog(null)">
+                    <Button type="primary" @click="handleCreate(null)">
                         新增图层
                     </Button>
-                    <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
+                    <!-- <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
                         批量删除
-                    </Button>
+                    </Button> -->
                 </template>
                 <template #level="{ record }">
                     <div>{{ record.minimumLevel }}-{{ record.maximumLevel }}</div>
                 </template>
+                <template #show="{ record }">
+                    <div>{{ record.show ? '显示' : '隐藏' }}</div>
+                </template>
+                <template #type="{ record }">
+                    <div>{{ record.type == 'GD' ? '高德底图' : record.type == 'BD' ? '百度底图' : record.type == 'TDT' ? '天地图' :
+                        record.type == 'SUPER_3D' ? '超图三维' : '超图底图'
+                    }}</div>
+                </template>
                 <template #func="{ record }">
                     <TableAction :actions="[
                         {
@@ -35,6 +43,8 @@
                 </template>
             </BasicTable>
         </div>
+        <!-- 弹出框 -->
+        <Modal @register="registerDrawer" @success="handleSuccess" />
     </div>
 </template>
 
@@ -43,32 +53,33 @@ import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } fr
 // 导入表格组件，表格事件
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { Button } from 'ant-design-vue';
-import { message, Modal } from 'ant-design-vue';
+import { message, notification } from 'ant-design-vue';
 import moment from 'moment'
 import { session } from '/@/utils/Memory';
 import { get2dLayers } from '/@/api/sys/mapTools';
-import { columns } from "./layer2d.data";
+import { removeLayer2d } from '/@/api/twoAndThree/menu';
+import { columns } from "./config.data";
+// 加载自定义侧边弹出框 组件
+import { useModal } from '/@/components/Modal';
+// 导入子页面【新增、修改】
+import Modal from './Modal.vue';
+import { isArray } from '/@/utils/is';
+
 
 export default defineComponent({
-    components: { BasicTable, TableAction, Button },
+    components: { BasicTable, TableAction, Button, Modal },
     name: "tools",
     setup() {
-        const handleEdit = () => {
-
-        }
-        const handleDelete = () => {
-
-        }
-        const delAllData = () => {
+        const [registerDrawer, { openModal }] = useModal(); //使用弹出框
 
-        }
         const getAllData = () => {
             return new Promise((resolve) => {
                 get2dLayers().then(res => {
                     if (res.code === 200 && res.data.length) {
                         resolve(res.data)
                     } else {
-                        message.error('暂无工具数据')
+                        message.error('暂无图层数据！')
+                        resolve(false)
                     }
                 })
             })
@@ -112,7 +123,58 @@ export default defineComponent({
                 type: 'checkbox',
             },
         });
+
+        /**
+         * 操作成功，重新加载页面
+         */
+        function handleSuccess() {
+            reload();
+        }
+
+        /**
+         * 打开新增菜单
+         */
+        function handleCreate() {
+            openModal(true, {
+                isUpdate: false,
+            });
+        }
+
+        /**
+         * 打开 编辑菜单
+         * @param record
+         */
+        function handleEdit(record) {
+            openModal(true, {
+                record,
+                isUpdate: true,
+            });
+        }
+
+        /**
+         * 执行 删除操作
+         * @param record
+         */
+        async function handleDelete(record) {
+            try {
+                let ids = isArray(record._id) ? record._id : record._id;
+                await removeLayer2d(ids);
+                notification.success({
+                    message: '成功',
+                    description: '删除二维图层成功！',
+                    duration: 2,
+                });
+                await reload();
+            } catch (e) {
+                return Promise.reject(e);
+            }
+        }
+
+
+
         return {
+            handleSuccess,
+            registerDrawer,
             hasSelected,
             registerTable,
             reload,
@@ -121,7 +183,7 @@ export default defineComponent({
             setSelectedRowKeys,
             handleEdit,
             handleDelete,
-            delAllData
+            handleCreate,
         }
     }
 })

src/views/systemAdmin/system/mapTools/layer2d/layer2d.data.ts

@@ -1,35 +0,0 @@
-
-
-//二维图层管理表格列
-export const columns = [
-    {
-        title: '图层',
-        dataIndex: 'title',
-        key: 'title',
-        align: 'center'
-    },
-    {
-        title: 'id',
-        dataIndex: 'id',
-        key: 'id',
-        align: 'center'
-    },
-    {
-        title: 'EPSG',
-        dataIndex: 'epsg',
-        key: 'epsg',
-        align: 'center'
-    },
-    {
-        title: '地址',
-        dataIndex: 'url',
-        key: 'url',
-        align: 'center'
-    },
-    {
-        title: '层级范围',
-        dataIndex: 'level',
-        align: 'center',
-        slots: { customRender: 'level' },
-    }
-];

src/views/systemAdmin/system/mapTools/menus/MenuDrawer.vue

@@ -1,141 +1,133 @@
 <template>
-  <BasicDrawer
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="50%"
-    @ok="handleSubmit"
-  >
+  <BasicModal v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="50%" @ok="handleSubmit">
     <BasicForm @register="registerForm" />
-  </BasicDrawer>
+  </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './menu.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { defineComponent, ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './menu.data';
+import { BasicModal, useModalInner } from '/@/components/Modal';
 
-  // 加载菜单
-  import { getMenuList } from '/@/api/twoAndThree/menu';
+// 加载菜单
+import { getMenuList } from '/@/api/twoAndThree/menu';
 
-  import { saveMenuApi } from '/@/api/twoAndThree/menu';
-  import { listToTree } from '/@/utils/menuUtil';
+import { saveMenuApi } from '/@/api/twoAndThree/menu';
+import { listToTree } from '/@/utils/menuUtil';
 
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { metaModel } from '/@/api/system/model/menuModel';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { metaModel } from '/@/api/system/model/menuModel';
 
-  export default defineComponent({
-    name: 'MenuDrawer',
-    components: { BasicDrawer, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
-      let menuId;
+export default defineComponent({
+  name: 'MenuDrawer',
+  components: { BasicForm, BasicModal },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+    let menuId;
 
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
-        labelWidth: 100,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-        baseColProps: { lg: 12, md: 24 },
-      });
-      const { t } = useI18n(); //加载国际化
-
-      //默认传递页面数据
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        resetFields();
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
+    const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+      labelWidth: 100,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 12, md: 24 },
+    });
+    const { t } = useI18n(); //加载国际化
 
-        //初始化，菜单名称为可用
-        updateSchema({ field: 'title', componentProps: { disabled: false } });
-        //如果是编辑操作，设置页面数据
-        if (unref(isUpdate)) {
-          // // 动态设置 表单值
-          //
-          let menuObj: metaModel = Reflect.get(data.record, 'meta');
-          Reflect.set(data.record, 'menuType', menuObj.menuType); //meta.menuType
-          Reflect.set(data.record, 'title', menuObj.title); //meta.title
-          Reflect.set(data.record, 'icon', menuObj.icon); //meta.icon
-          Reflect.set(data.record, 'hideMenu', menuObj.hideMenu); //meta.hideMenu
-          Reflect.set(data.record, 'ignoreKeepAlive', menuObj.ignoreKeepAlive); //meta.ignoreKeepAlive
-          Reflect.set(data.record, 'isLink', menuObj.isLink); //meta.isLink
-          Reflect.set(data.record, 'status', menuObj.status); //meta.status
-          //为表单赋值
-          setFieldsValue({
-            ...data.record,
-          });
+    //默认传递页面数据
+    const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      resetFields();
+      setModalProps({ confirmLoading: false });
+      isUpdate.value = !!data?.isUpdate;
 
-          //编辑模式，菜单名称为不可用
-          updateSchema({ field: 'title', componentProps: { disabled: false } });
-        }
-        if (isUpdate.value) {
-          menuId = Reflect.get(data.record, 'id');
-        }
-        //加载菜单
-        let treeData = await getMenuList(1);
-        treeData = listToTree(treeData);
-        updateSchema({
-          field: 'parentId',
-          componentProps: { treeData },
+      //初始化，菜单名称为可用
+      updateSchema({ field: 'title', componentProps: { disabled: false } });
+      //如果是编辑操作，设置页面数据
+      if (unref(isUpdate)) {
+        // // 动态设置 表单值
+        let menuObj: metaModel = Reflect.get(data.record, 'meta');
+        Reflect.set(data.record, 'menuType', menuObj.menuType); //meta.menuType
+        Reflect.set(data.record, 'title', menuObj.title); //meta.title
+        Reflect.set(data.record, 'icon', menuObj.icon); //meta.icon
+        Reflect.set(data.record, 'hideMenu', menuObj.hideMenu); //meta.hideMenu
+        Reflect.set(data.record, 'ignoreKeepAlive', menuObj.ignoreKeepAlive); //meta.ignoreKeepAlive
+        Reflect.set(data.record, 'isLink', menuObj.isLink); //meta.isLink
+        Reflect.set(data.record, 'status', menuObj.status); //meta.status
+        //为表单赋值
+        setFieldsValue({
+          ...data.record,
         });
+
+        //编辑模式，菜单名称为不可用
+        updateSchema({ field: 'title', componentProps: { disabled: false } });
+      }
+      if (isUpdate.value) {
+        menuId = Reflect.get(data.record, 'id');
+      }
+      //加载菜单
+      let treeData = await getMenuList(1);
+      treeData = listToTree(treeData);
+      updateSchema({
+        field: 'parentId',
+        componentProps: { treeData },
       });
+    });
 
-      //得到页面标题
-      const getTitle = computed(() =>
-        !unref(isUpdate)
-          ? t('routes.common.system.pageSystemTitleCreateMenu')
-          : t('routes.common.system.pageSystemTitleEditMenu')
-      );
+    //得到页面标题
+    const getTitle = computed(() =>
+      !unref(isUpdate)
+        ? t('routes.common.system.pageSystemTitleCreateMenu')
+        : t('routes.common.system.pageSystemTitleEditMenu')
+    );
 
-      //提交按钮
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          setDrawerProps({ confirmLoading: true });
-          // TODO custom api
+    //提交按钮
+    async function handleSubmit() {
+      try {
+        const values = await validate();
+        setModalProps({ confirmLoading: true });
+        // TODO custom api
 
-          // 处理权限标识为null时，后台空指针
-          let permissionStr: string = Reflect.get(values, 'permission');
-          if (permissionStr === undefined || permissionStr === null) {
-            Reflect.set(values, 'permission', ' ');
-          }
+        // 处理权限标识为null时，后台空指针
+        let permissionStr: string = Reflect.get(values, 'permission');
+        if (permissionStr === undefined || permissionStr === null) {
+          Reflect.set(values, 'permission', ' ');
+        }
 
-          // 添加属性;
-          //当前作为默认管理员操作；
-          Reflect.set(values, 'type', 'SYSADMIN');
-          Reflect.set(values, 'name', Reflect.get(values, 'title'));
-          //当前选择为菜单时操作
-          let menuType: string = Reflect.get(values, 'menuType');
-          if (menuType === '0') {
-            Reflect.set(values, 'component', 'LAYOUT');
-          }
-          if (isUpdate.value) {
-            Reflect.set(values, 'id', menuId);
-          }
+        // 添加属性;
+        //当前作为默认管理员操作；
+        Reflect.set(values, 'type', 'SYSADMIN');
+        Reflect.set(values, 'name', Reflect.get(values, 'title'));
+        //当前选择为菜单时操作
+        let menuType: string = Reflect.get(values, 'menuType');
+        if (menuType === '0') {
+          Reflect.set(values, 'component', 'LAYOUT');
+        }
+        if (isUpdate.value) {
+          Reflect.set(values, 'id', menuId);
+        }
 
-          //为meta设置值
-          const metaTemp: metaModel = {
-            icon: Reflect.get(values, 'icon'),
-            title: Reflect.get(values, 'title'),
-            isLink: Reflect.get(values, 'isLink'),
-            menuType: Reflect.get(values, 'menuType'),
-            ignoreKeepAlive: Reflect.get(values, 'ignoreKeepAlive'), //[创建菜单，才需要]
-            hideMenu: Reflect.get(values, 'hideMenu'),
-            status: Reflect.get(values, 'status'),
-          };
-          Reflect.set(values, 'meta', metaTemp);
-          // saveMenu
-          await saveMenuApi(values, isUpdate.value);
+        //为meta设置值
+        const metaTemp: metaModel = {
+          icon: Reflect.get(values, 'icon'),
+          title: Reflect.get(values, 'title'),
+          isLink: Reflect.get(values, 'isLink'),
+          menuType: Reflect.get(values, 'menuType'),
+          ignoreKeepAlive: Reflect.get(values, 'ignoreKeepAlive'), //[创建菜单，才需要]
+          hideMenu: Reflect.get(values, 'hideMenu'),
+          status: Reflect.get(values, 'status'),
+        };
+        Reflect.set(values, 'meta', metaTemp);
+        // saveMenu
+        await saveMenuApi(values, isUpdate.value);
 
-          closeDrawer(); //关闭侧框
-          emit('success');
-        } finally {
-          setDrawerProps({ confirmLoading: false });
-        }
+        closeModal(); //关闭侧框
+        emit('success');
+      } finally {
+        setModalProps({ confirmLoading: false });
       }
+    }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
-    },
-  });
+    return { registerDrawer, registerForm, getTitle, handleSubmit };
+  },
+});
 </script>

src/views/systemAdmin/system/mapTools/menus/index.vue

@@ -45,7 +45,7 @@ import { BasicTable, useTable, TableAction } from '/@/components/Table';
 // 加载表格数据
 import { getMenuList, delMenu } from '/@/api/twoAndThree/menu';
 // 加载自定义侧边弹出框 组件
-import { useDrawer } from '/@/components/Drawer';
+import { useModal } from '/@/components/Modal';
 
 // 导入子页面【新增、修改】
 import MenuDrawer from './MenuDrawer.vue';
@@ -61,7 +61,7 @@ export default defineComponent({
   name: 'MenuManagement',
   components: { BasicTable, MenuDrawer, TableAction, Button },
   setup() {
-    const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
+    const [registerDrawer, { openModal }] = useModal(); //使用右侧弹出框
     const { t } = useI18n(); //加载国际化
     // 新增菜单
     const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
@@ -129,7 +129,7 @@ export default defineComponent({
      * 打开新增菜单
      */
     function handleCreate() {
-      openDrawer(true, {
+      openModal(true, {
         isUpdate: false,
       });
     }
@@ -139,7 +139,7 @@ export default defineComponent({
      * @param record
      */
     function handleEdit(record: Recordable) {
-      openDrawer(true, {
+      openModal(true, {
         record,
         isUpdate: true,
       });