页面修改提交

jeecgboot-vue3/.env

@@ -5,7 +5,7 @@ VITE_PORT = 3100
 VITE_GLOB_APP_TITLE = 合同管理系统
 
 # 简称，此变量只能是字符/下划线
-VITE_GLOB_APP_SHORT_NAME = JeecgBoot_Pro
+VITE_GLOB_APP_SHORT_NAME = 合同管理系统
 
 # 单点登录服务端地址
 VITE_GLOB_APP_CAS_BASE_URL=http://cas.test.com:8443/cas

jeecgboot-vue3/mock/_createProductionServer.ts

@@ -1,18 +0,0 @@
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
-
-const modules = import.meta.glob('./**/*.ts', { eager: true });
-
-const mockModules: any[] = [];
-Object.keys(modules).forEach((key) => {
-  if (key.includes('/_')) {
-    return;
-  }
-  mockModules.push(...(modules as Recordable)[key].default);
-});
-
-/**
- * Used in a production environment. Need to manually import all modules
- */
-export function setupProdMockServer() {
-  createProdMockServer(mockModules);
-}

jeecgboot-vue3/mock/_util.ts

@@ -1,63 +0,0 @@
-// Interface data format used to return a unified format
-
-export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
-  return {
-    code: 0,
-    result,
-    message,
-    type: 'success',
-  };
-}
-
-export function resultPageSuccess<T = any>(
-  pageNo: number,
-  pageSize: number,
-  list: T[],
-  { message = 'ok' } = {}
-) {
-  const pageData = pagination(pageNo, pageSize, list);
-
-  return {
-    ...resultSuccess({
-      records: pageData,
-      total: list.length,
-    }),
-    message,
-  };
-}
-
-export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
-  return {
-    code,
-    result,
-    message,
-    type: 'error',
-  };
-}
-
-export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
-  const offset = (pageNo - 1) * Number(pageSize);
-  const ret =
-    offset + Number(pageSize) >= array.length
-      ? array.slice(offset, array.length)
-      : array.slice(offset, offset + Number(pageSize));
-  return ret;
-}
-
-export interface requestParams {
-  method: string;
-  body: any;
-  headers?: { authorization?: string };
-  query: any;
-}
-
-/**
- * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
- *
- */
-export function getRequestToken({ headers }: requestParams): string | undefined {
-  return headers?.authorization;
-}
-
-//TODO 接口父路径（写死不够灵活）
-export const baseUrl = '/jeecgboot/mock';

jeecgboot-vue3/mock/demo/account.ts

