授权中心

src/api/authorize/authorize.ts

@@ -0,0 +1,84 @@
+
+import { defHttp } from '/@/utils/http/axios';
+import { session } from "/@/utils/Memory.js";
+import type { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+    CallProvider = '/callProvider',
+    List = '/base-center/system/selectSystem',
+    GetUserArr = '/user-center/user/getUserArr',
+    Save = '/base-center/system/saveSystem',
+}
+
+const client = {
+    grant_type: "password",
+    scope: "all",
+    client_id: "space",
+    client_secret: 'e10adc3949ba59abbe56e057f20f883e',
+}
+
+const interfaceType = { apiUrl2: true };
+
+/**
+ * @description:获取应用列表
+ */
+export function list(params) {
+    var params = {
+        keyStr: "",
+        page: 1,
+        rows: 10
+    }
+    return new Promise<void>((resolve, reject) => {
+        defHttp.post({ url: Api.List, params })
+            .then((r) => {
+                if (r.resp_code == 0 && r.datas && r.datas.records.length) {
+                    resolve(r.datas.records);
+                } else {
+                    resolve([]);
+                }
+            })
+    })
+}
+
+/**
+ * @description:获取所有的用户
+ */
+export const allUser = (params: AccountParams) => {
+    var data = {
+        keyStr: '',
+        page: 1,
+        rows: 100000,
+    }
+    return new Promise<void>((resolve, reject) => {
+        defHttp.post<AccountListGetResultModel>({ url: Api.GetUserArr, data }).then((r) => {
+            if (r.resp_code == 0 && r.datas && r.datas.records.length) {
+                resolve(r.datas.records);
+            } else {
+                resolve([]);
+            }
+        })
+    })
+}
+
+/**
+ * @description:保存APP
+ */
+export const save = (params) => {
+    var a = {
+        "system": { "id": "", "name": "test", "key": "test", "note": "ssssss" },
+        "userIds": "106083",
+        "clientSecretStr": "test",
+        "scope": "app",
+        "grantTypes": ["authorization_code"],
+        "autoapprove": true
+    }
+    return new Promise<void>((resolve, reject) => {
+        defHttp.post<AccountListGetResultModel>({ url: Api.Save, params }).then((r) => {
+            if (r.resp_code == 0 && r.datas && r.datas.records.length) {
+                resolve(r.datas.records);
+            } else {
+                resolve([]);
+            }
+        })
+    })
+}

src/views/authorize/app/AppDrawer.vue

@@ -0,0 +1,118 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="50%" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './app.data';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { v4 as uuidv4 } from 'uuid';
+// 加载菜单
+import { getMenuList } from '/@/api/sys/menu';
+
+import { save } from '/@/api/authorize/authorize';
+import { listToTree } from '/@/utils/menuUtil';
+
+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;
+
+    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;
+
+      //初始化，菜单名称为可用
+      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')
+    );
+
+    //提交按钮
+    async function handleSubmit() {
+      try {
+        const v = await validate();
+        console.log(v);
+        if (isUpdate.value) {
+
+        }
+
+        var data = {
+          "system": {
+            "id": "",
+            "name": v.name,
+            "key": v.key,
+            "note": v.note
+          },
+          "userIds": v.userid,
+          "clientSecretStr": "test",
+          "scope": v.scope,
+          "grantTypes": v.grantTypes,
+          "autoapprove": v.autoapprove
+        }
+        //保存
+        await save(data);
+        closeDrawer(); //关闭侧框
+        emit('success');
+      } finally {
+        setDrawerProps({ confirmLoading: false });
+      }
+    }
+
+    return { registerDrawer, registerForm, getTitle, handleSubmit };
+  },
+});
+</script>

src/views/authorize/app/app.data.ts

@@ -0,0 +1,192 @@
+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';
+import { allUser } from '/@/api/authorize/authorize';
+import { copyTransFun } from '/@/utils/fnUtils';
+const { t } = useI18n();
+
+//菜单管理页，所需的列 配置
+export const columns: BasicColumn[] = [
+  {
+    title: '系统名称',
+    dataIndex: 'NAME',
+    width: 240,
+  },
+  {
+    title: '授权类型',
+    dataIndex: 'AUTHORIZED_GRANT_TYPES',
+    width: 240,
+  },
+  {
+    title: '授权时间',
+    dataIndex: 'CREATE_TIME',
+    width: 180,
+    slots: { customRender: 'pdate' },
+  },
+  {
+    title: '审核状态',
+    dataIndex: 'status',
+    width: 110,
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '备注',
+    dataIndex: ' NOTE',
+    width: 240,
+  },
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+//菜单管理页，所需的搜索内容
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'menuName',
+    label: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
+    // label: '菜单名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 255,
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 255) {
+              return Promise.reject('字数不超过255个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'status',
+    label: t('routes.common.system.tableTitleSystemStatus'), //状态
+    // label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.tableTitleSystemEnable'), value: '0' },
+        // { label: '启用', value: '0' },
+
+        { label: t('routes.common.system.tableTitleSystemStop'), value: '1' },
+        // { label: '停用', value: '1' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+];
+
+//----------------------------------新增、编辑----------------------------------------------------------
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入应用名称',
+    },
+  },
+  {
+    field: 'key',
+    label: '编码',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入应用编码',
+    },
+  },
+  {
+    field: 'scope',
+    label: '密匙范围',
+    required: true,
+    component: 'RadioButtonGroup',
+    componentProps: {
+      options: [
+        {
+          label: '系统内部',
+          value: 'app'
+        },
+        {
+          label: '平台',
+          value: 'all'
+        }
+      ],
+    },
+  },
+  {
+    field: 'grantTypes',
+    label: '授权方式',
+    required: true,
+    component: 'RadioButtonGroup',
+    componentProps: {
+      options: [
+        {
+          label: '授权码',
+          value: 'authorization_code'
+        },
+        {
+          label: '密码',
+          value: 'password'
+        },
+        {
+          label: '客户端凭证',
+          value: 'client_credentials'
+        },
+        {
+          label: 'token刷新口令',
+          value: 'refresh_token'
+        }
+      ],
+    },
+  },
+  {
+    field: 'autoapprove',
+    label: '自动授权',
+    required: true,
+    component: 'RadioButtonGroup',
+    componentProps: {
+      options: [
+        {
+          label: '是',
+          value: true
+        },
+        {
+          label: '否',
+          value: false
+        }
+      ],
+    },
+  },
+  {
+    field: 'userid',
+    label: '系统用户',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'NAME',
+        key: 'EMPLOYEE_ID',
+        value: 'EMPLOYEE_ID',
+      },
+      placeholder: '请你用户！',
+      api: async () => {
+        return await allUser();
+      },
+      onChange(value) {
+        userid.value = value;
+      },
+    },
+  },
+];

