JEECG-Boot Vue3 UI

https://help.jeecg.com/ui
Admin
Documentation for the Vue3 frontend of JeecgBoot, a low-code development platform featuring Vue3,...
Tokens:107,194
Snippets:1,225
Trust Score:8.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://help.jeecg.com/ui/config/icongen

Commands to install the necessary dependencies for Iconify.

```bash
yarn add @iconify/iconify

yarn add @iconify/json @purge-icons/generated -D
```

--------------------------------

### Docker Start Service

Source: https://help.jeecg.com/ui/office/dockerInstallation

Start the ONLYOFFICE Document Server service in a Docker container.

```bash
docker run -i -t -d -p 9000:80 --name=onlyoffice --privileged=true --restart=always -e JWT_ENABLED=false onlyoffice/documentserver
```

--------------------------------

### Usage Examples

Source: https://help.jeecg.com/ui/config/theme

Examples demonstrating how to switch to each of the four theme types.

```typescript
// Switch to left sidebar
const menuType = MenuTypeEnum.SIDEBAR;

// Switch to top navigation
const menuType = MenuTypeEnum.MIX;

// Switch to collapsible sidebar
const menuType = MenuTypeEnum.MIX_SIDEBAR;

// Switch to pure top menu
const menuType = MenuTypeEnum.TOP_MENU;
```

--------------------------------

### Component Configuration File Example

Source: https://help.jeecg.com/ui/2dev/customizePortalComponent

Example of defining the component name for the configuration panel using defineOptions.

```javascript
defineOptions({ name: 'JAppCarouselOption' });
```

--------------------------------

### Install Dependencies

Source: https://help.jeecg.com/ui/setup/electron-build

Command to install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Popup Field Configuration Example

Source: https://help.jeecg.com/ui/component/JVxeTable/config

Example of field mapping configuration for the Popup component.

```javascript
fieldConfig: [  
  { source: 'name', target: 'popup' },  
  { source: 'sex', target: 'popup_sex' },  
  { source: 'age', target: 'popup_age' },  
],  
```

--------------------------------

### Usage Example

Source: https://help.jeecg.com/ui/component/JPopupDict

An example demonstrating how to use the JPopupDict component within a BasicForm, including its configuration and event handling.

```vue
<template>
  <BasicForm
    :schemas="schemas"
    :actionColOptions="{ span: 24 }"
    @submit="handleSubmit"
  >
  </BasicForm>
</template>
<script setup lang="ts">
  import { BasicForm } from '/@/components/Form';
  const handleSubmit = (values) => {
    console.log(values);
  };
  const schemas = [
    {
      field: 'pop2',
      component: 'JPopupDict',
      label: 'JPopupDict示例',
      colProps: {
        span: 12,
      },
      componentProps: {
        placeholder: '请选择',
        dictCode: 'report_user01,username,id',
        multi: true,
      },
    },
    {
      field: 'pop2',
      component: 'JEllipsis',
      label: '选中值',
      colProps: {
        span: 12,
      },
    },
  ];
</script>

```

--------------------------------

### Docker Install Free Version

Source: https://help.jeecg.com/ui/office/dockerInstallation

Pull the Docker image for the free version of ONLYOFFICE Document Server.

```bash
docker pull onlyoffice/documentserver
```

--------------------------------

### ComponentProps Example

Source: https://help.jeecg.com/ui/component/FormBak

Example demonstrating how to use componentProps with a function to dynamically set props and handle events.

```javascript
{
  component: 'Input',
  componentProps: ({ schema, tableAction, formActionType, formModel }) => {
    return {
      // xxxx props
      onChange: e => {
        const { reload } = tableAction;
        reload();
        // or
        formModel.xxx = '123';
      }
    };
  }
}
```

--------------------------------

### VAxios Configuration Example

Source: https://help.jeecg.com/ui/config/mock

Example of configuring VAxios with various options including authentication, timeout, prefix URL, headers, and request options.

