重构小程序端管理模块

2024-07-21 19:58:08 +08:00
parent 48ea6d0301
commit 23a25e1285
55 changed files with 3177 additions and 333 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 VITE_APP_NAME=后台管理系统
 VITE_SOCKET_URL=wss://server.gxwebsoft.com
-#VITE_SERVER_URL=https://server.gxwebsoft.com/api
-VITE_API_URL=https://modules.gxwebsoft.com/api
+VITE_SERVER_URL=https://server.gxwebsoft.com/api
+#VITE_API_URL=https://modules.gxwebsoft.com/api

-VITE_SERVER_URL=http://127.0.0.1:9091/api
-#VITE_API_URL=http://127.0.0.1:9099/api
+#VITE_SERVER_URL=http://127.0.0.1:9091/api
+VITE_API_URL=http://127.0.0.1:9099/api
--- a/src/api/cms/mp-menu/model/index.ts
+++ b/src/api/cms/mp-menu/model/index.ts
@@ -67,13 +67,17 @@ export interface MpMenu {
  // 子菜单
  children?: MpMenu[];
  pageName?: string;
+  groupName?: string;
 }

 /**
 * 小程序端菜单搜索条件
 */
 export interface MpMenuParam extends PageParam {
+  parentId?: number;
  menuId?: number;
+  pageId?: number;
+  subpackage?: string;
  type?: number;
  keywords?: string;
 }
