项目初始化

2026-03-19 10:57:24 +08:00
commit ee94d420ad
3822 changed files with 582614 additions and 0 deletions
--- a/web-vue/packages/core/views/sys/menu/form.vue
+++ b/web-vue/packages/core/views/sys/menu/form.vue
@@ -0,0 +1,323 @@
+<!--
+ * Copyright (c) 2013-Now https://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author ThinkGem
+-->
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    :showFooter="true"
+    :okAuth="'sys:menu:edit'"
+    @register="registerDrawer"
+    @ok="handleSubmit"
+    width="70%"
+  >
+    <template #title>
+      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
+      <span> {{ getTitle.value }} </span>
+    </template>
+    <BasicForm @register="registerForm" />
+    <FormExtend ref="formExtendRef" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup name="ViewsSysMenuForm">
+  import { ref, unref, computed } from 'vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+  import { router } from '@jeesite/core/router';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { BasicForm, FormExtend, FormSchema, useForm } from '@jeesite/core/components/Form';
+  import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
+  import { Menu, menuSave, menuForm, menuTreeData } from '@jeesite/core/api/sys/menu';
+  // import { moduleSelectData } from '@jeesite/core/api/sys/module';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { t } = useI18n('sys.menu');
+  const { showMessage } = useMessage();
+  const { meta } = unref(router.currentRoute);
+  const record = ref<Menu>({} as Menu);
+  const getTitle = computed(() => ({
+    icon: meta.icon || 'ant-design:book-outlined',
+    value: record.value.isNewRecord ? t('新增菜单') : t('编辑菜单'),
+  }));
+  const formExtendRef = ref<InstanceType<typeof FormExtend>>();
+
+  const inputFormSchemas: FormSchema[] = [
+    {
+      label: t('基本信息'),
+      field: 'basicInfo',
+      component: 'FormGroup',
+      colProps: { md: 24, lg: 24 },
+    },
+    {
+      label: t('上级菜单'),
+      field: 'parentCode',
+      fieldLabel: 'parentName',
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      label: t('菜单类型'),
+      field: 'menuType',
+      component: 'RadioButtonGroup',
+      componentProps: {
+        dictType: 'sys_menu_type',
+      },
+      defaultValue: '1',
+    },
+    {
+      label: t('菜单名称'),
+      field: 'menuNameRaw',
+      component: 'Input',
+      componentProps: {
+        maxlength: 50,
+      },
+      required: true,
+    },
+    {
+      label: t('归属模块'),
+      field: 'moduleCodes',
+      component: 'Select',
+      componentProps: {
+        // api: moduleSelectData,
+        // allowClear: true,
+        mode: 'multiple',
+      },
+      defaultValue: 'core',
+      required: true,
+    },
+    {
+      label: t('链接地址'),
+      field: 'menuHref',
+      helpMessage: [
+        '一、路由规则：',
+        '　1、设置菜单的路由地址，对应组件目录为 /views/ 下的 .vue 文件',
+        '　2、路由名称生成规则为：Views + 去除地址的 “/”，并后一个字母大写，',
+        '　　　例如：路由地址为：/sys/menu/list，则生成路由名称为：ViewsSysMenuList',
+        '　3、Vue 组件位置存放规则为：/views/ + 路由地址（上面举例的路由地址）',
+        '　　　那么：组件位置应为：/views/sys/menu/list，组件名称应与路由名称相同',
+        '　4、组件名称定义在 script 标签的 name 属性，如 name="ViewsSysMenuList"',
+        '　5、注意：如果组件名称与路由名称不同，则会造成页面缓存失效。',
+        '二、链接前缀：',
+        '　1、使用 / 开头（默认）则为管理根路径，例如：http://host/{ctxPath}/{adminPath}/{href}',
+        '　2、使用 // 开头，则代表是工程根路径，例如：http://host/{ctxPath}/{href}',
+        '　3、使用 /// 开头，则代表是站点根路径，例如：http://host/{href}',
+        '　4、使用 http:// 或 https:// 开头，则为链接外部页面',
+        '三、可带变量： 格式为  {变量名} ',
+        '　1、{ssoToken} : 单点登录的token编码，url参数中的参数分隔符请使用“%26”进行转义，',
+        '　　　例如：{projectUrl}/sso/{ssoToken}?url=/sys/user/list?p1=v1%26p2=v2&relogin=true',
+        '　2、{sessionId} : 当前会话编号 v5.3.0',
+        '　3、{userCode} : 当前用户编码',
+        '　4、{userName} : 当前用户名称',
+        '　5、{userType} : 当前用户类型',
+        '　6、{corpCode} : 当前用户编码',
+        '　7、{corpName} : 当前用户名称',
+        '　8、{menuCode} : 当前菜单编码',
+        '　9、{menuParentCode} : 当前菜单上级编码',
+        '　10、{menuParentCodes} : 当前菜单所有上级编码',
+        '　11、userCache 中的 Key 可作为变量名',
+        '　12、yml 或 sys_config 中的 Key 可作为变量名',
+        '　13、上述没有的变量，交由 Vue 路由，详见 params.vue ',
+        '四、其他技巧：',
+        '　1、地址添加 ?__full__ 参数，目标为 __blank，支持新窗口全屏打开。',
+      ],
+      component: 'Input',
+      componentProps: {
+        maxlength: 2000,
+      },
+    },
+    {
+      label: t('链接目标'),
+      field: 'menuTarget',
+      helpMessage: '如果 “链接地址” 为 http(s):// 开头，目标设置为 _blank，则为新窗口打开',
+      component: 'Input',
+      componentProps: {
+        maxlength: 10,
+      },
+    },
+    {
+      label: t('组件位置'),
+      field: 'component',
+      helpMessage: [
+        '一、组件位置说明：',
+        '　1、自定义 Vue 组件位置，一般不需要填写，默认是根据 “链接地址” 进行自动生成',
+        '　2、当 “链接地址” 或 “路由地址” 与 Vue 组件位置匹配规则不一致的时候配置',
+        '二、也可以设置内置组件名称：',
+        '　1、填写 IFRAME 则强制使用 iframe 打开链接',
+        '　2、填写 LAYOUT 将不在 Beetl 视图中显示菜单项',
+        '　3、填写 BEETL 则只在 Beetl 视图中显示菜单项',
+        '　4、填写 BLANK 则不显示主框架（仅顶部菜单设置）',
+      ],
+      component: 'Input',
+      componentProps: {
+        maxlength: 500,
+      },
+      // show: ({ values }) => values.menuType === '1',
+    },
+    {
+      label: t('组件参数'),
+      field: 'params',
+      helpMessage: [
+        '可选，给组件传参，请填写 JSON 格式，前端通过定义 props 获取',
+        "举例：链接地址填写：/test/params   组件参数填写：{aa:'aa1',bb:'bb2'}",
+        'Vue：const props = defineProps({ aa: String, bb: String })',
+      ],
+      component: 'Input',
+      componentProps: {
+        maxlength: 500,
+      },
+      // show: ({ values }) => values.menuType === '1',
+    },
+    {
+      label: t('排序号'),
+      field: 'treeSort',
+      helpMessage: '升序，当前级别的排序号',
+      component: 'InputNumber',
+      defaultValue: '30',
+      componentProps: {
+        maxlength: 10,
+      },
+      required: true,
+    },
+    {
+      label: t('权限标识'),
+      field: 'permission',
+      helpMessage: '控制器中定义的权限标识，如：@RequiresPermissions("权限标识")',
+      component: 'Input',
+      componentProps: {
+        maxlength: 100,
+      },
+    },
+
+    {
+      label: t('其它信息'),
+      field: 'otherInfo',
+      component: 'FormGroup',
+      colProps: { md: 24, lg: 24 },
+    },
+    {
+      label: t('菜单图标'),
+      field: 'menuIcon',
+      component: 'IconPicker',
+      show: ({ values }) => values.menuType === '1',
+    },
+    {
+      label: t('字体颜色'),
+      field: 'menuColor',
+      component: 'Input',
+      componentProps: {
+        maxlength: 50,
+      },
+      show: ({ values }) => values.menuType === '1',
+    },
+    {
+      label: t('页签标题'),
+      field: 'menuTitle',
+      component: 'Input',
+      componentProps: {
+        maxlength: 50,
+      },
+      show: ({ values }) => values.menuType === '1',
+    },
+    {
+      label: t('是否可见'),
+      field: 'isShow',
+      component: 'RadioGroup',
+      defaultValue: '0',
+      componentProps: {
+        dictType: 'sys_show_hide',
+      },
+    },
+    {
+      label: t('菜单权重'),
+      field: 'weight',
+      component: 'Select',
+      defaultValue: 40,
+      componentProps: {
+        dictType: 'sys_menu_weight',
+      },
+      required: true,
+    },
+    {
+      label: t('备注信息'),
+      field: 'remarks',
+      component: 'InputTextArea',
+      componentProps: {
+        maxlength: 200,
+      },
+      colProps: { md: 24, lg: 24 },
+    },
+  ];
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 120,
+    schemas: inputFormSchemas,
+    baseColProps: { md: 24, lg: 12 },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ loading: true });
+    await resetFields();
+    await formExtendRef.value?.resetFields();
+    const res = await menuForm(data);
+    record.value = (res.menu || {}) as Menu;
+    if (data.parentCode && data.parentName) {
+      record.value.parentCode = data.parentCode;
+      record.value.parentName = data.parentName;
+    }
+    await setFieldsValue(record.value);
+    await updateSchema([
+      {
+        field: 'parentCode',
+        componentProps: {
+          api: menuTreeData,
+          params: {
+            sysCode: record.value.sysCode,
+            excludeCode: record.value.menuCode,
+            isShowRawName: true,
+          },
+        },
+      },
+      {
+        field: 'moduleCodes',
+        componentProps: {
+          options: res.moduleList.map((item) => ({
+            label: item.moduleName + ' ( ' + item.moduleCode + ' )',
+            value: item.moduleCode,
+          })),
+        },
+      },
+    ]);
+    await formExtendRef.value?.setFieldsValue(record.value.extend);
+    setDrawerProps({ loading: false });
+  });
+
+  async function handleSubmit() {
+    try {
+      const data = await validate();
+      setDrawerProps({ confirmLoading: true });
+      const params: any = {
+        isNewRecord: record.value.isNewRecord,
+        menuCode: record.value.menuCode,
+      };
+      data.sysCode = record.value.sysCode;
+      data.oldParentCode = record.value.parentCode;
+      data.extend = await formExtendRef.value?.validate();
+      // console.log('submit', params, data, record);
+      const res = await menuSave(params, data);
+      showMessage(res.message);
+      setTimeout(closeDrawer);
+      emit('success', data);
+    } catch (error: any) {
+      if (error && error.errorFields) {
+        showMessage(error.message || t('common.validateError'));
+      }
+      console.log('error', error);
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
--- a/web-vue/packages/core/views/sys/menu/index.vue
+++ b/web-vue/packages/core/views/sys/menu/index.vue
@@ -0,0 +1,78 @@
+<!--
+ * Copyright (c) 2013-Now https://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author ThinkGem
+-->
+<template>
+  <PageWrapper :sidebarWidth="200">
+    <template #sidebar>
+      <BasicTree
+        :search="true"
+        :toolbar="true"
+        :showIcon="true"
+        :api="menuTreeData"
+        :params="apiParams"
+        :defaultExpandLevel="1"
+        @select="handleSelect"
+        v-model:selectedKeys="treeCodes"
+      >
+        <template #headerTitle>
+          <Dropdown class="cursor-pointer" :trigger="['hover']" :dropMenuList="dropMenuList">
+            {{ sysName }} <DownOutlined />
+          </Dropdown>
+        </template>
+      </BasicTree>
+    </template>
+    <ListView v-model:treeCodes="treeCodes" :sysCode="sysCode" :isLeaf="isLeaf" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup name="ViewsSysMenuIndex">
+  import { ref, onMounted } from 'vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useDict } from '@jeesite/core/components/Dict';
+  import { Dropdown, DropMenu } from '@jeesite/core/components/Dropdown';
+  import { PageWrapper } from '@jeesite/core/components/Page';
+  import { BasicTree } from '@jeesite/core/components/Tree';
+  import { Menu, menuIndex, menuTreeData } from '@jeesite/core/api/sys/menu';
+  import ListView from './list.vue';
+
+  const { t } = useI18n('sys.menu');
+  const treeCodes = ref<string[]>([]);
+  const isLeaf = ref<boolean>(false);
+  const apiParams = ref<Recordable>({ sysCode: 'default' });
+
+  const dropMenuList = ref<Array<DropMenu>>([]);
+  const sysCode = ref<string>('default');
+  const sysName = ref<string>(t('菜单'));
+
+  onMounted(async () => {
+    const res = await menuIndex();
+    const menu = (res.menu || {}) as Menu;
+    sysCode.value = menu.sysCode || 'default';
+    await loadSysCode();
+  });
+
+  async function loadSysCode() {
+    dropMenuList.value = (await useDict().initGetDictList('sys_menu_sys_code')).map((item) => {
+      if (item.value == sysCode.value) {
+        sysName.value = item.name;
+      }
+      return {
+        text: item.name,
+        event: item.value,
+        icon: 'i-radix-icons:dot',
+        onClick: () => {
+          sysCode.value = item.value;
+          sysName.value = item.name;
+          apiParams.value.sysCode = item.value;
+          treeCodes.value = [];
+        },
+      };
+    });
+  }
+
+  function handleSelect(keys: string[], obj: any) {
+    isLeaf.value = !!obj?.node?.isLeaf;
+  }
+</script>
--- a/web-vue/packages/core/views/sys/menu/list.vue
+++ b/web-vue/packages/core/views/sys/menu/list.vue
@@ -0,0 +1,321 @@
+<!--
+ * Copyright (c) 2013-Now https://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author ThinkGem
+-->
+<template>
+  <div>
+    <BasicTable @register="registerTable" @fetch-success="fetchSuccess">
+      <template #tableTitle>
+        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
+        <span> {{ getTitle.value }} </span>
+      </template>
+      <template #toolbar>
+        <a-button @click="expandAll" :title="t('展开一级')">
+          <Icon icon="i-bi:chevron-double-down" /> {{ t('展开') }}
+        </a-button>
+        <a-button @click="collapseAll" :title="t('折叠全部')">
+          <Icon icon="i-bi:chevron-double-up" /> {{ t('折叠') }}
+        </a-button>
+        <a-button @click="handleUpdateTreeSort" :title="t('保存排序')">
+          <Icon icon="ant-design:sort-ascending-outlined" /> {{ t('保存排序') }}
+        </a-button>
+        <a-button type="primary" @click="handleForm({})" v-auth="'sys:menu:edit'">
+          <Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
+        </a-button>
+      </template>
+      <template #firstColumn="{ record }">
+        <Icon
+          :icon="record.menuIcon || 'i-ant-design:file-outlined'"
+          @click="expandCollapse(record)"
+          class="mr-2 w-5 text-base"
+        />
+        <a @click="handleForm({ menuCode: record.menuCode })" :title="record.menuNameRaw">
+          {{ record.menuNameRaw }}
+        </a>
+      </template>
+      <template #treeSort="{ record }">
+        <Input
+          v-model:value="record.treeSort"
+          @change="handleTreeSort($event, record)"
+          class="text-center"
+          size="small"
+        />
+      </template>
+    </BasicTable>
+    <InputForm @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts" setup name="ViewsSysMenuList">
+  import { ref, unref, watch, nextTick } from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+  import { router } from '@jeesite/core/router';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
+  import { menuDelete, menuDisable, menuEnable, menuListData, updateTreeSort } from '@jeesite/core/api/sys/menu';
+  import { useDrawer } from '@jeesite/core/components/Drawer';
+  import { FormProps } from '@jeesite/core/components/Form';
+  import { isEmpty } from '@jeesite/core/utils/is';
+  import InputForm from './form.vue';
+
+  const props = defineProps({
+    treeCodes: Array as PropType<String[]>,
+    sysCode: String,
+    isLeaf: Boolean,
+  });
+
+  const emit = defineEmits(['update:treeCodes']);
+
+  const { t } = useI18n('sys.menu');
+  const { showMessage } = useMessage();
+  const { meta } = unref(router.currentRoute);
+  const getTitle = {
+    icon: meta.icon || 'ant-design:book-outlined',
+    value: meta.title || t('菜单管理'),
+  };
+
+  const searchForm: FormProps = {
+    baseColProps: { md: 8, lg: 6 },
+    labelWidth: 90,
+    schemas: [
+      {
+        label: t('菜单名称'),
+        field: 'menuNameRaw',
+        component: 'Input',
+      },
+      {
+        label: t('菜单地址'),
+        field: 'menuHref',
+        component: 'Input',
+      },
+      {
+        label: t('权限标识'),
+        field: 'permission',
+        component: 'Input',
+      },
+      {
+        label: t('状态'),
+        field: 'status',
+        component: 'Select',
+        componentProps: {
+          dictType: 'sys_search_status',
+          allowClear: true,
+          onChange: handleSuccess,
+        },
+      },
+    ],
+    resetFunc: async () => {
+      emit('update:treeCodes', []);
+    },
+  };
+
+  const tableColumns: BasicColumn[] = [
+    {
+      title: t('菜单名称'),
+      dataIndex: 'menuNameRaw',
+      width: 230,
+      align: 'left',
+      slot: 'firstColumn',
+    },
+    {
+      title: t('归属模块'),
+      dataIndex: 'moduleCodes',
+      width: 110,
+    },
+    {
+      title: t('地址'),
+      dataIndex: 'menuHref',
+      align: 'left',
+      width: 130,
+    },
+    {
+      title: t('目标'),
+      dataIndex: 'menuTarget',
+      align: 'center',
+      width: 80,
+      defaultHidden: true,
+    },
+    {
+      title: t('组件'),
+      dataIndex: 'component',
+      align: 'center',
+      width: 80,
+    },
+    {
+      title: t('参数'),
+      dataIndex: 'params',
+      align: 'center',
+      width: 80,
+      defaultHidden: true,
+    },
+    {
+      title: t('排序号'),
+      dataIndex: 'treeSort',
+      width: 80,
+      slot: 'treeSort',
+    },
+    {
+      title: t('类型'),
+      dataIndex: 'menuType',
+      width: 70,
+      dictType: 'sys_menu_type',
+    },
+    {
+      title: t('可见'),
+      dataIndex: 'isShow',
+      width: 70,
+      dictType: 'sys_show_hide',
+    },
+    {
+      title: t('权限标识'),
+      dataIndex: 'permission',
+      width: 130,
+      align: 'left',
+    },
+    {
+      title: t('状态'),
+      dataIndex: 'status',
+      width: 70,
+      dictType: 'sys_status',
+    },
+    {
+      title: t('菜单权重'),
+      dataIndex: 'weight',
+      width: 120,
+      dictType: 'sys_menu_weight',
+    },
+  ];
+
+  const actionColumn: BasicColumn = {
+    width: 180,
+    actions: (record: Recordable) => [
+      {
+        icon: 'i-clarity:note-edit-line',
+        title: t('编辑菜单'),
+        onClick: handleForm.bind(this, { menuCode: record.menuCode }),
+        auth: 'sys:menu:edit',
+      },
+      {
+        icon: 'i-ant-design:stop-outlined',
+        color: 'error',
+        title: t('停用菜单'),
+        popConfirm: {
+          title: t('是否确认停用菜单'),
+          confirm: handleDisable.bind(this, record),
+        },
+        auth: 'sys:menu:edit',
+        ifShow: () => record.status === '0',
+      },
+      {
+        icon: 'i-ant-design:check-circle-outlined',
+        color: 'success',
+        title: t('启用菜单'),
+        popConfirm: {
+          title: t('是否确认启用菜单'),
+          confirm: handleEnable.bind(this, record),
+        },
+        auth: 'sys:menu:edit',
+        ifShow: () => record.status === '2',
+      },
+      {
+        icon: 'i-ant-design:delete-outlined',
+        color: 'error',
+        title: t('删除菜单'),
+        popConfirm: {
+          title: t('是否确认删除菜单'),
+          confirm: handleDelete.bind(this, record),
+        },
+        auth: 'sys:menu:edit',
+      },
+      {
+        icon: 'i-fluent:add-circle-24-regular',
+        title: t('新增下级菜单'),
+        onClick: handleForm.bind(this, {
+          parentCode: record.menuCode,
+          parentName: record.menuNameRaw,
+        }),
+        auth: 'sys:menu:edit',
+      },
+    ],
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
+    api: menuListData,
+    beforeFetch: (params) => {
+      params.sysCode = props.sysCode || 'default';
+      params.menuCode = !isEmpty(props.treeCodes) ? props.treeCodes[0] : '';
+      return params;
+    },
+    columns: tableColumns,
+    actionColumn: actionColumn,
+    formConfig: searchForm,
+    showTableSetting: true,
+    useSearchForm: true,
+    isTreeTable: true,
+    pagination: false,
+    canResize: true,
+  });
+
+  watch([() => props.treeCodes, () => props.sysCode], async (value, oldValue) => {
+    if (!isEmpty(props.treeCodes) || value[1] != oldValue[1]) {
+      await reload();
+    }
+    // if (props.isLeaf) {
+    //   handleForm({ menuCode: props.treeCode });
+    // }
+  });
+
+  function fetchSuccess() {
+    if (!isEmpty(props.treeCodes)) {
+      nextTick(expandAll);
+    }
+  }
+
+  function handleForm(record: Recordable) {
+    record.sysCode = props.sysCode;
+    openDrawer(true, record);
+  }
+
+  async function handleDisable(record: Recordable) {
+    const params = { menuCode: record.menuCode };
+    const res = await menuDisable(params);
+    showMessage(res.message);
+    handleSuccess(record);
+  }
+
+  async function handleEnable(record: Recordable) {
+    const params = { menuCode: record.menuCode };
+    const res = await menuEnable(params);
+    showMessage(res.message);
+    handleSuccess(record);
+  }
+
+  async function handleDelete(record: Recordable) {
+    const params = { menuCode: record.menuCode };
+    const res = await menuDelete(params);
+    showMessage(res.message);
+    handleSuccess(record);
+  }
+
+  function handleSuccess(record: Recordable) {
+    reload({ record });
+  }
+
+  const treeSortRef = ref({});
+  function handleTreeSort(event: any, record: Recordable) {
+    treeSortRef.value[record.id] = record.treeSort;
+  }
+
+  async function handleUpdateTreeSort() {
+    const data = await updateTreeSort({
+      ids: Object.keys(treeSortRef.value).join(','),
+      sorts: Object.values(treeSortRef.value).join(','),
+    });
+    showMessage(data.message);
+    treeSortRef.value = {};
+    handleSuccess({});
+  }
+</script>