@@ -1,70 +0,0 @@
-import { MockMethod } from 'vite-plugin-mock';
-import { resultSuccess, resultError, baseUrl } from '../_util';
-import { ResultEnum } from '../../src/enums/httpEnum';
-const userInfo = {
-  name: 'Jeecg',
-  userid: '00000001',
-  email: 'test@gmail.com',
-  signature: '海纳百川，有容乃大',
-  introduction: '微笑着，努力着，欣赏着',
-  title: '交互专家',
-  group: '某某某事业群－某某平台部－某某技术部－UED',
-  tags: [
-    {
-      key: '0',
-      label: '很有想法的',
-    },
-    {
-      key: '1',
-      label: '专注设计',
-    },
-    {
-      key: '2',
-      label: '辣~',
-    },
-    {
-      key: '3',
-      label: '大长腿',
-    },
-    {
-      key: '4',
-      label: '川妹子',
-    },
-    {
-      key: '5',
-      label: '海纳百川',
-    },
-  ],
-  notifyCount: 12,
-  unreadCount: 11,
-  country: 'China',
-  address: 'Xiamen City 77',
-  phone: '0592-268888888',
-};
-
-export default [
-  {
-    url: `${baseUrl}/account/getAccountInfo`,
-    timeout: 1000,
-    method: 'get',
-    response: () => {
-      return resultSuccess(userInfo);
-    },
-  },
-  {
-    url: `${baseUrl}/user/sessionTimeout`,
-    method: 'post',
-    statusCode: 401,
-    response: () => {
-      return resultError();
-    },
-  },
-  {
-    url: '/basic-api/user/tokenExpired',
-    method: 'post',
-    statusCode: 200,
-    response: () => {
-      return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/mock/demo/select-demo.ts

@@ -1,37 +0,0 @@
-import { MockMethod } from 'vite-plugin-mock';
-import { resultSuccess, baseUrl } from '../_util';
-
-const demoList = (keyword, count = 20) => {
-  const result = {
-    list: [] as any[],
-  };
-  for (let index = 0; index < count; index++) {
-    //根据搜索关键词做一下匹配
-    let name = `选项${index}`;
-    if(keyword && name.indexOf(keyword)!=-1){
-      result.list.push({
-        name: `选项${index}`,
-        id: `${index}`,
-      });
-    }else if(!keyword){
-      result.list.push({
-        name: `选项${index}`,
-        id: `${index}`,
-      });
-    }
-  }
-  return result;
-};
-
-export default [
-  {
-    url: `${baseUrl}/select/getDemoOptions`,
-    timeout: 1000,
-    method: 'get',
-    response: ({ query }) => {
-      const { keyword,count} = query;
-      console.log("查询条件：", keyword);
-      return resultSuccess(demoList(keyword,count));
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/mock/demo/system.ts

@@ -1,298 +0,0 @@
-import { MockMethod } from 'vite-plugin-mock';
-import { resultError, resultPageSuccess, resultSuccess, baseUrl } from '../_util';
-
-const accountList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 20; index++) {
-        result.push({
-            id: `${index}`,
-            account: '@first',
-            email: '@email',
-            nickname: '@cname()',
-            role: '@first',
-            createTime: '@datetime',
-            remark: '@cword(10,20)',
-            'status|1': ['0', '1'],
-        });
-    }
-    return result;
-})();
-
-const userList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 20; index++) {
-        result.push({
-            id: `${index}`,
-            username: '@first',
-            email: '@email',
-            realname: '@cname()',
-            createTime: '@datetime',
-            remark: '@cword(10,20)',
-            avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640'
-        });
-    }
-    return result;
-})();
-
-const roleList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 4; index++) {
-        result.push({
-            id: index + 1,
-            orderNo: `${index + 1}`,
-            roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
-            roleValue: '@first',
-            createTime: '@datetime',
-            remark: '@cword(10,20)',
-            menu: [['0', '1', '2'], ['0', '1'], ['0', '2'], ['2']][index],
-            'status|1': ['0', '1'],
-        });
-    }
-    return result;
-})();
-
-const newRoleList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 4; index++) {
-        result.push({
-            id: index + 1,
-            orderNo: `${index + 1}`,
-            roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
-            roleCode: '@first',
-            createTime: '@datetime',
-            remark: '@cword(10,20)'
-        });
-    }
-    return result;
-})();
-
-const testList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 4; index++) {
-        result.push({
-            id: index + 1,
-            orderNo: `${index + 1}`,
-            testName: ['数据1', '数据2', '数据3', '数据4'][index],
-            testValue: '@first',
-            createTime: '@datetime'
-        });
-    }
-    return result;
-})();
-
-const tableDemoList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 4; index++) {
-        result.push({
-            id: index + 1,
-            orderCode: '2008200' + `${index + 1}`,
-            orderMoney: '@natural(1000,3000)',
-            ctype: '@natural(1,2)',
-            content: '@cword(10,20)',
-            orderDate: '@datetime'
-        });
-    }
-    return result;
-})();
-
-const deptList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 3; index++) {
-        result.push({
-            id: `${index}`,
-            deptName: ['华东分部', '华南分部', '西北分部'][index],
-            orderNo: index + 1,
-            createTime: '@datetime',
-            remark: '@cword(10,20)',
-            'status|1': ['0', '0', '1'],
-            children: (() => {
-                const children: any[] = [];
-                for (let j = 0; j < 4; j++) {
-                    children.push({
-                        id: `${index}-${j}`,
-                        deptName: ['研发部', '市场部', '商务部', '财务部'][j],
-                        orderNo: j + 1,
-                        createTime: '@datetime',
-                        remark: '@cword(10,20)',
-                        'status|1': ['0', '1'],
-                        parentDept: `${index}`,
-                        children: undefined,
-                    });
-                }
-                return children;
-            })(),
-        });
-    }
-    return result;
-})();
-
-const menuList = (() => {
-    const result: any[] = [];
-    for (let index = 0; index < 3; index++) {
-        result.push({
-            id: `${index}`,
-            icon: ['ion:layers-outline', 'ion:git-compare-outline', 'ion:tv-outline'][index],
-            component: 'LAYOUT',
-            type: '0',
-            menuName: ['Dashboard', '权限管理', '功能'][index],
-            permission: '',
-            orderNo: index + 1,
-            createTime: '@datetime',
-            'status|1': ['0', '0', '1'],
-            children: (() => {
-                const children: any[] = [];
-                for (let j = 0; j < 4; j++) {
-                    children.push({
-                        id: `${index}-${j}`,
-                        type: '1',
-                        menuName: ['菜单1', '菜单2', '菜单3', '菜单4'][j],
-                        icon: 'ion:document',
-                        permission: ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index],
-                        component: [
-                            '/dashboard/welcome/index',
-                            '/dashboard/Analysis/index',
-                            '/dashboard/workbench/index',
-                            '/dashboard/test/index',
-                        ][j],
-                        orderNo: j + 1,
-                        createTime: '@datetime',
-                        'status|1': ['0', '1'],
-                        parentMenu: `${index}`,
-                        children: (() => {
-                            const children: any[] = [];
-                            for (let k = 0; k < 4; k++) {
-                                children.push({
-                                    id: `${index}-${j}-${k}`,
-                                    type: '2',
-                                    menuName: '按钮' + (j + 1) + '-' + (k + 1),
-                                    icon: '',
-                                    permission:
-                                        ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index] +
-                                        ':btn' +
-                                        (k + 1),
-                                    component: [
-                                        '/dashboard/welcome/index',
-                                        '/dashboard/Analysis/index',
-                                        '/dashboard/workbench/index',
-                                        '/dashboard/test/index',
-                                    ][j],
-                                    orderNo: j + 1,
-                                    createTime: '@datetime',
-                                    'status|1': ['0', '1'],
-                                    parentMenu: `${index}-${j}`,
-                                    children: undefined,
-                                });
-                            }
-                            return children;
-                        })(),
-                    });
-                }
-                return children;
-            })(),
-        });
-    }
-    return result;
-})();
-
-export default [
-  {
-    url: `${baseUrl}/system/getAccountList`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, accountList);
-    },
-  },
-  {
-    url: `${baseUrl}/sys/user/list`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, userList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/getRoleListByPage`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, roleList);
-    },
-  },
-  {
-    url: `${baseUrl}/sys/role/list`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, newRoleList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/getTestListByPage`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, testList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/getDemoTableListByPage`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, tableDemoList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/setRoleStatus`,
-    timeout: 500,
-    method: 'post',
-    response: ({ query }) => {
-      const { id, status } = query;
-      return resultSuccess({ id, status });
-    },
-  },
-  {
-    url: `${baseUrl}/system/getAllRoleList`,
-    timeout: 100,
-    method: 'get',
-    response: () => {
-      return resultSuccess(roleList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/getDeptList`,
-    timeout: 100,
-    method: 'get',
-    response: () => {
-      return resultSuccess(deptList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/getMenuList`,
-    timeout: 100,
-    method: 'get',
-    response: () => {
-      return resultSuccess(menuList);
-    },
-  },
-  {
-    url: `${baseUrl}/system/accountExist`,
-    timeout: 500,
-    method: 'post',
-    response: ({ body }) => {
-      const { account } = body || {};
-      if (account && account.indexOf('admin') !== -1) {
-        return resultError('该字段不能包含admin');
-      } else {
-        return resultSuccess(`${account} can use`);
-      }
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/mock/demo/table-demo.ts

@@ -1,57 +0,0 @@
-import { MockMethod } from 'vite-plugin-mock';
-import { Random } from 'mockjs';
-import { resultPageSuccess, baseUrl } from '../_util';
-
-function getRandomPics(count = 10): string[] {
-  const arr: string[] = [];
-  for (let i = 0; i < count; i++) {
-    arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
-  }
-  return arr;
-}
-
-const demoList = (() => {
-  const result: any[] = [];
-  for (let index = 0; index < 200; index++) {
-    result.push({
-      id: `${index}`,
-      beginTime: '@datetime',
-      endTime: '@datetime',
-      address: '@city()',
-      name: '@cname()',
-      name1: '@cname()',
-      name2: '@cname()',
-      name3: '@cname()',
-      name4: '@cname()',
-      name5: '@cname()',
-      name6: '@cname()',
-      name7: '@cname()',
-      name8: '@cname()',
-      avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
-      imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
-      imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
-      age: Math.ceil(Math.random() * 30) + 1,
-      score: Math.ceil(Math.random() * 80) + 1,
-      date: `@date('yyyy-MM-dd')`,
-      time: `@time('HH:mm')`,
-      'no|100000-10000000': 100000,
-      'status|1': ['normal', 'enable', 'disable'],
-    });
-  }
-  return result;
-})();
-
-export default [
-  {
-    url: `${baseUrl}/table/getDemoList`,
-    timeout: 100,
-    method: 'get',
-    response: ({ query }) => {
-      const { page = 1, pageSize = 20 } = query;
-      // update-begin--author:liaozhiyang---date:20240730---for：【issues/6943】mock翻页之后数据id和图片没自动刷新
-      const pageNo = +(query.pageNo ?? page);
-      return resultPageSuccess(pageNo, +pageSize, demoList);
-      // update-end--author:liaozhiyang---date:20240730---for：【issues/6943】mock翻页之后数据id和图片没自动刷新
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/mock/demo/tree-demo.ts

@@ -1,38 +0,0 @@
-import { MockMethod } from 'vite-plugin-mock';
-import { resultSuccess, baseUrl } from '../_util';
-
-const demoTreeList = (keyword) => {
-  const result = {
-    list: [] as Recordable[],
-  };
-  for (let index = 0; index < 5; index++) {
-    const children: Recordable[] = [];
-    for (let j = 0; j < 3; j++) {
-      children.push({
-        title: `${keyword ?? ''}选项${index}-${j}`,
-        value: `${index}-${j}`,
-        key: `${index}-${j}`,
-      });
-    }
-    result.list.push({
-      title: `${keyword ?? ''}选项${index}`,
-      value: `${index}`,
-      key: `${index}`,
-      children,
-    });
-  }
-  return result;
-};
-
-export default [
-  {
-    url: `${baseUrl}/tree/getDemoOptions`,
-    timeout: 1000,
-    method: 'get',
-    response: ({ query }) => {
-      const { keyword } = query;
-      console.log("查询条件：", keyword);
-      return resultSuccess(demoTreeList(keyword));
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/mock/sys/menu.ts

@@ -1,270 +0,0 @@
-import { resultSuccess, resultError, getRequestToken, requestParams,baseUrl} from '../_util';
-import { MockMethod } from 'vite-plugin-mock';
-import { createFakeUserList } from './user';
-
-// single
-const dashboardRoute = {
-  path: '/dashboard',
-  name: 'Dashboard',
-  component: 'LAYOUT',
-  redirect: '/dashboard/analysis',
-  meta: {
-    title: 'routes.dashboard.dashboard',
-    hideChildrenInMenu: true,
-    icon: 'bx:bx-home',
-  },
-  children: [
-    {
-      path: 'analysis',
-      name: 'Analysis',
-      component: '/dashboard/Analysis/index',
-      meta: {
-        hideMenu: true,
-        hideBreadcrumb: true,
-        title: 'routes.dashboard.analysis',
-        currentActiveMenu: '/dashboard',
-        icon: 'bx:bx-home',
-      },
-    },
-    {
-      path: 'workbench',
-      name: 'Workbench',
-      component: '/dashboard/workbench/index',
-      meta: {
-        hideMenu: true,
-        hideBreadcrumb: true,
-        title: 'routes.dashboard.workbench',
-        currentActiveMenu: '/dashboard',
-        icon: 'bx:bx-home',
-      },
-    },
-  ],
-};
-
-const backRoute = {
-  path: 'back',
-  name: 'PermissionBackDemo',
-  meta: {
-    title: 'routes.demo.permission.back',
-  },
-
-  children: [
-    {
-      path: 'page',
-      name: 'BackAuthPage',
-      component: '/demo/permission/back/index',
-      meta: {
-        title: 'routes.demo.permission.backPage',
-      },
-    },
-    {
-      path: 'btn',
-      name: 'BackAuthBtn',
-      component: '/demo/permission/back/Btn',
-      meta: {
-        title: 'routes.demo.permission.backBtn',
-      },
-    },
-  ],
-};
-
-const authRoute = {
-  path: '/permission',
-  name: 'Permission',
-  component: 'LAYOUT',
-  redirect: '/permission/front/page',
-  meta: {
-    icon: 'carbon:user-role',
-    title: 'routes.demo.permission.permission',
-  },
-  children: [backRoute],
-};
-
-const levelRoute = {
-  path: '/level',
-  name: 'Level',
-  component: 'LAYOUT',
-  redirect: '/level/menu1/menu1-1',
-  meta: {
-    icon: 'carbon:user-role',
-    title: 'routes.demo.level.level',
-  },
-
-  children: [
-    {
-      path: 'menu1',
-      name: 'Menu1Demo',
-      meta: {
-        title: 'Menu1',
-      },
-      children: [
-        {
-          path: 'menu1-1',
-          name: 'Menu11Demo',
-          meta: {
-            title: 'Menu1-1',
-          },
-          children: [
-            {
-              path: 'menu1-1-1',
-              name: 'Menu111Demo',
-              component: '/demo/level/Menu111',
-              meta: {
-                title: 'Menu111',
-              },
-            },
-          ],
-        },
-        {
-          path: 'menu1-2',
-          name: 'Menu12Demo',
-          component: '/demo/level/Menu12',
-          meta: {
-            title: 'Menu1-2',
-          },
-        },
-      ],
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2Demo',
-      component: '/demo/level/Menu2',
-      meta: {
-        title: 'Menu2',
-      },
-    },
-  ],
-};
-
-const sysRoute = {
-  path: '/system',
-  name: 'System',
-  component: 'LAYOUT',
-  redirect: '/system/account',
-  meta: {
-    icon: 'ion:settings-outline',
-    title: 'routes.demo.system.moduleName',
-  },
-  children: [
-    {
-      path: 'account',
-      name: 'AccountManagement',
-      meta: {
-        title: 'routes.demo.system.account',
-        ignoreKeepAlive: true,
-      },
-      component: '/demo/system/account/index',
-    },
-    {
-      path: 'account_detail/:id',
-      name: 'AccountDetail',
-      meta: {
-        hideMenu: true,
-        title: 'routes.demo.system.account_detail',
-        ignoreKeepAlive: true,
-        showMenu: false,
-        currentActiveMenu: '/system/account',
-      },
-      component: '/demo/system/account/AccountDetail',
-    },
-    {
-      path: 'role',
-      name: 'RoleManagement',
-      meta: {
-        title: 'routes.demo.system.role',
-        ignoreKeepAlive: true,
-      },
-      component: '/demo/system/role/index',
-    },
-
-    {
-      path: 'menu',
-      name: 'MenuManagement',
-      meta: {
-        title: 'routes.demo.system.menu',
-        ignoreKeepAlive: true,
-      },
-      component: '/demo/system/menu/index',
-    },
-    {
-      path: 'dept',
-      name: 'DeptManagement',
-      meta: {
-        title: 'routes.demo.system.dept',
-        ignoreKeepAlive: true,
-      },
-      component: '/demo/system/dept/index',
-    },
-    {
-      path: 'changePassword',
-      name: 'ChangePassword',
-      meta: {
-        title: 'routes.demo.system.password',
-        ignoreKeepAlive: true,
-      },
-      component: '/demo/system/password/index',
-    },
-  ],
-};
-
-const linkRoute = {
-  path: '/link',
-  name: 'Link',
-  component: 'LAYOUT',
-  meta: {
-    icon: 'ion:tv-outline',
-    title: 'routes.demo.iframe.frame',
-  },
-  children: [
-    {
-      path: 'doc',
-      name: 'Doc',
-      meta: {
-        title: 'routes.demo.iframe.doc',
-        frameSrc: 'https://vvbin.cn/doc-next/',
-      },
-    },
-    {
-      path: 'https://vvbin.cn/doc-next/',
-      name: 'DocExternal',
-      component: 'LAYOUT',
-      meta: {
-        title: 'routes.demo.iframe.docExternal',
-      },
-    },
-  ],
-};
-
-export default [
-  {
-    url: `${baseUrl}/sys/permission/getUserPermissionByToken`,
-    timeout: 1000,
-    method: 'get',
-    response: (request: requestParams) => {
-      const token = getRequestToken(request);
-      if (!token) {
-        return resultError('Invalid token!');
-      }
-      const checkUser = createFakeUserList().find((item) => item.token === token);
-      if (!checkUser) {
-        return resultError('Invalid user token!');
-      }
-      const id = checkUser.userId;
-      let menu: Object[];
-      switch (id) {
-        case '1':
-          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[0].path;
-          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute];
-          break;
-        case '2':
-          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[1].path;
-          menu = [dashboardRoute, authRoute, levelRoute, linkRoute];
-          break;
-        default:
-          menu = [];
-      }
-
-      return resultSuccess(menu);
-    },
-  },
-] as MockMethod[];

jeecgboot-vue3/package.json

@@ -1,11 +1,6 @@
 {
-  "name": "jeecgboot-vue3",
-  "version": "3.7.1",
-  "author": {
-    "name": "北京国炬信息技术有限公司",
-    "email": "jeecgos@163.com",
-    "url": "https://www.jeecg.com"
-  },
+  "name": "ht",
+  "version": "1.0.0",
   "scripts": {
     "pinstall": "pnpm install",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
@@ -159,15 +154,6 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^1.8.27"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jeecgboot/JeecgBoot.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/jeecgboot/JeecgBoot/issues"
-  },
-  "homepage": "https://www.jeecg.com",
   "engines": {
     "node": "^18 || >=20"
   }

jeecgboot-vue3/src/layouts/default/header/index.vue

@@ -39,7 +39,7 @@
 
       <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
       <!-- ai助手 -->
-      <!--<Aide></Aide>-->
+      <!-- <Aide></Aide> -->
     </div>
   </Header>
   <LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
@@ -74,7 +74,6 @@
   import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import Aide from "@/views/dashboard/ai/components/aide/index.vue"
   const { t } = useI18n();
 
   export default defineComponent({
@@ -96,7 +95,6 @@
       SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
         loading: true,
       }),
-      Aide
     },
     props: {
       fixed: propTypes.bool,

jeecgboot-vue3/src/layouts/default/sider/MixSider.vue

@@ -54,7 +54,7 @@
         <Icon :size="16" :icon="getMixSideFixed ? 'ri:pushpin-2-fill' : 'ri:pushpin-2-line'" class="pushpin" @click="handleFixedMenu" />
       </div>
       <ScrollContainer :class="`${prefixCls}-menu-list__content`">
-        <SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menuClick="handleMenuClick" />
+        <SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menu-click="handleMenuClick" />
       </ScrollContainer>
       <div v-show="getShowDragBar && openMenu" :class="`${prefixCls}-drag-bar`" ref="dragBarRef"></div>
     </div>
@@ -63,7 +63,7 @@
 <script lang="ts">
   import type { Menu } from '/@/router/types';
   import type { CSSProperties } from 'vue';
-  import { computed, defineComponent, onMounted, ref, unref, watch} from 'vue';
+  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
   import { ScrollContainer } from '/@/components/Container';
   import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
@@ -531,7 +531,9 @@
         justify-content: space-between;
 
         text-align: center;
-        .text {flex: 1;}
+        .text {
+          flex: 1;
+        }
 
         &.show {
           min-width: 130px;

jeecgboot-vue3/src/qiankun/apps.ts

@@ -1,22 +0,0 @@
-// /**
-//  *微应用apps
-//  * @name: 微应用名称 - 具有唯一性
-//  * @entry: 微应用入口.必选 - 通过该地址加载微应用，
-//  * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
-//  * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
-//  */
-// //子应用列表
-// const _apps: object[] = [];
-// for (const key in import.meta.env) {
-//   if (key.includes('VITE_APP_SUB_')) {
-//     const name = key.split('VITE_APP_SUB_')[1];
-//     const obj = {
-//       name,
-//       entry: import.meta.env[key],
-//       container: '#content',
-//       activeRule: name,
-//     };
-//     _apps.push(obj);
-//   }
-// }
-// export const apps = _apps;

jeecgboot-vue3/src/qiankun/index.ts

@@ -1,73 +0,0 @@
-// /**
-//  * qiankun配置
-//  */
-// import { registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
-// import { apps } from './apps';
-// import { getProps, initGlState } from './state';
-//
-// /**
-//  * 重构apps
-//  */
-// function filterApps() {
-//   apps.forEach((item) => {
-//     //主应用需要传递给微应用的数据。
-//     item.props = getProps();
-//     //微应用触发的路由规则
-//     // @ts-ignore
-//     item.activeRule = genActiveRule('/' + item.activeRule);
-//   });
-//   return apps;
-// }
-//
-// /**
-//  * 路由监听
-//  * @param {*} routerPrefix 前缀
-//  */
-// function genActiveRule(routerPrefix) {
-//   return (location) => location.pathname.startsWith(routerPrefix);
-// }
-//
-// /**
-//  * 微应用注册
-//  */
-// function registerApps() {
-//   const _apps = filterApps();
-//   registerMicroApps(_apps, {
-//     beforeLoad: [
-//       // @ts-ignore
-//       (loadApp) => {
-//         console.log('before load', loadApp);
-//       },
-//     ],
-//     beforeMount: [
-//       // @ts-ignore
-//       (mountApp) => {
-//         console.log('before mount', mountApp);
-//       },
-//     ],
-//     afterMount: [
-//       // @ts-ignore
-//       (mountApp) => {
-//         console.log('before mount', mountApp);
-//       },
-//     ],
-//     afterUnmount: [
-//       // @ts-ignore
-//       (unloadApp) => {
-//         console.log('after unload', unloadApp);
-//       },
-//     ],
-//   });
-//   // 设置默认子应用,与 genActiveRule中的参数保持一致
-//   // setDefaultMountApp();
-//   // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
-//   runAfterFirstMounted(() => console.log('开启监控'));
-//   // 添加全局的未捕获异常处理器。
-//   addGlobalUncaughtErrorHandler((event) => console.log(event));
-//   // 定义全局状态
-//   initGlState();
-//   //启动qiankun
-//   start({});
-// }
-//
-// export default registerApps;

jeecgboot-vue3/src/qiankun/state.ts

@@ -1,38 +0,0 @@
-// /**
-//  *公共数据
-//  */
-// import { initGlobalState } from 'qiankun';
-// import { store } from '/@/store';
-// import { router } from '/@/router';
-// import { getToken } from '/@/utils/auth';
-// //定义传入子应用的数据
-// export function getProps() {
-//   return {
-//     data: {
-//       publicPath: '/',
-//       token: getToken(),
-//       store,
-//       router,
-//     },
-//   };
-// }
-//
-// /**
-//  * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
-//  * @param state 主应用穿的公共数据
-//  */
-// export function initGlState(info = { userName: 'admin' }) {
-//   // 初始化state
-//   const actions = initGlobalState(info);
-//   // 设置新的值
-//   actions.setGlobalState(info);
-//   // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
-//   actions.onGlobalStateChange((newState, prev) => {
-//     // state: 变更后的状态; prev 变更前的状态
-//     console.info('newState', newState);
-//     console.info('prev', prev);
-//     for (const key in newState) {
-//       console.info('onGlobalStateChange', key);
-//     }
-//   });
-// }

jeecgboot-vue3/src/views/dashboard/ai/index.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="content">
-      <AiChat></AiChat>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import AiChat from '/@/components/jeecg/AiChat/index.vue';
-  
-</script>
-
-<style lang="less" scoped>
-  .wrap {
-    height: 100%;
-    width: 100%;
-    padding: 20px;
-    .content {
-      background: #fff;
-      width: 100%;
-      height: 100%;
-      padding: 20px;
-    }
-  }
-</style>

jeecgboot-vue3/src/views/demo/charts/Line.vue

@@ -1,117 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import { getLineData } from './data';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const { barData, lineData, category } = getLineData;
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#0f375f',
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
-              label: {
-                show: true,
-                backgroundColor: '#333',
-              },
-            },
-          },
-          legend: {
-            data: ['line', 'bar'],
-            textStyle: {
-              color: '#ccc',
-            },
-          },
-          xAxis: {
-            data: category,
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
-          },
-          yAxis: {
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
-          },
-          series: [
-            {
-              name: 'line',
-              type: 'line',
-              smooth: true,
-              showAllSymbol: 'auto',
-              symbol: 'emptyCircle',
-              symbolSize: 15,
-              data: lineData,
-            },
-            {
-              name: 'bar',
-              type: 'bar',
-              barWidth: 10,
-              itemStyle: {
-                borderRadius: 5,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#14c8d4' },
-                  { offset: 1, color: '#43eec6' },
-                ]),
-              },
-              data: barData,
-            },
-            {
-              name: 'line',
-              type: 'bar',
-              barGap: '-100%',
-              barWidth: 10,
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
-                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
-                  { offset: 1, color: 'rgba(20,200,212,0)' },
-                ]),
-              },
-              z: -12,
-              data: lineData,
-            },
-            {
-              name: 'dotted',
-              type: 'pictorialBar',
-              symbol: 'rect',
-              itemStyle: {
-                color: '#0f375f',
-              },
-              symbolRepeat: true,
-              symbolSize: [12, 4],
-              symbolMargin: 1,
-              z: -10,
-              data: lineData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/Map.vue

@@ -1,75 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import { mapData } from './data';
-  import { registerMap } from 'echarts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      onMounted(async () => {
-        const json = (await (await import('./china.json')).default) as any;
-        registerMap('china', json);
-        setOptions({
-          visualMap: [
-            {
-              min: 0,
-              max: 1000,
-              left: 'left',
-              top: 'bottom',
-              text: ['高', '低'],
-              calculable: false,
-              orient: 'horizontal',
-              inRange: {
-                color: ['#e0ffff', '#006edd'],
-                symbolSize: [30, 100],
-              },
-            },
-          ],
-          tooltip: {
-            trigger: 'item',
-            backgroundColor: 'rgba(0, 0, 0, .6)',
-            textStyle: {
-              color: '#fff',
-              fontSize: 12,
-            },
-          },
-          series: [
-            {
-              name: 'iphone4',
-              type: 'map',
-              map: 'china',
-              label: {
-                show: true,
-                color: 'rgb(249, 249, 249)',
-                fontSize: 10,
-              },
-              itemStyle: {
-                areaColor: '#2f82ce',
-                borderColor: '#0DAAC1',
-              },
-              data: mapData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/Pie.vue

@@ -1,135 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
-      const yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'];
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#0f375f',
-          title: [
-            {
-              text: '各渠道投诉占比',
-              left: '2%',
-              top: '1%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-            {
-              text: '投诉原因TOP10',
-              left: '40%',
-              top: '1%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-            {
-              text: '各级别投诉占比',
-              left: '2%',
-              top: '50%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-          ],
-          grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
-          tooltip: {
-            formatter: '{b} ({c})',
-          },
-          xAxis: [
-            {
-              gridIndex: 0,
-              axisTick: { show: false },
-              axisLabel: { show: false },
-              splitLine: { show: false },
-              axisLine: { show: false },
-            },
-          ],
-          yAxis: [
-            {
-              gridIndex: 0,
-              interval: 0,
-              data: yAxisData.reverse(),
-              axisTick: { show: false },
-              axisLabel: { show: true },
-              splitLine: { show: false },
-              axisLine: { show: true, lineStyle: { color: '#6173a3' } },
-            },
-          ],
-          series: [
-            {
-              name: '各渠道投诉占比',
-              type: 'pie',
-              radius: '30%',
-              center: ['22%', '25%'],
-              data: [
-                { value: 335, name: '客服电话' },
-                { value: 310, name: '奥迪官网' },
-                { value: 234, name: '媒体曝光' },
-                { value: 135, name: '质检总局' },
-                { value: 105, name: '其他' },
-              ],
-              labelLine: { show: false },
-              label: {
-                show: true,
-                formatter: '{b} \n ({d}%)',
-                color: '#B1B9D3',
-              },
-            },
-            {
-              name: '各级别投诉占比',
-              type: 'pie',
-              radius: '30%',
-              center: ['22%', '75%'],
-              labelLine: { show: false },
-              data: [
-                { value: 335, name: 'A级' },
-                { value: 310, name: 'B级' },
-                { value: 234, name: 'C级' },
-                { value: 135, name: 'D级' },
-              ],
-              label: {
-                show: true,
-                formatter: '{b} \n ({d}%)',
-                color: '#B1B9D3',
-              },
-            },
-            {
-              name: '投诉原因TOP10',
-              type: 'bar',
-              xAxisIndex: 0,
-              yAxisIndex: 0,
-              barWidth: '45%',
-              itemStyle: { color: '#86c9f4' },
-              label: { show: true, position: 'right', color: '#9EA7C4' },
-              data: dataAll.sort(),
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/SaleRadar.vue

@@ -1,100 +0,0 @@
-<template>
-  <Card title="销售统计" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts">
-  import type { Ref } from 'vue';
-  import { defineComponent, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '400px',
-      },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            legend: {
-              bottom: 0,
-              data: ['Visits', 'Sales'],
-            },
-            tooltip: {},
-            radar: {
-              radius: '60%',
-              splitNumber: 8,
-              indicator: [
-                {
-                  name: '2017',
-                },
-                {
-                  name: '2017',
-                },
-                {
-                  name: '2018',
-                },
-                {
-                  name: '2019',
-                },
-                {
-                  name: '2020',
-                },
-                {
-                  name: '2021',
-                },
-              ],
-            },
-            series: [
-              {
-                type: 'radar' as 'custom',
-                symbolSize: 0,
-                areaStyle: {
-                  shadowBlur: 0,
-                  shadowColor: 'rgba(0,0,0,.2)',
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 10,
-                  opacity: 1,
-                },
-                data: [
-                  {
-                    value: [90, 50, 86, 40, 50, 20],
-                    name: 'Visits',
-                    itemStyle: {
-                      color: '#9f8ed7',
-                    },
-                  },
-                  {
-                    value: [70, 75, 70, 76, 20, 85],
-                    name: 'Sales',
-                    itemStyle: {
-                      color: '#1edec5',
-                    },
-                  },
-                ],
-              },
-            ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/data.ts

@@ -1,189 +0,0 @@
-export const mapData: any = [
-  {
-    name: '北京',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '天津',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '上海',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '重庆',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '河北',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '河南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '云南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '辽宁',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '黑龙江',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '湖南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '安徽',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '山东',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '新疆',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '江苏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '浙江',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '江西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '湖北',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '广西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '甘肃',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '山西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '内蒙古',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '陕西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '吉林',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '福建',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '贵州',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '广东',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '青海',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '西藏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '四川',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '宁夏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '海南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '台湾',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '香港',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '澳门',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-];
-
-export const getLineData = (() => {
-  const category: any[] = [];
-  let dottedBase = +new Date();
-  const lineData: any[] = [];
-  const barData: any[] = [];
-
-  for (let i = 0; i < 20; i++) {
-    const date = new Date((dottedBase += 1000 * 3600 * 24));
-    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
-    const b = Math.random() * 200;
-    const d = Math.random() * 200;
-    barData.push(b);
-    lineData.push(d + b);
-  }
-  return { barData, category, lineData };
-})();

jeecgboot-vue3/src/views/demo/charts/map/Baidu.vue

@@ -1,45 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const BAI_DU_MAP_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
-  export default defineComponent({
-    name: 'BaiduMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const BMap = (window as any).BMap;
-        const map = new BMap.Map(wrapEl);
-        const point = new BMap.Point(116.404, 39.915);
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/map/Gaode.vue

@@ -1,47 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=06313eb9c6563b674a8fd789db0692c3';
-
-  export default defineComponent({
-    name: 'AMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: A_MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const AMap = (window as any).AMap;
-        new AMap.Map(wrapEl, {
-          zoom: 11,
-          center: [116.397428, 39.90923],
-          viewMode: '3D',
-        });
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/charts/map/Google.vue

@@ -1,52 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const MAP_URL = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
-
-  export default defineComponent({
-    name: 'GoogleMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const google = (window as any).google;
-        const latLng = { lat: 116.404, lng: 39.915 };
-        const map = new google.maps.Map(wrapEl, {
-          zoom: 4,
-          center: latLng,
-        });
-        new google.maps.Marker({
-          position: latLng,
-          map: map,
-          title: 'Hello World!',
-        });
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/codemirror/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <textarea ref="textarea">
-白日依山尽，黄河入海流。
-欲穷千里目，更上一层楼。
-        </textarea
-    >
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, onMounted, ref, reactive } from 'vue';
-  // 引入全局实例
-  import _CodeMirror from 'codemirror';
-
-  // 核心样式
-  import 'codemirror/lib/codemirror.css';
-  // 引入主题后还需要在 options 中指定主题才会生效
-  import 'codemirror/theme/cobalt.css';
-
-  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
-  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
-  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
-  import 'codemirror/mode/javascript/javascript.js';
-  import 'codemirror/mode/css/css.js';
-  import 'codemirror/mode/xml/xml.js';
-  import 'codemirror/mode/clike/clike.js';
-  import 'codemirror/mode/markdown/markdown.js';
-  import 'codemirror/mode/python/python.js';
-  import 'codemirror/mode/r/r.js';
-  import 'codemirror/mode/shell/shell.js';
-  import 'codemirror/mode/sql/sql.js';
-  import 'codemirror/mode/swift/swift.js';
-  import 'codemirror/mode/vue/vue.js';
-  // 尝试获取全局实例
-
-  export default defineComponent({
-    components: {},
-    setup() {
-      const CodeMirror = window.CodeMirror || _CodeMirror;
-
-      const textarea = ref(null);
-      const options = reactive({
-        // 缩进格式
-        tabSize: 2,
-        // 主题，对应主题库 JS 需要提前引入
-        theme: 'cobalt',
-        // 显示行号
-        lineNumbers: true,
-        line: true,
-      });
-      onMounted(() => {
-        init();
-      });
-
-      function init() {
-        CodeMirror.fromTextArea(textarea.value, options);
-      }
-
-      return {
-        textarea,
-      };
-    },
-  });
-</script>
-
-<style lang="css" scoped></style>

jeecgboot-vue3/src/views/demo/comp/button/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <PageWrapper
-    contentFullHeight
-    title="基础组件"
-    content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
-  >
-    <a-row :gutter="[20, 20]">
-      <a-col :xl="10" :lg="24">
-        <a-card title="BasicButton Color">
-          <div class="my-2">
-            <h3>success</h3>
-            <div class="py-2">
-              <a-button color="success"> 成功 </a-button>
-              <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
-              <a-button color="success" class="ml-2" loading> loading </a-button>
-              <a-button color="success" type="link" class="ml-2"> link </a-button>
-              <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
-              <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
-            </div>
-          </div>
-
-          <div class="my-2">
-            <h3>warning</h3>
-            <a-button color="warning"> 警告 </a-button>
-            <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
-            <a-button color="warning" class="ml-2" loading> loading </a-button>
-            <a-button color="warning" type="link" class="ml-2"> link </a-button>
-            <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
-            <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>error</h3>
-            <a-button color="error"> 错误 </a-button>
-            <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
-            <a-button color="error" class="ml-2" loading> loading </a-button>
-            <a-button color="error" type="link" class="ml-2"> link </a-button>
-            <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
-            <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>ghost</h3>
-            <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
-            <a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
-            <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
-            <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
-            <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xl="14" :lg="24">
-        <a-card title="BasicButton Types">
-          <div class="my-2">
-            <h3>primary</h3>
-            <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
-            <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="primary" class="ml-2" danger preIcon="mdi:page-next-outline"> 危险 </a-button>
-            <a-button type="primary" class="ml-2" loading> loading </a-button>
-            <a-button type="link" class="ml-2"> link </a-button>
-            <a-button type="link" class="ml-2" loading> loading link </a-button>
-            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>default</h3>
-            <a-button type="default"> 默认 </a-button>
-            <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="default" class="ml-2" danger> 危险 </a-button>
-            <a-button type="default" class="ml-2" loading> loading </a-button>
-            <a-button type="link" class="ml-2"> link </a-button>
-            <a-button type="link" class="ml-2" loading> loading link </a-button>
-            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>dashed</h3>
-            <a-button type="dashed"> dashed </a-button>
-            <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
-            <a-button type="dashed" class="ml-2" danger> 危险 </a-button>
-            <a-button type="dashed" class="ml-2" loading> loading </a-button>
-          </div>
-
-          <div class="my-2">
-            <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
-            <div class="bg-gray-400 py-2">
-              <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
-              <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
-              <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
-              <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
-              <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
-            </div>
-            <!-- antd 按钮不能同时使用ghost和link -->
-            <!--      <a-button ghost type="link" class="ml-2"> link </a-button>-->
-            <!--      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
-            <!--      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Card, Row, Col } from 'ant-design-vue';
-  export default defineComponent({
-    components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/card-list/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <PageWrapper title="卡片列表示例" content="基础封装">
-    <CardList :params="params" :api="demoListApi" @getMethod="getMethod" @delete="handleDel">
-      <template #header>
-        <Button type="primary" color="error"> 按钮1 </Button>
-        <Button type="primary" color="success"> 按钮2 </Button>
-      </template>
-    </CardList>
-  </PageWrapper>
-</template>
-<script lang="ts" setup>
-  import { CardList } from '/@/components/CardList';
-  import { Button } from '/@/components/Button';
-  import { PageWrapper } from '/@/components/Page';
-  import { demoListApi } from '/@/api/demo/table';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  const { notification } = useMessage();
-  // 请求api时附带参数
-  const params = {};
-
-  let reload = () => {};
-  // 获取内部fetch方法;
-  function getMethod(m: any) {
-    reload = m;
-  }
-  //删除按钮事件
-  function handleDel(id) {
-    console.log(id);
-    notification.success({ message: `成功删除${id}` });
-    reload();
-  }
-</script>

jeecgboot-vue3/src/views/demo/comp/count-to/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <PageWrapper title="数字动画示例">
-    <Card>
-      <CardGrid class="count-to-demo-card">
-        <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo suffix="$" :color="'red'" :startVal="1" :endVal="300000" :decimals="2" :duration="6000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo suffix="$" :color="'rgb(0,238,0)'" :startVal="1" :endVal="400000" :duration="7000" />
-      </CardGrid>
-      <CardGrid class="count-to-demo-card">
-        <CountTo separator="-" :color="'rgba(138,43,226,.6)'" :startVal="10000" :endVal="500000" :duration="8000" />
-      </CardGrid>
-    </Card>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { CountTo } from '/@/components/CountTo/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: {
-      Card,
-      CardGrid: Card.Grid,
-      CountTo,
-      PageWrapper,
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .count-to-demo {
-    &-card {
-      width: 50%;
-      font-size: 30px;
-      text-align: center;
-    }
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/cropper/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
-    <CollapseContainer title="头像裁剪">
-      <CropperAvatar :uploadApi="uploadApi" :value="avatar" />
-    </CollapseContainer>
-
-    <CollapseContainer title="矩形裁剪" class="my-4">
-      <div class="container p-4">
-        <div class="cropper-container mr-10">
-          <CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
-        </div>
-        <img :src="cropperImg" class="croppered" v-if="cropperImg" alt="" />
-      </div>
-      <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
-    </CollapseContainer>
-
-    <CollapseContainer title="圆形裁剪">
-      <div class="container p-4">
-        <div class="cropper-container mr-10">
-          <CropperImage ref="refCropper" :src="img" @cropend="handleCircleCropend" style="width: 40vw" circled />
-        </div>
-        <img :src="circleImg" class="croppered" v-if="circleImg" />
-      </div>
-      <p v-if="circleImg">裁剪后图片信息：{{ circleInfo }}</p>
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { CollapseContainer } from '/@/components/Container';
-  import { CropperImage, CropperAvatar } from '/@/components/Cropper';
-  import { uploadApi } from '/@/api/sys/upload';
-  import img from '/@/assets/images/header.jpg';
-  import { useUserStore } from '/@/store/modules/user';
-
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      CropperImage,
-      CollapseContainer,
-      CropperAvatar,
-    },
-    setup() {
-      const info = ref('');
-      const cropperImg = ref('');
-      const circleInfo = ref('');
-      const circleImg = ref('');
-      const userStore = useUserStore();
-      const avatar = ref(userStore.getUserInfo?.avatar || '');
-      function handleCropend({ imgBase64, imgInfo }) {
-        info.value = imgInfo;
-        cropperImg.value = imgBase64;
-      }
-
-      function handleCircleCropend({ imgBase64, imgInfo }) {
-        circleInfo.value = imgInfo;
-        circleImg.value = imgBase64;
-      }
-
-      return {
-        img,
-        info,
-        circleInfo,
-        cropperImg,
-        circleImg,
-        handleCropend,
-        handleCircleCropend,
-        avatar,
-        uploadApi: uploadApi as any,
-      };
-    },
-  });
-</script>
-
-<style scoped>
-  .container {
-    display: flex;
-    width: 100vw;
-    align-items: center;
-  }
-
-  .cropper-container {
-    width: 40vw;
-  }
-
-  .croppered {
-    height: 360px;
-  }
-
-  p {
-    margin: 10px;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/desc/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <PageWrapper title="详情组件示例">
-    <Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema" />
-
-    <Description
-      class="mt-4"
-      title="垂直示例"
-      layout="vertical"
-      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
-      :column="2"
-      :data="mockData"
-      :schema="schema"
-    />
-
-    <Description @register="register" class="mt-4" />
-    <Description @register="register1" class="mt-4" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Description, DescItem, useDescription } from '/@/components/Description/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  const mockData: Recordable = {
-    username: 'test',
-    nickName: 'VB',
-    age: '123',
-    phone: '15695909xxx',
-    email: '190848757@qq.com',
-    addr: '厦门市思明区',
-    sex: '男',
-    certy: '3504256199xxxxxxxxx',
-    tag: 'orange',
-  };
-  const schema: DescItem[] = [
-    {
-      field: 'username',
-      label: '用户名',
-    },
-    {
-      field: 'nickName',
-      label: '昵称',
-      render: (curVal, data) => {
-        return `${data.username}-${curVal}`;
-      },
-    },
-    {
-      field: 'phone',
-      label: '联系电话',
-    },
-    {
-      field: 'email',
-      label: '邮箱',
-    },
-    {
-      field: 'addr',
-      label: '地址',
-    },
-  ];
-  export default defineComponent({
-    components: { Description, PageWrapper },
-    setup() {
-      const [register] = useDescription({
-        title: 'useDescription',
-        data: mockData,
-        schema: schema,
-      });
-
-      const [register1] = useDescription({
-        title: '无边框',
-        bordered: false,
-        data: mockData,
-        schema: schema,
-      });
-
-      return { mockData, schema, register, register1 };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/Drawer1.vue

@@ -1,13 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      return {};
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/Drawer2.vue

@@ -1,17 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
-    Drawer Info.
-    <a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      const [register, { closeDrawer }] = useDrawerInner();
-      return { register, closeDrawer };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/Drawer3.vue

@@ -1,35 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter @ok="handleOk">
-    <p class="h-20" v-for="index in 40" :key="index"> 根据屏幕高度自适应 </p>
-    <template #insertFooter>
-      <a-button> btn</a-button>
-    </template>
-    <template #centerFooter>
-      <a-button> btn2</a-button>
-    </template>
-
-    <template #appendFooter>
-      <a-button> btn3</a-button>
-    </template>
-
-    <!-- <template #footer>
-      <a-button> customerFooter</a-button>
-    </template> -->
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-    setup() {
-      return {
-        handleOk: () => {
-          console.log('=====================');
-          console.log('ok');
-          console.log('======================');
-        },
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/Drawer4.vue

@@ -1,53 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
-    <div>
-      <BasicForm @register="registerForm" />
-    </div>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 12,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 12,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicDrawer, BasicForm },
-    setup() {
-      const [registerForm, { setFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      const [register] = useDrawerInner((data) => {
-        // 方式1
-        setFieldsValue({
-          field2: data.data,
-          field1: data.info,
-        });
-      });
-      return { register, schemas, registerForm };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/Drawer5.vue

@@ -1,13 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" :isDetail="true" title="Drawer Title5">
-    <p class="h-20"> Content Message </p>
-    <template #titleToolbar> toolbar </template>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
-  export default defineComponent({
-    components: { BasicDrawer },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/drawer/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <PageWrapper title="抽屉组件使用示例">
-    <Alert message="使用 useDrawer 进行抽屉操作" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
-
-    <Alert message="内外同时控制显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
-    <Alert message="自适应高度/显示footer" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
-
-    <Alert message="内外数据交互" show-icon />
-    <a-button type="primary" class="my-4" @click="send"> 打开Drawer并传递数据 </a-button>
-    <Alert message="详情页模式" show-icon />
-    <a-button type="primary" class="my-4" @click="openDrawer5(true)"> 打开详情Drawer </a-button>
-    <Drawer1 @register="register1" />
-    <Drawer2 @register="register2" />
-    <Drawer3 @register="register3" />
-    <Drawer4 @register="register4" />
-    <Drawer5 @register="register5" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
-  import { useDrawer } from '/@/components/Drawer';
-  import Drawer1 from './Drawer1.vue';
-  import Drawer2 from './Drawer2.vue';
-  import Drawer3 from './Drawer3.vue';
-  import Drawer4 from './Drawer4.vue';
-  import Drawer5 from './Drawer5.vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { Alert, PageWrapper, Drawer1, Drawer2, Drawer3, Drawer4, Drawer5 },
-    setup() {
-      const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
-      const [register2, { openDrawer: openDrawer2 }] = useDrawer();
-      const [register3, { openDrawer: openDrawer3 }] = useDrawer();
-      const [register4, { openDrawer: openDrawer4 }] = useDrawer();
-      const [register5, { openDrawer: openDrawer5 }] = useDrawer();
-      function send() {
-        openDrawer4(true, {
-          data: 'content',
-          info: 'Info',
-        });
-      }
-      function openDrawerLoading() {
-        openDrawer1();
-        setDrawerProps({ loading: true });
-        setTimeout(() => {
-          setDrawerProps({ loading: false });
-        }, 2000);
-      }
-      return {
-        register1,
-        openDrawer1,
-        register2,
-        openDrawer2,
-        register3,
-        openDrawer3,
-        register4,
-        register5,
-        openDrawer5,
-        send,
-        openDrawerLoading,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/lazy/TargetContent.vue

@@ -1,19 +0,0 @@
-<template>
-  <Card hoverable :style="{ width: '240px', background: '#fff' }">
-    <template #cover>
-      <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
-    </template>
-    <CardMeta title="懒加载组件" />
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { CardMeta: Card.Meta, Card },
-    setup() {
-      return {};
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/lazy/Transition.vue

@@ -1,77 +0,0 @@
-<template>
-  <PageWrapper title="懒加载自定义动画示例" content="懒加载组件显示动画">
-    <div class="lazy-base-demo-wrap">
-      <h1>向下滚动</h1>
-
-      <div class="lazy-base-demo-box">
-        <LazyContainer transitionName="custom">
-          <TargetContent />
-        </LazyContainer>
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import TargetContent from './TargetContent.vue';
-  import { LazyContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { LazyContainer, TargetContent, PageWrapper },
-  });
-</script>
-<style lang="less">
-  .lazy-base-demo {
-    &-wrap {
-      display: flex;
-      width: 50%;
-      height: 2000px;
-      margin: 20px auto;
-      text-align: center;
-      background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-box {
-      width: 300px;
-      height: 300px;
-    }
-
-    h1 {
-      height: 1300px;
-      margin: 20px 0;
-    }
-  }
-
-  .custom-enter {
-    opacity: 0;
-    transform: scale(0.4) translate(100%);
-  }
-
-  .custom-enter-to {
-    opacity: 1;
-  }
-
-  .custom-enter-active {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    transition: all 0.5s;
-  }
-
-  .custom-leave {
-    opacity: 1;
-  }
-
-  .custom-leave-to {
-    opacity: 0;
-    transform: scale(0.4) translate(-100%);
-  }
-
-  .custom-leave-active {
-    transition: all 0.5s;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/lazy/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <PageWrapper title="懒加载基础示例" content="向下滚动到可见区域才会加载组件">
-    <div class="lazy-base-demo-wrap">
-      <h1>向下滚动</h1>
-
-      <div class="lazy-base-demo-box">
-        <LazyContainer>
-          <TargetContent />
-          <template #skeleton>
-            <Skeleton :rows="10" />
-          </template>
-        </LazyContainer>
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Skeleton } from 'ant-design-vue';
-  import TargetContent from './TargetContent.vue';
-  import { LazyContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { LazyContainer, PageWrapper, TargetContent, Skeleton },
-  });
-</script>
-<style lang="less">
-  .lazy-base-demo {
-    &-wrap {
-      display: flex;
-      width: 50%;
-      height: 2000px;
-      margin: 20px auto;
-      text-align: center;
-      background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-box {
-      width: 300px;
-      height: 300px;
-    }
-
-    h1 {
-      height: 1300px;
-      margin: 20px 0;
-    }
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/loading/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
-    <div ref="wrapEl">
-      <a-alert message="组件方式" />
-      <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading"> 全屏 Loading </a-button>
-      <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
-      <Loading :loading="loading" :absolute="absolute" :theme="theme" :background="background" :tip="tip" />
-
-      <a-alert message="函数方式" />
-
-      <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
-      <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
-
-      <a-alert message="指令方式" />
-      <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading"> 打开指令Loading </a-button>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref } from 'vue';
-  import { Loading, useLoading } from '/@/components/Loading';
-  import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: { Loading, PageWrapper, [Alert.name]: Alert },
-    setup() {
-      const wrapEl = ref<ElRef>(null);
-
-      const loadingRef = ref(false);
-      const compState = reactive({
-        absolute: false,
-        loading: false,
-        theme: 'dark',
-        background: 'rgba(111,111,111,.7)',
-        tip: '加载中...',
-      });
-      const [openFullLoading, closeFullLoading] = useLoading({
-        tip: '加载中...',
-      });
-
-      const [openWrapLoading, closeWrapLoading] = useLoading({
-        target: wrapEl,
-        props: {
-          tip: '加载中...',
-          absolute: true,
-        },
-      });
-
-      function openLoading(absolute: boolean) {
-        compState.absolute = absolute;
-        compState.loading = true;
-        setTimeout(() => {
-          compState.loading = false;
-        }, 2000);
-      }
-
-      function openCompFullLoading() {
-        openLoading(false);
-      }
-
-      function openCompAbsolute() {
-        openLoading(true);
-      }
-
-      function openFnFullLoading() {
-        openFullLoading();
-
-        setTimeout(() => {
-          closeFullLoading();
-        }, 2000);
-      }
-
-      function openFnWrapLoading() {
-        openWrapLoading();
-
-        setTimeout(() => {
-          closeWrapLoading();
-        }, 2000);
-      }
-
-      function openDirectiveLoading() {
-        loadingRef.value = true;
-        setTimeout(() => {
-          loadingRef.value = false;
-        }, 2000);
-      }
-
-      return {
-        openCompFullLoading,
-        openFnFullLoading,
-        openFnWrapLoading,
-        openCompAbsolute,
-        wrapEl,
-        loadingRef,
-        openDirectiveLoading,
-        ...toRefs(compState),
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/modal/Modal1.vue

@@ -1,58 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" destroyOnClose @register="register" title="Modal Title" :helpMessage="['提示1', '提示2']" @visible-change="handleShow">
-    <template #insertFooter>
-      <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
-    </template>
-    <template v-if="loading">
-      <div class="empty-tips"> 加载中，稍等3秒…… </div>
-    </template>
-    <template v-if="!loading">
-      <ul>
-        <li v-for="index in lines" :key="index">加载完成{{ index }}！</li>
-      </ul>
-    </template>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, watch } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      const loading = ref(true);
-      const lines = ref(10);
-      const [register, { setModalProps, redoModalHeight }] = useModalInner();
-
-      watch(
-        () => lines.value,
-        () => {
-          redoModalHeight();
-        }
-      );
-
-      function handleShow(visible: boolean) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-          setTimeout(() => {
-            lines.value = Math.round(Math.random() * 30 + 5);
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 3000);
-        }
-      }
-
-      function setLines() {
-        lines.value = Math.round(Math.random() * 20 + 10);
-      }
-      return { register, loading, handleShow, lines, setLines };
-    },
-  });
-</script>
-<style scoped>
-  .empty-tips {
-    height: 100px;
-    line-height: 100px;
-    text-align: center;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/modal/Modal2.vue

@@ -1,23 +0,0 @@
-<template>
-  <BasicModal @register="register" title="Modal Title" :helpMessage="['提示1', '提示2']" :okButtonProps="{ disabled: true }">
-    <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
-    <a-button type="primary" @click="setModalProps"> 从内部修改title </a-button>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      const [register, { closeModal, setModalProps }] = useModalInner();
-      return {
-        register,
-        closeModal,
-        setModalProps: () => {
-          setModalProps({ title: 'Modal New Title' });
-        },
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/modal/Modal3.vue

@@ -1,15 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']" width="700px">
-    <p class="h-20" v-for="index in 20" :key="index"> 根据屏幕高度自适应 </p>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicModal } from '/@/components/Modal';
-  export default defineComponent({
-    components: { BasicModal },
-    setup() {
-      return {};
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/modal/Modal4.vue

@@ -1,81 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" @register="register" title="Modal Title" @visible-change="handleVisibleChange">
-    <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" :model="model" />
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 24,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 24,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    setup(props) {
-      const modelRef = ref({});
-      const [
-        registerForm,
-        {
-          // setFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
-      const [register] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-
-      function onDataReceive(data) {
-        console.log('Data Received', data);
-        // 方式1;
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // // 方式2
-        modelRef.value = { field2: data.data, field1: data.info };
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
-      }
-
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-
-      return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/modal/index.vue

@@ -1,112 +0,0 @@
-<template>
-  <PageWrapper title="modal组件使用示例">
-    <Alert
-      message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
-    参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
-      show-icon
-    />
-    <a-button type="primary" class="my-4" @click="openModalLoading"> 打开弹窗,加载动态数据并自动调整高度(默认可以拖动/全屏) </a-button>
-
-    <Alert message="内外同时同时显示隐藏" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗</a-button>
-    <Alert message="自适应高度" show-icon />
-    <a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗</a-button>
-
-    <Alert message="内外数据交互" show-icon />
-    <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据</a-button>
-
-    <Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
-    <a-space>
-      <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3</a-button>
-      <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4</a-button>
-    </a-space>
-
-    <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
-
-    <Modal1 @register="register1" :minHeight="100" />
-    <Modal2 @register="register2" />
-    <Modal3 @register="register3" />
-    <Modal4 @register="register4" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue';
-  import { Alert, Space } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import Modal1 from './Modal1.vue';
-  import Modal2 from './Modal2.vue';
-  import Modal3 from './Modal3.vue';
-  import Modal4 from './Modal4.vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
-    setup() {
-      const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
-      const [register1, { openModal: openModal1 }] = useModal();
-      const [register2, { openModal: openModal2 }] = useModal();
-      const [register3, { openModal: openModal3 }] = useModal();
-      const [register4, { openModal: openModal4 }] = useModal();
-      const modalVisible = ref<Boolean>(false);
-      const userData = ref<any>(null);
-
-      function send() {
-        openModal4(true, {
-          data: 'content',
-          info: 'Info',
-        });
-      }
-
-      function openModalLoading() {
-        openModal1(true);
-        // setModalProps({ loading: true });
-        // setTimeout(() => {
-        //   setModalProps({ loading: false });
-        // }, 2000);
-      }
-
-      function openTargetModal(index) {
-        switch (index) {
-          case 1:
-            currentModal.value = Modal1;
-            break;
-          case 2:
-            currentModal.value = Modal2;
-            break;
-          case 3:
-            currentModal.value = Modal3;
-            break;
-          default:
-            currentModal.value = Modal4;
-            break;
-        }
-        nextTick(() => {
-          // `useModal` not working with dynamic component
-          // passing data through `userData` prop
-          userData.value = { data: Math.random(), info: 'Info222' };
-          // open the target modal
-          modalVisible.value = true;
-        });
-      }
-
-      return {
-        register1,
-        openModal1,
-        register2,
-        openModal2,
-        register3,
-        openModal3,
-        register4,
-        openModal4,
-        modalVisible,
-        userData,
-        openTargetModal,
-        send,
-        currentModal,
-        openModalLoading,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/qrcode/index.vue

@@ -1,117 +0,0 @@
-<template>
-  <PageWrapper title="二维码组件使用示例">
-    <div class="flex flex-wrap">
-      <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" />
-      </CollapseContainer>
-
-      <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" tag="img" />
-      </CollapseContainer>
-
-      <CollapseContainer title="配置样式示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          :options="{
-            color: { dark: '#55D187' },
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="本地logo示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :logo="LogoImg" />
-      </CollapseContainer>
-
-      <CollapseContainer title="在线logo示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          logo="http://jeecg.com/images/logo.png"
-          :options="{
-            color: { dark: '#55D187' },
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="logo配置示例" class="text-center mb-6 qrcode-demo-item">
-        <QrCode
-          :value="qrCodeUrl"
-          :logo="{
-            src: 'http://jeecg.com/images/logo.png',
-            logoSize: 0.2,
-            borderSize: 0.05,
-            borderRadius: 50,
-            bgColor: 'blue',
-          }"
-        />
-      </CollapseContainer>
-
-      <CollapseContainer title="下载示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
-        <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
-        <div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div>
-      </CollapseContainer>
-
-      <CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :width="300" />
-      </CollapseContainer>
-
-      <CollapseContainer title="扩展绘制示例" class="text-center qrcode-demo-item">
-        <QrCode :value="qrCodeUrl" :width="200" :options="{ margin: 5 }" ref="qrDiyRef" :logo="LogoImg" @done="onQrcodeDone" />
-        <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
-        <div class="msg"> 要进行扩展绘制则不能将tag设为img </div>
-      </CollapseContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
-  import LogoImg from '/@/assets/images/logo.png';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  const qrCodeUrl = 'https://www.vvbin.cn';
-  export default defineComponent({
-    components: { CollapseContainer, QrCode, PageWrapper },
-    setup() {
-      const qrRef = ref<Nullable<QrCodeActionType>>(null);
-      const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
-      function download() {
-        const qrEl = unref(qrRef);
-        if (!qrEl) return;
-        qrEl.download('文件名');
-      }
-      function downloadDiy() {
-        const qrEl = unref(qrDiyRef);
-        if (!qrEl) return;
-        qrEl.download('Qrcode');
-      }
-
-      function onQrcodeDone({ ctx }: any) {
-        if (ctx instanceof CanvasRenderingContext2D) {
-          // 额外绘制
-          ctx.fillStyle = 'black';
-          ctx.font = '16px "微软雅黑"';
-          ctx.textBaseline = 'bottom';
-          ctx.textAlign = 'center';
-          ctx.fillText('你帅你先扫', 100, 195, 200);
-        }
-      }
-      return {
-        onQrcodeDone,
-        qrCodeUrl,
-        LogoImg,
-        download,
-        downloadDiy,
-        qrRef,
-        qrDiyRef,
-      };
-    },
-  });
-</script>
-<style scoped>
-  .qrcode-demo-item {
-    width: 30%;
-    margin-right: 1%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/scroll/Action.vue

@@ -1,59 +0,0 @@
-<template>
-  <PageWrapper title="滚动组件函数示例" content="基于el-scrollbar">
-    <div class="my-4">
-      <a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px位置 </a-button>
-      <a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px位置 </a-button>
-      <a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
-      <a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
-    </div>
-    <div class="scroll-wrap">
-      <ScrollContainer class="mt-4" ref="scrollRef">
-        <ul class="p-3">
-          <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">
-              {{ index }}
-            </li>
-          </template>
-        </ul>
-      </ScrollContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { ScrollContainer, PageWrapper },
-    setup() {
-      const scrollRef = ref<Nullable<ScrollActionType>>(null);
-      const getScroll = () => {
-        const scroll = unref(scrollRef);
-        if (!scroll) {
-          throw new Error('scroll is Null');
-        }
-        return scroll;
-      };
-
-      function scrollTo(top: number) {
-        getScroll().scrollTo(top);
-      }
-      function scrollBottom() {
-        getScroll().scrollBottom();
-      }
-      return {
-        scrollTo,
-        scrollRef,
-        scrollBottom,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .scroll-wrap {
-    width: 50%;
-    height: 300px;
-    background-color: @component-background;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/scroll/VirtualScroll.vue

@@ -1,64 +0,0 @@
-<template>
-  <PageWrapper class="virtual-scroll-demo">
-    <Divider>基础滚动示例</Divider>
-    <div class="virtual-scroll-demo-wrap">
-      <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
-        <template #default="{ item }">
-          <div class="virtual-scroll-demo__item">
-            {{ item.title }}
-          </div>
-        </template>
-      </VScroll>
-    </div>
-
-    <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
-    <div class="virtual-scroll-demo-wrap">
-      <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
-        <template #default="{ item }">
-          <div class="virtual-scroll-demo__item">
-            {{ item.title }}
-          </div>
-        </template>
-      </VScroll>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { VScroll } from '/@/components/VirtualScroll/index';
-
-  import { Divider } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  const data: Recordable[] = (() => {
-    const arr: Recordable[] = [];
-    for (let index = 1; index < 20000; index++) {
-      arr.push({
-        title: '列表项' + index,
-      });
-    }
-    return arr;
-  })();
-  export default defineComponent({
-    components: { VScroll: VScroll, Divider, PageWrapper },
-    setup() {
-      return { data: data };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .virtual-scroll-demo {
-    &-wrap {
-      display: flex;
-      margin: 0 30%;
-      background-color: @component-background;
-      justify-content: center;
-    }
-
-    &__item {
-      height: 40px;
-      padding: 0 20px;
-      line-height: 40px;
-      border-bottom: 1px solid @border-color-base;
-    }
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/scroll/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <PageWrapper title="滚动组件示例" content="基于el-scrollbar">
-    <div class="scroll-wrap">
-      <ScrollContainer class="mt-4">
-        <ul class="p-3">
-          <template v-for="index in 100" :key="index">
-            <li class="p-2" :style="{ border: '1px solid #eee' }">
-              {{ index }}
-            </li>
-          </template>
-        </ul>
-      </ScrollContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { ScrollContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { ScrollContainer, PageWrapper },
-  });
-</script>
-<style lang="less" scoped>
-  .scroll-wrap {
-    width: 50%;
-    height: 300px;
-    background-color: @component-background;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/strength-meter/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <PageWrapper title="密码强度校验组件">
-    <div class="flex justify-center">
-      <div class="demo-wrap p-10">
-        <StrengthMeter placeholder="默认" />
-        <StrengthMeter placeholder="禁用" disabled />
-        <br />
-        <StrengthMeter placeholder="隐藏input" :show-input="false" value="!@#qwe12345" />
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { StrengthMeter } from '/@/components/StrengthMeter';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: {
-      StrengthMeter,
-      PageWrapper,
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .demo-wrap {
-    width: 50%;
-    background-color: @component-background;
-    border-radius: 10px;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/time/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <PageWrapper title="时间组件示例">
-    <CollapseContainer title="基础示例">
-      <Time :value="time1" />
-      <br />
-      <Time :value="time2" />
-    </CollapseContainer>
-
-    <CollapseContainer title="定时更新" class="my-4">
-      <Time :value="now" :step="1" />
-      <br />
-      <Time :value="now" :step="5" />
-    </CollapseContainer>
-
-    <CollapseContainer title="定时更新">
-      <Time :value="now" mode="date" />
-      <br />
-      <Time :value="now" mode="datetime" />
-      <br />
-      <Time :value="now" />
-    </CollapseContainer>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Time } from '/@/components/Time';
-  import { CollapseContainer } from '/@/components/Container/index';
-
-  export default defineComponent({
-    components: { PageWrapper, Time, CollapseContainer },
-    setup() {
-      const now = new Date().getTime();
-      const state = reactive({
-        time1: now - 60 * 3 * 1000,
-        time2: now - 86400 * 3 * 1000,
-      });
-      return {
-        ...toRefs(state),
-        now,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/transition/index.vue

@@ -1,91 +0,0 @@
-<template>
-  <PageWrapper title="动画组件示例">
-    <div class="flex">
-      <Select :options="options" v-model:value="value" placeholder="选择动画" :style="{ width: '150px' }" />
-      <a-button type="primary" class="ml-4" @click="start"> start </a-button>
-    </div>
-    <component :is="`${value}Transition`">
-      <div class="box" v-show="show"></div>
-    </component>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  import {
-    FadeTransition,
-    ScaleTransition,
-    SlideYTransition,
-    ScrollYTransition,
-    SlideYReverseTransition,
-    ScrollYReverseTransition,
-    SlideXTransition,
-    ScrollXTransition,
-    SlideXReverseTransition,
-    ScrollXReverseTransition,
-    ScaleRotateTransition,
-    ExpandXTransition,
-    ExpandTransition,
-  } from '/@/components/Transition';
-
-  const transitionList = [
-    'Fade',
-    'Scale',
-    'SlideY',
-    'ScrollY',
-    'SlideYReverse',
-    'ScrollYReverse',
-    'SlideX',
-    'ScrollX',
-    'SlideXReverse',
-    'ScrollXReverse',
-    'ScaleRotate',
-    'ExpandX',
-    'Expand',
-  ];
-  const options = transitionList.map((item) => ({
-    label: item,
-    value: item,
-    key: item,
-  }));
-
-  export default defineComponent({
-    components: {
-      Select,
-      PageWrapper,
-      FadeTransition,
-      ScaleTransition,
-      SlideYTransition,
-      ScrollYTransition,
-      SlideYReverseTransition,
-      ScrollYReverseTransition,
-      SlideXTransition,
-      ScrollXTransition,
-      SlideXReverseTransition,
-      ScrollXReverseTransition,
-      ScaleRotateTransition,
-      ExpandXTransition,
-      ExpandTransition,
-    },
-    setup() {
-      const value = ref('Fade');
-      const show = ref(true);
-      function start() {
-        show.value = false;
-        setTimeout(() => {
-          show.value = true;
-        }, 300);
-      }
-      return { options, value, start, show };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .box {
-    width: 150px;
-    height: 150px;
-    margin-top: 20px;
-    background-color: rgb(126, 170, 236);
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/upload/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <PageWrapper title="上传组件示例">
-    <a-alert message="基础示例" />
-    <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" class="my-5" :accept="['image/*']" />
-
-    <a-alert message="嵌入表单,加入表单校验" />
-
-    <BasicForm @register="register" class="my-5" />
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicUpload } from '/@/components/Upload';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
-  import { uploadApi } from '/@/api/sys/upload';
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Upload',
-      label: '字段1',
-      colProps: {
-        span: 8,
-      },
-      rules: [{ required: true, message: '请选择上传文件' }],
-      componentProps: {
-        api: uploadApi,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert },
-    setup() {
-      const { createMessage } = useMessage();
-      const [register] = useForm({
-        labelWidth: 120,
-        schemas,
-        actionColOptions: {
-          span: 16,
-        },
-      });
-      return {
-        handleChange: (list: string[]) => {
-          createMessage.info(`已上传文件${JSON.stringify(list)}`);
-        },
-        uploadApi,
-        register,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/comp/verify/Rotate.vue

@@ -1,33 +0,0 @@
-<template>
-  <PageWrapper title="旋转校验示例">
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <RotateDragVerify :src="img" ref="el" @success="handleSuccess" />
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { RotateDragVerify } from '/@/components/Verify/index';
-
-  import img from '/@/assets/images/header.jpg';
-
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { RotateDragVerify, PageWrapper },
-    setup() {
-      const handleSuccess = () => {
-        console.log('success!');
-      };
-      return {
-        handleSuccess,
-        img,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .bg-gray-700 {
-    background-color: #4a5568;
-  }
-</style>

jeecgboot-vue3/src/views/demo/comp/verify/index.vue

@@ -1,97 +0,0 @@
-<template>
-  <PageWrapper title="拖动校验示例">
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el1" @success="handleSuccess" />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el2" @success="handleSuccess" circle />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify
-        ref="el3"
-        @success="handleSuccess"
-        text="拖动以进行校验"
-        successText="校验成功"
-        :barStyle="{
-          backgroundColor: '#018ffb',
-        }"
-      />
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el4" @success="handleSuccess">
-        <template #actionIcon="isPassing">
-          <BugOutlined v-if="isPassing" />
-          <RightOutlined v-else />
-        </template>
-      </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)"> 还原 </a-button>
-    </div>
-
-    <div class="flex justify-center p-4 items-center bg-gray-700">
-      <BasicDragVerify ref="el5" @success="handleSuccess">
-        <template #text="isPassing">
-          <div v-if="isPassing">
-            <BugOutlined />
-            成功
-          </div>
-          <div v-else>
-            拖动
-            <RightOutlined />
-          </div>
-        </template>
-      </BasicDragVerify>
-      <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)"> 还原 </a-button>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicDragVerify, DragVerifyActionType, PassingData } from '/@/components/Verify/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper },
-    setup() {
-      const { createMessage } = useMessage();
-      const el1 = ref<Nullable<DragVerifyActionType>>(null);
-      const el2 = ref<Nullable<DragVerifyActionType>>(null);
-      const el3 = ref<Nullable<DragVerifyActionType>>(null);
-      const el4 = ref<Nullable<DragVerifyActionType>>(null);
-      const el5 = ref<Nullable<DragVerifyActionType>>(null);
-
-      function handleSuccess(data: PassingData) {
-        const { time } = data;
-        createMessage.success(`校验成功,耗时${time}秒`);
-      }
-
-      function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
-        if (!elRef) {
-          return;
-        }
-        elRef.resume();
-      }
-      return {
-        handleSuccess,
-        el1,
-        el2,
-        el3,
-        el4,
-        el5,
-        handleBtnClick,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .bg-gray-700 {
-    background-color: #4a5568;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFiledsLayotForm.vue

@@ -1,81 +0,0 @@
-<!-- 标题与字段布局 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin: 20px auto"/>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '姓名',
-      field: 'name',
-      component: 'Input',
-    },
-    {
-      label: '年龄',
-      field: 'password',
-      component: 'InputNumber',
-    },
-    {
-      label: '生日',
-      field: 'birthday',
-      component: 'DatePicker',
-    },
-    {
-      label: '头像',
-      field: 'avatar',
-      component: 'JImageUpload',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showActionButtonGroup: false,
-    actionColOptions: { span: 12 },
-    //控制标题宽度占比
-    labelCol: {
-      xs: 2,
-      sm: 2,
-      md: 2,
-      lg: 9,
-      xl: 3,
-      xxl: 2,
-    },
-    //控制组件宽度占比
-    wrapperCol: {
-      xs: 15,
-      sm: 14,
-      md: 16,
-      lg: 17,
-      xl: 19,
-      xxl: 20,
-    },
-  });
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFixedWidthForm.vue

@@ -1,70 +0,0 @@
-<!-- 固定label标题的宽度 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '姓名',
-      field: 'name',
-      component: 'Input',
-    },
-    {
-      label: '年龄',
-      field: 'password',
-      component: 'InputNumber',
-    },
-    {
-      label: '生日',
-      field: 'birthday',
-      component: 'DatePicker',
-    },
-    {
-      label: '头像',
-      field: 'avatar',
-      component: 'JImageUpload',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-    //使用labelWidth控制标题宽度
-    labelWidth: '150px',
-    //使用labelCol的样式属性来控制标题宽度
-    labelCol: { style: { width: '150px' } },
-    //标题对齐方式（left:左对齐，right：右对齐），默认右对齐
-    labelAlign: 'right',
-  });
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormAdd.vue

@@ -1,143 +0,0 @@
-<!-- 动态增减表单 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px;" @submit="handleSubmit">
-    <!--  添加input的插槽  -->
-    <template #addForm="{ field }">
-      <a-button v-if="Number(field) === 0" @click="addField" style="width: 50px">+</a-button>
-      <a-button v-if="Number(field) > 0" @click="delField(field)" style="width: 50px">-</a-button>
-    </template>
-  </BasicForm>
-  <!--  <div style="margin: 20px auto; text-align: center">
-    <a-button @click="addField">添加表单项</a-button>
-  </div>-->
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { CollapseContainer } from '/@/components/Container';
-  import { ref } from 'vue';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'name1',
-      label: '姓名1',
-      component: 'Input',
-      // ifShow:false,
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'age1',
-      label: '年龄1',
-      component: 'InputNumber',
-      // ifShow:false,
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: '0',
-      component: 'Input',
-      // ifShow:false,
-      label: ' ',
-      colProps: {
-        span: 8,
-      },
-      slot: 'addForm',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * appendSchemaByField:增加表单项（字段）
-   *
-   * removeSchemaByFiled:减少表单项（字段）
-   */
-  const [registerForm, { appendSchemaByField, removeSchemaByFiled }] = useForm({
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    // showSubmitButton:false
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-
-  //组件个数
-  let n = ref<number>(2);
-
-  /**
-   * 添加字段
-   * appendSchemaByField类型: ( schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined ) => Promise<void>
-   * 说明: 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true 时插入到第一个位置
-   */
-  async function addField() {
-    //添加表单字段，里面为schemas对应的属性，可自行配置
-    await appendSchemaByField(
-      {
-        field: `name${n.value}`,
-        component: 'Input',
-        label: '字段' + n.value,
-        colProps: {
-          span: 8,
-        },
-      },
-      ''
-    );
-    await appendSchemaByField(
-      {
-        field: `sex${n.value}`,
-        component: 'InputNumber',
-        label: '字段' + n.value,
-        colProps: {
-          span: 8,
-        },
-      },
-      ''
-    );
-
-    await appendSchemaByField(
-      {
-        field: `${n.value}`,
-        component: 'Input',
-        label: ' ',
-        colProps: {
-          span: 8,
-        },
-        slot: 'addForm',
-      },
-      ''
-    );
-    n.value++;
-  }
-
-  /**
-   * 删除字段
-   * 类型: (field: string | string[]) => Promise<void>
-   * 说明: 根据 field 删除 Schema
-   * @param field 当前字段名称
-   */
-  function delField(field) {
-    //移除指定字段
-    removeSchemaByFiled([`name${field}`, `sex${field}`, `${field}`]);
-    n.value--;
-  }
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped>
-  /** 数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormBtn.vue

@@ -1,66 +0,0 @@
-<!-- 操作按钮 -->
-<template>
-  <div style="margin: 20px auto; text-align: center">
-    <!-- 通过setProps 可以设置 userForm 中的属性 -->
-    <!--  showActionButtonGroup 显示或者隐藏查询、重置按钮  -->
-    <a-button @click="setProps({ showActionButtonGroup: false })" class="mr-2"> 隐藏操作按钮 </a-button>
-    <a-button @click="setProps({ showActionButtonGroup: true })" class="mr-2"> 显示操作按钮 </a-button>
-    <!--  showActionButtonGroup 显示或者隐藏重置按钮  -->
-    <a-button @click="setProps({ showResetButton: false })" class="mr-2"> 隐藏重置按钮 </a-button>
-    <a-button @click="setProps({ showResetButton: true })" class="mr-2"> 显示重置按钮 </a-button>
-    <!--  showActionButtonGroup 显示或者隐藏查询按钮  -->
-    <a-button @click="setProps({ showSubmitButton: false })" class="mr-2"> 隐藏查询按钮 </a-button>
-    <a-button @click="setProps({ showSubmitButton: true })" class="mr-2"> 显示查询按钮 </a-button>
-  </div>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { CollapseContainer } from '/@/components/Container';
-
-  /**
-   * BasicForm绑定注册;
-   * setProps方法可以动态设置useForm中的属性
-   */
-  const [registerForm, { setProps }] = useForm({
-    //自定义查询按钮的文本和图标
-    submitButtonOptions: { text: '查询', preIcon: '' },
-    //自定义重置按钮的文本和图标
-    resetButtonOptions: { text: '重置', preIcon: '' },
-    //操作按钮的位置
-    actionColOptions: { span: 17 },
-    //提交按钮的自定义事件
-    submitFunc: customSubmitFunc,
-    //重置按钮的自定义时间
-    resetFunc: customSubmitFunc,
-    //显示操作按钮
-    showActionButtonGroup: true,
-  });
-
-  /**
-   * 查询按钮点击事件
-   */
-  async function customSubmitFunc() {
-    console.log('查询按钮点击事件，此处处理查询按钮的逻辑');
-  }
-
-  /**
-   * 重置按钮点击事件
-   */
-  async function customResetFunc() {
-    console.log('重置按钮点击事件，此处处理重置按钮的逻辑');
-  }
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormCleanRule.vue

@@ -1,95 +0,0 @@
-<!-- 操作禁用表单 -->
-<template>
-  <div style="margin: 20px auto; text-align: center">
-    <!-- all 触发或清空所有验证，visitor 只触发或者清空来访人员验证 -->
-    <a-button @click="triggerFormRule('all')" class="mr-2"> 触发表单验证 </a-button>
-    <a-button @click="cancelFormRule('all')" class="mr-2"> 清空表单验证 </a-button>
-    <a-button @click="triggerFormRule('visitor')" class="mr-2"> 只验证来访人员 </a-button>
-    <a-button @click="cancelFormRule('visitor')" class="mr-2"> 只清空来访人员验证 </a-button>
-  </div>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px;" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-      required: true,
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-      required: true,
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-      required: true,
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * clearValidate 清除所有验证，支持取消验证其中几个字段 如 clearValidate(['visitor',...])
-   * validate 验证所有,支持验证其中几个字段，validate(['visitor',...])
-   * validateFields 只支持验证其中几个字段，如validateFields(['visitor',...])
-   */
-  const [registerForm, { clearValidate, validateFields, validate }] = useForm({
-    schemas: formSchemas,
-    labelWidth: '150px',
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-    //默认聚焦第一个，只支持input
-    autoFocusFirstItem: true,
-  });
-
-  /**
-   * 触发表单验证
-   * @param type all 所有验证 visitor 只验证来访人员
-   */
-  async function triggerFormRule(type) {
-    if (type == 'all') {
-      //触发所有验证
-      await validate();
-    } else {
-      //触发来访人员验证
-      //visitor 来访人员的对应formSchemas field字段
-      await validateFields(['visitor']);
-    }
-  }
-
-  /**
-   * 触发表单验证
-   * @param type all 所有验证 visitor 只验证来访人员
-   */
-  async function cancelFormRule(type) {
-    if (type == 'all') {
-      //取消全部验证
-      await clearValidate();
-    } else {
-      //只取消来访人员的验证
-      //visitor 来访人员的对应formSchemas field字段
-      await clearValidate(['visitor']);
-    }
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormCompact.vue

@@ -1,58 +0,0 @@
-<!-- 操作禁用表单 -->
-<template>
-  <div style="margin: 20px auto; text-align: center">
-    <!-- 通过setProps 可以设置 userForm 中的属性 -->
-    <!-- 表单大小，默认为 default   -->
-    <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改大小为最大 </a-button>
-    <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原大小 </a-button>
-    <a-button @click="setProps({ size: 'small' })" class="mr-2"> 更改大小为最小 </a-button>
-    <!--  disabled表单禁用  -->
-    <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
-    <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
-    <!--  compact 是否为紧凑表单  -->
-    <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
-    <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
-  </div>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px;" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { CollapseContainer } from '/@/components/Container';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * setProps方法可以动态设置useForm中的属性
-   */
-  const [registerForm, { setProps }] = useForm({
-    schemas: formSchemas,
-    labelWidth: '150px',
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-    //默认聚焦第一个，只支持input
-    autoFocusFirstItem: true,
-  });
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormComponent.vue

@@ -1,34 +0,0 @@
-<!-- 操作表单值 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px;" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { schemas } from './example.data';
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
-    schemas: schemas,
-    labelWidth: '150px',
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-    //默认聚焦第一个，只支持input
-    autoFocusFirstItem: true,
-  });
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormConAttribute.vue

@@ -1,63 +0,0 @@
-<!-- 控件属性 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '员工姓名',
-      field: 'name',
-      component: 'Input',
-      componentProps: {
-        disabled: true,
-      },
-      defaultValue: '张三',
-    },
-    {
-      label: '性别',
-      field: 'sex',
-      component: 'Select',
-      //填写组件的属性
-      componentProps: {
-        options: [
-          { label: '男', value: 1 },
-          { label: '女', value: 2 },
-          { label: '未知', value: 3 },
-        ],
-      },
-      //默认值
-      defaultValue: 3,
-    },
-    {
-      label: '年龄',
-      field: 'age',
-      component: 'Input',
-    },
-    {
-      label: '入职时间',
-      subLabel: '( 选填 )',
-      field: 'entryTime',
-      component: 'TimePicker',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    labelWidth: '150px',
-    showResetButton: false,
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormCustom.vue

@@ -1,32 +0,0 @@
-<!-- 自定义组件 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'custom',
-      label: '自定义组件',
-      //引入自定义组件
-      component: 'JInput',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    labelWidth: '150px',
-    showActionButtonGroup: false,
-  });
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormCustomComponent.vue

@@ -1,32 +0,0 @@
-<!-- 操作表单值 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { schemas } from './exampleCustom.data';
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
-    schemas: schemas,
-    labelWidth: '150px',
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-  });
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormCustomSlots.vue

@@ -1,64 +0,0 @@
-<!-- 插槽 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" @submit="handleSubmit">
-      <!--  #name对应的是formSchemas对应slot(name)插槽    -->
-      <template #name="{ model, field }">
-        <JInput v-model:value="model[field]" />
-      </template>
-  </BasicForm>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  //引入CustomDemo自定义组件
-  import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'name',
-      label: '姓名',
-      component: 'Input',
-      slot:'name'
-    },
-    {
-      field: 'phone',
-      label: '联系方式',
-      component: 'Input',
-    },
-    {
-      field: 'feedback',
-      label: '问题反馈',
-      component: 'InputTextArea',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-
-  /**
-   * 提交信息
-   */
-  function handleSubmit(values) {
-    console.log("values::",values);
-  }
-</script>
-
-<style scoped>
-  .font-color {
-    font-size: 13px;
-    color: #a1a1a1;
-    margin-bottom: 5px;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormDynamicsRules.vue

@@ -1,80 +0,0 @@
-<!-- 动态表单验证 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" @submit="handleSubmit" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { duplicateCheck } from '/@/views/system/user/user.api';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-      //自动触发检验，布尔类型
-      required: true,
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-      //支持获取当前值判断触发 values代表当前表单的值
-      required: ({ values }) => {
-        return !values.accessed;
-      },
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-      //动态自定义正则，values: 当前表单的所有值
-      dynamicRules: ({ values }) => {
-        //需要return
-        return [
-          {
-            //默认开启表单检验
-            required: true,
-            // value 当前手机号输入的值
-            validator: (_, value) => {
-              //需要return 一个Promise对象
-              return new Promise((resolve, reject) => {
-                if (!value) {
-                  reject('请输入手机号！');
-                }
-                //验证手机号是否正确
-                let reg = /^1[3456789]\d{9}$/;
-                if (!reg.test(value)) {
-                  reject('请输入正确手机号！');
-                }
-                resolve();
-              });
-            },
-          },
-        ];
-      },
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-
-  /**
-   * 提交事件
-   */
-  function handleSubmit(values: any) {}
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormFieldShow.vue

@@ -1,70 +0,0 @@
-<!-- 字段显示与隐藏 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'id',
-      label: '编号',
-      component: 'Input',
-      //隐藏id，css 控制，不会删除 dom（支持布尔类型 true和false。支持动态值判断，详情请见ifShow）
-      show: false,
-    },
-    {
-      field: 'evaluate',
-      label: '对公司整体评价',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          { label: '满意', value: '0' },
-          { label: '不满意', value: '1' },
-        ],
-      },
-      defaultValue: '0',
-    },
-    {
-      field: 'describe',
-      label: '不满意原因说明',
-      component: 'InputTextArea',
-      //ifShow和show属性一致，使用其中一个即可，values代表当前表单的值，js 控制，会删除 dom
-      ifShow: ({ values }) => {
-        return values.evaluate == '1';
-      },
-    },
-    {
-      field: 'satisfiedLevel',
-      label: '满意度',
-      component: 'Slider',
-      componentProps: {
-        tipFormatter: (value) => {
-          return value + '%';
-        },
-      },
-      //动态禁用，values代表当前表单的值，返回 true或false
-      dynamicDisabled: ({ values }) => {
-        return values.evaluate == '1';
-      },
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormFieldTip.vue

@@ -1,55 +0,0 @@
-<!-- 字段标题提示及前缀 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'month',
-      label: '当前月份',
-      component: 'Input',
-      suffix: '月',
-    },
-    {
-      field: 'lateNumber',
-      label: '迟到次数',
-      component: 'InputNumber',
-      //帮助信息：可以直接返回String(helpMessage:"迟到次数")，也可以获取表单值，动态填写
-      helpMessage: ({ values }) => {
-        return '当前迟到次数' + values.lateNumber + ', 扣款' + values.lateNumber * 50 + '元';
-      },
-      defaultValue: 0,
-    },
-    {
-      field: 'lateReason',
-      label: '迟到原因',
-      component: 'Input',
-      helpMessage: '什么原因耽误上班迟到',
-      //自定义提示属性，需要结合helpMessage一起使用
-      helpComponentProps: {
-        maxWidth: '200px',
-        color: '#66CCFF',
-      },
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormFooter.vue

@@ -1,105 +0,0 @@
-<!-- 自定义页脚 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px">
-    <template #formHeader>
-      <div style="margin: 0 auto 20px">
-        <span>我是自定义按钮</span>
-      </div>
-    </template>
-    <template #formFooter>
-      <div style="margin: 0 auto">
-        <a-button type="primary" @click="save" class="mr-2"> 保存 </a-button>
-        <a-button type="primary" @click="saveDraft" class="mr-2"> 保存草稿 </a-button>
-        <a-button type="error" @click="reset" class="mr-2"> 重置 </a-button>
-      </div>
-    </template>
-  </BasicForm>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '员工姓名',
-      field: 'name',
-      component: 'Input',
-    },
-    {
-      label: '性别',
-      field: 'sex',
-      component: 'Select',
-      //填写组件的属性
-      componentProps: {
-        options: [
-          { label: '男', value: 1 },
-          { label: '女', value: 2 },
-          { label: '未知', value: 3 },
-        ],
-      },
-      //默认值
-      defaultValue: 3,
-    },
-    {
-      label: '年龄',
-      field: 'age',
-      component: 'Input',
-    },
-    {
-      label: '入职时间',
-      subLabel: '( 选填 )',
-      field: 'entryTime',
-      component: 'TimePicker',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm, { validate, resetFields }] = useForm({
-    schemas: formSchemas,
-    labelWidth: '150px',
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-  });
-
-  /**
-   * 保存
-   */
-  async function save() {
-    //使用useForm方法获取表单值
-    let values = await validate();
-    console.log(values);
-  }
-
-  /**
-   * 保存草稿
-   */
-  async function saveDraft() {
-    //使用useForm方法validate获取表单值
-    let values = await validate();
-    console.log(values);
-  }
-
-  /**
-   * 重置
-   */
-  async function reset() {
-    //使用useForm方法resetFields清空值
-    await resetFields();
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormLayout.vue

@@ -1,63 +0,0 @@
-<!-- 表单布局 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '会议名称',
-      field: 'name',
-      component: 'Input',
-    },
-    {
-      label: '参会地点',
-      field: 'meetingLocation',
-      component: 'Input',
-    },
-    {
-      label: '参与人数',
-      field: 'numberOfPart',
-      component: 'InputNumber',
-    },
-    {
-      label: '会议纪要',
-      field: 'meetingMinutes',
-      component: 'JUpload',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //表单布局属性，支持（vertical,inline），默认为inline
-    layout: 'inline',
-    //注册表单列
-    schemas: formSchemas,
-    //不显示查询和重置按钮
-    showActionButtonGroup: false,
-    //默认row行配置,当 layout 为 inline 生效
-    rowProps: { gutter: 24, justify: 'center', align: 'middle' },
-    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
-    baseColProps: { span: 12 },
-    //row行的样式
-    baseRowStyle: { width: '100%' },
-  });
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormModal.vue

@@ -1,84 +0,0 @@
-<!-- 弹出层表单 -->
-<template>
-  <div style="margin: 20px auto">
-    <a-button type="primary" @click="openPopup" class="mr-2"> 打开弹窗 </a-button>
-  </div>
-  <!-- 自定义弹窗组件 -->
-  <BasicModal @register="registerModal" title="弹出层表单">
-    <!-- 自定义表单 -->
-    <BasicForm @register="registerForm" />
-  </BasicModal>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import { BasicModal } from '/@/components/Modal';
-  import { useModal } from '/@/components/Modal';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      label: '员工姓名',
-      field: 'name',
-      component: 'Input',
-    },
-    {
-      label: '性别',
-      field: 'sex',
-      component: 'Select',
-      //填写组件的属性
-      componentProps: {
-        options: [
-          { label: '男', value: 1 },
-          { label: '女', value: 2 },
-          { label: '未知', value: 3 },
-        ],
-      },
-      //默认值
-      defaultValue: 3,
-    },
-    {
-      label: '年龄',
-      field: 'age',
-      component: 'Input',
-    },
-    {
-      label: '入职时间',
-      subLabel: '( 选填 )',
-      field: 'entryTime',
-      component: 'TimePicker',
-    },
-  ];
-
-  //BasicModal绑定注册;
-  const [registerModal, { openModal }] = useModal();
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm, { validate, resetFields }] = useForm({
-    schemas: formSchemas,
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-  });
-
-  /**
-   * 打开弹窗
-   */
-  async function openPopup() {
-    //详见 BasicModal模块
-    openModal(true, {});
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormRander.vue

@@ -1,90 +0,0 @@
-<!-- 自定义渲染 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px">
-    <!--  #phone对应的是formSchemas对应slot(phone)插槽    -->
-    <template #phone="{ model, field }">
-      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
-      <a-input v-model:value="model[field]" placeholder="请输入手机号" />
-      <span class="font-color">请输入您的手机号，方便我们联系您</span>
-    </template>
-    <template #feedback="{ model, field }">
-      <JEditor v-model:value="model[field]" placeholder="请输入问题反馈" />
-      <span class="font-color">请您图文并茂，方便我们了解问题并及时反馈</span>
-    </template>
-  </BasicForm>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
-  import { h } from 'vue';
-  import { Input } from 'ant-design-vue';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'productName',
-      label: '商品名称',
-      component: 'Input',
-    },
-    {
-      field: 'price',
-      label: '价格',
-      component: 'InputNumber',
-    },
-    {
-      field: 'buyNums',
-      label: '购买个数',
-      component: 'InputNumber',
-      //model 单签表单对象，field 当前字段
-      render: ({ model, field }) => {
-        //渲染自定义组件，以Input为例
-        return h(Input, {
-          placeholder: '请输入购买个数',
-          value: model[field],
-          style: { width: '100%' },
-          type: 'number',
-          onChange: (e: ChangeEvent) => {
-            model[field] = e.target.value;
-          },
-        });
-      },
-    },
-    {
-      field: 'describe',
-      label: '描述',
-      component: 'Input',
-      componentProps: {
-        disabled: true,
-      },
-      //渲染 values当前表单所有值
-      render: ({ values }) => {
-        let productName = values.productName?values.productName:'';
-        let price = values.price ? values.price : 0;
-        let buyNums = values.buyNums ? values.buyNums : 0;
-        return '购买商品名称：' + productName + ', 总价格: ' + price * buyNums + '元';
-      },
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-</script>
-
-<style scoped>
-  /** 数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormRules.vue

@@ -1,58 +0,0 @@
-<!-- 表单验证 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" @submit="handleSubmit" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-      //自动触发检验，布尔类型
-      required: true,
-      //检验的时候不加上标题
-      rulesMessageJoinLabel: false,
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-      //支持获取当前值判断触发 values代表当前表单的值
-      required: ({ values }) => {
-        return !values.accessed;
-      },
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-      //支持正则表达式pattern 和 自定义提示信息 message
-      rules: [{ required: false, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }],
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-
-  /**
-   * 提交事件
-   */
-  function handleSubmit(values: any) {}
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormSchemas.vue

@@ -1,99 +0,0 @@
-<!-- 操作表单schemas配置 -->
-<template>
-  <div style="margin: 20px auto; text-align: center">
-    <a-button @click="updateFormSchemas" class="mr-2"> 更新字段属性 </a-button>
-    <a-button @click="resetFormSchemas" class="mr-2"> 重置字段属性 </a-button>
-  </div>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-      ifShow: false,
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-      required: true,
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * updateSchema 更新字段属性，支持schemas里面所有的配置
-   * updateSchema([{ field: 'visitor', componentProps: { disabled: false },}, ... ]);
-   * resetSchema 重置字段属性，支持schemas里面所有的配置
-   * resetSchema([{ field: 'visitor',label: '来访人员',component: 'Input',},... ]);
-   */
-  const [registerForm, { updateSchema, resetSchema }] = useForm({
-    schemas: formSchemas,
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-    labelWidth: '150px',
-    //默认聚焦第一个，只支持input
-    autoFocusFirstItem: true,
-  });
-
-  /**
-   * 清除表单配置
-   */
-  async function resetFormSchemas() {
-    await resetSchema([
-      {
-        //字段必填
-        field: 'visitor',
-        label: '来访人员',
-        component: 'Input',
-      },
-    ]);
-  }
-
-  /**
-   * 更新表单配置
-   */
-  async function updateFormSchemas() {
-    //支持更新schemas里面所有的配置
-    await updateSchema([
-      {
-        //字段必填
-        field: 'visitor',
-        componentProps: {
-          disabled: false,
-        },
-      },
-      {
-        field: 'accessed',
-        ifShow: true,
-      },
-    ]);
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormSearch.vue

@@ -1,116 +0,0 @@
-<!-- 查询区域 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'name',
-      label: '姓名',
-      component: 'Input',
-    },
-    {
-      field: 'hobby',
-      label: '爱好',
-      component: 'Input',
-    },
-    {
-      field: 'birthday',
-      label: '生日',
-      component: 'DatePicker',
-    },
-    {
-      field: 'joinTime',
-      label: '入职时间',
-      component: 'RangePicker',
-      componentProps: {
-        valueType: 'Date',
-      },
-    },
-    {
-      field: 'workYears',
-      label: '工作年份',
-      component: 'JRangeNumber',
-    },
-    {
-      field: 'sex',
-      label: '性别',
-      component: 'Select',
-      componentProps: {
-        options: [
-          {
-            label: '男',
-            value: '1',
-          },
-          {
-            label: '女',
-            value: '2',
-          },
-        ],
-      },
-    },
-    {
-      field: 'marital',
-      label: '婚姻状况',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          {
-            label: '未婚',
-            value: '1',
-          },
-          {
-            label: '已婚',
-            value: '2',
-          },
-        ],
-      },
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //将表单内时间区域的值映射成 2个字段, 'YYYY-MM-DD'日期格式化
-    fieldMapToTime: [['joinTime', ['joinTime_begin', 'joinTime_end'], 'YYYY-MM-DD']],
-    //注册表单列
-    schemas: formSchemas,
-    //是否显示展开收起按钮，默认false
-    showAdvancedButton: true,
-    //超过指定行数折叠，默认3行
-    autoAdvancedCol: 3,
-    //折叠时默认显示行数，默认1行
-    alwaysShowLines: 2,
-
-    //将表单内数值类型区域的值映射成 2个字段
-    fieldMapToNumber: [['workYears', ['workYears_begin', 'workYears_end']]],
-    //每列占比，默认一行为24
-    baseColProps: { span: 12 },
-  });
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormSlots.vue

@@ -1,63 +0,0 @@
-<!-- 插槽 -->
-<template>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px">
-    <!--  #phone对应的是formSchemas对应slot(phone)插槽    -->
-    <template #phone="{ model, field }">
-      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
-      <a-input v-model:value="model[field]" placeholder="请输入手机号" />
-      <span class="font-color">请输入您的手机号，方便我们联系您</span>
-    </template>
-    <template #feedback="{ model, field }">
-      <JEditor v-model:value="model[field]" placeholder="请输入问题反馈" />
-      <span class="font-color">请您图文并茂，方便我们了解问题并及时反馈</span>
-    </template>
-  </BasicForm>
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-  import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'name',
-      label: '姓名',
-      component: 'Input',
-    },
-    {
-      field: 'phone',
-      label: '联系方式',
-      component: 'Input',
-      slot: 'phone',
-    },
-    {
-      field: 'feedback',
-      label: '问题反馈',
-      component: 'InputTextArea',
-      slot: 'feedback',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    showResetButton: false,
-    labelWidth: '150px',
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    actionColOptions: { span: 17 },
-  });
-</script>
-
-<style scoped>
-  .font-color {
-    font-size: 13px;
-    color: #a1a1a1;
-    margin-bottom: 5px;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFormValue.vue

@@ -1,94 +0,0 @@
-<!-- 操作表单值 -->
-<template>
-  <div style="margin: 20px auto; text-align: center">
-    <a-button @click="getFormValue" class="mr-2"> 获取表单值 </a-button>
-    <a-button @click="clearFormValue" class="mr-2"> 清空表单值 </a-button>
-    <a-button @click="updateFormValue" class="mr-2"> 更新表单值 </a-button>
-  </div>
-  <!-- 自定义表单 -->
-  <BasicForm @register="registerForm" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      field: 'visitor',
-      label: '来访人员',
-      component: 'Input',
-      required: true,
-    },
-    {
-      field: 'accessed',
-      label: '来访日期',
-      component: 'DatePicker',
-      required: true,
-    },
-    {
-      field: 'phone',
-      label: '来访人手机号',
-      component: 'Input',
-      required: true,
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * getFieldsValue 获取所有表单值
-   * validate 验证通过之后的表单值,支持验证其中几个字段，validate(['visitor',...])
-   * setFieldsValue 更新表单值，如 setFieldsValue({'visitor':'李四',...})
-   * resetFields 清除所有表单值
-   */
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
-    schemas: formSchemas,
-    //隐藏操作按钮
-    showActionButtonGroup: false,
-    labelWidth: '150px',
-    //默认聚焦第一个，只支持input
-    autoFocusFirstItem: true,
-  });
-
-  /**
-   * 获取表单值
-   */
-  async function getFormValue() {
-    //获取所有值
-    let fieldsValue = await getFieldsValue();
-    console.log('fieldsValue:::', fieldsValue);
-    //表单验证通过后获取所有字段值
-    fieldsValue = await validate();
-    console.log('fieldsValue:::', fieldsValue);
-    //表单验`visitor来访人员`通过后获取的值
-    fieldsValue = await validate(['visitor']);
-    console.log('fieldsValue:::', fieldsValue);
-  }
-
-  /**
-   * 清空表单值
-   */
-  async function clearFormValue() {
-    await resetFields();
-  }
-
-  /**
-   * 更新表单值
-   */
-  async function updateFormValue() {
-    console.log('我进来了');
-    await setFieldsValue({ visitor: '李四' });
-  }
-</script>
-
-<style scoped>
-  /** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-picker) {
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/demo/document/form/BasicFunctionForm.vue

@@ -1,63 +0,0 @@
-<!-- 基本用法 -->
-<template>
-  <!-- 自定表单 -->
-  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 20px" />
-</template>
-
-<script lang="ts" setup>
-  //引入依赖
-  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
-
-  //自定义表单字段
-  const formSchemas: FormSchema[] = [
-    {
-      //标题名称
-      label: '用户名(后面根据labelLength定义的长度隐藏)',
-      //字段
-      field: 'username',
-      //组件
-      component: 'Input',
-      //标题宽度,支持数字和字符串
-      labelWidth: 150,
-      //标题长度，超过位数隐藏
-      labelLength: 3,
-    },
-    {
-      label: '密码',
-      field: 'password',
-      //子标题名称（在主标题后面）
-      subLabel: '(数字和字母组成)',
-      component: 'InputPassword',
-      labelWidth: '150px',
-    },
-  ];
-
-  /**
-   * BasicForm绑定注册;
-   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
-   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
-   * 平台通过此封装，简化了代码，支持自定义扩展;
-   */
-  const [registerForm] = useForm({
-    //注册表单列
-    schemas: formSchemas,
-    //回车提交
-    autoSubmitOnEnter: true,
-    //不显示重置按钮
-    showResetButton: false,
-    //自定义提交按钮文本和图标
-    submitButtonOptions: { text: '提交', preIcon: '' },
-    //查询列占比 24代表一行 取值范围 0-24
-    actionColOptions: { span: 17 },
-  });
-
-  /**
-   * 点击提交按钮的value值
-   * @param values
-   */
-  function handleSubmit(values: any) {
-    console.log('提交按钮数据::::', values);
-  }
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/form/example.data.ts

@@ -1,393 +0,0 @@
-import { FormSchema } from '/@/components/Form';
-
-import dayjs from 'dayjs';
-
-export const schemas: FormSchema[] = [
-  {
-    label: '文本框',
-    field: 'name',
-    component: 'Input',
-    componentProps: {
-      prefix: '中文',
-      showCount: true,
-    },
-    defaultValue: '张三',
-  },
-  {
-    label: '密码',
-    field: 'password',
-    component: 'InputPassword',
-    componentProps: {
-      //是否显示切换按钮或者控制密码显隐
-      visibilityToggle: true,
-      prefix: '密码',
-    },
-  },
-  {
-    label: '搜索框',
-    field: 'searchBox',
-    component: 'InputSearch',
-    componentProps: {
-      onSearch: (value) => {
-        console.log(value);
-      },
-    },
-  },
-  {
-    label: '文本域',
-    field: 'textArea',
-    component: 'InputTextArea',
-    componentProps: {
-      //可以点击清除图标删除内容
-      allowClear: true,
-      //是否展示字数
-      showCount: true,
-      //自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }
-      autoSize: {
-        //最小显示行数
-        minRows: 2,
-        //最大显示行数
-        maxRows: 3,
-      },
-    },
-  },
-  {
-    label: '数值输入框',
-    field: 'number',
-    component: 'InputNumber',
-    componentProps: {
-      //带标签的 input，设置后置标签
-      addonAfter: '保留两位小数',
-      //最大值
-      max: 100,
-      //数值经度
-      precision: 2,
-      //步数
-      step: 0.1,
-    },
-  },
-
-  {
-    label: '下拉框',
-    field: 'jinputtype',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { value: 'like', label: '模糊（like）' },
-        { value: 'ne', label: '不等于（ne）' },
-        { value: 'ge', label: '大于等于（ge）' },
-        { value: 'le', label: '小于等于（le)' },
-      ],
-      //下拉多选
-      mode: 'multiple',
-      //配置是否可搜索
-      showSearch: true,
-    },
-  },
-  {
-    field: 'TreeSelect',
-    label: '下拉树',
-    component: 'TreeSelect',
-    componentProps: {
-      //是否显示下拉框，默认false
-      treeCheckable: true,
-      //标题
-      title: '下拉树',
-      //下拉树
-      treeData: [
-        {
-          label: '洗衣机',
-          value: '0',
-          children: [
-            {
-              label: '滚筒洗衣机',
-              value: '0-1',
-            },
-          ],
-        },
-        {
-          label: '电视机',
-          value: '1',
-          children: [
-            {
-              label: '平板电视',
-              value: '1-1',
-              disabled: true,
-            },
-            {
-              label: 'CRT电视机',
-              value: '1-2',
-            },
-            {
-              label: '投影电视',
-              value: '1-3',
-            },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    label: 'RadioButtonGroup组件',
-    field: 'status',
-    component: 'RadioButtonGroup',
-    componentProps: {
-      options: [
-        { label: '有效', value: 1 },
-        { label: '无效', value: 0 },
-      ],
-    },
-  },
-  {
-    label: '单选框',
-    field: 'radioSex',
-    component: 'RadioGroup',
-    componentProps: {
-      //options里面由一个一个的radio组成,支持disabled禁用
-      options: [
-        { label: '男', value: 1, disabled: false },
-        { label: '女', value: 0 },
-      ],
-    },
-  },
-  {
-    label: '多选框',
-    field: 'checkbox',
-    component: 'Checkbox',
-    componentProps: {
-      //是否禁用,默认false
-      disabled: false,
-    },
-  },
-  {
-    label: '多选框组',
-    field: 'checkSex',
-    component: 'CheckboxGroup',
-    componentProps: {
-      //RadioGroup 下所有 input[type="radio"] 的 name 属性
-      name: '爱好',
-      //options支持disabled禁用
-      options: [
-        { label: '运动', value: 0, disabled: true },
-        { label: '听音乐', value: 1 },
-        { label: '看书', value: 2 },
-      ],
-    },
-    defaultValue: [2],
-  },
-  {
-    label: '自动完成组件',
-    field: 'AutoComplete',
-    component: 'AutoComplete',
-    componentProps: {
-      options: [{ value: 'Burns Bay Road' }, { value: 'Downing Street' }, { value: 'Wall Street' }],
-    },
-  },
-  {
-    label: '级联选择',
-    field: 'cascade',
-    component: 'Cascader',
-    componentProps: {
-      //最多显示多少个tag
-      maxTagCount: 2,
-      //浮层预设位置
-      placement: 'bottomRight',
-      //在选择框中显示搜索框,默认false
-      showSearch: true,
-      options: [
-        {
-          label: '北京',
-          value: 'BeiJin',
-          children: [
-            {
-              label: '海淀区',
-              value: 'HaiDian',
-            },
-          ],
-        },
-        {
-          label: '江苏省',
-          value: 'JiangSu',
-          children: [
-            {
-              label: '南京',
-              value: 'Nanjing',
-              children: [
-                {
-                  label: '中华门',
-                  value: 'ZhongHuaMen',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    label: '日期选择',
-    field: 'dateSelect',
-    component: 'DatePicker',
-    componentProps: {
-      //日期格式化，页面上显示的值
-      format: 'YYYY-MM-DD',
-      //返回值格式化（绑定值的格式）
-      valueFormat: 'YYYY-MM-DD',
-      //是否显示今天按钮
-      showToday: true,
-      //不可选择日期
-      disabledDate: (currentDate) => {
-        let date = dayjs(currentDate).format('YYYY-MM-DD');
-        let nowDate = dayjs(new Date()).format('YYYY-MM-DD');
-        //当天不可选择
-        if (date == nowDate) {
-          return true;
-        }
-        return false;
-      },
-    },
-  },
-  {
-    label: '月份选择',
-    field: 'monthSelect',
-    component: 'MonthPicker',
-    componentProps: {
-      //不可选择日期
-      disabledDate: (currentDate) => {
-        let date = dayjs(currentDate).format('YYYY-MM');
-        let nowDate = dayjs(new Date()).format('YYYY-MM');
-        //当天不可选择
-        if (date == nowDate) {
-          return true;
-        }
-        return false;
-      },
-    },
-  },
-  {
-    label: '周选择',
-    field: 'weekSelect',
-    component: 'WeekPicker',
-    componentProps: {
-      size: 'small',
-    },
-  },
-  {
-    label: '时间选择',
-    field: 'timeSelect',
-    component: 'TimePicker',
-    componentProps: {
-      size: 'default',
-      //日期时间或者时间模式下是否显示此刻，不支持日期时间范围和时间范围
-      showNow: true,
-    },
-  },
-  {
-    label: '日期时间范围',
-    field: 'dateTimeRangeSelect',
-    component: 'RangePicker',
-    componentProps: {
-      //是否显示时间
-      showTime: true,
-      //日期格式化
-      format: 'YYYY/MM/DD HH:mm:ss',
-      //范围文本描述用集合
-      placeholder: ['请选择开始日期时间', '请选择结束日期时间'],
-    },
-  },
-  {
-    label: '日期范围',
-    field: 'dateRangeSelect',
-    component: 'RangeDate',
-    componentProps: {
-      //日期格式化
-      format: 'YYYY/MM/DD',
-      //范围文本描述用集合
-      placeholder: ['请选择开始日期', '请选择结束日期'],
-    },
-  },
-  {
-    label: '时间范围',
-    field: 'timeRangeSelect',
-    component: 'RangeTime',
-    componentProps: {
-      //日期格式化
-      format: 'HH/mm/ss',
-      //范围文本描述用集合
-      placeholder: ['请选择开始时间', '请选择结束时间'],
-    },
-  },
-  {
-    label: '开关',
-    field: 'switch',
-    component: 'Switch',
-    componentProps: {
-      //开关大小，可选值：default small
-      size: 'default',
-      //非选中时的内容
-      unCheckedChildren: '开启',
-      //非选中时的值
-      unCheckedValue: '0',
-      //选中时的内容
-      checkedChildren: '关闭',
-      //选中时的值
-      checkedValue: '1',
-      //是否禁用
-      disabled: false,
-    },
-  },
-  {
-    label: '滑动输入条',
-    field: 'slider',
-    component: 'Slider',
-    componentProps: {
-      //最小值
-      min: -20,
-      //最大值
-      max: 100,
-      //是否为双滑块模式
-      range: true,
-      //刻度标记
-      marks: {
-        '-20': '-20°C',
-        0: '0°C',
-        26: '26°C',
-        37: '37°C',
-        100: {
-          style: {
-            color: '#f50',
-          },
-          label: '100°C',
-        },
-      },
-    },
-  },
-  {
-    label: '评分',
-    field: 'rate',
-    component: 'Rate',
-    componentProps: {
-      //是否允许半选
-      allowHalf: true,
-      //star 总数
-      count: 5,
-      //tooltip提示，有几颗星写几个
-      tooltips: ['非常差', '较差', '正常', '很好', '非很好'],
-    },
-  },
-  {
-    label: '分割线',
-    field: 'divisionLine',
-    component: 'Divider',
-    componentProps: {
-      //是否虚线
-      dashed: false,
-      //分割线标题的位置（left | right | center）
-      orientation: 'center',
-      //文字是否显示为普通正文样式
-      plain: true,
-      //水平还是垂直类型（horizontal | vertical）
-      type: 'horizontal',
-    },
-  },
-];

jeecgboot-vue3/src/views/demo/document/form/exampleCustom.data.ts

@@ -1,452 +0,0 @@
-import { FormSchema } from '/@/components/Form';
-import { defHttp } from '/@/utils/http/axios';
-
-export const schemas: FormSchema[] = [
-  {
-    label: '验证码',
-    field: 'code',
-    component: 'InputCountDown',
-    componentProps: {
-      //'default': 默认, 'large': 最大, 'small': 最小
-      size:'default',
-      //倒计时
-      count: 120,
-    },
-  },
-  {
-    label: 'Api下拉选择',
-    field: 'apiSelect',
-    component: 'ApiSelect',
-    componentProps: {
-      //multiple: 多选；不填写为单选
-      mode: 'multiple',
-      //请求api,返回结果{ result: { records:[{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
-      api: () => defHttp.get({ url: '/test/jeecgDemo/list' }),
-      //数值转成String
-      numberToString: false,
-      //标题字段
-      labelField: 'name',
-      //值字段
-      valueField: 'id',
-      //请求参数
-      params: {},
-      //返回结果字段
-      resultField: 'records',
-    },
-  },
-  {
-    label: 'Api树选择',
-    field: 'apiSelect',
-    component: 'ApiTreeSelect',
-    componentProps: {
-      /* 请求api,返回结果
-         { result: { list: [{ title:'选项0',value:'0',key:'0',
-           children: [ {"title": "选项0-0","value": "0-0","key": "0-0"},...]
-           }, ...]
-         }} */
-      api: () => defHttp.get({ url: '/mock/tree/getDemoOptions' }),
-      //请求参数
-      params: {},
-      //返回结果字段
-      resultField: 'list',
-    },
-  },
-  {
-    label: '校验密码强度',
-    field: 'pwd',
-    component: 'StrengthMeter',
-    componentProps: {
-      //是否显示密码文本框
-      showInput: true,
-      //是否禁用
-      disabled: false,
-    },
-  },
-  {
-    label: '省市县联动',
-    field: 'province',
-    component: 'JAreaLinkage',
-    componentProps: {
-      //是否显示区县，默认true,否则只显示省
-      showArea: true,
-      //是否是全部文本，默认false
-      showAll: true,
-    },
-  },
-  {
-    label: '岗位选择',
-    field: 'post',
-    component: 'JSelectPosition',
-    componentProps: {
-      //是否右侧显示选中列表
-      showSelected: true,
-      //最大选择数量
-      maxSelectCount: 1,
-      //岗位标题
-      modalTitle: '岗位',
-    },
-  },
-  {
-    label: '角色选择',
-    field: 'role',
-    component: 'JSelectRole',
-    componentProps: {
-      //请求参数 如params:{"code":"001"}
-      params: {},
-      //是否单选,默认false
-      isRadioSelection: true,
-      //角色标题
-      modalTitle: '角色',
-    },
-  },
-  {
-    label: '用户选择',
-    field: 'user',
-    component: 'JSelectUser',
-    componentProps: {
-      //取值字段配置,一般为主键字段
-      rowKey: 'username',
-      //显示字段配置
-      labelKey: 'realname',
-      //是否显示选择按钮
-      showButton: false,
-      //用户标题
-      modalTitle: '用户',
-    },
-  },
-  {
-    label: '图片上传',
-    field: 'uploadImage',
-    component: 'JImageUpload',
-    componentProps: {
-      //按钮显示文字
-      text:'图片上传',
-      //支持两种基本样式picture和picture-card
-      listType:'picture-card',
-      //用于控制文件上传的业务路径,默认temp
-      bizPath:'temp',
-      //是否禁用
-      disabled:false,
-      //最大上传数量
-      fileMax:1,
-    },
-  },
-  {
-    label: '字典标签',
-    field: 'dictTags',
-    component: 'JDictSelectTag',
-    componentProps: {
-      //字典code配置，比如通过性别字典编码：sex，也可以使用demo,name,id 表名,名称,值的方式
-      dictCode:'sex',
-      //支持radio(单选按钮)、radioButton(单选按钮 btn风格)、select(下拉框)
-      type:'radioButton'
-    },
-  },
-  {
-    label: '部门选择',
-    field: 'dept',
-    component: 'JSelectDept',
-    componentProps: {
-      //是否开启异步加载
-      sync: false,
-      //是否显示复选框
-      checkable: true,
-      //是否显示选择按钮
-      showButton: false,
-      //父子节点选中状态不再关联
-      checkStrictly: true,
-      //选择框标题
-      modalTitle: '部门选择',
-    },
-  },
-  {
-    label: '省市县级联动',
-    field: 'provinceArea',
-    component: 'JAreaSelect',
-    componentProps: {
-      //级别 1 只显示省 2 省市 3 省市区
-      level:3
-    },
-  },
-  {
-    label: '富文本',
-    field: 'editor',
-    component: 'JEditor',
-    componentProps: {
-      //是否禁用
-      disabled: false
-    },
-  },
-  {
-    label: 'markdown',
-    field: 'markdown',
-    component: 'JMarkdownEditor',
-    componentProps: {
-      //是否禁用
-      disabled: false
-    },
-  },
-  {
-    label: '可输入下拉框',
-    field: 'inputSelect',
-    component: 'JSelectInput',
-    componentProps: {
-      options: [
-        { label: 'Default', value: 'default' },
-        { label: 'IFrame', value: 'iframe' },
-      ],
-      //是否为搜索模式
-      showSearch: true,
-      //是否禁用
-      disabled: false
-    },
-  },
-  {
-    label: '代码编辑器组件',
-    field: 'jCode',
-    component: 'JCodeEditor',
-    componentProps: {
-      //高度，默认auto
-      height:'150px',
-      //是否禁用
-      disabled:false,
-      //是否全屏
-      fullScreen:false,
-      //全屏之后的坐标
-      zIndex: 999,
-      //代码主题，目前只支持idea,可在组件自行扩展
-      theme:'idea',
-      //代码提示
-      keywords:['console'],
-      //语言如（javascript,vue,markdown）可在组件自行扩展
-      language:'javascript'
-    },
-  },
-  {
-    label: '分类字典树',
-    field: 'dictTree',
-    component: 'JCategorySelect',
-    componentProps: {
-      //占位内容
-      placeholder:'请选择分类字典树',
-      //查询条件，如“{'name':'笔记本'}”
-      condition:"",
-      //是否多选
-      multiple: false,
-      //起始选择code，见配置的分类字典的类型编码
-      pcode: 'A04',
-      //父级id
-      pid:'',
-      //返回key
-      back:'id',
-    },
-  },
-  {
-    label: '下拉多选',
-    field: 'selectMultiple',
-    component: 'JSelectMultiple',
-    componentProps: {
-      //字典code配置，比如通过性别字典编码：sex，也可以使用demo,name,id 表名,名称,值的方式
-      dictCode:'company_rank',
-      //是否只读
-      readOnly:false,
-    },
-  },
-  {
-    label: 'popup',
-    field: 'popup',
-    component: 'JPopup',
-    componentProps: ({ formActionType }) => {
-      const {setFieldsValue} = formActionType;
-      return{
-        setFieldsValue:setFieldsValue,
-        //online报表编码
-        code:"demo",
-        //是否为多选
-        multi:false,
-        //字段配置
-        fieldConfig: [
-          { source: 'name', target: 'popup' },
-        ],
-      }
-    },
-  },
-  {
-    label: '开关自定义',
-    field: 'switch',
-    component: 'JSwitch',
-    componentProps:{
-      //取值 options
-      options:['Y','N'],
-      //文本option
-      labelOptions:['是', '否'],
-      //是否启用下拉
-      query: false,
-      //是否禁用
-      disabled: false,
-    },
-  },
-  {
-    label: '定时表达式选择',
-    field: 'timing',
-    component: 'JEasyCron',
-    componentProps:{
-      //是否隐藏参数秒和年设置，如果隐藏，那么参数秒和年将会全部忽略掉。
-      hideSecond: false,
-      //是否隐藏参数年设置，如果隐藏，那么参数年将会全部忽略掉
-      hideYear: false,
-      //是否禁用
-      disabled: false,
-      //获取预览执行时间列表的函数，格式为：remote (cron值, time时间戳, cb回调函数)
-      remote:(cron,time,cb)=>{}
-    },
-  },
-  {
-    label: '分类字典树',
-    field: 'treeDict',
-    component: 'JTreeDict',
-    componentProps:{
-      //指定当前组件需要存储的字段 可选: id(主键)和code(编码)
-      field:'id',
-      //是否为异步
-      async: true,
-      //是否禁用
-      disabled: false,
-      //指定一个节点的编码,加载该节点下的所有字典数据,若不指定，默认加载所有数据
-      parentCode:'A04'
-    },
-  },
-  {
-    label: '多行输入窗口',
-    field: 'inputPop',
-    component: 'JInputPop',
-    componentProps:{
-      //标题
-      title:'多行输入窗口',
-      //弹窗显示位置
-      position:'bottom',
-    },
-  },
-  {
-    label: '多选',
-    field: 'multipleChoice',
-    component: 'JCheckbox',
-    componentProps:{
-      //字典code配置，比如通过职位字典编码：company_rank，也可以使用demo,name,id 表名,名称,值的方式
-      dictCode:'company_rank',
-      //是否禁用
-      disabled: false,
-      //没有字典code可以使用option来定义
-      // options:[
-      //   {label:'CE0',value:'1'}
-      // ]
-    },
-  },
-  {
-    label: '下拉树选择',
-    field: 'treeCusSelect',
-    component: 'JTreeSelect',
-    componentProps: {
-      //字典code配置，比如通过性别字典编码：sex，也可以使用sys_permission,name,id 表名,名称,值的方式
-      dict: 'sys_permission,name,id',
-      //父级id字段
-      pidField: 'parent_id',
-    },
-  },
-  {
-    label: '根据部门选择用户组件',
-    field: 'userByDept',
-    component: 'JSelectUserByDept',
-    componentProps: {
-      //是否显示选择按钮
-      showButton: true,
-      //选择框标题
-      modalTitle: '部门用户选择'
-    },
-  },
-  {
-    label: '文件上传',
-    field: 'uploadFile',
-    component: 'JUpload',
-    componentProps: {
-      //是否显示选择按钮
-      text: '文件上传',
-      //最大上传数
-      maxCount: 2,
-      //是否显示下载按钮
-      download: true,
-    },
-  },
-  {
-    label: '字典表搜索',
-    field: 'dictSearchSelect',
-    component: 'JSearchSelect',
-    componentProps: {
-      //字典code配置，通过 demo,name,id 表名,名称,值的方式
-      dict: 'demo,name,id',
-      //是否异步加载
-      async: true,
-      //当async设置为true时有效，表示异步查询时，每次获取数据的数量，默认10
-      pageSize:3
-    },
-  },
-  {
-    label: '动态创建input框',
-    field: 'jAddInput',
-    component: 'JAddInput',
-    componentProps: {
-      //自定义超过多少行才会显示删除按钮，默认为1
-      min:1
-    },
-  },
-  {
-    label: '用户选择组件',
-    field: 'userCusSelect',
-    component: 'UserSelect',
-    componentProps: {
-      //是否多选
-      multi: true,
-      //从用户表中选择一列，其值作为该控件的存储值，默认id列
-      store: 'id',
-      //是否排除我自己(当前登录用户)
-      izExcludeMy: false,
-      //是否禁用
-      disabled: false,
-    },
-  },  
-  {
-    label: '选择角色组件',
-    field: 'roleSelect',
-    component: 'RoleSelect',
-    componentProps: {
-      //最大选择数量  
-      maxSelectCount: 3,
-      //是否单选
-      isRadioSelection: false
-    },
-  },  
-  {
-    label: '数值范围输入框',
-    field: 'rangeNumber',
-    component: 'JRangeNumber',
-  }, 
-  {
-    label: '远程Api单选框组',
-    field: 'apiRadioGroup',
-    component: 'ApiRadioGroup',
-    componentProps:{
-      //请求接口返回结果{ result:{ list: [ name: '选项0',id: '1' ] }}
-      api:()=> defHttp.get({ url: '/mock/select/getDemoOptions' }),
-      //请求参数
-      params:{},
-      //是否为按钮风格类型，默认false
-      isBtn: false,
-      //返回集合名称
-      resultField: 'list',
-      //标题字段名称
-      labelField: 'name',
-      //值字段名称
-      valueField: 'id',
-    }
-  },
-];

jeecgboot-vue3/src/views/demo/document/form/index.ts

@@ -1,24 +0,0 @@
-export { default as BasicFiledsLayotForm } from './BasicFiledsLayotForm.vue';
-export { default as BasicFixedWidthForm } from './BasicFixedWidthForm.vue';
-export { default as BasicFormAdd } from './BasicFormAdd.vue';
-export { default as BasicFormBtn } from './BasicFormBtn.vue';
-export { default as BasicFormCleanRule } from './BasicFormCleanRule.vue';
-export { default as BasicFormCompact } from './BasicFormCompact.vue';
-export { default as BasicFormComponent } from './BasicFormComponent.vue';
-export { default as BasicFormConAttribute } from './BasicFormConAttribute.vue';
-export { default as BasicFormCustom } from './BasicFormCustom.vue';
-export { default as BasicFormCustomComponent } from './BasicFormCustomComponent.vue';
-export { default as BasicFormCustomSlots } from './BasicFormCustomSlots.vue';
-export { default as BasicFormDynamicsRules } from './BasicFormDynamicsRules.vue';
-export { default as BasicFormFieldShow } from './BasicFormFieldShow.vue';
-export { default as BasicFormFieldTip } from './BasicFormFieldTip.vue';
-export { default as BasicFormFooter } from './BasicFormFooter.vue';
-export { default as BasicFormLayout } from './BasicFormLayout.vue';
-export { default as BasicFormModal } from './BasicFormModal.vue';
-export { default as BasicFormRander } from './BasicFormRander.vue';
-export { default as BasicFormRules } from './BasicFormRules.vue';
-export { default as BasicFormSchemas } from './BasicFormSchemas.vue';
-export { default as BasicFormSearch } from './BasicFormSearch.vue';
-export { default as BasicFormSlots } from './BasicFormSlots.vue';
-export { default as BasicFormValue } from './BasicFormValue.vue';
-export { default as BasicFunctionForm } from './BasicFunctionForm.vue';

jeecgboot-vue3/src/views/demo/document/form/tabIndex.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="p-4">
-    <a-card :bordered="false" style="height: 100%">
-      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
-        <a-tab-pane :key="item.key" :tab="item.label" v-for="item in compList" />
-      </a-tabs>
-      <component :is="currentComponent" />
-    </a-card>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, computed } from 'vue';
-  import {
-    BasicFunctionForm,
-    BasicFormConAttribute,
-    BasicFormFieldShow,
-    BasicFormFieldTip,
-    BasicFormRules,
-    BasicFormDynamicsRules,
-    BasicFormSlots,
-    BasicFormCustomSlots,
-    BasicFormRander,
-    BasicFixedWidthForm,
-    BasicFiledsLayotForm,
-    BasicFormLayout,
-    BasicFormBtn,
-    BasicFormCompact,
-    BasicFormCleanRule,
-    BasicFormValue,
-    BasicFormSchemas,
-    BasicFormAdd,
-    BasicFormFooter,
-    BasicFormModal,
-    BasicFormCustom,
-    BasicFormSearch,
-    BasicFormComponent,
-    BasicFormCustomComponent,
-  } from './index';
-  export default defineComponent({
-    name: 'document-table-demo',
-    components: {
-      BasicFunctionForm,
-      BasicFormConAttribute,
-      BasicFormFieldShow,
-      BasicFormFieldTip,
-      BasicFormRules,
-      BasicFormDynamicsRules,
-      BasicFormSlots,
-      BasicFormCustomSlots,
-      BasicFormRander,
-      BasicFixedWidthForm,
-      BasicFiledsLayotForm,
-      BasicFormLayout,
-      BasicFormBtn,
-      BasicFormCompact,
-      BasicFormCleanRule,
-      BasicFormValue,
-      BasicFormSchemas,
-      BasicFormAdd,
-      BasicFormFooter,
-      BasicFormModal,
-      BasicFormCustom,
-      BasicFormSearch,
-      BasicFormComponent,
-      BasicFormCustomComponent,
-    },
-    setup() {
-      //当前选中key
-      const activeKey = ref('BasicFunctionForm');
-      //组件集合
-      const compList = ref([
-        { key: 'BasicFunctionForm', label: '基础表单' },
-        { key: 'BasicFormConAttribute', label: '字段控件属性' },
-        { key: 'BasicFormComponent', label: 'Ant Design Vue自带控件' },
-        { key: 'BasicFormCustomComponent', label: 'JEECG封装的控件' },
-        { key: 'BasicFormFieldShow', label: '字段显示和隐藏' },
-        { key: 'BasicFormFieldTip', label: '字段标题提示' },
-        { key: 'BasicFormRules', label: '表单检验' },
-        { key: 'BasicFormDynamicsRules', label: '自定义动态检验' },
-        { key: 'BasicFormSlots', label: '字段插槽' },
-        { key: 'BasicFormCustomSlots', label: '自定义组件(插槽)' },
-        { key: 'BasicFormCustom', label: '自定义组件(component)' },
-        { key: 'BasicFormRander', label: '自定义渲染' },
-        { key: 'BasicFixedWidthForm', label: '固定label宽度' },
-        { key: 'BasicFiledsLayotForm', label: '标题与字段布局' },
-        { key: 'BasicFormLayout', label: '表单布局' },
-        { key: 'BasicFormBtn', label: '操作按钮示例' },
-        { key: 'BasicFormCompact', label: '表单紧凑' },
-        { key: 'BasicFormCleanRule', label: '表单检验配置' },
-        { key: 'BasicFormValue', label: '获取value值' },
-        { key: 'BasicFormSchemas', label: '更新schemas表单配置' },
-        { key: 'BasicFormAdd', label: '动态增减表单' },
-        { key: 'BasicFormFooter', label: '自定义页脚' },
-        { key: 'BasicFormModal', label: '弹出层表单' },
-        { key: 'BasicFormSearch', label: '查询区域' },
-      ]);
-      //当前选中组件
-      const currentComponent = computed(() => {
-        return activeKey.value;
-      });
-
-      //使用component动态切换tab
-      function tabChange(key) {
-        activeKey.value = key;
-      }
-      return {
-        activeKey,
-        currentComponent,
-        tabChange,
-        compList,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/document/table/AuthColumnDemo.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="p-4">
-    <BasicTable @register="registerTable">
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-              auth: 'demo:btn:show', // 根据权限控制是否显示: 无权限，不显示
-            },
-            {
-              label: '删除',
-              icon: 'ic:outline-delete-outline',
-              onClick: handleDelete.bind(null, record),
-              auth: 'super', // 根据权限控制是否显示: 有权限，会显示
-            },
-          ]"
-          :dropDownActions="[
-            {
-              label: '启用',
-              popConfirm: {
-                title: '是否启用？',
-                confirm: handleOpen.bind(null, record),
-              },
-              ifShow: (_action) => {
-                return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
-              },
-            },
-            {
-              label: '禁用',
-              popConfirm: {
-                title: '是否禁用？',
-                confirm: handleOpen.bind(null, record),
-              },
-              ifShow: () => {
-                return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
-              },
-            },
-            {
-              label: '同时控制',
-              popConfirm: {
-                title: '是否动态显示？',
-                confirm: handleOpen.bind(null, record),
-              },
-              auth: 'super', // 同时根据权限和业务控制是否显示
-              ifShow: () => {
-                return true;
-              },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
-
-  import { demoListApi } from '/@/api/demo/table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  const columns: BasicColumn[] = [
-    {
-      title: '编号',
-      dataIndex: 'no',
-      width: 100,
-    },
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      auth: 'demo:field:show', // 根据权限控制是否显示: 无权限，不显示
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-    },
-    {
-      title: '地址',
-      dataIndex: 'address',
-      auth: 'super', // 同时根据权限和业务控制是否显示
-      ifShow: (_column) => {
-        return true;
-      },
-    },
-    {
-      title: '开始时间',
-      dataIndex: 'beginTime',
-    },
-    {
-      title: '结束时间',
-      dataIndex: 'endTime',
-      width: 200,
-    },
-  ];
-  export default defineComponent({
-    components: { BasicTable, TableAction },
-    setup() {
-      const { tableContext } = useListPage({
-        tableProps: {
-          title: '权限列',
-          api: demoListApi,
-          columns: columns,
-          bordered: true,
-          useSearchForm: false,
-          actionColumn: {
-            width: 250,
-            title: 'Action',
-            dataIndex: 'action',
-            slots: { customRender: 'action' },
-          },
-        },
-      });
-
-      //注册table数据
-      const [registerTable] = tableContext;
-
-      function handleEdit(record: Recordable) {
-        console.log('点击了编辑', record);
-      }
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-      }
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-      }
-      return {
-        registerTable,
-        handleEdit,
-        handleDelete,
-        handleOpen,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/document/table/BasicTableBorder.vue

@@ -1,94 +0,0 @@
-<template>
-  <!--引用表格-->
-  <div class="p-4">
-    <BasicTable @register="registerTable">
-      <template #bodyCell="{ column, text }">
-        <template v-if="column.dataIndex === 'name'">
-          <a>{{ text }}</a>
-        </template>
-      </template>
-      <template #footer>页脚</template>
-    </BasicTable>
-  </div>
-</template>
-
-<script lang="ts" name="basic-table-demo" setup>
-  import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  //定义表格列
-  const columns: BasicColumn[] = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      width: 300,
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-      width: 300,
-    },
-    {
-      title: '住址',
-      dataIndex: 'address',
-      key: 'address',
-      ellipsis: true,
-    },
-    {
-      title: '长内容列',
-      dataIndex: 'address',
-      key: 'address 2',
-      ellipsis: true,
-    },
-    {
-      title: '长内容列',
-      dataIndex: 'address',
-      key: 'address 3',
-      ellipsis: true,
-    },
-  ];
-  // 列表页面公共参数、方法
-  const { tableContext } = useListPage({
-    designScope: 'basic-table-demo',
-    tableProps: {
-      title: '边框表格',
-      dataSource: [
-        {
-          key: '1',
-          name: '张三',
-          age: 32,
-          address: '中国北京北京市朝阳区大屯路科学院南里1号楼3单元401',
-        },
-        {
-          key: '2',
-          name: '刘思',
-          age: 32,
-          address: '中国北京北京市昌平区顺沙路尚湖世家2号楼7单元503',
-        },
-      ],
-      columns: columns,
-      showActionColumn: false,
-      useSearchForm: false,
-    },
-  });
-  //注册table数据
-  const [registerTable] = tableContext;
-  /**
-   * 操作栏
-   */
-  function getTableAction(record): ActionItem[] {
-    return [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-    ];
-  }
-
-  function handleEdit(record) {
-    console.log(record);
-  }
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/table/BasicTableDemo.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="p-4">
-    <!--引用表格-->
-    <BasicTable @register="registerTable">
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" />
-      </template>
-    </BasicTable>
-  </div>
-</template>
-
-<script lang="ts" name="basic-table-demo" setup>
-  import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  //定义表格列
-  const columns: BasicColumn[] = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      resizable: false,
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-    },
-    {
-      title: '住址',
-      dataIndex: 'address',
-      key: 'address',
-    },
-  ];
-  // 列表页面公共参数、方法
-  const { tableContext } = useListPage({
-    designScope: 'basic-table-demo',
-    tableProps: {
-      title: '用户列表',
-      dataSource: [
-        {
-          key: '1',
-          name: '胡歌',
-          age: 32,
-          address: '朝阳区林萃路1号',
-        },
-        {
-          key: '2',
-          name: '刘诗诗',
-          age: 32,
-          address: '昌平区白沙路1号',
-        },
-      ],
-      columns: columns,
-      size: 'large', //紧凑型表格 large
-      striped: false, //斑马纹设置 false
-      showActionColumn: true,
-      useSearchForm: false,
-    },
-  });
-  //注册table数据
-  const [registerTable, methods] = tableContext;
-  console.log('methods', methods);
-  /**
-   * 操作栏
-   */
-  function getTableAction(record): ActionItem[] {
-    return [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-    ];
-  }
-
-  function handleEdit(record) {
-    console.log(record);
-  }
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/table/BasicTableDemoAjax.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="p-4">
-    <!--定义表格-->
-    <BasicTable @register="registerTable">
-      <!-- 搜索区域插槽自定义查询 -->
-      <template #form-email="{ model, field }">
-        <a-input placeholder="请输入邮箱" v-model:value="model[field]" addon-before="邮箱:" addon-after=".com"></a-input>
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" />
-      </template>
-    </BasicTable>
-  </div>
-</template>
-
-<script lang="ts" name="basic-table-demo" setup>
-  import { ActionItem, BasicColumn, BasicTable, FormSchema, TableAction } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { defHttp } from '/@/utils/http/axios';
-  //定义表格列
-  const columns: BasicColumn[] = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      width: 170,
-      align: 'left',
-      resizable: true,
-      sorter: {
-        multiple: 1,
-      },
-    },
-    {
-      title: '关键词',
-      dataIndex: 'keyWord',
-      width: 130,
-      resizable: true,
-    },
-    {
-      title: '打卡时间',
-      dataIndex: 'punchTime',
-      width: 140,
-      resizable: true,
-    },
-    {
-      title: '工资',
-      dataIndex: 'salaryMoney',
-      width: 140,
-      resizable: true,
-      sorter: {
-        multiple: 2,
-      },
-    },
-    {
-      title: '奖金',
-      dataIndex: 'bonusMoney',
-      width: 140,
-      resizable: true,
-    },
-    {
-      title: '性别',
-      dataIndex: 'sex',
-      sorter: {
-        multiple: 3,
-      },
-      filters: [
-        { text: '男', value: '1' },
-        { text: '女', value: '2' },
-      ],
-      customRender: ({ record }) => {
-        return record.sex ? (record.sex == '1' ? '男' : '女') : '';
-      },
-      width: 120,
-      resizable: true,
-    },
-    {
-      title: '生日',
-      dataIndex: 'birthday',
-      width: 120,
-      resizable: true,
-    },
-    {
-      title: '邮箱',
-      dataIndex: 'email',
-      width: 120,
-      resizable: true,
-    },
-  ];
-  //表单搜索字段
-  const searchFormSchema: FormSchema[] = [
-    {
-      label: '姓名', //显示label
-      field: 'name', //查询字段
-      component: 'JInput', //渲染的组件
-      defaultValue: '苏榕润', //设置默认值
-    },
-    {
-      label: '性别',
-      field: 'sex',
-      component: 'JDictSelectTag',
-      componentProps: {
-        //渲染的组件的props
-        dictCode: 'sex',
-        placeholder: '请选择性别',
-      },
-    },
-    {
-      label: '邮箱',
-      field: 'email',
-      component: 'JInput',
-      slot: 'email',
-    },
-    {
-      label: '生日',
-      field: 'birthday',
-      component: 'DatePicker',
-    },
-  ];
-  //ajax请求api接口
-  const demoListApi = (params) => {
-    return defHttp.get({ url: '/test/jeecgDemo/list', params });
-  };
-  // 列表页面公共参数、方法
-  const { tableContext } = useListPage({
-    designScope: 'basic-table-demo-filter',
-    tableProps: {
-      title: '用户列表',
-      api: demoListApi,
-      columns: columns,
-      formConfig: {
-        schemas: searchFormSchema,
-      },
-      useSearchForm: true,
-    },
-  });
-  //BasicTable绑定注册
-  const [registerTable, { getForm }] = tableContext;
-  /**
-   * 操作栏
-   */
-  function getTableAction(record): ActionItem[] {
-    return [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-    ];
-  }
-
-  function handleEdit(record) {
-    let { getFieldsValue } = getForm();
-    console.log('查询form的数据', getFieldsValue());
-    console.log(record);
-  }
-</script>
-
-<style scoped></style>

jeecgboot-vue3/src/views/demo/document/table/CustomerCellDemo.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="p-4">
-    <BasicTable @register="registerTable">
-      <template #id="{ record }"> ID: {{ record.id }} </template>
-      <template #bodyCell="{ column, record }">
-        <Avatar v-if="column.key === 'avatar'" :size="60" :src="record.avatar" />
-        <Tag v-if="column.key === 'no'" color="green">
-          {{ record.no }}
-        </Tag>
-      </template>
-      <template #img="{ text }">
-        <TableImg :size="60" :simpleShow="true" :imgList="text" />
-      </template>
-      <template #imgs="{ text }"> <TableImg :size="60" :imgList="text" /> </template>
-
-      <template #category="{ record }">
-        <Tag color="green">
-          {{ record.no }}
-        </Tag>
-      </template>
-    </BasicTable>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
-  import { Tag, Avatar } from 'ant-design-vue';
-  import { demoListApi } from '/@/api/demo/table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  const columns: BasicColumn[] = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      slots: { customRender: 'id' },
-    },
-    {
-      title: '头像',
-      dataIndex: 'avatar',
-      width: 100,
-    },
-    {
-      title: '分类',
-      dataIndex: 'category',
-      width: 80,
-      align: 'center',
-      defaultHidden: true,
-      slots: { customRender: 'category' },
-    },
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      width: 120,
-    },
-    {
-      title: '图片列表1',
-      dataIndex: 'imgArr',
-      helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
-      width: 140,
-      slots: { customRender: 'img' },
-    },
-    {
-      title: '照片列表2',
-      dataIndex: 'imgs',
-      width: 160,
-      slots: { customRender: 'imgs' },
-    },
-    {
-      title: '地址',
-      dataIndex: 'address',
-    },
-    {
-      title: '编号',
-      dataIndex: 'no',
-    },
-    {
-      title: '开始时间',
-      dataIndex: 'beginTime',
-    },
-    {
-      title: '结束时间',
-      dataIndex: 'endTime',
-    },
-  ];
-  export default defineComponent({
-    components: { BasicTable, TableImg, Tag, Avatar },
-    setup() {
-      const { tableContext } = useListPage({
-        tableProps: {
-          title: '自定义列内容',
-          titleHelpMessage: '表格中所有头像、图片均为mock生成，仅用于演示图片占位',
-          api: demoListApi,
-          columns: columns,
-          bordered: true,
-          showTableSetting: false,
-          showActionColumn: false,
-          useSearchForm: false,
-        },
-      });
-      //注册table数据
-      const [registerTable] = tableContext;
-      return {
-        registerTable,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/document/table/EditCellTableDemo.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="p-4">
-    <BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel" :beforeEditSubmit="beforeEditSubmit" />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
-
-  import { demoListApi } from '/@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  const columns: BasicColumn[] = [
-    {
-      title: '输入框',
-      dataIndex: 'name',
-      edit: true,
-      editComponentProps: {
-        prefix: '$',
-      },
-      width: 200,
-    },
-    {
-      title: '默认输入状态',
-      dataIndex: 'name7',
-      edit: true,
-      editable: true,
-      width: 200,
-    },
-    {
-      title: '输入框校验',
-      dataIndex: 'name1',
-      edit: true,
-      // 默认必填校验
-      editRule: true,
-      width: 200,
-    },
-    {
-      title: '输入框函数校验',
-      dataIndex: 'name2',
-      edit: true,
-      editRule: async (text) => {
-        if (text === '2') {
-          return '不能输入该值';
-        }
-        return '';
-      },
-      width: 200,
-    },
-    {
-      title: '数字输入框',
-      dataIndex: 'id',
-      edit: true,
-      editRule: true,
-      editComponent: 'InputNumber',
-      width: 200,
-    },
-    {
-      title: '下拉框',
-      dataIndex: 'name3',
-      edit: true,
-      editComponent: 'Select',
-      editComponentProps: {
-        options: [
-          {
-            label: 'Option1',
-            value: '1',
-          },
-          {
-            label: 'Option2',
-            value: '2',
-          },
-        ],
-      },
-      width: 200,
-    },
-    {
-      title: '远程下拉',
-      dataIndex: 'name4',
-      edit: true,
-      editComponent: 'ApiSelect',
-      editComponentProps: {
-        api: optionsListApi,
-        resultField: 'list',
-        labelField: 'name',
-        valueField: 'id',
-      },
-      width: 200,
-    },
-    {
-      title: '远程下拉树',
-      dataIndex: 'name71',
-      edit: true,
-      editComponent: 'ApiTreeSelect',
-      editRule: false,
-      editComponentProps: {
-        api: treeOptionsListApi,
-        resultField: 'list',
-      },
-      width: 200,
-    },
-    {
-      title: '日期选择',
-      dataIndex: 'date',
-      edit: true,
-      editComponent: 'DatePicker',
-      editComponentProps: {
-        valueFormat: 'YYYY-MM-DD',
-        format: 'YYYY-MM-DD',
-      },
-      width: 200,
-    },
-    {
-      title: '时间选择',
-      dataIndex: 'time',
-      edit: true,
-      editComponent: 'TimePicker',
-      editComponentProps: {
-        valueFormat: 'HH:mm',
-        format: 'HH:mm',
-      },
-      width: 200,
-    },
-    {
-      title: '勾选框',
-      dataIndex: 'name5',
-      edit: true,
-      editComponent: 'Checkbox',
-      editValueMap: (value) => {
-        return value ? '是' : '否';
-      },
-      width: 200,
-    },
-    {
-      title: '开关',
-      dataIndex: 'name6',
-      edit: true,
-      editComponent: 'Switch',
-      editValueMap: (value) => {
-        return value ? '开' : '关';
-      },
-      width: 200,
-    },
-  ];
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      // 列表页面公共参数、方法
-      const { tableContext } = useListPage({
-        designScope: 'basic-table-demo',
-        tableProps: {
-          title: '可编辑单元格示例',
-          api: demoListApi,
-          columns: columns,
-          showIndexColumn: false,
-          bordered: true,
-          showActionColumn: false,
-          useSearchForm: false,
-        },
-      });
-      //注册table数据
-      const [registerTable] = tableContext;
-      const { createMessage } = useMessage();
-
-      function handleEditEnd({ record, index, key, value }: Recordable) {
-        console.log(record, index, key, value);
-        return false;
-      }
-
-      // 模拟将指定数据保存
-      function feakSave({ value, key, id }) {
-        createMessage.loading({
-          content: `正在模拟保存${key}`,
-          key: '_save_fake_data',
-          duration: 0,
-        });
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            if (value === '') {
-              createMessage.error({
-                content: '保存失败：不能为空',
-                key: '_save_fake_data',
-                duration: 2,
-              });
-              resolve(false);
-            } else {
-              createMessage.success({
-                content: `记录${id}的${key}已保存`,
-                key: '_save_fake_data',
-                duration: 2,
-              });
-              resolve(true);
-            }
-          }, 2000);
-        });
-      }
-
-      async function beforeEditSubmit({ record, index, key, value }) {
-        console.log('单元格数据正在准备提交', { record, index, key, value });
-        return await feakSave({ id: record.id, key, value });
-      }
-
-      function handleEditCancel() {
-        console.log('cancel');
-      }
-
-      return {
-        registerTable,
-        handleEditEnd,
-        handleEditCancel,
-        beforeEditSubmit,
-      };
-    },
-  });
-</script>

jeecgboot-vue3/src/views/demo/document/table/EditRowTableDemo.vue

@@ -1,261 +0,0 @@
-<template>
-  <div class="p-4">
-    <BasicTable @register="registerTable" @edit-change="onEditChange">
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
-      </template>
-    </BasicTable>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
-
-  import { demoListApi } from '/@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
-  import { cloneDeep } from 'lodash-es';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useListPage } from '/@/hooks/system/useListPage';
-
-  const columns: BasicColumn[] = [
-    {
-      title: '输入框',
-      dataIndex: 'name',
-      editRow: true,
-      editComponentProps: {
-        prefix: '$',
-      },
-      width: 150,
-    },
-    {
-      title: '默认输入状态',
-      dataIndex: 'name7',
-      editRow: true,
-      width: 150,
-    },
-    {
-      title: '输入框校验',
-      dataIndex: 'name1',
-      editRow: true,
-      align: 'left',
-      // 默认必填校验
-      editRule: true,
-      width: 150,
-    },
-    {
-      title: '输入框函数校验',
-      dataIndex: 'name2',
-      editRow: true,
-      align: 'right',
-      editRule: async (text) => {
-        if (text === '2') {
-          return '不能输入该值';
-        }
-        return '';
-      },
-    },
-    {
-      title: '数字输入框',
-      dataIndex: 'id',
-      editRow: true,
-      editRule: true,
-      editComponent: 'InputNumber',
-      width: 150,
-    },
-    {
-      title: '下拉框',
-      dataIndex: 'name3',
-      editRow: true,
-      editComponent: 'Select',
-      editComponentProps: {
-        options: [
-          {
-            label: 'Option1',
-            value: '1',
-          },
-          {
-            label: 'Option2',
-            value: '2',
-          },
-          {
-            label: 'Option3',
-            value: '3',
-          },
-        ],
-      },
-      width: 200,
-    },
-    {
-      title: '远程下拉',
-      dataIndex: 'name4',
-      editRow: true,
-      editComponent: 'ApiSelect',
-      editComponentProps: {
-        api: optionsListApi,
-        resultField: 'list',
-        labelField: 'name',
-        valueField: 'id',
-      },
-      width: 200,
-    },
-    {
-      title: '远程下拉树',
-      dataIndex: 'name8',
-      editRow: true,
-      editComponent: 'ApiTreeSelect',
-      editRule: false,
-      editComponentProps: {
-        api: treeOptionsListApi,
-        resultField: 'list',
-      },
-      width: 200,
-    },
-    {
-      title: '日期选择',
-      dataIndex: 'date',
-      editRow: true,
-      editComponent: 'DatePicker',
-      editComponentProps: {
-        valueFormat: 'YYYY-MM-DD',
-        format: 'YYYY-MM-DD',
-      },
-      width: 150,
-    },
-    {
-      title: '时间选择',
-      dataIndex: 'time',
-      editRow: true,
-      editComponent: 'TimePicker',
-      editComponentProps: {
-        valueFormat: 'HH:mm',
-        format: 'HH:mm',
-      },
-      width: 100,
-    },
-    {
-      title: '勾选框',
-      dataIndex: 'name5',
-      editRow: true,
-
-      editComponent: 'Checkbox',
-      editValueMap: (value) => {
-        return value ? '是' : '否';
-      },
-      width: 100,
-    },
-    {
-      title: '开关',
-      dataIndex: 'name6',
-      editRow: true,
-      editComponent: 'Switch',
-      editValueMap: (value) => {
-        return value ? '开' : '关';
-      },
-      width: 100,
-    },
-  ];
-  export default defineComponent({
-    components: { BasicTable, TableAction },
-    setup() {
-      const { createMessage: msg } = useMessage();
-      const currentEditKeyRef = ref('');
-
-      const { tableContext } = useListPage({
-        designScope: 'basic-table-demo',
-        tableProps: {
-          title: '可编辑行示例',
-          titleHelpMessage: ['本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变'],
-          api: demoListApi,
-          columns: columns,
-          showIndexColumn: false,
-          showTableSetting: true,
-          tableSetting: { fullScreen: true },
-          actionColumn: {
-            width: 160,
-            title: 'Action',
-            dataIndex: 'action',
-            slots: { customRender: 'action' },
-          },
-          useSearchForm: false,
-        },
-      });
-      //注册table数据
-      const [registerTable] = tableContext;
-
-      function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        // 校验
-        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
-        const valid = await record.onValid?.();
-        if (valid) {
-          try {
-            const data = cloneDeep(record.editValueRefs);
-            console.log(data);
-            //TODO 此处将数据提交给服务器保存
-            // ...
-            // 保存之后提交编辑状态
-            const pass = await record.onEdit?.(false, true);
-            if (pass) {
-              currentEditKeyRef.value = '';
-            }
-            msg.success({ content: '数据已保存', key: 'saving' });
-          } catch (error) {
-            msg.error({ content: '保存失败', key: 'saving' });
-          }
-        } else {
-          msg.error({ content: '请填写正确的数据', key: 'saving' });
-        }
-      }
-
-      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        }
-        return [
-          {
-            label: '保存',
-            onClick: handleSave.bind(null, record, column),
-          },
-          {
-            label: '取消',
-            popConfirm: {
-              title: '是否取消编辑',
-              confirm: handleCancel.bind(null, record, column),
-            },
-          },
-        ];
-      }
-
-      function onEditChange({ column, value, record }) {
-        // 本例
-        if (column.dataIndex === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      return {
-        registerTable,
-        handleEdit,
-        createActions,
-        onEditChange,
-      };
-    },
-  });
-</script>