--- a/src/api/cms/mpPages/index.ts
+++ b/src/api/cms/mpPages/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { MpPages, MpPagesParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询小程序页面
+ */
+export async function pageMpPages(params: MpPagesParam) {
+  const res = await request.get<ApiResult<PageResult<MpPages>>>(
+    MODULES_API_URL + '/cms/mp-pages/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询小程序页面列表
+ */
+export async function listMpPages(params?: MpPagesParam) {
+  const res = await request.get<ApiResult<MpPages[]>>(
+    MODULES_API_URL + '/cms/mp-pages',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加小程序页面
+ */
+export async function addMpPages(data: MpPages) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/mp-pages',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改小程序页面
+ */
+export async function updateMpPages(data: MpPages) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/mp-pages',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除小程序页面
+ */
+export async function removeMpPages(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/mp-pages/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除小程序页面
+ */
+export async function removeBatchMpPages(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/mp-pages/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询小程序页面
+ */
+export async function getMpPages(id: number) {
+  const res = await request.get<ApiResult<MpPages>>(
+    MODULES_API_URL + '/cms/mp-pages/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
--- a/src/api/cms/mpPages/model/index.ts
+++ b/src/api/cms/mpPages/model/index.ts
@@ -0,0 +1,48 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 小程序页面
+ */
+export interface MpPages {
+  // ID
+  id?: number;
+  // 上级id, 0是顶级
+  parentId?: number;
+  // 页面名称
+  title?: string;
+  // 页面路径
+  path?: string;
+  // 设为首页
+  home?: number;
+  // 分包
+  subpackage?: string;
+  // 图标
+  icon?: string;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 备注
+  comments?: string;
+  // 用户ID
+  userId?: number;
+  // 状态, 0正常, 1冻结
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 子页面
+  children?: MpPages[];
+}
+
+/**
+ * 小程序页面搜索条件
+ */
+export interface MpPagesParam extends PageParam {
+  id?: number;
+  title?: string;
+  path?: string;
+  subpackage?: string;
+  keywords?: string;
+}
--- a/src/api/system/file/index.ts
+++ b/src/api/system/file/index.ts
@@ -213,3 +213,22 @@ export async function uploadOssByGroupId(file: File, GroupId: string) {
  }
  return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 上传阿里云OSS
+ */
+export async function uploadOssByAppId(file: File, appId: string) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await request.post<ApiResult<FileRecord>>(
+    SERVER_API_URL + '/oss/upload',
+    formData,
+    {
+      headers: { appId }
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
--- a/src/components/SelectDict/components/select-data.vue
+++ b/src/components/SelectDict/components/select-data.vue
@@ -51,12 +51,13 @@
  import { pageDictData } from '@/api/system/dict-data';
  import { DictData, DictDataParam } from '@/api/system/dict-data/model';

-  defineProps<{
+  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    title?: any;
    // 修改回显的数据
    data?: DictData | null;
+    dictCode?: string;
  }>();

  const emit = defineEmits<{
@@ -93,6 +94,11 @@
      dataIndex: 'dictDataName',
      key: 'dictDataName'
    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
    {
      title: '操作',
      key: 'action',
@@ -103,7 +109,7 @@

  // 表格数据源
  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
-    where.dictCode = 'groupId';
+    where.dictCode = props.dictCode;
    return pageDictData({
      ...where,
      ...orders,
--- a/src/components/SelectDict/index.vue
+++ b/src/components/SelectDict/index.vue
@@ -15,6 +15,7 @@
    <select-data
      v-model:visible="showEdit"
      :data="current"
+      :dictCode="dictCode"
      :title="placeholder"
      @done="onChange"
    />
@@ -32,6 +33,7 @@
      value?: any;
      placeholder?: string;
      index?: number;
+      dictCode?: string;
    }>(),
    {
      placeholder: '请选择字典'
--- a/src/config/menu.ts
+++ b/src/config/menu.ts
@@ -64,7 +64,7 @@ export default [
      {
        path: '/system/organization',
        component: '/system/organization',
-        meta: { title: '组织机构', icon: 'BankOutlined' }
+        meta: { title: '部门管理', icon: 'BankOutlined' }
      },
      {
        path: '/system/file',
--- a/src/i18n/lang/zh_CN/list.ts
+++ b/src/i18n/lang/zh_CN/list.ts
@@ -6,7 +6,7 @@ export default {
      avatar: '头像',
      username: '账号',
      nickname: '昵称',
-      organizationName: '组织机构',
+      organizationName: '部门管理',
      phone: '手机号',
      sexName: '性别',
      createTime: '创建时间',
--- a/src/i18n/lang/zh_CN/route.ts
+++ b/src/i18n/lang/zh_CN/route.ts
@@ -13,7 +13,7 @@ export default {
    role: { _name: '角色管理' },
    menu: { _name: '菜单管理' },
    dictionary: { _name: '字典管理(系统类)' },
-    organization: { _name: '组织机构' },
+    organization: { _name: '部门管理' },
    loginRecord: { _name: '登录日志' },
    operationRecord: { _name: '操作日志' },
    file: { _name: '文件管理' }
--- a/src/layout/components/header-tools.vue
+++ b/src/layout/components/header-tools.vue
@@ -8,7 +8,7 @@
        treeDefaultExpandAll
        :bordered="bordered"
        :tree-data="menuTree"
-        :placeholder="`请输入搜索关键词`"
+        :placeholder="`订单管理`"
        :value="parentId || undefined"
        style="width: 180px"
        v-if="menuTree.length"
--- a/src/store/modules/theme.ts
+++ b/src/store/modules/theme.ts
@@ -53,7 +53,7 @@ const DEFAULT_STATE: ThemeState = Object.freeze({
  // 侧栏菜单风格: default(默认), mix(双排侧栏)
  sideMenuStyle: 'default',
  // 页签风格: default(默认), dot(圆点), card(卡片)
-  tabStyle: 'card',
+  tabStyle: 'default',
  // 路由切换动画
  transitionName: 'fade',
  // 是否固定顶栏
--- a/src/views/cms/article/list.vue
+++ b/src/views/cms/article/list.vue
@@ -27,9 +27,14 @@
              <AntDesignOutlined />
            </template>
          </a-avatar>
-          <a @click="openPreview('/a/' + record.articleId)">{{
-            record.title
-          }}</a>
+          <a
+            @click="
+              openPreview(
+                `https://${record.tenantId}.wsdns.cn/a/${record.articleId}`
+              )
+            "
+            >{{ record.title }}</a
+          >
        </a-space>
      </template>
      <template v-if="column.key === 'image'"> </template>
--- a/src/views/cms/category/index.vue
+++ b/src/views/cms/category/index.vue
@@ -66,9 +66,15 @@
              style="margin-right: 10px"
              v-if="record.image"
            />
-            <a @click="openPreview('/article/' + record.categoryId)">{{
-              record.title
-            }}</a>
+            <a
+              @click="
+                openPreview(
+                  `https://${record.tenantId}.wsdns.cn/article/` +
+                    record.categoryId
+                )
+              "
+              >{{ record.title }}</a
+            >
          </template>
          <template v-if="column.key === 'showIndex'">
            <a-space @click="onShowIndex(record)">
--- a/src/views/cms/design/index.vue
+++ b/src/views/cms/design/index.vue
@@ -22,7 +22,14 @@
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
-              <a @click="openPreview(record.path)">{{ record.name }}</a>
+              <a
+                @click="
+                  openPreview(
+                    `https://${record.tenantId}.wsdns.cn${record.path}`
+                  )
+                "
+                >{{ record.name }}</a
+              >
            </template>
            <template v-if="column.key === 'path'">
              <span class="ele-text-placeholder">{{ record.path }}</span>
--- a/src/views/cms/mpDesign/components/mpMenuEdit.vue
+++ b/src/views/cms/mpDesign/components/mpMenuEdit.vue
@@ -0,0 +1,285 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑菜单' : '添加菜单'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="菜单名称" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入菜单名称"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="路由地址" name="path">
+        <a-input
+          allow-clear
+          placeholder="请输入路由地址"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="菜单图标" name="icon">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="图标颜色" name="color">
+        <ele-color-picker
+          :show-alpha="true"
+          v-model:value="form.color"
+          :predefine="predefineColors"
+        />
+      </a-form-item>
+      <a-form-item label="分组" name="parentId">
+        <SelectDict
+          dict-code="mpGroup"
+          :placeholder="`选择分组`"
+          v-model:value="form.groupName"
+          @done="chooseGroupId"
+        />
+      </a-form-item>
+      <a-form-item label="所在行" name="rows">
+        <a-input-number
+          :min="0"
+          :max="3"
+          class="ele-fluid"
+          placeholder="请输入所在行"
+          v-model:value="form.rows"
+        />
+      </a-form-item>
+      <a-form-item label="打开方式" name="target">
+        <DictSelect
+          dict-code="navType"
+          class="form-item"
+          placeholder="请选择链接方式"
+          v-model:value="form.target"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+  import { DictData } from "@/api/system/dict-data/model";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 类型 0服务 1订单
+    type?: number;
+    // 页面ID
+    pageId?: number;
+    // 修改回显的数据
+    data?: MpMenu | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  const pageId = ref(0);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<MpMenu>({
+    menuId: undefined,
+    parentId: 0,
+    title: '',
+    type: 2,
+    rows: 0,
+    isMpWeixin: true,
+    path: undefined,
+    component: undefined,
+    target: 'uni.navigateTo',
+    icon: '',
+    color: undefined,
+    hide: undefined,
+    position: undefined,
+    active: undefined,
+    userId: 0,
+    home: undefined,
+    sortNumber: 100,
+    comments: '',
+    status: 0
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写菜单名称',
+        trigger: 'blur'
+      }
+    ],
+    path: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写路由地址',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.thumbnail,
+      status: 'done'
+    });
+    form.icon = data.thumbnail;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.icon = '';
+  };
+
+  const chooseGroupId = (item: DictData) => {
+    form.parentId = item.dictDataId;
+    form.groupName = item.dictDataName;
+  };
+
+  // 预设颜色
+  const predefineColors = ref([
+    '#40a9ff',
+    '#9254de',
+    '#36cfc9',
+    '#73d13d',
+    '#f759ab',
+    '#cf1313',
+    '#ff4d4f',
+    '#ffa940',
+    '#ffc53d',
+    '#f3d3d3',
+    '#1b1b1b',
+    '#363636',
+    '#4d4d4d',
+    '#737373',
+    '#a6a6a6',
+    '#d9d9d9',
+    '#e6e6e6',
+    '#f2f2f2',
+    '#f7f7f7',
+    '#fafafa'
+  ]);
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          pageId: pageId.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        pageId.value = props.pageId;
+        if (props.type) {
+          form.type = props.type;
+        }
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.icon) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.icon,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
--- a/src/views/cms/mpDesign/components/search.vue
+++ b/src/views/cms/mpDesign/components/search.vue
@@ -0,0 +1,73 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加图标</span>
+    </a-button>
+    <SelectDict
+      dict-code="mpGroup"
+      :placeholder="`选择分组`"
+      v-model:value="where.groupName"
+      @done="chooseGroupId"
+    />
+    <a-button @click="reset">重置</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
+  import { DictData } from '@/api/system/dict-data/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: MpMenuParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<MpMenu>({
+    parentId: undefined,
+    groupName: ''
+  });
+
+  const handleSearch = () => {
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    where.parentId = undefined;
+    handleSearch();
+  };
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  const chooseGroupId = (item: DictData) => {
+    where.parentId = item.dictDataId;
+    where.groupName = item.dictDataName;
+    handleSearch();
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
--- a/src/views/cms/mpDesign/components/simulator.vue
+++ b/src/views/cms/mpDesign/components/simulator.vue
@@ -0,0 +1,510 @@
+<template>
+  <div class="phone-layout" v-if="form">
+    <div class="phone-header-black ele-fluid">
+      <div class="title ele-fluid">
+        <div class="title-bar">
+          <span class="back"></span>
+          <span>{{ form.title || '首页' }}</span>
+          <a class="share" @click="onShare"></a>
+        </div>
+      </div>
+    </div>
+    <!--  会员信息卡片  -->
+    <template v-if="form.title == '我的'">
+      <a-popover>
+        <template #content> 点击更换背景 </template>
+        <div
+          class="user-card"
+          :style="{
+            backgroundImage: 'url(' + param.mp_user_top + ')'
+          }"
+          @click="
+            openUserCard({
+              name: 'mp_user_top',
+              value: param.mp_user_top,
+              comments: '小程序我的顶部背景图片',
+              sortNumber: 100
+            })
+          "
+        >
+          <div class="user-avatar">
+            <a-avatar :src="param.site_logo" :size="60" />
+            <div class="user-info">
+              <div class="nickname">昵称</div>
+              <div class="phone">手机号码</div>
+            </div>
+          </div>
+        </div>
+      </a-popover>
+      <UserCardEdit
+        v-model:visible="showUserCardEdit"
+        :data="current"
+        @done="reload"
+      />
+    </template>
+    <template v-if="form.title">
+      <div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
+        <!-- 幻灯片轮播 -->
+        <template v-if="form.showCarousel">
+          <div
+            class="ad-bar"
+            :style="{
+              backgroundImage: 'url(' + param.mp_user_top + ')'
+            }"
+            @click="onCarousel"
+          >
+            <a-carousel arrows autoplay :dots="true">
+              <template v-if="adImageList">
+                <template v-for="(img, index) in adImageList" :key="index">
+                  <div class="ad-item">
+                    <a-image
+                      :preview="false"
+                      :src="img.url"
+                      width="100%"
+                      height="200px"
+                    />
+                  </div>
+                </template>
+              </template>
+            </a-carousel>
+          </div>
+        </template>
+        <!-- 导航菜单 -->
+        <template v-if="mpMenus">
+          <!--  单排  -->
+          <div class="order-card ele-cell">
+            <div
+              v-for="(item, index) in mpMenus"
+              :key="index"
+              class="ele-cell-content ele-text-center btn-center"
+              @click="openMpMenuEdit(item)"
+            >
+              <a-image :src="item.icon" :width="40" :preview="false" />
+              <span style="white-space: nowrap">{{ item.title }}</span>
+            </div>
+          </div>
+          <MpMenuEdit
+            v-model:visible="showMpMenuEdit"
+            :data="current"
+            @done="reload"
+          />
+        </template>
+        <!-- 商户列表 -->
+        <template v-if="form.showShopCard">
+          <div class="merchant-card-title">场地预定</div>
+          <div
+            class="merchant-card ele-cell"
+            v-for="(item, index) in shopList"
+            :key="index"
+          >
+            <a-image :src="item.image" :width="96" :preview="false" />
+            <div class="merchant-info ele-cell-content">
+              <div class="merchant-name">{{ item.merchantName }}</div>
+              <div class="merchant-desc ele-cell-desc">
+                {{ item.comments }}
+              </div>
+            </div>
+            <!--            <div class="">-->
+            <!--              <a-button>我要去</a-button>-->
+            <!--            </div>-->
+          </div>
+        </template>
+        <!-- 培训课程 -->
+        <template v-if="form.showTtrainCard">
+          <div class="merchant-card-title">培训课程</div>
+          <div
+            class="merchant-card ele-cell"
+            v-for="(item, index) in shopList"
+            :key="index"
+            @click="openMpMenuEdit(item)"
+          >
+            <a-image :src="item.image" :width="96" :preview="false" />
+            <div class="merchant-info ele-cell-content">
+              <div class="merchant-name">{{ item.merchantName }}</div>
+              <div class="merchant-desc ele-cell-desc">
+                {{ item.comments }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <a-card
+      class="buy-bar"
+      :bordered="false"
+      v-if="form"
+      :body-style="{ padding: '12px 16px' }"
+    >
+      <div class="ele-cell">
+        <template v-for="(item, index) in tabBar" :key="index">
+          <a
+            class="home-btn ele-cell-content ele-text-secondary"
+            @click="openUrl(`/mp-design/${item.id}`)"
+          >
+            <component
+              v-if="item.icon"
+              class="icon"
+              :class="form.id === item.id ? 'ele-text-danger' : ''"
+              :is="item.icon"
+            />
+            <span :class="form.id === item.id ? 'ele-text-danger' : ''">{{
+              item.title
+            }}</span>
+          </a>
+        </template>
+      </div>
+    </a-card>
+    <AdEdit v-model:visible="showAdEdit" :data="ad" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { MpWeixinParam, WebsiteField } from '@/api/cms/website/field/model';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import type { MpPages } from '@/api/cms/mpPages/model';
+  import { openUrl } from '@/utils/common';
+
+  import MpMenuEdit from './mpMenuEdit.vue';
+  import { Ad } from '@/api/cms/ad/model';
+  import AdEdit from '@/views/cms/ad/components/ad-edit.vue';
+  import UserCardEdit from '@/views/cms/field/components/website-field-edit.vue';
+
+  const prpos = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      form?: MpPages;
+      tabBar?: MpPages[];
+      type?: number;
+      mpMenus?: any[] | null;
+      refresh?: boolean;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const param = ref<MpWeixinParam>({});
+  const showUserCardEdit = ref(false);
+  const showMpMenuEdit = ref(false);
+  const showAdEdit = ref(false);
+  const ad = ref<Ad>();
+  // 当前编辑数据
+  const current = ref<WebsiteField | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openUserCard = (row?: WebsiteField) => {
+    current.value = row ?? null;
+    showUserCardEdit.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openMpMenuEdit = (row?: MpMenu) => {
+    current.value = row ?? null;
+    showMpMenuEdit.value = true;
+  };
+
+  const onShare = () => {};
+
+  const onCarousel = (row?: Ad) => {
+    showAdEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  reload();
+
+  watch(
+    () => prpos.refresh,
+    (refresh) => {
+      if (refresh) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
+  export default {
+    name: 'Simulator',
+    components: MenuIcons
+  };
+</script>
+
+<style lang="less" scoped>
+  .phone-layout {
+    position: fixed;
+    right: 26px;
+    width: 390px;
+    height: 844px;
+    background: url('@/assets/img/app-ui.png');
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: 100%;
+    //position: relative;
+    padding: 0 16px;
+    .phone-header-black {
+      height: 99px;
+      border-radius: 20px 20px 0 0;
+      background-size: 100%;
+      .title {
+        height: 99px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: end;
+        padding-bottom: 13px;
+
+        .title-bar {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          .back {
+            display: block;
+            width: 50px;
+            margin-left: 3px;
+            background-color: #ffffff;
+          }
+          .share {
+            display: block;
+            width: 50px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .ad-bar {
+      background-color: var(--grey-10);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    .phone-body-bg {
+      padding: 0 16px;
+      height: 680px;
+      border-radius: 0 0 44px 44px;
+      overflow: hidden;
+    }
+    .phone-body {
+      width: 356px;
+      margin-left: 17px;
+      height: 630px;
+      padding: 0;
+      position: absolute;
+      top: 98px;
+      left: 0;
+      z-index: 999;
+      .comments {
+        padding: 20px;
+        word-break: break-all;
+      }
+      .form-data {
+        padding: 10px 20px;
+        .submit-btn {
+          padding: 30px 0;
+        }
+      }
+    }
+    .goods {
+      .price {
+        font-size: 18px;
+      }
+      .ele-cell-title {
+        font-weight: 600;
+        font-size: 16px;
+      }
+      .goods-attr {
+      }
+    }
+    .goods-divider {
+      height: 6px;
+    }
+    .buy-bar {
+      position: fixed;
+      width: 356px;
+      bottom: 70px;
+      //top: 881px;
+      background-color: #ffffff;
+      border-radius: 0 0 44px 44px;
+      border-top: 1px solid var(--grey-8);
+      .ele-cell-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .home-btn,
+      .shop-btn,
+      .order-btn,
+      .user-btn {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        padding: 0 9px;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .icon {
+        font-size: 19px;
+      }
+      .buy-btn {
+        display: flex;
+        .add-cart {
+          border-radius: 100px 0 0 100px;
+          border: none;
+          background-color: var(--orange-5);
+          color: #ffffff;
+          height: 40px;
+          width: 95px;
+        }
+        .buy-now {
+          border-radius: 0 100px 100px 0;
+          border: none;
+          background-color: var(--red-6);
+          color: #ffffff;
+          height: 40px;
+          width: 95px;
+        }
+      }
+    }
+  }
+  :deep(.slick-slide) {
+    overflow: hidden;
+  }
+  :deep(.slick-arrow.custom-slick-arrow) {
+    font-size: 38px;
+  }
+  :deep(.slick-arrow.custom-slick-arrow) {
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    transition: ease all 0.3s;
+    opacity: 0.3;
+    z-index: 1;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:before) {
+    display: none;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:hover) {
+    color: #fff;
+    opacity: 0.5;
+  }
+  :deep(.slick-slide h3) {
+    color: #fff;
+  }
+
+  .user-card {
+    height: 170px;
+    margin: 0 1px;
+    background-color: var(--grey-10);
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    .user-avatar {
+      margin-left: 16px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .user-info {
+        margin-left: 10px;
+        .nickname {
+          color: var(--grey-3);
+          font-size: 18px;
+          font-weight: 500;
+        }
+        .phone {
+          color: var(--grey-5);
+        }
+      }
+    }
+  }
+
+  .menu-card {
+    width: 330px;
+    margin: 6px auto;
+    border-radius: 5px;
+    border-color: slategrey;
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+  .merchant-card-title {
+    width: 340px;
+    margin: 6px auto;
+    font-size: 20px;
+    font-weight: 500;
+    margin-top: 16px;
+  }
+  .merchant-card {
+    width: 340px;
+    max-height: 80px;
+    margin: 6px auto;
+    margin-bottom: 16px;
+    padding: 8px;
+    background: #ffffff;
+    border-radius: 5px;
+    border-color: slategrey;
+    .merchant-name {
+      font-weight: 500;
+      font-size: 15px;
+    }
+    .merchant-desc {
+      width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .tools-card {
+    width: 340px;
+    margin: 0 1px;
+    padding: 6px 16px;
+    background: #ffffff;
+    border-radius: 5px;
+    border-color: slategrey;
+    position: absolute;
+    top: 324px;
+    left: 24px;
+    .ele-cell {
+      padding: 4px 0;
+      border-bottom: 1px solid var(--grey-9);
+    }
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .order-card {
+    width: 330px;
+    height: 80px;
+    margin: 0 auto;
+    padding: 8px;
+    background: #ffffff;
+    border-radius: 5px;
+    border-color: slategrey;
+    //position: absolute;
+    //top: 230px;
+    //left: 24px;
+    .btn-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+</style>
--- a/src/views/cms/mpDesign/index.vue
+++ b/src/views/cms/mpDesign/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <a-page-header
+    :title="`${mpPage?.title}`"
+    :subTitle="mpPage?.path"
+    @back="push('/mp-pages')"
+  >
+    <div class="ele-cell ele-cell-align-top">
+      <!-- 设计画布 -->
+      <div class="body ele-cell-content ele-bg-white">
+        <a-card :bordered="false" :body-style="{ padding: '16px' }">
+          <ele-pro-table
+            ref="tableRef"
+            row-key="menuId"
+            :columns="columns"
+            :datasource="datasource"
+            :customRow="customRow"
+            tool-class="ele-toolbar-form"
+            class="sys-org-table"
+          >
+            <template #toolbar>
+              <search
+                @search="reload"
+                :selection="selection"
+                @add="openEdit"
+                @remove="removeBatch"
+                @batchMove="openMove"
+              />
+            </template>
+            <template #footer>
+              <div class="ele-text-secondary"
+                >温馨提示：选图标可以上<a
+                  href="https://www.iconfont.cn"
+                  target="_blank"
+                  >阿里巴巴矢量图标库</a
+                >，修改完后需要<a @click="clearSiteInfoCache">清除缓存</a
+                >才会生效</div
+              >
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'icon'">
+                <a-avatar :src="record.icon" :width="50" />
+              </template>
+              <template v-if="column.key === 'path'">
+                <span class="ele-text-placeholder">{{ record.path }}</span>
+              </template>
+              <template v-if="column.key === 'component'">
+                <span class="ele-text-placeholder">{{ record.component }}</span>
+              </template>
+              <template v-if="column.key === 'status'">
+                <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+                <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+              </template>
+              <template v-if="column.key === 'action'">
+                <a-space>
+                  <a @click="openEdit(record)">修改</a>
+                  <a-divider type="vertical" />
+                  <a-popconfirm
+                    title="确定要删除此记录吗？"
+                    @confirm="remove(record)"
+                  >
+                    <a class="ele-text-danger">删除</a>
+                  </a-popconfirm>
+                </a-space>
+              </template>
+            </template>
+          </ele-pro-table>
+        </a-card>
+      </div>
+      <!-- 载入模拟器 -->
+      <Simulator
+        :form="mpPage"
+        :type="type"
+        :tabBar="tabBar"
+        :mpMenus="mpMenus"
+        :refresh="refresh"
+        @done="reload"
+      />
+      <!-- 中间间隙 -->
+      <div style="width: 500px"></div>
+      <!-- 编辑弹窗 -->
+      <MpMenuEdit
+        v-model:visible="showEdit"
+        :type="type"
+        :page-id="mpPage?.id"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, unref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MpMenuEdit from './components/mpMenuEdit.vue';
+  import Simulator from './components/simulator.vue';
+  import { useRouter } from 'vue-router';
+  import {
+    pageMpMenu,
+    removeMpMenu,
+    removeBatchMpMenu,
+    listMpMenu
+  } from '@/api/cms/mp-menu';
+  import type { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
+  import { removeSiteInfoCache } from '@/api/cms/website';
+  import { useRoute } from 'vue-router';
+  import { getMpPages, listMpPages } from '@/api/cms/mpPages';
+  import { MpPages } from '@/api/cms/mpPages/model';
+  import { setPageTab } from '@/utils/page-tab-util';
+  const route = useRoute();
+  const { push } = useRouter();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 当前页面
+  const mpPage = ref<MpPages>();
+  const pageId = ref(0);
+  // 原生导航栏
+  const tabBar = ref<MpPages[]>();
+  const mpMenus = ref<MpMenu[]>([]);
+  // 表格选中数据
+  const selection = ref<MpMenu[]>([]);
+  // 当前编辑数据
+  const current = ref<MpMenu | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  // const loading = ref(true);
+  const type = ref<number>(2);
+  const refresh = ref(false);
+  // 模拟器的字段
+  // const form = ref<any>({
+  //   pageName: '首页',
+  //   showOrderCard: true,
+  //   showCarousel: true,
+  //   showMenuCard: true,
+  //   showShopCard: true,
+  //   showTtrainCard: false
+  // });
+  // 菜单列表
+  // const list = ref<any[]>();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.pageId = pageId.value;
+    return pageMpMenu({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'menuId',
+      key: 'menuId',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '菜单图标',
+      dataIndex: 'icon',
+      key: 'icon',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '菜单名称',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center'
+    },
+    {
+      title: '路由地址',
+      dataIndex: 'path',
+      key: 'path'
+    },
+    {
+      title: '分组名称',
+      dataIndex: 'groupName',
+      key: 'groupName'
+    },
+    {
+      title: '所在行',
+      dataIndex: 'rows',
+      key: 'rows',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MpMenuParam) => {
+    type.value = Number(where?.type) || 0;
+    refresh.value = !refresh.value;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MpMenu) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  // 清除缓存
+  const clearSiteInfoCache = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          message.success('缓存已更新');
+        }
+      }
+    );
+  };
+
+  /* 删除单个 */
+  const remove = (row: MpMenu) => {
+    const hide = message.loading('请求中..', 0);
+    removeMpMenu(row.menuId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchMpMenu(selection.value.map((d) => d.menuId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: MpMenu) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  watch(
+    route,
+    ({ params }) => {
+      if (params.id) {
+        pageId.value = Number(params.id);
+        getMpPages(pageId.value).then((data) => {
+          mpPage.value = data;
+          const { fullPath } = unref(route);
+          // 修改页签标题
+          setPageTab({
+            fullPath: fullPath,
+            title: `页面设计(${data.title})`
+          });
+        });
+        listMpPages({ subpackage: 'main' }).then((list) => {
+          tabBar.value = list;
+        });
+        listMpMenu({ pageId: pageId.value }).then((list) => {
+          mpMenus.value = list;
+        });
+      }
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MpMenuHome'
+  };
+</script>
+
+<style lang="less" scoped></style>
--- a/src/views/cms/mpGroup/components/dict-edit.vue
+++ b/src/views/cms/mpGroup/components/dict-edit.vue
@@ -0,0 +1,178 @@
+<!-- 分组编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分组' : '添加分组'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="分组标识" name="dictCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          disabled
+          placeholder="请输入分组标识"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="分组名称" name="dictDataName">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入分组名称"
+          v-model:value="form.dictDataName"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { addDictData, updateDictData } from '@/api/system/dict-data';
+  import { DictData } from '@/api/system/dict-data/model';
+  import {removeSiteInfoCache} from "@/api/cms/website";
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DictData | null;
+    // 字典ID
+    dictId?: number | 0;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DictData>({
+    dictId: undefined,
+    dictDataId: undefined,
+    dictDataName: '',
+    dictCode: 'mpGroup',
+    dictDataCode: '',
+    sortNumber: 100,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入分组名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入分组标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
+        form.dictDataCode = form.dictDataName;
+        form.dictId = props.dictId;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            // 清除字典缓存
+            removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
--- a/src/views/cms/mpGroup/index.vue
+++ b/src/views/cms/mpGroup/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="dictDataId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :scroll="{ x: 800 }"
+        cache-key="appDictTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button
+              danger
+              type="primary"
+              class="ele-btn-icon"
+              @click="removeBatch"
+            >
+              <template #icon>
+                <delete-outlined />
+              </template>
+              <span>删除</span>
+            </a-button>
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分组吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <dict-edit
+      v-model:visible="showEdit"
+      :dictId="dictId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import DictEdit from './components/dict-edit.vue';
+  import {
+    pageDictData,
+    removeDictData,
+    removeDictDataBatch
+  } from '@/api/system/dict-data';
+  import { DictParam } from '@/api/system/dict/model';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { addDict, listDictionaries } from '@/api/system/dict';
+  import { Dictionary } from '@/api/system/dictionary/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const dictId = ref(0);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      width: 80,
+      hideInTable: true
+    },
+    {
+      title: '分组名称',
+      dataIndex: 'dictDataName',
+      showSorterTooltip: false
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '排序号',
+      width: 180,
+      align: 'center',
+      dataIndex: 'sortNumber'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<DictData[]>([]);
+
+  // 当前编辑数据
+  const current = ref<Dictionary | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = 'mpGroup';
+    return pageDictData({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: DictParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DictData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DictData) => {
+    const hide = messageLoading('请求中..', 0);
+    removeDictData(row.dictDataId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分组吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeDictDataBatch(selection.value.map((d) => d.dictDataId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 初始化字典
+  const loadDict = () => {
+    listDictionaries({ dictCode: 'mpGroup' }).then(async (data) => {
+      if (data?.length == 0) {
+        await addDict({ dictCode: 'mpGroup', dictName: '链接分组' });
+      }
+      await listDictionaries({ dictCode: 'mpGroup' }).then((list) => {
+        list?.map((d) => {
+          dictId.value = Number(d.dictId);
+        });
+      });
+    });
+  };
+
+  loadDict();
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDictData'
+  };
+</script>
--- a/src/views/cms/mpMenu_bak/admin/components/mpMenuEdit.vue
+++ b/src/views/cms/mpMenu_bak/admin/components/mpMenuEdit.vue
--- a/src/views/cms/mpMenu_bak/admin/components/search.vue
+++ b/src/views/cms/mpMenu_bak/admin/components/search.vue
--- a/src/views/cms/mpMenu_bak/admin/components/simulator.vue
+++ b/src/views/cms/mpMenu_bak/admin/components/simulator.vue
--- a/src/views/cms/mpMenu_bak/admin/index.vue
+++ b/src/views/cms/mpMenu_bak/admin/index.vue
--- a/src/views/cms/mp-weixin/home/components/mpMenuEdit.vue
+++ b/src/views/cms/mp-weixin/home/components/mpMenuEdit.vue
@@ -19,6 +19,19 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
+      <a-form-item label="页面" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="页面"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="2">首页</a-select-option>
+          <a-select-option :value="3">商城</a-select-option>
+          <a-select-option :value="1">订单</a-select-option>
+          <a-select-option :value="0">我的</a-select-option>
+          <a-select-option :value="4">管理</a-select-option>
+        </a-select>
+      </a-form-item>
      <a-form-item label="菜单名称" name="title">
        <a-input
          allow-clear
--- a/src/views/cms/mp-weixin/home/components/search.vue
+++ b/src/views/cms/mp-weixin/home/components/search.vue
--- a/src/views/cms/mp-weixin/home/components/simulator.vue
+++ b/src/views/cms/mp-weixin/home/components/simulator.vue
@@ -181,7 +181,7 @@
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);

-  import MpMenuEdit from '@/views/cms/mp-weixin/menu/components/mpMenuEdit.vue';
+  import MpMenuEdit from './mpMenuEdit.vue';
  import { Ad } from '@/api/cms/ad/model';
  import AdEdit from '@/views/cms/ad/components/ad-edit.vue';

--- a/src/views/cms/mpMenu_bak/dict/components/dict-edit.vue
+++ b/src/views/cms/mpMenu_bak/dict/components/dict-edit.vue
--- a/src/views/cms/mpMenu_bak/dict/index.vue
+++ b/src/views/cms/mpMenu_bak/dict/index.vue
--- a/src/views/cms/mp-weixin/home/index.vue
+++ b/src/views/cms/mp-weixin/home/index.vue
@@ -116,7 +116,7 @@
  const refresh = ref(false);
  // 模拟器的字段
  const form = ref<any>({
-    pageName: '广西体育中心',
+    pageName: '首页',
    showOrderCard: true,
    showCarousel: true,
    showMenuCard: true,
--- a/src/views/cms/mpMenu_bak/menu/components/mpMenuEdit.vue
+++ b/src/views/cms/mpMenu_bak/menu/components/mpMenuEdit.vue
@@ -19,6 +19,19 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
+      <a-form-item label="页面" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="页面"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="2">首页</a-select-option>
+          <a-select-option :value="3">商城</a-select-option>
+          <a-select-option :value="1">订单</a-select-option>
+          <a-select-option :value="0">我的</a-select-option>
+          <a-select-option :value="4">管理</a-select-option>
+        </a-select>
+      </a-form-item>
      <a-form-item label="菜单名称" name="title">
        <a-input
          allow-clear
@@ -42,13 +55,6 @@
          @del="onDeleteItem"
        />
      </a-form-item>
-<!--      <a-form-item label="组件地址" name="component">-->
-<!--        <a-input-->
-<!--          allow-clear-->
-<!--          placeholder="请输入菜单组件地址"-->
-<!--          v-model:value="form.component"-->
-<!--        />-->
-<!--      </a-form-item>-->
      <a-form-item label="图标颜色" name="color">
        <ele-color-picker
          :show-alpha="true"
@@ -65,12 +71,6 @@
          v-model:value="form.sortNumber"
        />
      </a-form-item>
-      <!--      <a-form-item label="状态" name="status">-->
-      <!--        <a-radio-group v-model:value="form.status">-->
-      <!--          <a-radio :value="0">显示</a-radio>-->
-      <!--          <a-radio :value="1">隐藏</a-radio>-->
-      <!--        </a-radio-group>-->
-      <!--      </a-form-item>-->
    </a-form>
  </ele-modal>
 </template>
--- a/src/views/cms/mpMenu_bak/menu/components/search.vue
+++ b/src/views/cms/mpMenu_bak/menu/components/search.vue
--- a/src/views/cms/mpMenu_bak/menu/index.vue
+++ b/src/views/cms/mpMenu_bak/menu/index.vue
--- a/src/views/cms/mpMenu_bak/order/components/mpMenuEdit.vue
+++ b/src/views/cms/mpMenu_bak/order/components/mpMenuEdit.vue
@@ -19,6 +19,19 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
+      <a-form-item label="页面" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="页面"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="2">首页</a-select-option>
+          <a-select-option :value="3">商城</a-select-option>
+          <a-select-option :value="1">订单</a-select-option>
+          <a-select-option :value="0">我的</a-select-option>
+          <a-select-option :value="4">管理</a-select-option>
+        </a-select>
+      </a-form-item>
      <a-form-item label="菜单名称" name="title">
        <a-input
          allow-clear
--- a/src/views/cms/mpMenu_bak/order/components/search.vue
+++ b/src/views/cms/mpMenu_bak/order/components/search.vue
--- a/src/views/cms/mpMenu_bak/order/components/simulator.vue
+++ b/src/views/cms/mpMenu_bak/order/components/simulator.vue
--- a/src/views/cms/mpMenu_bak/order/index.vue
+++ b/src/views/cms/mpMenu_bak/order/index.vue
--- a/src/views/cms/mpMenu_bak/shop/components/mpMenuEdit.vue
+++ b/src/views/cms/mpMenu_bak/shop/components/mpMenuEdit.vue
@@ -19,6 +19,19 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
+      <a-form-item label="页面" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="页面"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="2">首页</a-select-option>
+          <a-select-option :value="3">商城</a-select-option>
+          <a-select-option :value="1">订单</a-select-option>
+          <a-select-option :value="0">我的</a-select-option>
+          <a-select-option :value="4">管理</a-select-option>
+        </a-select>
+      </a-form-item>
      <a-form-item label="菜单名称" name="title">
        <a-input
          allow-clear
--- a/src/views/cms/mpMenu_bak/shop/components/search.vue
+++ b/src/views/cms/mpMenu_bak/shop/components/search.vue
--- a/src/views/cms/mpMenu_bak/shop/components/simulator.vue
+++ b/src/views/cms/mpMenu_bak/shop/components/simulator.vue
--- a/src/views/cms/mpMenu_bak/shop/index.vue
+++ b/src/views/cms/mpMenu_bak/shop/index.vue
--- a/src/views/cms/mpMenu_bak/user/components/mpMenuEdit.vue
+++ b/src/views/cms/mpMenu_bak/user/components/mpMenuEdit.vue
@@ -19,6 +19,19 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
+      <a-form-item label="页面" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="页面"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="2">首页</a-select-option>
+          <a-select-option :value="3">商城</a-select-option>
+          <a-select-option :value="1">订单</a-select-option>
+          <a-select-option :value="0">我的</a-select-option>
+          <a-select-option :value="4">管理</a-select-option>
+        </a-select>
+      </a-form-item>
      <a-form-item label="菜单名称" name="title">
        <a-input
          allow-clear
@@ -57,19 +70,6 @@
          v-model:value="form.target"
        />
      </a-form-item>
-      <a-form-item label="菜单类型" name="type">
-        <a-select
-          v-model:value="form.type"
-          placeholder="菜单类型"
-          :style="`width: 200px`"
-        >
-          <a-select-option :value="0">会员功能</a-select-option>
-          <a-select-option :value="1">订单管理</a-select-option>
-          <a-select-option :value="2">首页导航</a-select-option>
-          <a-select-option :value="3">商城导航</a-select-option>
-          <a-select-option :value="4">管理中心</a-select-option>
-        </a-select>
-      </a-form-item>
      <a-form-item label="所在行" name="rows">
        <a-input-number
          :min="0"
@@ -180,6 +180,14 @@
        trigger: 'blur'
      }
    ],
+    type: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择所在页面',
+        trigger: 'blur'
+      }
+    ],
    path: [
      {
        required: true,
--- a/src/views/cms/mpMenu_bak/user/components/search.vue
+++ b/src/views/cms/mpMenu_bak/user/components/search.vue
--- a/src/views/cms/mpMenu_bak/user/components/simulator.vue
+++ b/src/views/cms/mpMenu_bak/user/components/simulator.vue
--- a/src/views/cms/mpMenu_bak/user/index.vue
+++ b/src/views/cms/mpMenu_bak/user/index.vue
--- a/src/views/cms/mpPackage/components/dict-edit.vue
+++ b/src/views/cms/mpPackage/components/dict-edit.vue
@@ -0,0 +1,194 @@
+<!-- 分包编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分包' : '添加分包'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="标识" name="dictCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          disabled
+          placeholder="请输入标识"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="名称" name="dictDataName">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="分包"
+          v-model:value="form.dictDataName"
+        />
+      </a-form-item>
+      <a-form-item label="英文名" name="dictDataCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="package"
+          v-model:value="form.dictDataCode"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { addDictData, updateDictData } from '@/api/system/dict-data';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { removeSiteInfoCache } from '@/api/cms/website';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DictData | null;
+    // 字典ID
+    dictId?: number | 0;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DictData>({
+    dictId: undefined,
+    dictDataId: undefined,
+    dictDataName: '',
+    dictCode: 'mpPackage',
+    dictDataCode: '',
+    sortNumber: 100,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入分包英文名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictDataName: [
+      {
+        required: true,
+        message: '请输入分包名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入分包标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
+        // form.dictDataCode = form.dictDataName;
+        form.dictId = props.dictId;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            // 清除字典缓存
+            removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
--- a/src/views/cms/mpPackage/index.vue
+++ b/src/views/cms/mpPackage/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="dictDataId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :scroll="{ x: 800 }"
+        cache-key="appDictTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button
+              danger
+              type="primary"
+              class="ele-btn-icon"
+              @click="removeBatch"
+            >
+              <template #icon>
+                <delete-outlined />
+              </template>
+              <span>删除</span>
+            </a-button>
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分包吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <dict-edit
+      v-model:visible="showEdit"
+      :dictId="dictId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import DictEdit from './components/dict-edit.vue';
+  import {
+    pageDictData,
+    removeDictData,
+    removeDictDataBatch
+  } from '@/api/system/dict-data';
+  import { DictParam } from '@/api/system/dict/model';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { addDict, listDictionaries } from '@/api/system/dict';
+  import { Dictionary } from '@/api/system/dictionary/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const dictId = ref(0);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      width: 80,
+      hideInTable: true
+    },
+    {
+      title: '分包名称',
+      dataIndex: 'dictDataName',
+      showSorterTooltip: false
+    },
+    {
+      title: '英文名',
+      dataIndex: 'dictDataCode',
+      showSorterTooltip: false
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '排序号',
+      width: 180,
+      align: 'center',
+      dataIndex: 'sortNumber'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<DictData[]>([]);
+
+  // 当前编辑数据
+  const current = ref<Dictionary | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = 'mpPackage';
+    return pageDictData({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: DictParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DictData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DictData) => {
+    const hide = messageLoading('请求中..', 0);
+    removeDictData(row.dictDataId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分包吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeDictDataBatch(selection.value.map((d) => d.dictDataId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 初始化字典
+  const loadDict = () => {
+    listDictionaries({ dictCode: 'mpPackage' }).then(async (data) => {
+      if (data?.length == 0) {
+        await addDict({ dictCode: 'mpPackage', dictName: '链接分包' });
+      }
+      await listDictionaries({ dictCode: 'mpPackage' }).then((list) => {
+        list?.map((d) => {
+          dictId.value = Number(d.dictId);
+        });
+      });
+    });
+  };
+
+  loadDict();
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDictData'
+  };
+</script>
--- a/src/views/cms/mpPages/components/mpPagesEdit.vue
+++ b/src/views/cms/mpPages/components/mpPagesEdit.vue
@@ -0,0 +1,218 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑小程序页面' : '添加小程序页面'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="页面名称" name="title">
+        <a-input
+          allow-clear
+          placeholder="商品详情"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="页面路径" name="path">
+        <a-input
+          allow-clear
+          placeholder="/package/goods/detail"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="分包" name="subpackage">
+        <DictSelect
+          dict-code="mpPackage"
+          :placeholder="`选择分包`"
+          style="width: 200px"
+          v-model:value="form.subpackage"
+        />
+      </a-form-item>
+      <a-form-item label="图标" name="icon">
+        <ele-icon-picker
+          :data="iconData"
+          :allow-search="false"
+          v-model:value="form.icon"
+          placeholder="请选择菜单图标"
+        >
+          <template #icon="{ icon }">
+            <component :is="icon" />
+          </template>
+        </ele-icon-picker>
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { addMpPages, updateMpPages } from '@/api/cms/mpPages';
+  import { MpPages } from '@/api/cms/mpPages/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: MpPages | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<MpPages>({
+    id: undefined,
+    parentId: undefined,
+    title: undefined,
+    path: undefined,
+    home: undefined,
+    subpackage: undefined,
+    sortNumber: 100,
+    comments: undefined,
+    status: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        type: 'string',
+        message: '页面名称',
+        trigger: 'blur'
+      }
+    ],
+    path: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写路径',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateMpPages : addMpPages;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>
--- a/src/views/cms/mpPages/components/search.vue
+++ b/src/views/cms/mpPages/components/search.vue
@@ -0,0 +1,61 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+    <a-input-search
+      allow-clear
+      v-model:value="where.keywords"
+      placeholder="请输入搜索关键词"
+      @search="search"
+      @pressEnter="search"
+    />
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { MpPagesParam } from '@/api/cms/mpPages/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  // 表单数据
+  const { where } = useSearch<MpPagesParam>({
+    keywords: ''
+  });
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
--- a/src/views/cms/mpPages/index.vue
+++ b/src/views/cms/mpPages/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'title'">
+              <component v-if="record.icon" :is="record.icon" />
+              {{ record.title }}
+            </template>
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'path'">
+              <span class="ele-text-placeholder">{{ record.path }}</span>
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'subpackage'">
+              <a-tag v-if="record.subpackage === 'MainPackage'" color="orange"
+                >主包</a-tag
+              >
+              <a-tag v-else> {{ record.subpackage }} </a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openUrl(`/mp-design/${record.id}`)">设计</a>
+                <a-divider type="vertical" />
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+          <template #footer>
+            <div class="ele-text-secondary"
+              >仓库地址：http://git.gxwebsoft.com/websoft/nbg-uniapp.git</div
+            >
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <MpPagesEdit
+        v-model:visible="showEdit"
+        :parent-id="parentId"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { EleProTable, toTreeData } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MpPagesEdit from './components/mpPagesEdit.vue';
+  import {
+    pageMpPages,
+    removeMpPages,
+    removeBatchMpPages
+  } from '@/api/cms/mpPages';
+  import type { MpPages, MpPagesParam } from '@/api/cms/mpPages/model';
+  import { copyText, openUrl } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MpPages[]>([]);
+  // 上级分类id
+  const parentId = ref<number>();
+  // 当前编辑数据
+  const current = ref<MpPages | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageMpPages({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '页面名称',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '页面路径',
+      dataIndex: 'path',
+      key: 'path'
+    },
+    {
+      title: '分包',
+      dataIndex: 'subpackage',
+      key: 'subpackage'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MpPagesParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MpPages | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MpPages) => {
+    const hide = message.loading('请求中..', 0);
+    removeMpPages(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchMpPages(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: MpPages) => {
+    return {
+      // 行点击事件
+      onClick: () => {},
+      // 行双击事件
+      onDblclick: () => {
+        openUrl(`/mp-design/${record.id}`);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
+  export default {
+    name: 'MpPages',
+    components: MenuIcons
+  };
+</script>
+
+<style lang="less" scoped></style>
--- a/src/views/cms/navigation/index.vue
+++ b/src/views/cms/navigation/index.vue
@@ -110,8 +110,8 @@
            <a-space>
              <a @click="openEdit(null, record.navigationId)">添加</a>
              <a-divider type="vertical" />
-              <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
-              <a-divider type="vertical" />
+<!--              <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>-->
+<!--              <a-divider type="vertical" />-->
              <a @click="openEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm
--- a/src/views/oa/app/detail/components/app-annex.vue
+++ b/src/views/oa/app/detail/components/app-annex.vue
@@ -46,14 +46,14 @@
        <a-tooltip :title="`复制链接地址`">
          <copy-outlined
            style="padding-left: 4px"
-            @click="copyText(FILE_SERVER + record.downloadUrl)"
+            @click="copyText(record.downloadUrl)"
          />
        </a-tooltip>
      </template>
      <template v-if="column.key === 'action'">
-        <a @click="openPreview(FILE_SERVER + record.downloadUrl)">预览</a>
+        <a @click="openPreview(record.downloadUrl)">预览</a>
        <a-divider type="vertical" />
-        <a :href="FILE_SERVER + record.downloadUrl" target="_blank">下载</a>
+        <a :href="record.downloadUrl" target="_blank">下载</a>
        <a-divider type="vertical" />
        <a @click="openEdit(record)">修改</a>
        <a-divider type="vertical" />
@@ -91,10 +91,10 @@
    pageFiles,
    removeFile,
    removeFiles,
-    uploadFileLocal
+    uploadOssByAppId
  } from '@/api/system/file';
  import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
-  import {copyText, openNew, openPreview} from '@/utils/common';
+  import { copyText, openPreview } from '@/utils/common';
  import { FILE_SERVER } from '@/config/setting';

  const props = defineProps<{
@@ -257,7 +257,7 @@
      duration: 0,
      mask: true
    });
-    uploadFileLocal(file, props.data.appId)
+    uploadOssByAppId(file, props.data.appId)
      .then((data) => {
        console.log(data);
        hide();
--- a/src/views/oa/assets/server/index.vue
+++ b/src/views/oa/assets/server/index.vue
@@ -121,12 +121,6 @@
      width: 80,
      hideInTable: true
    },
-    {
-      title: '所属企业',
-      dataIndex: 'companyName',
-      width: 280,
-      key: 'companyName'
-    },
    {
      title: '服务器IP',
      dataIndex: 'code',
@@ -156,6 +150,12 @@
      align: 'center',
      sorter: true
    },
+    {
+      title: '所属企业',
+      dataIndex: 'companyName',
+      width: 280,
+      key: 'companyName'
+    },
    {
      title: '描述',
      dataIndex: 'name',
--- a/src/views/system/company/index.vue
+++ b/src/views/system/company/index.vue
@@ -70,17 +70,20 @@
          </template>
          <template v-if="column.key === 'status'">
            <template v-if="record.status == 0">
-              <a-tag>已下架</a-tag>
+              <a-tag>待审核</a-tag>
            </template>
            <template v-if="record.status == 1">
-              <a-tag color="green">已上架</a-tag>
+              <a-tag color="green">已通过</a-tag>
+            </template>
+            <template v-if="record.status == 2">
+              <a-tag color="red">已驳回</a-tag>
            </template>
          </template>
          <template v-if="column.key === 'expirationTime'">
            <template v-if="record.version == 30"> -</template>
            <template v-else>
-              <div>{{ toDateString(record.createTime, 'yyyy-MM-dd') }}</div>
-              <div>{{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}</div>
+              <div>{{ toDateString(record.createTime, "yyyy-MM-dd") }}</div>
+              <div>{{ toDateString(record.expirationTime, "yyyy-MM-dd") }}</div>
              <div
                v-if="expirationTime(record.expirationTime) < 0"
                class="ele-text-placeholder"
@@ -99,9 +102,15 @@
            </template>
          </template>
          <template v-if="column.key === 'version'">
-            <span v-if="record.version == 10"> 免费版 </span>
-            <span v-if="record.version == 20"> 商业版 </span>
-            <span v-if="record.version == 30"> 永久授权 </span>
+            <span class="text-gray-400" v-if="record.version == 10">
+              免费版
+            </span>
+            <span class="text-blue-500" v-if="record.version == 20">
+              商业版
+            </span>
+            <span class="text-green-500" v-if="record.version == 30">
+              永久授权
+            </span>
          </template>
          <template v-if="column.key === 'appUrl'">
            <DesktopOutlined
@@ -159,14 +168,13 @@
                    支付宝扫一扫
                  </div>
                </template>
-                <a-button :size="`small`">
-                  <AlipayOutlined class="ele-text-primary" />
-                  支付宝
-                </a-button>
+                  <AlipayOutlined />
              </a-popover>
            </template>
          </template>
          <template v-if="column.key === 'action'">
+            <a class="font-bold" @click="openEdit(record)">修改</a>
+            <a-divider type="vertical" />
            <template v-if="record.deleted == 1">
              <a-popconfirm
                placement="topRight"
@@ -205,116 +213,124 @@
 </template>

 <script lang="ts" setup>
-  import { createVNode, ref, watch } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import {
+import { createVNode, ref, watch } from "vue";
+import { message, Modal } from "ant-design-vue";
+import {
  ExclamationCircleOutlined,
  IdcardOutlined,
  TabletOutlined,
  DesktopOutlined,
  GlobalOutlined
-  } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import type {
+} from "@ant-design/icons-vue";
+import type { EleProTable } from "ele-admin-pro";
+import type {
  DatasourceFunction,
  ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import Search from './components/search.vue';
-  import CompanyEdit from './components/company-edit.vue';
-  import {
+} from "ele-admin-pro/es/ele-pro-table/types";
+import Search from "./components/search.vue";
+import CompanyEdit from "./components/company-edit.vue";
+import {
  destructionCompany,
  removeBatchCompany,
  removeCompany,
  undeleteCompany
-  } from '@/api/oa/company';
-  import { Company, CompanyParam } from '@/api/system/company/model';
-  import { toDateString } from 'ele-admin-pro';
-  import { useRouter } from 'vue-router';
+} from "@/api/oa/company";
+import { Company, CompanyParam } from "@/api/system/company/model";
+import { toDateString } from "ele-admin-pro";
+import { useRouter } from "vue-router";

-  const { currentRoute } = useRouter();
-  import { pageCompanyAll } from '@/api/system/company';
-  import {
+const { currentRoute } = useRouter();
+import { pageCompanyAll } from "@/api/system/company";
+import {
  copyText,
  getMerchantId,
  getPageTitle,
  getUserId,
  openNew
-  } from '@/utils/common';
-  import { addUserCollection } from '@/api/system/user-collection';
+} from "@/utils/common";
+import { addUserCollection } from "@/api/system/user-collection";
+import { getTenantId } from "@/utils/domain";

-  defineProps<{
+defineProps<{
  activeKey?: boolean;
  data?: any;
-  }>();
+}>();

-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
+// 表格列配置
+const columns = ref<ColumnItem[]>([
  {
-      title: '租户ID',
-      fixed: 'left',
-      dataIndex: 'tenantId',
-      align: 'center',
+    title: "租户ID",
+    fixed: "left",
+    dataIndex: "tenantId",
+    align: "center",
    width: 90
  },
  {
-      title: 'Logo',
-      dataIndex: 'companyLogo',
-      key: 'companyLogo',
-      align: 'center',
+    title: "Logo",
+    dataIndex: "companyLogo",
+    key: "companyLogo",
+    align: "center",
    width: 180
  },
  {
-      title: '租户名称',
-      dataIndex: 'shortName',
-      key: 'shortName'
+    title: "租户名称",
+    dataIndex: "shortName",
+    key: "shortName"
  },
  {
-      title: '版本',
-      dataIndex: 'version',
-      align: 'center',
-      key: 'version'
+    title: "版本",
+    dataIndex: "version",
+    align: "center",
+    key: "version",
+    width: 180
  },
  {
-      title: '到期时间',
-      dataIndex: 'expirationTime',
-      key: 'expirationTime',
-      align: 'center',
+    title: "到期时间",
+    dataIndex: "expirationTime",
+    key: "expirationTime",
+    align: "center",
    width: 160,
    sorter: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    customRender: ({ text }) => toDateString(text, "yyyy-MM-dd")
  },
  {
-      title: '操作',
-      align: 'center',
-      key: 'appUrl',
+    title: "应用终端",
+    align: "center",
+    key: "appUrl",
    width: 180
  },
-    // {
-    //   title: '状态',
-    //   dataIndex: 'status',
-    //   align: 'center',
-    //   width: 120,
-    //   key: 'status',
-    //   customRender: ({ text }) => ['已上线', '开发中'][text]
-    // }
-  ]);
+  {
+    title: '状态',
+    dataIndex: 'status',
+    align: 'center',
+    width: 120,
+    key: 'status'
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    dataIndex: "action",
+    width: 180
+  }
+]);

-  // 表格选中数据
-  const selection = ref<Company[]>([]);
-  // 当前编辑数据
-  const current = ref<Company | null>(null);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 是否显示高级搜索
-  const showAdvancedSearch = ref(false);
-  // 页面标题
-  const title = getPageTitle();
+// 表格选中数据
+const selection = ref<Company[]>([]);
+// 当前编辑数据
+const current = ref<Company | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示高级搜索
+const showAdvancedSearch = ref(false);
+// 页面标题
+const title = getPageTitle();

-  // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+// 表格数据源
+const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
  where.merchantId = getMerchantId();

  // 默认显示我的收藏
@@ -336,21 +352,21 @@
    page,
    limit
  });
-  };
+};

-  /* 搜索 */
-  const reload = (where?: CompanyParam) => {
+/* 搜索 */
+const reload = (where?: CompanyParam) => {
  selection.value = [];
  tableRef?.value?.reload({ where: where });
-  };
+};

-  /* 打开编辑弹窗 */
-  const openEdit = (row?: Company) => {
+/* 打开编辑弹窗 */
+const openEdit = (row?: Company) => {
  current.value = row ?? null;
  showEdit.value = true;
-  };
+};

-  const expirationTime = (dateTime) => {
+const expirationTime = (dateTime) => {
  const now = new Date().getTime();
  const expiration = new Date(dateTime).getTime();
  const mss = expiration - now;
@@ -359,9 +375,9 @@
  let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.round((mss % (1000 * 60)) / 1000);
  return days;
-  };
+};

-  const expirationTimeText = (item: any) => {
+const expirationTimeText = (item: any) => {
  const now = new Date().getTime();
  const expiration = new Date(item.expirationTime).getTime();
  const mss = expiration - now;
@@ -380,26 +396,26 @@
  if (days < 30) {
    return `(剩余${days}天)`;
  }
-  };
+};

-  /* 打开高级搜索 */
-  const openAdvanced = () => {
+/* 打开高级搜索 */
+const openAdvanced = () => {
  showAdvancedSearch.value = !showAdvancedSearch.value;
-  };
+};

-  const onCode = (text: string) => {
+const onCode = (text: string) => {
  console.log(text);
-  };
+};

-  const onCollection = (item: Company) => {
+const onCollection = (item: Company) => {
  addUserCollection({ tid: item.companyId }).then((msg) => {
    reload();
  });
-  };
+};

-  /* 删除单个 */
-  const remove = (row: Company) => {
-    const hide = message.loading('请求中..', 0);
+/* 删除单个 */
+const remove = (row: Company) => {
+  const hide = message.loading("请求中..", 0);
  removeCompany(row.companyId)
    .then((msg) => {
      hide();
@@ -410,22 +426,22 @@
      hide();
      message.error(e.message);
    });
-  };
+};

-  /* 批量删除 */
-  const removeBatch = () => {
+/* 批量删除 */
+const removeBatch = () => {
  console.log(selection.value);
  if (!selection.value.length) {
-      message.error('请至少选择一条数据');
+    message.error("请至少选择一条数据");
    return;
  }
  Modal.confirm({
-      title: '提示',
-      content: '确定要删除选中的记录吗?',
+    title: "提示",
+    content: "确定要删除选中的记录吗?",
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: () => {
-        const hide = message.loading('请求中..', 0);
+      const hide = message.loading("请求中..", 0);
      removeBatchCompany(selection.value.map((d) => d.companyId))
        .then((msg) => {
          hide();
@@ -438,10 +454,10 @@
        });
    }
  });
-  };
+};

-  // 从回收站放回原处
-  const recovery = (row: Company) => {
+// 从回收站放回原处
+const recovery = (row: Company) => {
  undeleteCompany(row.companyId)
    .then((msg) => {
      message.success(msg);
@@ -450,10 +466,10 @@
    .catch((e) => {
      message.error(e.message);
    });
-  };
+};

-  // 销毁租户
-  const destruction = (row: Company) => {
+// 销毁租户
+const destruction = (row: Company) => {
  destructionCompany(row.tenantId)
    .then((msg) => {
      message.success(msg);
@@ -462,35 +478,35 @@
    .catch((e) => {
      message.error(e.message);
    });
-  };
+};

-  watch(
+watch(
  currentRoute,
  () => {
    reload();
  },
  { immediate: true }
-  );
+);
 </script>

 <script lang="ts">
-  import * as MenuIcons from '@/layout/menu-icons';
+import * as MenuIcons from "@/layout/menu-icons";

-  export default {
-    name: 'CompanyIndex',
+export default {
+  name: "CompanyIndex",
  components: MenuIcons
-  };
+};
 </script>

 <style lang="less" scoped>
-  .tag-icon {
+.tag-icon {
  padding-right: 6px;
-  }
+}

-  .qrcode {
+.qrcode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  }
+}
 </style>