src/views/authorize/app/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
+      <template #toolbar>
+        <Button type="primary" @click="handleCreate">
+          {{ getI18nCreateMenu }}
+        </Button>
+        <Button type="primary" danger :disabled="getCanBatchDelete" @click="handleBatchDelete">
+          批量删除
+        </Button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          // {
+          //   label: '编辑',
+          //   tooltip: '编辑',
+          //   icon: 'clarity:note-edit-line',
+          //   onClick: handleEdit.bind(null, record),
+          // },
+          {
+            label: '删除',
+            tooltip: '删除',
+            icon: 'ant-design:delete-outlined',
+            color: 'error',
+            popConfirm: {
+              title: getDeleteTitle(),
+              confirm: handleDelete.bind(null, record),
+            },
+          },
+        ]" />
+      </template>
+    </BasicTable>
+
+    <!-- 弹出框 -->
+    <AppDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+//导入所需插件
+import { computed, defineComponent, nextTick } from 'vue';
+
+// 导入表格组件，表格事件
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+
+// 加载表格数据
+import { list } from '/@/api/authorize/authorize';
+// 加载自定义侧边弹出框 组件
+import { useDrawer } from '/@/components/Drawer';
+
+// 导入子页面【新增、修改】
+import AppDrawer from './AppDrawer.vue';
+
+// 导入列 属性，和搜索栏内容
+import { columns } from './app.data';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { Button, notification } from 'ant-design-vue';
+import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+import { isArray } from '/@/utils/is';
+// 自定义表格组件和属性
+export default defineComponent({
+  name: 'MenuManagement',
+  components: { BasicTable, AppDrawer, TableAction, Button },
+  setup() {
+    const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
+    const { t } = useI18n(); //加载国际化
+    // 新增菜单
+    const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
+
+    const [
+      registerTable,
+      { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
+    ] = useTable({
+      title: '机构列表', //'菜单列表'
+      api: list, //加载数据
+      columns, //加载列
+      isTreeTable: true,
+      pagination: false,
+      striped: false,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: true,
+      canResize: false,
+      rowKey: (record) => record.id,
+      actionColumn: {
+        width: 200,
+        title: t('routes.common.system.pageSystemTitleOperation'), //操作
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+      rowSelection: {
+        type: 'checkbox',
+      },
+    });
+
+    const getCanBatchDelete = computed(() => {
+      const rowSelection = getRowSelection();
+      return !rowSelection.selectedRowKeys?.length;
+    });
+    const { createSyncConfirm } = useSyncConfirm();
+    const handleBatchDelete = async () => {
+      const rowKeys = getSelectRowKeys();
+      try {
+        await createSyncConfirm({
+          iconType: 'warning',
+          content: '确认后所有选中的菜单将被删除',
+        });
+        await handleDelete({ id: rowKeys });
+        setSelectedRowKeys([]);
+        reload();
+      } catch (error) { }
+    };
+
+    /**
+     * 获得删除提示框的文字
+     */
+    function getDeleteTitle(): string {
+      let labelText = t('routes.common.system.pageSystemTitleWhetherDelete');
+      return labelText;
+    }
+
+    /**
+     * 打开新增菜单
+     */
+    function handleCreate() {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+
+    /**
+     * 打开 编辑菜单
+     * @param record
+     */
+    function handleEdit(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+
+    /**
+     * 执行 删除操作
+     * @param record
+     */
+    async function handleDelete(record: Recordable) {
+      try {
+        let ids = isArray(record.departid) ? record.departid : [record.departid];
+        debugger;
+        await DeleteStructure({ departid: ids });
+        notification.success({
+          message: '成功',
+          description: '删除机构成功',
+          duration: 3,
+        });
+        await reload();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+
+    /**
+     * 操作成功，重新加载页面
+     */
+    function handleSuccess() {
+      reload();
+    }
+
+    function onFetchSuccess() {
+      // 演示默认展开所有表项
+      nextTick(collapseAll);
+    }
+
+    return {
+      getDeleteTitle,
+      getI18nCreateMenu,
+      registerTable,
+      registerDrawer,
+      handleCreate,
+      handleEdit,
+      handleDelete,
+      handleSuccess,
+      onFetchSuccess,
+      getCanBatchDelete,
+      handleBatchDelete,
+    };
+  },
+});
+</script>

src/views/authorize/authorize/data.ts

@@ -0,0 +1,17 @@
+export interface TabItem {
+  key: string;
+  name: string;
+  component: string;
+}
+export const achieveList: TabItem[] = [
+  {
+    key: '1',
+    name: '地图资源(1)',
+    component: 'SmsLog',
+  },
+  {
+    key: '2',
+    name: '成果数据(2)',
+    component: 'EmailLog',
+  },
+];

src/views/authorize/authorize/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div :class="[`${prefixCls}-bottom`, '!dark:bg-dark-900']">
+    <div class="datacenter-left">
+      <div class="page-name">
+        <p>数据目录</p>
+      </div>
+      <div class="ztree-container">
+        <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
+          :replace-fields="{ children: 'child', key: 'id', value: 'name', title: 'name' }" v-if="treeData.length"
+          defaultExpandAll="true" v-model:checkedKeys="checkedKeys">
+          <template #title0010><span style="color: #1890ff">sss</span></template>
+        </a-directory-tree>
+      </div>
+    </div>
+    <Tabs>
+      <template v-for="item in  achieveList " :key="item.type">
+        <TabPane :tab="[`${item.typeName}成果(${item.count})`]">
+          <component :is="item.type == 'MR'?'MapData':'FileData'" :listData="item.items" :numb="1" />
+          <!-- <MapData v-if="item.type == 'MR'" :listData="item.items" /> -->
+          <!-- <FileData v-if="item.type == 'DR'" :listData="item.items" /> -->
+        </TabPane>
+      </template>
+    </Tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { Tabs } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue';
+import MapData from './item/MapData.vue';
+import FileData from './item/FileData.vue';
+import { onMounted } from 'vue';
+import { directoryTree, platList } from '/@/api/resource/plat';
+
+const prefixCls = 'account-center-bottom'
+
+export default defineComponent({
+  components: {
+    Tabs,
+    TabPane: Tabs.TabPane,
+    MapData,
+    FileData,
+  },
+  setup() {
+    const treeData = ref([]);
+    const expandedKeys = ref([]);
+    const selectedKeys = ref([]);
+    const checkedKeys = ref([]);
+    const achieveList = ref([]);
+    watch(expandedKeys, () => {
+      console.log('expandedKeys', expandedKeys);
+    });
+    watch(selectedKeys, () => {
+      console.log('selectedKeys', selectedKeys);
+    });
+    watch(checkedKeys, () => {
+      console.log('checkedKeys', checkedKeys);
+    });
+
+    onMounted(() => {
+      directoryTree().then((r) => { if (r) treeData.value = r });
+      platList().then((r) => { if (r) console.log(r), achieveList.value = r });
+    });
+
+    return {
+      treeData,
+      expandedKeys,
+      selectedKeys,
+      checkedKeys,
+      prefixCls: 'account-center',
+      achieveList,
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.account-center-bottom {
+  background: #fff;
+  height: calc(100vh - 110px);
+  overflow: hidden;
+}
+
+.ztree-container {
+  float: left;
+  overflow: auto;
+  width: 100%;
+  height: auto;
+  max-height: 976px;
+}
+
+.datacenter-left .page-name {
+  // background: #333333;
+  border-bottom: solid 1px #DEDEDE;
+}
+
+.datacenter-left .page-name p {
+  height: 42px;
+  line-height: 42px;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
+  margin-bottom: 0px;
+}
+
+.datacenter-left {
+  float: left;
+  width: 250px;
+  height: auto;
+  margin-right: 16px;
+  border-top: none;
+  background: #F8F8F8;
+  overflow: auto;
+  height: calc(100% - 20px);
+  max-height: 1306px;
+}
+
+.account-center {
+  &-bottom {
+    padding: 10px;
+    margin: 16px;
+    // background-color: @component-background;
+    border-radius: 3px;
+  }
+}
+</style>

src/views/authorize/authorize/item/EmailDetail.vue

@@ -0,0 +1,63 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="邮件发送参数"
+    centered
+    :okButtonProps="{ disabled: true }"
+    @ok="handleOK"
+    :width="700"
+  >
+    <div class="pt-6px pr-6px">
+      <BasicForm @register="registerForm" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, h } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { Tinymce } from '/@/components/Tinymce';
+  const schemas: FormSchema[] = [
+    {
+      field: 'emailBody',
+      component: 'Input',
+      label: '',
+      rules: [{ required: true }],
+      render: ({ model, field }) => {
+        return h(Tinymce, {
+          value: model[field],
+          // showImageUpload: false,
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+        });
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    setup() {
+      const [registerForm, { resetFields, setFieldsValue }] = useForm({
+        labelWidth: 70,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [register, { closeModal }] = useModalInner(async (data) => {
+        await resetFields();
+        await setFieldsValue({
+          ...data.record,
+        });
+      });
+
+      async function handleOK() {
+        closeModal();
+      }
+
+      return { register, schemas, registerForm, handleOK };
+    },
+  });
+</script>

src/views/authorize/authorize/item/FileData copy.vue

@@ -0,0 +1,275 @@
+<template>
+  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
+    <div class="datacenter-right">
+      <div class="resource_list" id="map_list">
+        <div v-for="(i, n) in list" v-if="list.length" :key="n" data-permission="true" class="resource_item"
+          data-checking="false" data-searching="1" data-ispub="1">
+          <div class="mapItem-top-box">
+            <div class="item-top">
+              <div class="img_container" data-num="1">
+                <img class="tab-list-icon-img-MR00001936 img_mr MR00001936"
+                  :src="i.info && i.info.length && i.info[0].thumbnail" alt="">
+              </div>
+            </div>
+            <div class="item-title">
+              <span class="r_name">{{ i.SERVICENAME }}</span>
+              <span class="r-number" data-num="1" title="编目1次">1</span>
+            </div>
+            <div class="item-msg">
+              <div class="item-msg-val" style="font-weight:bold;font-size:12px;color: #000;">坐标系：{{ i.CRS }}</div>
+              <div class="item-msg-val">适用流程：国家秘密和工作秘密数据成果申请,</div>
+              <div class="item-msg-val">关键字：测试数据</div>
+              <div class="item-msg-val">服务类型：{{ i.TYPENAME }}</div>
+            </div>
+          </div>
+          <div class="operation-box">
+            <div class="operation-item browse-item-btn browse-item-MR00001936">
+              <a target="_blank" :href="`../../mapview.html?/iserver/services/map-16/rest/maps/LZS16envi1%4016.ijs`"
+                style="border-right: 1px #ccc solid;">
+                <span>浏览</span>
+              </a>
+            </div>
+
+            <div class="operation-item alone-apply-btn alone-apply-btn-MR00001936">
+              <span style="border-right: 1px #ccc solid;" onclick="cardApplyItem('mr')">
+                <span>申请</span>
+              </span>
+            </div>
+            <!-- <div class="user-apply-btn user-apply-btn-MR00001936"
+              onclick="addApplyBank(this,'MR00001936','行政区域','1','测试数据','mr','2000坐标系4490')">
+              <span>加入申请库</span>
+            </div>
+            <div class="dis-apply-btn dis-apply-btn-MR00001936">
+              <span>已加入申请库</span>
+            </div> -->
+            <div class="operation-item" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>详细</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <BasicTable @register="registerTable" class="dark:bg-dark-900">
+      <template #toolbar>
+        <Authority value="api:yt:smsLog:delete">
+          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #remark="{ record }">
+        <Tooltip :title="record.remark">
+          <div class="truncate w-full">{{ record.remark }}</div>
+        </Tooltip>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          {
+            label: '查看',
+            auth: 'api:yt:smsLog:get',
+            icon: 'ant-design:fund-view-outlined',
+            onClick: handleQuery.bind(null, record),
+          },
+          {
+            label: '删除',
+            auth: 'api:yt:smsLog:delete',
+            icon: 'ant-design:delete-outlined',
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDeleteOrBatchDelete.bind(null, record),
+            },
+          },
+        ]" />
+      </template>
+    </BasicTable> -->
+    <!-- 弹出框 -->
+    <MapDrawer @register="registerModal" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref, defineProps, watch } 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 } from '/@/api/resource/plat';
+// 加载自定义侧边弹出框 组件
+import { useDrawer } from '/@/components/Drawer';
+// 导入子页面【新增、修改】
+import MapDrawer from './MapDrawer.vue';
+
+
+export default defineComponent({
+  name: 'SmsLog',
+  components: { BasicTable, TableAction, Authority, Popconfirm, Tooltip, MapDrawer },
+  setup() {
+    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
+    const list = ref([]);
+    const props = defineProps({
+      listData: {
+        type: Array,
+        default: () => [],
+      }
+    })
+
+    // setInterval(() => {
+    //   console.log(props)
+    // }, 2000)
+    onMounted(() => {
+      platList().then((r) => {
+        if (r) {
+          var o = r.find(i => i.type == 'DR')
+          if (o && o.items && o.items.length) {
+            o.items.map(async (i) => i.info = await img(i.SERVICEID))
+            console.log(o);
+            list.value = o.items;
+          }
+        }
+      });
+    });
+
+    function handleQuery(record: Recordable) {
+      console.log("11111:", record)
+      openDrawer(true, {
+        record,
+      });
+    }
+
+    return {
+      registerModal,
+      list,
+      handleQuery,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.datacenter-right .resource_list .item-title .r_name {
+  color: #5e5d5e;
+  display: inline-block;
+  width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list {
+  box-sizing: border-box;
+  width: 100%;
+  float: left;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.datacenter-right .resource_list>div:not(:nth-of-type(4n + 4)) {
+  margin-right: 7px;
+}
+
+.resource_item {
+  height: 318px;
+  width: 224px;
+  margin-bottom: 14px;
+  border: 2px dashed transparent;
+}
+
+.mapItem-top-box {
+  height: 278px;
+  border: 1px solid #dfdfdf;
+  border-bottom: none;
+}
+
+.datacenter-right .resource_list .operation-box {
+  height: 42px;
+  border: 1px solid #dfdfdf;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.datacenter-right .resource_list .item-top {
+  padding: 13px;
+}
+
+.datacenter-right .resource_list .item-top img {
+  width: 198px;
+  height: 124px;
+}
+
+.datacenter-right .resource_list .item-title {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 16px;
+  padding: 0 0 0 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .item-msg {
+  padding: 0 13px 13px;
+}
+
+.img_container {
+  text-align: center;
+}
+
+.img_container {
+  width: 100%;
+  height: 100%;
+  background: #b7bed3;
+  border-radius: 4px;
+}
+
+.datacenter-right .resource_list .item-msg-val {
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 22px;
+  opacity: 0.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .operation-item {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datacenter-right .resource_list .operation-item.alone-apply-btn {
+  display: none;
+}
+
+.datacenter-right .resource_list .operation-item {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datacenter-right .resource_list .operation-item {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datacenter-right .resource_list .operation-item a {
+  font-size: 12px;
+  width: 100%;
+  text-align: center;
+  color: #5e5d5e;
+  background-color: #ffffff;
+}
+</style>

src/views/authorize/authorize/item/FileData.vue

@@ -0,0 +1,298 @@
+<template>
+  <Search></Search>
+  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
+    <div class="datacenter-right">
+      <div class="resource_list" id="map_list">
+        <div v-for="(i, n) in list" v-if="list.length" :key="n" data-permission="true" class="resource_item"
+          data-checking="false" data-searching="1" data-ispub="1">
+          <div class="mapItem-top-box">
+            <div class="item-top">
+              <div class="img_container" data-num="1">
+                <img class="tab-list-icon-img-MR00001936 img_mr MR00001936"
+                  :src="(i.info && i.info.length && i.info[0].thumbnail) || '/static/img/default-dr3.jpg'" alt="">
+              </div>
+            </div>
+            <div class="item-title">
+              <span class="r_name">{{ i.SERVICENAME }}</span>
+              <span class="r-number" data-num="1" title="编目1次">1</span>
+            </div>
+            <div class="item-msg">
+              <div class="item-msg-val" style="font-weight:bold;font-size:12px;color: #000;">坐标系：{{ i.CRS }}</div>
+              <div class="item-msg-val">适用流程：国家秘密和工作秘密数据成果申请,</div>
+              <div class="item-msg-val">关键字：测试数据</div>
+              <div class="item-msg-val">服务类型：{{ i.TYPENAME }}</div>
+            </div>
+          </div>
+          <div class="operation-box">
+            <div class="operation-item browse-item-btn browse-item-MR00001936">
+              <a target="_blank" :href="(i.info && i.info.length && i.info[0].thumbnail) || '/static/img/default-dr3.jpg'">
+                <span>浏览</span>
+              </a>
+            </div>
+
+            <div class="operation-item alone-apply-btn alone-apply-btn-MR00001936">
+              <span style="border-right: 1px #ccc solid;" onclick="cardApplyItem('mr')">
+                <span>申请</span>
+              </span>
+            </div>
+            <!-- <div class="user-apply-btn user-apply-btn-MR00001936"
+              onclick="addApplyBank(this,'MR00001936','行政区域','1','测试数据','mr','2000坐标系4490')">
+              <span>加入申请库</span>
+            </div>
+            <div class="dis-apply-btn dis-apply-btn-MR00001936">
+              <span>已加入申请库</span>
+            </div> -->
+            <div class="operation-item" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>详细</span>
+              </a>
+            </div>
+            <div class="operation-item" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>加入申请库</span>
+              </a>
+            </div>
+            <div class="operation-item operation-item-active" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>已加入申请库</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <BasicTable @register="registerTable" class="dark:bg-dark-900">
+      <template #toolbar>
+        <Authority value="api:yt:smsLog:delete">
+          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #remark="{ record }">
+        <Tooltip :title="record.remark">
+          <div class="truncate w-full">{{ record.remark }}</div>
+        </Tooltip>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          {
+            label: '查看',
+            auth: 'api:yt:smsLog:get',
+            icon: 'ant-design:fund-view-outlined',
+            onClick: handleQuery.bind(null, record),
+          },
+          {
+            label: '删除',
+            auth: 'api:yt:smsLog:delete',
+            icon: 'ant-design:delete-outlined',
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDeleteOrBatchDelete.bind(null, record),
+            },
+          },
+        ]" />
+      </template>
+    </BasicTable> -->
+    <!-- 弹出框 -->
+    <MapDrawer @register="registerModal" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref, defineProps, watch } 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 } from '/@/api/resource/plat';
+// 加载自定义侧边弹出框 组件
+import { useDrawer } from '/@/components/Drawer';
+// 导入子页面【新增、修改】
+import MapDrawer from './MapDrawer.vue';
+import Search from './child/Search.vue';
+
+
+export default defineComponent({
+  name: 'SmsLog',
+  components: { BasicTable, TableAction, Search, Authority, Popconfirm, Tooltip, MapDrawer },
+  setup() {
+    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
+    const list = ref([]);
+    const props = defineProps({
+      listData: {
+        type: Array,
+        default: () => [],
+      }
+    })
+
+    // setInterval(() => {
+    //   console.log(props)
+    // }, 2000)
+    onMounted(() => {
+      platList().then((r) => {
+        if (r) {
+          var o = r.find(i => i.type == 'DR')
+          if (o && o.items && o.items.length) {
+            o.items.map(async (i) => i.info = await img(i.SERVICEID))
+            console.log(o);
+            list.value = o.items;
+          }
+        }
+      });
+    });
+
+    function handleQuery(record: Recordable) {
+      console.log("11111:", record)
+      openDrawer(true, {
+        record,
+      });
+    }
+
+    return {
+      registerModal,
+      list,
+      handleQuery,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.datacenter-right .resource_list .item-title .r_name {
+  color: #5e5d5e;
+  display: inline-block;
+  width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list {
+  box-sizing: border-box;
+  width: 100%;
+  float: left;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.datacenter-right .resource_list>div:not(:nth-of-type(4n + 4)) {
+  margin-right: 7px;
+}
+
+.resource_item {
+  height: 318px;
+  width: 224px;
+  margin-bottom: 14px;
+  border: 2px dashed transparent;
+
+  width: 386px;
+  height: 402px;
+  border-radius: 4px;
+  opacity: 1;
+  background: #FFFFFF;
+  border: 1px solid #DEDEDE;
+}
+
+.mapItem-top-box {
+  height: 350px;
+}
+
+.datacenter-right .resource_list .operation-box {
+  height: 42px;
+  display: flex;
+  margin-bottom: 10px;
+  margin-left: 20px;
+}
+
+.datacenter-right .resource_list .item-top {
+  padding: 13px;
+}
+
+.datacenter-right .resource_list .item-top img {
+  width: 360px;
+  height: 190px;
+  border: solid 1px #eeebeb;
+}
+
+.datacenter-right .resource_list .item-title {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 16px;
+  padding: 0 0 0 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .item-msg {
+  padding: 0 13px 13px;
+}
+
+.img_container {
+  text-align: center;
+}
+
+.img_container {
+  width: 100%;
+  height: 100%;
+  background: #b7bed3;
+  border-radius: 4px;
+}
+
+.datacenter-right .resource_list .item-msg-val {
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 22px;
+  opacity: 0.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .operation-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  height: 34px;
+  opacity: 1;
+  margin-right: 22px;
+  padding: 0 10px;
+  background: #E8E8E8;
+}
+
+.datacenter-right .resource_list .operation-item:hover {
+  background: #0671DD;
+}
+
+.datacenter-right .resource_list .operation-item:hover a {
+  color: #fff;
+}
+
+.datacenter-right .resource_list .operation-item.alone-apply-btn {
+  display: none;
+}
+
+.operation-item-active {
+  background: #05B069 !important;
+}
+
+.operation-item-active a {
+  color: #fff !important;
+}
+
+.datacenter-right .resource_list .operation-item a {
+  font-size: 12px;
+  width: 100%;
+  text-align: center;
+  color: #5e5d5e;
+}
+</style>

src/views/authorize/authorize/item/MapData.vue

@@ -0,0 +1,308 @@
+<template>
+  <Search></Search>
+  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
+    <div class="datacenter-right">
+      <div class="resource_list" id="map_list">
+        <div v-for="(i, n) in list" v-if="list.length" :key="n" data-permission="true" class="resource_item"
+          data-checking="false" data-searching="1" data-ispub="1">
+          <div class="mapItem-top-box">
+            <div class="item-top">
+              <div class="img_container" data-num="1">
+                <img class="tab-list-icon-img-MR00001936 img_mr MR00001936"
+                  :src="i.info && i.info.length && i.info[0].thumbnail" alt="">
+              </div>
+            </div>
+            <div class="item-title">
+              <span class="r_name">{{ i.SERVICENAME }}</span>
+              <span class="r-number" data-num="1" title="编目1次">1</span>
+            </div>
+            <div class="item-msg">
+              <div class="item-msg-val" style="font-weight:bold;font-size:12px;color: #000;">坐标系：{{ i.CRS }}</div>
+              <div class="item-msg-val">适用流程：国家秘密和工作秘密数据成果申请,</div>
+              <div class="item-msg-val">关键字：测试数据</div>
+              <div class="item-msg-val">服务类型：{{ i.TYPENAME }}</div>
+            </div>
+          </div>
+          <div class="operation-box">
+            <div class="operation-item browse-item-btn browse-item-MR00001936">
+              <a target="_blank" :href="`../../mapview.html?/iserver/services/map-16/rest/maps/LZS16envi1%4016.ijs`">
+                <span>浏览</span>
+              </a>
+            </div>
+
+            <div class="operation-item alone-apply-btn alone-apply-btn-MR00001936">
+              <span style="border-right: 1px #ccc solid;" onclick="cardApplyItem('mr')">
+                <span>申请</span>
+              </span>
+            </div>
+            <div class="operation-item" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>详细</span>
+              </a>
+            </div>
+            <div class="operation-item" @click="applyWay(i)">
+              <a href="javascript:void(0)" class="">
+                <span>加入申请库</span>
+              </a>
+            </div>
+            <div class="operation-item operation-item-active" @click="handleQuery(i)">
+              <a href="javascript:void(0)" class="">
+                <span>已加入申请库</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <BasicTable @register="registerTable" class="dark:bg-dark-900">
+      <template #toolbar>
+        <Authority value="api:yt:smsLog:delete">
+          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #remark="{ record }">
+        <Tooltip :title="record.remark">
+          <div class="truncate w-full">{{ record.remark }}</div>
+        </Tooltip>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          {
+            label: '查看',
+            auth: 'api:yt:smsLog:get',
+            icon: 'ant-design:fund-view-outlined',
+            onClick: handleQuery.bind(null, record),
+          },
+          {
+            label: '删除',
+            auth: 'api:yt:smsLog:delete',
+            icon: 'ant-design:delete-outlined',
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDeleteOrBatchDelete.bind(null, record),
+            },
+          },
+        ]" />
+      </template>
+    </BasicTable> -->
+    <!-- 弹出框 -->
+    <MapDrawer @register="registerModal" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref, defineProps, watch } 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';
+import { message } from 'ant-design-vue';
+// 加载自定义侧边弹出框 组件
+import { useDrawer } from '/@/components/Drawer';
+// 导入子页面【新增、修改】
+import MapDrawer from './MapDrawer.vue';
+import Search from './child/Search.vue';
+import { session } from '/@/utils/Memory';
+
+
+export default defineComponent({
+  name: 'SmsLog',
+  components: { BasicTable, TableAction, Authority, Search, Popconfirm, Tooltip, MapDrawer },
+  setup() {
+    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
+    const list = ref([]);
+    const props = defineProps({
+      listData: {
+        type: Array,
+        default: () => [],
+      }
+    })
+
+    // setInterval(() => {
+    //   console.log(props)
+    // }, 2000)
+    onMounted(() => {
+      platList().then((r) => {
+        if (r) {
+          list.value = r[0].items;
+          list.value.map(async (i) => i.info = await img(i.SERVICEID))
+        }
+      });
+    });
+
+    function handleQuery(record: Recordable) {
+      console.log("11111:", record)
+      openDrawer(true, {
+        record,
+      });
+    }
+
+    function applyWay(i) {
+      console.log(i)
+      apply({
+        addRes: [{
+          resDataType: "1",
+          resId: i.SERVICEID,
+          resName: `${i.SERVICENAME}(${i.CRS})`,
+          resType: 0,
+          workflowType: "MAP",
+        }],
+        userId: session.getItem('userId'),
+      }).then((r) => {
+        if (r.datas && r.resp_code == 0) {
+          message.success('申请成功');
+        }
+      })
+    }
+
+    return {
+      applyWay,
+      registerModal,
+      list,
+      handleQuery,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.datacenter-right .resource_list .item-title .r_name {
+  color: #5e5d5e;
+  display: inline-block;
+  width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list {
+  box-sizing: border-box;
+  width: 100%;
+  float: left;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.datacenter-right .resource_list>div:not(:nth-of-type(4n + 4)) {
+  margin-right: 7px;
+}
+
+.resource_item {
+  height: 318px;
+  width: 224px;
+  margin-bottom: 14px;
+  border: 2px dashed transparent;
+
+  width: 386px;
+  height: 402px;
+  border-radius: 4px;
+  opacity: 1;
+  background: #FFFFFF;
+  border: 1px solid #DEDEDE;
+}
+
+.mapItem-top-box {
+  height: 350px;
+}
+
+.datacenter-right .resource_list .operation-box {
+  height: 42px;
+  display: flex;
+  margin-bottom: 10px;
+  margin-left: 20px;
+}
+
+.datacenter-right .resource_list .item-top {
+  padding: 13px;
+}
+
+.datacenter-right .resource_list .item-top img {
+  width: 360px;
+  height: 190px;
+  border: solid 1px #eeebeb;
+}
+
+.datacenter-right .resource_list .item-title {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 16px;
+  padding: 0 0 0 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .item-msg {
+  padding: 0 13px 13px;
+}
+
+.img_container {
+  text-align: center;
+}
+
+.img_container {
+  width: 100%;
+  height: 100%;
+  background: #b7bed3;
+  border-radius: 4px;
+}
+
+.datacenter-right .resource_list .item-msg-val {
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #5e5d5e;
+  line-height: 22px;
+  opacity: 0.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datacenter-right .resource_list .operation-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  height: 34px;
+  opacity: 1;
+  margin-right: 22px;
+  padding: 0 10px;
+  background: #E8E8E8;
+}
+
+.datacenter-right .resource_list .operation-item:hover {
+  background: #0671DD;
+}
+
+.datacenter-right .resource_list .operation-item:hover a {
+  color: #fff;
+}
+
+.datacenter-right .resource_list .operation-item.alone-apply-btn {
+  display: none;
+}
+
+.operation-item-active {
+  background: #05B069 !important;
+}
+
+.operation-item-active a {
+  color: #fff !important;
+}
+
+.datacenter-right .resource_list .operation-item a {
+  font-size: 12px;
+  width: 100%;
+  text-align: center;
+  color: #5e5d5e;
+}
+</style>

src/views/authorize/authorize/item/child/Search.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="wrapper">
+        <span class="sqrk">申请入库(1)</span>
+        <span>
+            <a-select ref="select" v-model:value="value" style="width: 200px" :options="options" @focus="focus"
+                @change="handleChange">
+            </a-select>
+        </span>
+        <span>
+            <a-input-search v-model:value="key" placeholder="请输入搜索内容" style="width: 200px" @search="onSearch" />
+        </span>
+        <div>
+            <a-checkbox v-model:checked="checked1">全部</a-checkbox>
+            <a-checkbox v-model:checked="checked2">测试数据1</a-checkbox>
+            <a-checkbox v-model:checked="checked3">测试数据2</a-checkbox>
+            <a-checkbox v-model:checked="checked4">测试数据3</a-checkbox>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+export default defineComponent({
+    name: 'Search',
+    components: {},
+    setup() {
+        const value = ref<string>('1');
+        const key = ref<string>('');
+        const checked1 = ref<boolean>(false);
+        const checked2 = ref<boolean>(false);
+        const checked3 = ref<boolean>(false);
+        const checked4 = ref<boolean>(false);
+            
+        const options = ref<SelectTypes['options']>([
+            {
+                value: '1',
+                label: '已审核',
+            },
+            {
+                value: '2',
+                label: '未审核',
+            },
+            {
+                value: '3',
+                label: '未通过',
+            },
+        ]);
+
+        function onSearch() {
+
+        }
+
+        return {
+            options,
+            value,
+            key,
+            onSearch,
+            checked1,
+            checked2,
+            checked3,
+            checked4,
+        };
+    },
+});
+</script>
+<style scoped>
+.wrapper>div {
+    float: right;
+    height: 32px;
+    padding: 5px 0;
+}
+
+.wrapper>span {
+    display: inline-block;
+    margin-right: 30px
+}
+
+.wrapper {
+    width: 100%;
+    height: 54px;
+    border-radius: 4px;
+    background: #edebeb;
+    padding: 11px;
+    margin-bottom: 20px
+}
+
+.sqrk {
+    width: 94px;
+    height: 32px;
+    background: #0671DD;
+    color: #fff;
+    line-height: 32px;
+    display: block;
+    text-align: center;
+    border-radius: 4px;
+}
+</style>

src/views/authorize/authorize/item/email.data.ts

@@ -0,0 +1,89 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import moment from 'moment';
+const { t } = useI18n();
+export const columns: BasicColumn[] = [
+  {
+    title: '邮件主题',
+    dataIndex: 'emailSubject',
+    width: 160,
+  },
+  {
+    title: '收件人',
+    dataIndex: 'emailTo',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const success = status === 'SUCCESS';
+      const color = success ? 'green' : 'red';
+      const successText: string = t('routes.common.system.tableSuccessStatus');
+      const failedText: string = t('routes.common.system.tableFailedStatus');
+      const text = success ? successText : failedText;
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '用途',
+    dataIndex: 'templatePurposeDictText',
+    width: 160,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 120,
+    slots: {
+      customRender: 'remark',
+    },
+  },
+  {
+    title: '发送时间',
+    dataIndex: 'sendTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'emailSubject',
+    label: '邮件主题',
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入邮件主题',
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 255) {
+              return Promise.reject('字数不超过255个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+
+    colProps: { span: 6 },
+  },
+  {
+    field: 'sendTime',
+    label: '发送时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];

src/views/authorize/authorize/item/file.data.ts

@@ -0,0 +1,221 @@
+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: BasicColumn[] = [
+  {
+    title: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
+    // title:'菜单名称',
+    dataIndex: 'meta.title',
+    width: 180,
+    align: 'left',
+    customRender: ({ record }) => {
+      record = t(record.title); //国际化处理
+      return record;
+    },
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
+    // title:'权限标识',
+    dataIndex: 'permission',
+    width: 220,
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemComponents'), //'组件'
+    // title:'组件',
+    width: 120,
+    // dataIndex: 'component',
+    dataIndex: 'url',
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemSort'), //'排序'
+    // title:'排序',
+    dataIndex: 'sort',
+    width: 50,
+  },
+
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+//----------------------------------新增、编辑----------------------------------------------------------
+export const formSchema: FormSchema[] = [
+  {
+    field: 'menuType',
+    label: t('routes.common.system.menuEditPagesMenuType'), //菜单类型
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesDirectory'), value: '0' }, //目录
+        { label: t('routes.common.system.menuEditPagesMenu'), value: '1' }, //菜单
+        { label: t('routes.common.system.menuEditPagesButton'), value: '2' }, //按钮
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'title',
+    label: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+
+  {
+    field: 'parentId',
+    label: t('routes.common.system.menuEditPagesParentMenu'), //上级菜单
+    component: 'TreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'menuName',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'sort',
+    label: t('routes.common.system.tableTitleSystemSort'), //排序
+    component: 'InputNumber',
+    required: true,
+    componentProps: {
+      maxLength: 32,
+    },
+  },
+  {
+    field: 'icon',
+    label: t('routes.common.system.tableTitleSystemIcon'), //图标
+    component: 'IconPicker',
+    required: true,
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'path',
+    label: t('routes.common.system.menuEditPagesRouterAddress'), //路由地址
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'permission',
+    label: '权限标识', //路由地址
+    component: 'Input',
+    // required: true,//是否必须
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'component',
+    label: t('routes.common.system.menuEditPagesComponentsPath'), //组件路径
+    component: 'Input',
+    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 100,
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 100) {
+              return Promise.reject('字数不超过100个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'permission',
+    label: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
+    component: 'Input',
+    ifShow: ({ values }) => !isDir(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 100,
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 100) {
+              return Promise.reject('字数不超过100个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'status',
+    label: t('routes.common.system.tableTitleSystemStatus'), //状态
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.tableTitleSystemEnable'), value: '0' }, //启用
+        { label: t('routes.common.system.tableTitleSystemStop'), value: '1' }, //禁用
+      ],
+    },
+  },
+  {
+    field: 'isLink',
+    label: t('routes.common.system.menuEditPagesIsExt'), //是否外链
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'ignoreKeepAlive',
+    label: t('routes.common.system.menuEditPagesIsKeepAlive'), //是否缓存
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'hideMenu',
+    label: t('routes.common.system.menuEditPagesIsHide'), //是否隐藏
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+];

src/views/authorize/authorize/item/map.data.ts

@@ -0,0 +1,221 @@
+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: BasicColumn[] = [
+  {
+    title: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
+    // title:'菜单名称',
+    dataIndex: 'meta.title',
+    width: 180,
+    align: 'left',
+    customRender: ({ record }) => {
+      record = t(record.title); //国际化处理
+      return record;
+    },
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
+    // title:'权限标识',
+    dataIndex: 'permission',
+    width: 220,
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemComponents'), //'组件'
+    // title:'组件',
+    width: 120,
+    // dataIndex: 'component',
+    dataIndex: 'url',
+  },
+  {
+    title: t('routes.common.system.tableTitleSystemSort'), //'排序'
+    // title:'排序',
+    dataIndex: 'sort',
+    width: 50,
+  },
+
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+//----------------------------------新增、编辑----------------------------------------------------------
+export const formSchema: FormSchema[] = [
+  {
+    field: 'menuType',
+    label: t('routes.common.system.menuEditPagesMenuType'), //菜单类型
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesDirectory'), value: '0' }, //目录
+        { label: t('routes.common.system.menuEditPagesMenu'), value: '1' }, //菜单
+        { label: t('routes.common.system.menuEditPagesButton'), value: '2' }, //按钮
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'title',
+    label: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+
+  {
+    field: 'parentId',
+    label: t('routes.common.system.menuEditPagesParentMenu'), //上级菜单
+    component: 'TreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'menuName',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'sort',
+    label: t('routes.common.system.tableTitleSystemSort'), //排序
+    component: 'InputNumber',
+    required: true,
+    componentProps: {
+      maxLength: 32,
+    },
+  },
+  {
+    field: 'icon',
+    label: t('routes.common.system.tableTitleSystemIcon'), //图标
+    component: 'IconPicker',
+    required: true,
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'path',
+    label: t('routes.common.system.menuEditPagesRouterAddress'), //路由地址
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'permission',
+    label: '权限标识', //路由地址
+    component: 'Input',
+    // required: true,//是否必须
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'component',
+    label: t('routes.common.system.menuEditPagesComponentsPath'), //组件路径
+    component: 'Input',
+    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 100,
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 100) {
+              return Promise.reject('字数不超过100个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'permission',
+    label: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
+    component: 'Input',
+    ifShow: ({ values }) => !isDir(Reflect.get(values, 'menuType')),
+    componentProps: {
+      maxLength: 100,
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 100) {
+              return Promise.reject('字数不超过100个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'status',
+    label: t('routes.common.system.tableTitleSystemStatus'), //状态
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.tableTitleSystemEnable'), value: '0' }, //启用
+        { label: t('routes.common.system.tableTitleSystemStop'), value: '1' }, //禁用
+      ],
+    },
+  },
+  {
+    field: 'isLink',
+    label: t('routes.common.system.menuEditPagesIsExt'), //是否外链
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'ignoreKeepAlive',
+    label: t('routes.common.system.menuEditPagesIsKeepAlive'), //是否缓存
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
+  },
+
+  {
+    field: 'hideMenu',
+    label: t('routes.common.system.menuEditPagesIsHide'), //是否隐藏
+    component: 'RadioButtonGroup',
+    defaultValue: false,
+    componentProps: {
+      options: [
+        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
+        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
+      ],
+    },
+    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
+  },
+];