```typescript
const axios = new VAxios({
  // 认证方案，例如: Bearer
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
  authenticationScheme: '',
  // 接口超时时间 单位毫秒
  timeout: 10 * 1000,
  // 接口可能会有通用的地址部分，可以统一抽取出来
  prefixUrl: prefix,
  headers: { 'Content-Type': ContentTypeEnum.JSON },
  // 数据处理方式，见下方说明
  transform,
  // 配置项，下面的选项都可以在独立的接口请求中覆盖
  requestOptions: {
    // 默认将prefix 添加到url
    joinPrefix: true,
    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
    isReturnNativeResponse: false,
    // 需要对返回数据进行处理
    isTransformRequestResult: true,
    // post请求的时候添加参数到url
    joinParamsToUrl: false,
    // 格式化提交参数时间
    formatDate: true,
    // 消息提示类型
    errorMessageMode: 'message',
    // 接口地址
    apiUrl: globSetting.apiUrl,
    //  是否加入时间戳
    joinTime: true,
    // 忽略重复请求
    ignoreCancelToken: true,
  },
});

```

--------------------------------

### Remove Excel Example Route Configuration

Source: https://help.jeecg.com/ui/2dev/mini

File path for the Excel example route configuration to be removed.

```bash
src\router\routes\modules\demo\feat.ts  

```

--------------------------------

### Frontend Example Code

Source: https://help.jeecg.com/ui/2dev/systemjump

Frontend code example demonstrating how to initialize jump to a modal based on message parameters from the app store.

```javascript
  
import { getOne } from './mynews.api';  
import { useAppStore } from '/@/store/modules/app';  
const appStore = useAppStore();  
  
onMounted(()=>{
  initHrefModal();  
});  
function initHrefModal(){
    // 从appStore中获取参数  
    let params = appStore.getMessageHrefParams;  
    let detailId = params.detailId;  
    if(detailId){
      // getOne这个查询代码未提供，就是根据ID从数据库查询数据  
      getOne(detailId).then(data=>{
        openDetail(true, {  
          record: data,  
          isUpdate: true,  
        });  
        // 弹窗详情后，清除历史参数  
        appStore.setMessageHrefParams('')  
      })
    }
  }
}
  

```

--------------------------------

### updateSchema Example

Source: https://help.jeecg.com/ui/component/FormBak

Examples demonstrating how to update the form schema using the updateSchema method, both for a single schema and an array of schemas.

```javascript
updateSchema({ field: 'filed', componentProps: { disabled: true } });  
updateSchema([
  { field: 'filed', componentProps: { disabled: true } },  
  { field: 'filed1', componentProps: { disabled: false } },  
]);  
```

--------------------------------

### Cross-domain Configuration Example

Source: https://help.jeecg.com/ui/config/mock

Example configuration where VITE_GLOB_API_URL is set to '/basic-api' to leverage Vite's proxy for cross-domain requests.

```env
# 例如接口地址为 http://localhost:3000 则  
VITE_PROXY=[["/basic-api","http://localhost:3000"]]
# 接口地址  
VITE_GLOB_API_URL=/basic-api  

```

--------------------------------

### Error Example: Missing @types/mousetrap

Source: https://help.jeecg.com/ui/setup/electron-build

Example of an error message indicating a missing @types/mousetrap dependency during build.

```bash
⨯ ENOENT: no such file or directory, stat 'E:\workspace-ui\jeecgboot-vue3-idea2025\node_modules\@types\mousetrap'  failedTask=build stackTrace=Error: ENOENT: no such file or directory, stat 'E:\workspace-ui\jeecgboot-vue3-idea2025\node_modules\@types\mousetrap'  
error Command failed with exit code 1.  
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.  
进程已结束，退出代码为 1  
```

--------------------------------

### Cross-domain Handling Example

Source: https://help.jeecg.com/ui/config/mock

Example demonstrating how VITE_PROXY handles cross-domain requests by matching '/basic-api' and proxying to http://localhost:3000.

```typescript
// .env.development  
// VITE_PROXY=[["/basic-api","http://localhost:3000"]]
// VITE_GLOB_API_URL=/basic-api  

enum Api {  
  Login = '/login',  
}

/**  
 * @description: 用户登陆  
 */  
export function loginApi(params: LoginParams) {  
  return http.request<LoginResultModel>({  
    url: Api.Login,  
    method: 'POST',  
    params,  
  });  
}  

```

--------------------------------

### Token Login URL Example

Source: https://help.jeecg.com/ui/2dev/tokenLogin

An example URL for token-based login, including the login token and encoded parameter JSON.

```text
https://boot3.jeecg.com/tokenLogin?loginToken={Token值}&info={参数json，需要encode}
```

--------------------------------

### Usage Example

Source: https://help.jeecg.com/ui/component/JModal

This example demonstrates how to use the JModal component, including setting its title, width, visibility, and handling OK and Cancel events. It also shows how to conditionally hide the submit button.

```vue
<template>
  <JModal :title="title" :width="width" v-model:open="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
  </JModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
    
  const title = ref<string>('');
  const width = ref<number>(800);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  
  /**
   * 确定按钮点击事件
   */
  function handleOk() {}
  
  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
  }
</script>

```

--------------------------------

### Vue/TS Prefix Usage

Source: https://help.jeecg.com/ui/setup/config

Example of using the `useDesign` hook in Vue/TypeScript to get the prefix class name.

```typescript
import { useDesign } from '/@/hooks/web/useDesign';  
  
const { prefixCls } = useDesign('app-logo');  
  
// prefixCls => jeecg-app-logo  

```

--------------------------------

### Global Startup and Build Script Configuration

Source: https://help.jeecg.com/ui/2dev/qiankun

Package.json configuration for managing global installation, startup, and build processes for both the main application and sub-applications.

```json
{
  "name": "qiankun-jeecg",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "install": "npm-run-all install:* ",
    "install:main": "cd ant-design-jeecg-vue && npm install",
    "install:sub01": "cd jeecg-app-1 && npm install ",
    "start": "npm-run-all start:* ",
    "start:main": "cd ant-design-jeecg-vue && start cmd /k npm run serve",
    "start:sub01": "cd jeecg-app-1 && start cmd /k npm run serve",
    "build": "npm-run-all build:* ",
    "build:main": "cd ant-design-jeecg-vue && npm run build",
    "build:sub01": "cd jeecg-app-1 && npm run build"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}
```

--------------------------------

### Example of using internationalized text

Source: https://help.jeecg.com/ui/config/international

This snippet shows how to use the `useI18n` hook to get translated text based on the defined language files.

```javascript
const { t } = useI18n();
t t('components.modal.title')
```

--------------------------------

### 通过npm install启动报错

Source: https://help.jeecg.com/ui/qa

执行此命令可以忽略脚本错误。

```bash
npm install --ignore-scripts
```

--------------------------------

### Importing language files

Source: https://help.jeecg.com/ui/config/international

Example of how language files are imported and processed by `setupI18n`.

```javascript
const defaultLocal = await import(`./lang/${locale}.ts`);
```

```javascript
import { genMessage } from '../helper';
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
import momentLocale from 'moment/dist/locale/zh-cn';

const modules = import.meta.globEager('./zh_CN/**/*.ts');
export default {
  message: {
    ...genMessage(modules, 'zh_CN'),
    antdLocale,
  },
  momentLocale,
  momentLocaleName: 'zh-cn',
};
```

--------------------------------

### BaseForm Usage Example

Source: https://help.jeecg.com/ui/component/JSelectDeptPost

Example of using JSelectDepartPost within a BaseForm.

```javascript
{
    field: 'depart4',
    component: 'JSelectDepartPost',
    label: '选择岗位',
    componentProps: { showButton: false },
    colProps: {
      span: 12,
    },
}
```

--------------------------------

### Tinymce Usage Example

Source: https://help.jeecg.com/ui/component/Tinymce

Example of how to use the Tinymce component in a Vue.js application.

```vue
<template>
  <Tinymce v-model="value" @change="handleChange" width="100%" />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';

  export default defineComponent({
    components: { Tinymce },
    setup() {
      const value = ref('hello world!');
      function handleChange(value: string) {
        console.log(value);
      }
      return { handleChange, value };
    },
  });
</script>
```

--------------------------------

### 不使用setup语法糖定义name方式

Source: https://help.jeecg.com/ui/config/menu/cache

当不使用setup语法糖时，可以通过export default defineComponent来定义组件的name属性。

```javascript
export default defineComponent({
  name: 'system-user',
});

```

--------------------------------

### Usage Example in Slot

Source: https://help.jeecg.com/ui/component/JSelectDept

Example of using JSelectDept within a template slot.

```html
<template #jSelectDept="{model, field }">
    <JSelectDept v-model:value="model[field]"/>
</template>


```

--------------------------------

### 使用setup语法糖，需要加name属性

Source: https://help.jeecg.com/ui/config/menu/cache

当使用setup语法糖时，需要在script标签上添加name属性来定义组件的name。

```vue
<script lang="ts" setup name="system-user">
  
</script>

```

--------------------------------

### Slot Usage Example

Source: https://help.jeecg.com/ui/component/JSelectDeptPost

Example of using JSelectDepartPost within a template slot.

```html
<template #JSelectDepartPost="{ model, field }">
  <JSelectDepartPost v-model:value="model[field]"></JSelectDepartPost>
</template>

```

--------------------------------

### Standalone Usage Example

Source: https://help.jeecg.com/ui/component/JSelectUserByDept

Example of using the JSelectUserByDept component independently.

```html
<template>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
<UserSelectByDepModal rowKey="id" @register="registerUserDeptModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
    import UserSelectByDepModal from '/@/components/Form/src/jeecg/components/modal/UserSelectByDepModal .vue'
     // 注册用户选择框
    const [registerUserDeptModal, {openModal}] = useModal()

    // 打开用户选择框
    function openHandle() {
        openModal()；
    }
    // 选择用户成功
    function onSelectOk(selectRows, selectKeys) {
      //处理业务逻辑
   }
</script>
```

--------------------------------

### Usage

Source: https://help.jeecg.com/ui/component/Markdown

Basic usage example for the Markdown component.

```vue
<template>
  <div class="p-4">
    <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
    <MarkDown v-model:value="value" ref="markDownRef" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
  export default defineComponent({
    components: { MarkDown },
    setup() {
      const markDownRef = ref<Nullable<MarkDownActionType>>(null);
      const valueRef = ref(`  
# title  

# content  
`);

      function toggleTheme() {
        const markDown = unref(markDownRef);
        if (!markDown) return;
        const vditor = markDown.getVditor();
        vditor.setTheme('dark');
      }
      return {
        value: valueRef,
        toggleTheme,
        markDownRef,
      };
    },
  });
</script>

```

--------------------------------

### JSelectInput Usage Example

Source: https://help.jeecg.com/ui/component/JSelectInput

Example of how to use the JSelectInput component in a form.

```javascript
const schemas: FormSchema[] = [
  {
    field: 'JSelectInput',
    label: 'JSelectInput',
    component: 'JSelectInput',
    componentProps: {
      options: [
        { label: 'Default', value: 'default' },
        { label: 'IFrame', value: 'iframe' },
      ],
    },
  },
]

```

--------------------------------

### Enter Container

Source: https://help.jeecg.com/ui/office/dockerInstallation

Access the Docker container to make configuration changes.

```bash
docker exec -it [容器id] bash
```

--------------------------------

### Standalone Usage Example

Source: https://help.jeecg.com/ui/component/JSelectDeptPost

Example of using JSelectDepartPost as a standalone component with modal integration.

```html
<template>
  <a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
  <DeptSelectModal iz-only-select-depart-post modalTitle="部门岗位选择" rowKey="id" @register="registerSelModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
  import { useModal } from "@/components/Modal";
  import DeptSelectModal from '/@/components/Form/src/jeecg/components/modal/DeptSelectModal.vue'
  // 注册选择框
  const [registerSelModal, {openModal}] = useModal()
  let selectValues = reactive<Recordable>({
    //附值value
    value: [],
  });
  //下发 selectValues
  provide('selectValues', selectValues);
  // 打开选择框
  function openHandle() {
    openModal();
  }
  // 选择确认事件
  function onSelectOk(selectRows, selectKeys) {
    //处理业务逻辑
    console.log(selectRows,selectKeys)
  }
</script>

```

--------------------------------

### Build All Electron Packages

Source: https://help.jeecg.com/ui/setup/electron-build

Command to compile the project and then package it into installation files for all platforms.

```bash
npm run electron:build-all
```

--------------------------------

### Slot Usage Example

Source: https://help.jeecg.com/ui/component/JSelectUserByDept

Example of using the JSelectUserByDept component within a slot.

```html
<template #jSelectUser="{model, field }">
    <JSelectUserByDept v-model:value="model[field]"/>
</template>
```

--------------------------------

### BaseForm Usage Example

Source: https://help.jeecg.com/ui/component/JSelectUserByDept

Example of using the JSelectUserByDept component within a BaseForm.

```javascript
{
    field: 'user2',
    component: 'JSelectUserByDept',
    label: '部门选择用户',
    helpMessage: ['component模式'],
    componentProps: {
        labelKey: 'realname',
        rowKey: 'username'
    }
}
```

--------------------------------

### 通过npm install启动报错

Source: https://help.jeecg.com/ui/qa

建议：请使用`pnpm i` 可以避免更多问题 错误情况: `\node_modules\vite-plugin-mock\node_modules\esbuild\` 执行命令: `node install.js` 再启动就好了

```bash
node install.js
```

--------------------------------

### Icon Usage

Source: https://help.jeecg.com/ui/component/icon

Example of how to use the Icon component.

```vue
<template>
  <Icon icon="gg:loadbar-doc"></Icon>
</template>

<script>
  import { defineComponent } from 'vue';
  import { Icon } from '/@/components/Icon';
  export default defineComponent({
    components: { Icon },
  });
</script>

```

--------------------------------

### IconPicker Usage

Source: https://help.jeecg.com/ui/component/icon

Example of how to use the IconPicker component.

```vue
<template>
  <div>
    <IconPicker />
  </div>
</template>
<script>
  import { IconPicker } from '/@/components/Icon';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { IconPicker },
  });
</script>

```

--------------------------------

### Language file structure example

Source: https://help.jeecg.com/ui/config/international

Example of how language files are structured within the `locales/lang/` directory.

```yaml
# locales/lang/

# Chinese language
zh_CN:
  component: component related
  layout: layout related
  routes: route menu related
  sys: system page related

en: same as above
```

--------------------------------

### .env.production 生产环境配置

Source: https://help.jeecg.com/ui/setup/config

生产环境适用的配置项。

```dotenv
# 是否开启mock  
VITE_USE_MOCK=true  
# 接口地址 可以由nginx做转发或者直接写实际地址  
VITE_GLOB_API_URL=/jeecgboot  
#后台接口全路径地址(必填)  
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot  
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换  
VITE_GLOB_API_URL_PREFIX=  
# 是否删除Console.log  
VITE_DROP_CONSOLE=true  
# 资源公共路径,需要以 / 开头和结尾  
VITE_PUBLIC_PATH=/  
# 打包是否输出gz｜br文件  
# 可选: gzip | brotli | none  
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件  
VITE_BUILD_COMPRESS = 'gzip'  
# 打包是否压缩图片  
VITE_USE_IMAGEMIN = false  
# 打包是否开启pwa功能  
VITE_USE_PWA = false  
# 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本  
VITE_LEGACY = false  
# 是否开启单点登录  
VITE_GLOB_APP_OPEN_SSO = false  
```

--------------------------------

### Delete Demo Example Code

Source: https://help.jeecg.com/ui/2dev/mini

Commands to remove demo example code from various directories.

```bash
rd/s/q src\views\demo\feat\  
rd/s/q src\views\demo\form\  
rd/s/q src\views\demo\charts\  
rd/s/q src\views\demo\codemirror\  
rd/s/q src\views\demo\comp\  
rd/s/q src\views\demo\editor\  
rd/s/q src\views\demo\excel\  
rd/s/q src\views\demo\fullcalendar\  
rd/s/q src\views\demo\level\  
rd/s/q src\views\demo\main-out\  
rd/s/q src\views\demo\permission\  
rd/s/q src\views\demo\setup\  
rd/s/q src\views\demo\system\  
rd/s/q src\views\demo\table\  
rd/s/q src\views\demo\tree\  
rd/s/q src\views\demo\page\desc\  
rd/s/q src\views\demo\page\list\  
rd/s/q src\views\demo\page\form\  
rd/s/q src\views\demo\page\result\  
rd/s/q src\views\report\  
  

```

--------------------------------

### .env.development 开发环境配置

Source: https://help.jeecg.com/ui/setup/config

开发环境适用的配置项。

```dotenv
#后台接口父地址(必填)  
VITE_GLOB_API_URL=/jeecgboot  
#后台接口全路径地址(必填)  
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot  
# 本地开发代理，可以解决跨域及多地址代理  
# 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题  
# 可以有多个，注意多个不能换行，否则代理将会失效  
VITE_PROXY=[["/jeecgboot","http://localhost:8080/jeecg-boot"],["api1","http://localhost:3001"],["/upload","http://localhost:3001/upload"]]  
# 是否开启mock数据，关闭时需要自行对接后台接口  
VITE_USE_MOCK=true  
# 资源公共路径,需要以 /开头和结尾  
VITE_PUBLIC_PATH=/  
# 是否删除Console.log  
VITE_DROP_CONSOLE=false  
# 是否开启单点登录  
VITE_GLOB_APP_OPEN_SSO = false  
# 接口父路径前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换  
VITE_GLOB_API_URL_PREFIX=  
```

--------------------------------

### JTreeSelect Dictionary Example

Source: https://help.jeecg.com/ui/component/tablesql

Example of using JTreeSelect to select a category from a dictionary.

```html
<JTreeSelect placeholder="请选择分类" v-model:value="formState.zdys" 
  dict="sys_category,name,id" pidValue="0"/>
```

--------------------------------

### Usage Example in BaseForm

Source: https://help.jeecg.com/ui/component/JSelectDept

Example of how to use JSelectDept within a BaseForm component, configuring labelKey and rowKey.

```javascript
{
    field: 'user2',
    component: 'JSelectDept',
    label: '选择示例',
    helpMessage: ['component模式'],
    componentProps:{
        labelKey:'departName',
        rowKey:'orgCode'
    }
}


```

--------------------------------

### Usage

Source: https://help.jeecg.com/ui/component/Description

Basic usage example of the Description component.

```vue
<template>
  <div class="p-4">
    <Description
      title="基础示例"
      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
      :column="3"
      :data="mockData"
      :schema="schema"
    />
    <Description @register="register" class="mt-4" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  const mockData: any = {
    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, Alert },
    setup() {
      const [register] = useDescription({
        title: 'useDescription',
        data: mockData,
        schema: schema,
      });
      return { mockData, schema, register };
    },
  });
</script>
```

--------------------------------

### Table column configuration with ifShow

Source: https://help.jeecg.com/ui/vue3/auth/listfield

Example of a table column configuration using the 'ifShow' property with a permission check.

```javascript
{
  title: '用户姓名',
  dataIndex: 'realname',
  width: 100,
  ifShow: () => {
      return hasPermission('user:add');
  },
}
```

--------------------------------

### Example in jeecg-vue3 'Single Table Example' page

Source: https://help.jeecg.com/ui/2dev/jingyan/superQuery

Querying all fields using the advanced query component.

```html
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
```

```javascript
const superQueryConfig = reactive({
    name: { title: '名称', view: 'text', type: 'string', order: 1 },
    keyWord: { title: '关键词', view: 'text', type: 'string', order: 2 },
    punchTime: { title: '打卡时间', view: 'datetime', type: 'string', order: 3 },
    keyWord: { title: '工资', view: 'text', type: 'number', order: 4 },
    salaryMoney: { title: '奖金', view: 'text', type: 'number', order: 5 },
    sex: { title: '性别', view: 'list', type: 'string', dictCode: 'sex', order: 6 },
    birthday: { title: '生日', view: 'date', type: 'string', order: 7 },
    email: { title: '邮箱', view: 'text', type: 'string', order: 8 },
    content: { title: '个人简介', view: 'text', type: 'string', order: 9 },
  });

  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      // 得到高级查询组件的条件，拼接到接口
      queryParam[k] = params[k];
    });
    // 调用接口重新刷新表格数据
    searchQuery();
  }
```

--------------------------------

### Method 2: Using ref

Source: https://help.jeecg.com/ui/2dev/jingyan/superQuery

Using the super-query component with configuration initialized via ref.

```html
<super-query ref="superQueryRef" @search="handleSearch"></super-query>
```

```javascript
const superQueryRef = ref(null);
superQueryRef.value.init({
  name: { title: '名称', view: 'text', type: 'string', order: 1 },
  sex: { title: '性别', view: 'list', type: 'string', dictCode: 'sex', order: 2 }
});
const handleSearch = (params) => {
  console.log(params); // 得到高级查询组件的条件，拼接到接口即可
};
```

--------------------------------

### PNPM Installation Fix for imagemin on Linux

Source: https://help.jeecg.com/ui/setup/mozjpeg

Commands to fix imagemin installation failures on Linux when using pnpm.

```bash
yum install nasm
然后删除node modules
pnpm install
```

--------------------------------

### Registering Custom Components (Method 2)

Source: https://help.jeecg.com/ui/component/FormBak

Example of registering a custom component locally using useComponentRegister.

```javascript
import { useComponentRegister } from '@/components/form/index';

import { StrengthMeter } from '@/components/strength-meter/index';

useComponentRegister('StrengthMeter', StrengthMeter);
```

--------------------------------

### Registering Custom Components (Method 1)

Source: https://help.jeecg.com/ui/component/FormBak

Example of registering a custom component globally using componentMap.set.

```javascript
componentMap.set('componentName', 组件);

// ComponentType
export type ComponentType = xxxx | 'componentName';
```

--------------------------------

### Standalone Usage Example

Source: https://help.jeecg.com/ui/component/JSelectDept

Example of using JSelectDept as a standalone component, including modal registration and event handling.

```html
<template>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
<DeptSelectModal rowKey="id" @register="registerSelModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
    import DeptSelectModalfrom '/@/components/Form/src/jeecg/components/modal/DeptSelectModal.vue'
     // 注册选择框
    const [registerSelModal, {openModal}] = useModal()
    let selectValues = reactive<Recordable>({
     //附值value
      value: [],
    });
    //下发 selectValues
    provide('selectValues', selectValues);
    // 打开选择框
    function openHandle() {
        openModal()；
    }
    // 选择确认事件
    function onSelectOk(selectRows, selectKeys) {
      //处理业务逻辑
   }
</script>


```

--------------------------------

### .env 基础配置

Source: https://help.jeecg.com/ui/setup/config

所有环境适用的基础配置项。

```dotenv
# 端口号  
VITE_PORT=3100  
# 网站标题  
VITE_GLOB_APP_TITLE=JeecgBoot企业级低代码平台  
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符  
VITE_GLOB_APP_SHORT_NAME=JeecgBootAdmin  
# 文件预览地址  
VITE_GLOB_ONLINE_VIEW_URL=http://fileview.jeecg.com/onlinePreview  
# 是否开启单点登录  
VITE_GLOB_APP_OPEN_SSO = false  
# 单点登录服务端地址  
VITE_GLOBE_APP_CAS_BASE_URL=http://cas.test.com:8443/cas  
# 开启微前端模式  
VITE_GLOB_APP_OPEN_QIANKUN=true  
```

--------------------------------

### JTreeDict Usage Example

Source: https://help.jeecg.com/ui/component/JTreeDict

Example of how to use the JTreeDict component in a form schema, including both synchronous and asynchronous loading.

```javascript
const schemas: FormSchema[] = [
    {
        field: 'JTreeDict',
        component: 'JTreeDict',
        label: 'JTreeDict',
    },
    {
        field: 'JTreeDictAsync',
        component: 'JTreeDict',
        label: '异步JTreeDict',
        componentProps: { async: true },
    },
]

```

--------------------------------

### JSelectMultiple Usage Example

Source: https://help.jeecg.com/ui/component/JSelectMultiple

Example of how to use JSelectMultiple in a form schema, demonstrating both dictionary code and custom options.

```javascript
const schemas: FormSchema[] = [
    {
        field: 'jsm',
        component: 'JSelectMultiple',
        label: '字典下拉多选',
        helpMessage: ['component模式'],
        componentProps: {
            dictCode: 'sex',
            triggerChange:true
        },
    },
    {
        field: 'jsm1',
        component: 'JSelectMultiple',
        label: '字典下拉多选',
        helpMessage: ['component模式'],
        componentProps: {
            options: [
                {label:'一年级',value:'1'},
                {label:'二年级',value:'2'},
                {label:'三年级',value:'3'}
            ]
        }
    }
]

```

--------------------------------

### Rank List Data Example

Source: https://help.jeecg.com/ui/2dev/customChart

Example data structure for the list parameter of the RankList component.

```json
[
    { "name": "北京朝阳 1 号店", "total": 1981 },
    { "name": "北京朝阳 2 号店", "total": 1359 },
    { "name": "北京朝阳 3 号店", "total": 1354 },
    { "name": "北京朝阳 4 号店", "total": 263 },
    { "name": "北京朝阳 5 号店", "total": 446 },
    { "name": "北京朝阳 6 号店", "total": 796 }
]
```

--------------------------------

### Gauge Chart Data Example

Source: https://help.jeecg.com/ui/2dev/customChart

Example data structure for the chartData parameter of the Gauge component.

```json
{
name:'出勤率',
value:70
}
```

--------------------------------

### Usage Example

Source: https://help.jeecg.com/ui/func_Loading

This code snippet demonstrates how to use the Loading component in a Vue.js template and script.

```vue
<template>
  <div class="p-5" ref="wrapEl" v-loading="loadingRef" loading-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>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import { Loading, useLoading } from '/@/components/Loading';
  export default defineComponent({
    components: { Loading },
    setup() {
      const [openFullLoading, closeFullLoading] = useLoading({
        tip: '加载中...',
      });

      const [openWrapLoading, closeWrapLoading] = useLoading({
        target: wrapEl,
        props: {
          tip: '加载中...',
          absolute: true,
        },
      });

      function openFnFullLoading() {
        openFullLoading();

        setTimeout(() => {
          closeFullLoading();
        }, 2000);
      }

      function openFnWrapLoading() {
        openWrapLoading();

        setTimeout(() => {
          closeWrapLoading();
        }, 2000);
      }

      return {
        openFnFullLoading,
        openFnWrapLoading,
        ...toRefs(compState),
      };
    },
  });
</script>
```

--------------------------------

### Radar Chart Data Example

Source: https://help.jeecg.com/ui/2dev/customChart

Example data structure for the chartData parameter of the Radar component.

```json
[
{ value: 75, name: '政治',type:'文综',max:100 },
{ value: 65, name: '历史',type:'文综',max:100 },
{ value: 55, name: '地理',type:'文综',max:100 },
{ value: 74, name: '化学',type:'文综',max:100 },
{ value: 38, name: '物理',type:'文综',max:100 },
{ value: 88, name: '生物',type:'文综',max:100 },
]
```

--------------------------------

### Usage

Source: https://help.jeecg.com/ui/component/button

Example of how to use the a-button component in a template.

```html
<template>
  <a-button color="success">成功按钮</a-button>
  <a-button color="error">错误按钮</a-button>
  <a-button color="warning">警告按钮</a-button>
</template>
```

--------------------------------

### Pie Chart Data Example

Source: https://help.jeecg.com/ui/2dev/customChart

Example data structure for the chartData parameter of the Pie component.

```json
[
    { "name": "一月", "value": 40 },
    { "name": "二月", "value": 21 },
    { "name": "三月", "value": 17 },
    { "name": "四月", "value": 13 },
    { "name": "五月", "value": 9 }
]
```
Tokens:
Raw