OpenDocs

https://github.com/yuchenhui/open-docs
Admin
Tokens:103,071
Snippets:411
Trust Score:5.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installing Avue in a New Project using Vue CLI

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/installation.md

These bash commands outline the process of setting up a new Vue project using Vue CLI and then installing Avue. It covers installing the CLI globally, creating a new project, opening the graphical UI, and adding Avue as a dependency through the UI.

```Bash
# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

# 在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。
```

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

### Importing and Registering Avue with ElementUI (npm/yarn)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/installation.md

This code snippet shows how to import ElementUI and Avue, along with their respective CSS files, and register them globally with Vue using `Vue.use()` after installing via npm or yarn. ElementUI is required as a dependency.

```JavaScript
//需要先安装ElementUI的依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI)
Vue.use(Avue);
```

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

### Including Avue and Dependencies via CDN

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/installation.md

This HTML snippet shows how to include Avue, ElementUI, and Vue directly in an HTML file using CDN links. It includes the necessary CSS and JavaScript files and demonstrates basic Vue initialization and registering Avue using the global `AVUE` variable.

```HTML
<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"
/>
<link 
  rel="stylesheet" 
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入相关JS 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>

<div id="app"></div>
<script>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el:'app',
    data(){
      return{}
    }
  });
  app.use(AVUE);
</script>
```

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

### Previewing Images with $ImagePreview (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/api.md

Illustrates how to use the `$ImagePreview` method to display a list of images for preview. It requires an array of image objects, each with `thumbUrl` and `url` properties, and an optional starting index. The example includes a `data` property defining the image list.

```JavaScript
data() {
  var link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
  return {
    datas: [
      { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
      { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
      { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
    ]
  }
}
this.$ImagePreview(this.datas, index);
```

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

### Starting Flowable Process Instance with Builder - Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/runtimeService.md

Starts a Flowable process instance using the createProcessInstanceBuilder() method for more customized initiation based on various criteria.

```java
// 自行组合api，不认识英文找个翻译或辞职
runtimeservice.createProcessInstanceBuilder()
        ...
        .start();
```

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

### Integrating Axios with Avue for Dictionary Usage

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/installation.md

This snippet demonstrates how to integrate Axios with Avue, which is necessary for dictionary functionality. It shows the modern way using `Vue.use(Avue, { axios })` and also mentions the older method of attaching axios to the global `window` object.

```JavaScript
import axios from 'axios'
Vue.use(Avue,{axios})

//老版本需要使用如下
//main.js
window.axios = axios
```

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

### Install Nutflow Workflow Dependencies using pnpm

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/lemon.md

Installs the required @nutflow scoped packages for the workflow plugin using the pnpm package manager. The -w flag likely indicates installation in the workspace root. This step requires the .npmrc configuration to be correct.

```sh
pnpm i @nutflow/nf-form-antdv @nutflow/nf-form-design-antdv @nutflow/nf-design-antdv -w
```

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

### Starting Flowable Process Instance by ID/Key - Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/runtimeService.md

Initiates a new process instance using the Flowable RuntimeService based on process definition ID, key, or other criteria. Requires setting the authenticated user ID before starting and clearing it afterward.

```java
// 启动前需指定流程发起人 - 必须
identityService.setAuthenticatedUserId(userId);
// 根据不同参数启动
runtimeservice.startProcessInstanceByXXX
// 清空flowable缓存
identityService.setAuthenticatedUserId(null);
```

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

### Querying Model Deployments using RepositoryService in Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/repositoryService.md

Illustrates the starting point for creating a query for model deployments using the RepositoryService. Users need to chain additional methods to filter and execute the query.

```Java
// 自行组合api，不认识英文找个翻译或参考常见api
repositoryService.createDeploymentQuery()
    ...
```

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

### Configuring Global Form Options (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/global.md

Shows an example of the object structure used for the `formOption` property in the global configuration. This object allows setting default properties for all Form components.

```javascript
{
  labelWidth:110,
  ....
}
```

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

### Configure .npmrc for Dependency Hoisting and Saber Registry

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/lemon.md

Adds patterns to prevent hoisting for specific dependencies and configures a private npm registry for @saber scoped packages, including a placeholder for an auth token. This is required for installing dependencies from the BladeX private registry.

```.npmrc
public-hoist-pattern[]=husky
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=lint-staged
public-hoist-pattern[]=*stylelint*
public-hoist-pattern[]=@commitlint/cli
public-hoist-pattern[]=@vben/eslint-config

//由于vite的限制，仅可通过软件包的形式依赖
//请前往git系统创建token并配置，便可以进行依赖安装
@saber:registry=https://center.javablade.com/api/packages/blade/npm/
//center.javablade.com/api/packages/blade/npm/:_authToken=xxxxxx
```

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

### Applying Global Configuration with Vue.use (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/global.md

Demonstrates the basic structure for applying global configuration when installing Avue with `Vue.use`. The object passed as the second argument contains various properties to customize default settings and integrate services.

```javascript
Vue.use(AVUE,{
  size:'',
  crudOption:{},
  formOption:{},
  tableSize:'',
  formSize:'',
  appendToBody:true,
  modalAppendToBody:true,
  cos:{},
  qiniu:{},
  ali:{},
  canvas:{}
});
```

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

### Downloading Files with downFile (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/api.md

Illustrates how to use the `downFile` method to download a file from a given URL. It takes the file URL and an optional desired filename as arguments. The example provides a sample image URL and filename.

```JavaScript
var url = "https://avuejs.com/images/logo-bg.jpg";
this.downFile(url,'logo.jpg');
```

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

### Configuring Global Crud Options (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/global.md

Shows an example of the object structure used for the `crudOption` property in the global configuration. This object allows setting default properties for all Crud components.

```javascript
{
  index:true,
  indexLabel:'序号',
  ....
}
```

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

### Avue Radio Component Script (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/component/radio.md

Provides the data model ('form') for the radio component's value and the configuration array ('dic') which specifies the label and value for each radio option.

```JavaScript
export default {
    data() {
      return {
        form:0,
        dic:[
          {
            label:'选项1',
            value:0
          },
          {
            label:'选项2',
            value:1
          }
        ]
      }
    }
}
```

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

### Publishing Package with npm (Shell)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Publishes the current package to the configured npm registry. This command makes the built package available for installation by others or other projects, typically used after building the package.

```sh
npm publish
```

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

### Integrating Avue with Axios for Uploads (JS)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-upload.md

Shows how to import Axios and configure Avue to use it for handling file uploads. This is a necessary setup step for the upload component to utilize Axios for HTTP requests.

```js
//使用上传附件需要引入axios
import axios from "axios";
Vue.use(Avue, { axios });
```

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

### Avue Radio Component Template (HTML)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/component/radio.md

Displays the Avue radio component within a basic layout, binding its value to the 'form' data property and using the 'dic' array to define the available options.

```HTML
<el-row :span="24">
  <el-col :span="6">
   值:{{form}}<br/>
   <avue-radio v-model="form"  :dic="dic"></avue-radio>
  </el-col>
</el-row>
```

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

### Deploying Model using RepositoryService in Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/repositoryService.md

Demonstrates how to create and execute a model deployment using the RepositoryService. It shows how to set the deployment name, key, add a BpmnModel, set category, and tenant ID before calling the deploy method.

```Java
repositoryService.createDeployment() // 创建部署
    .name(String name) // 名称
    .key(String key) // key
    .addBpmnModel(String resourceName, BpmnModel bpmnModel) // bpmn模型对象
    .category(String category) // 分类
    .tenantId(String tenantId) // 租户
    .deploy(); // 执行部署
```

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

### Get Chinese Zodiac Animal - JavaScript

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/calendar.md

Calculates the Chinese zodiac animal for a given year based on the 12-year cycle, starting the cycle reference from year 4.

```JavaScript
getAnimal(y) {
    return this.Animals[(y-4) % 12];
  }
```

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

### Querying Process Definitions using RepositoryService in Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/repositoryService.md

Shows how to initiate a query for process definitions using the RepositoryService. Users should add further criteria and execution methods to complete the query.

```Java
// 自行组合api，不认识英文找个翻译或参考常见api
repositoryService.createProcessDefinitionQuery()
    ...
```

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

### Using Avue CountUp Component in HTML/Vue Template

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/count-up.md

Demonstrates how to integrate the `avue-count-up` component into an HTML template within a Vue application. Shows examples with only an end value and with both start and end values specified, along with a basic script block.

```HTML
<div style="font-size:43px;font-weight:500;color:red;">
  <p><avue-count-up :end="15033.2"></avue-count-up></p>
  <p><avue-count-up :end="1233.2" :start="1000"></avue-count-up></p>
</div>
<script>
export default {
  
}
</script>
```

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

### Importing Aliyun OSS SDK for Upload HTML

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-upload.md

This HTML snippet shows the required script tag to import the Aliyun OSS SDK, which is necessary for enabling direct upload to Aliyun OSS from Avue Form. It should be placed in the `<head>` tag of your `index.html`.

```html
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/ali-oss/6.10.0/aliyun-oss-sdk.min.js"></script>
```

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

### Add Nutflow Registry to .npmrc

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/lemon.md

Configures a private npm registry for @nutflow scoped packages, pointing to the workflow plugin private server. It includes a placeholder {TOKEN} which must be replaced with the generated plugin private server token to allow dependency installation.

```.npmrc
@nutflow:registry=https://git.nutflow.vip/api/packages/blade-workflow/npm/
//git.nutflow.vip/api/packages/blade-workflow/npm/:_authToken={TOKEN}
```

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

### Basic Usage Avue Tree Vue

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/tree.md

Demonstrates the basic usage of the Avue Tree component, binding data and options, and handling node click and context menu events. Includes initial data structure and component configuration.

```vue
{{form}}\
<avue-tree  ref=\"tree\" :option=\"option\" :data=\"data\"  v-model=\"form\" @node-click=\"nodeClick\"  @node-contextmenu=\"nodeContextmenu\">\
</avue-tree>\
<script>\
export default {\
    data () {\
      return {\
          form:{},\
          data:[\
            {\
              value:0,\
              label:'一级部门',\
              children:[\
                {\
                  value:1,\
                  label:'一级部门1',\
                },{\
                  value:2,\
                  label:'一级部门2',\
                }\
              ]\
            },{\
              value:3,\
              label:'二级部门',\
              children:[\
                {\
                  value:4,\
                  label:'二级部门1',\
                },{\
                  value:5,\
                  label:'二级部门2',\
                }\
              ]\
            }\
          ],\
          option:{\
            defaultExpandAll:true,\
            formOption:{\
              labelWidth:100,\
              column:[{\
                  label:'自定义项',\
                  prop:'label'\
              },{\
                label:'测试',\
                prop:'test'\
              }],\
            }\
          }\
      }\
  },\
  mounted(){\
    this.$refs.tree.setCurrentKey(0)\
  },\
  methods:{\
    nodeContextmenu (data, node, comp) {\
      this.$message.success(JSON.stringify(data))\
    },\
    nodeClick(data){\
      this.$message.success(JSON.stringify(data))\
    }\
  }\
}\
</script>
```

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

### Define Workflow Static Routes in basic.ts

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/lemon.md

Defines a static route object WORKFLOW for the /workflow path and its child routes. These routes point to specific Vue components within the /src/views/plugin/workflow directory, providing navigation for the workflow plugin's pages like design, history, start, and detail views. This object needs to be added to the application's route configuration.

```js
export const WORKFLOW: AppRouteRecordRaw = {
  path: "/workflow",
  name: "workflow",
  component: LAYOUT,
  code: "workflow",
  meta: {
    title: "工作流程",
    hideBreadcrumb: true,
  },
  children: [    {
      path: "design/process/:id",
      name: "design",
      code: "design",
      meta: {
        title: "模型设计2",
        hideBreadcrumb: true,
      },
      component: () =>\n        import("/\@/views/plugin/workflow/pages/design/index.vue"),
    },
    {
      path: "design/model/history/:id",
      name: "designModelHistory",
      code: "designModelHistory",
      meta: {
        title: "模型历史",
        hideBreadcrumb: true,
      },
      component: () =>\n        import("/\@/views/plugin/workflow/pages/design/model-history.vue"),
    },
    {
      path: "design/form/history/:id",
      name: "designFormHistory",
      code: "designFormHistory",
      meta: {
        title: "表单历史",
        hideBreadcrumb: true,
      },
      component: () =>\n        import("/\@/views/plugin/workflow/pages/design/form-history.vue"),
    },
    {
      path: "process/start/:params",
      name: "processStart",
      code: "processStart",
      meta: {
        title: "新建流程2",
        hideBreadcrumb: true,
      },
      component: () =>\n        import("/\@/views/plugin/workflow/pages/process/form/start.vue"),
    },
    {
      path: "process/detail/:params",
      name: "processDetail",
      code: "processDetail",
      meta: {
        title: "流程详情",
        hideBreadcrumb: true,
      },
      component: () =>\n        import("/\@/views/plugin/workflow/pages/process/form/detail.vue"),
    }
  ]
}
```

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

### Avue Skeleton Component Usage Examples (HTML/Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/skeleton.md

Demonstrates various configurations of the Avue Skeleton component, including basic usage, block layout, avatar inclusion, setting custom row counts, displaying multiple list items, and dynamically toggling the skeleton based on a loading state using an Element UI switch and Vue data property.

```HTML
最简单的占位效果。
<avue-skeleton></avue-skeleton>
<br />
最后一行占满的效果
<avue-skeleton block></avue-skeleton>
<br />
带头像的效果
<avue-skeleton avatar></avue-skeleton>
<br />
自定义行数的效果
<avue-skeleton avatar :rows="5"></avue-skeleton>
<br />
自定义列表的效果
<avue-skeleton avatar :rows="4" :number="3"></avue-skeleton>
<br />
动态切换效果
<el-switch :active-value="false" :inactive-value="true" v-model="loading" active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
<avue-skeleton :loading="loading">
  <span>加载的内容</span>
</avue-skeleton>
<script>
export default {
  data(){
    return {
      loading:true,
    }
  }
}
</script>
```

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

### Implementing Basic Row Editing with Avue CRUD (Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/crud/cell.md

This snippet demonstrates the basic setup for enabling row editing in the Avue CRUD component. It shows how to configure the `option` prop to enable row adding (`addRowBtn`), row editing buttons (`cellBtn`), and mark columns as editable (`cell: true`). It also includes example data with `$cellEdit` for initial editing and methods for handling row save (`@row-save`) and update (`@row-update`) events.

```Vue
<avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate" @row-save="rowSave"  ></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
          {
            id:0,
            sex:1,
            age:18,
            $cellEdit:true
          },
          {
            id:1,
            name:'李四',
            age:18,
            sex:0,
          }
       ],
       option:{
        addBtn:false,
        addRowBtn:true,
        cellBtn:true,
        menuWidth:250,
        column: [
          {
            label:'姓名',
            prop: 'name',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
          },
          {
            label:'性别',
            prop: 'sex',
            type:'select',
            dicData:[
              {
                label:'男',
                value:0
              },
              {
                label:'女',
                value:1
              }
            ],
            cell: true
          },
          {
            label:'年龄',
            prop: 'age',
            slot:true,
            formslot:true,
            dicData:[
              {
                label:'男',
                value:0
              },
              {
                label:'女',
                value:1
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入年龄',
                trigger: 'blur'
              }
            ],
            cell: true
          },
          {
            label:'开关',
            prop: 'switch',
            type:'switch',
            cell: true
          }
        ]
      }
    }
  },
  methods:{
    rowSave(form, done) {
        this.$message.success(
          '新增数据' + JSON.stringify(form)
        )
        done()
     },
    addUpdate(form,index,done,loading){
      this.$message.success('模拟网络请求')
      setTimeout(() => {
        this.$message.success('关闭按钮等待')
        loading()
      }, 1000)
      setTimeout(() => {
        this.$message.success(
          '编辑数据' + JSON.stringify(form) + '数据序号' + index
        )
        done()
      }, 2000)
    }
  }
}
</script>
```

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

### Configuring Global Ali Cloud Storage (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/global.md

Details the structure and required properties for configuring Ali cloud storage integration via the `ali` property in the global Avue settings.

```javascript
{
  region: '',
  endpoint: '',
  accessKeyId: '',
  accessKeySecret: '',
  bucket: ''
}
```

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

### Install Dependencies (Saber <= 4.2.x) - npm

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Install the required workflow form, form design, design, and echarts dependencies using npm for Saber versions 4.2.x and below.

```sh
npm i @nutflow/nf-form-elp @nutflow/nf-form-design-elp @nutflow/nf-design-elp echarts
```

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

### Global Configuration for Aliyun OSS Upload JS

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-upload.md

This JavaScript snippet shows how to configure Aliyun OSS parameters globally when initializing Avue. This configuration is required for the upload component to interact with Aliyun OSS.

```js
//入口处全局配置阿里云的参数
Vue.use(AVUE, {
  ali: {
    region: "oss-cn-beijing",
    endpoint: "oss-cn-beijing.aliyuncs.com",
    stsToken: "",
    accessKeyId: "",
    accessKeySecret: "",
    bucket: "avue"
  }
});
```

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

### Installing and Removing Package with Yarn (Shell)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Adds the custom package @somename/nf-form-elp as a dependency using Yarn. Optionally, it shows how to remove the original @nutflow/nf-form-elp dependency if it was previously installed.

```sh
yarn add @somename/nf-form-elp

# 可选，删除原有依赖
yarn remove @nutflow/nf-form-elp
```

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

### Install Dependencies (Saber >= 4.3) - npm

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Install the required workflow design and echarts dependencies using npm for Saber versions 4.3 and above. nf-form and nf-form-design are included in Saber3.

```sh
npm i @nutflow/nf-design-elp echarts
```

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

### Exporting Data to Excel with $Export (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/api.md

Shows how to use the `$Export.excel` method to export data to an Excel file. It requires an options object specifying the file title, column definitions (label and prop), and the data array to be exported. The example defines the options object and then calls the export method.

```JavaScript
let opt = {
  title: '文档标题',
  column: [{
    label: '标题',
    prop: 'title'
  }],
  data: [{
    title: "测试数据1"
  }, {
    title: "测试数据2"
  }]
}
this.$Export.excel({
  title: opt.title || new Date().getTime(),
  columns: opt.column,
  data: opt.data
});
```

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

### Install Dependencies (Saber >= 4.3) - Yarn

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Install the required workflow design and echarts dependencies using Yarn for Saber versions 4.3 and above. nf-form and nf-form-design are included in Saber3.

```sh
yarn add @nutflow/nf-design-elp echarts
```

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

### Getting Flowable Process Variables - Java

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/flowable/runtimeService.md

Retrieves variables associated with a running Flowable process instance. Provides methods to get all variables as a map or a specific variable by name, optionally casting it to a specific class.

```java
// 获取实例流程中全部变量
Map<String, Object> variables = runtimeservice.getVariables(String processInsId);

// 获取流程实例中某个变量
Object variable = runtimeservice.getVariable(String processInsId, String variableName);
T variable = runtimeservice.getVariable(String processInsId, String variableName, Class<T> variableClass);
```

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

### Importing AMap Core API and Plugin (HTML)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/component/input-map.md

Includes the main Gaode Maps JavaScript API script from the official CDN. It specifies the API version, your unique API key, and necessary plugins like `AMap.PlaceSearch` for location searching.

```HTML
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=xxxxxxxx&plugin=AMap.PlaceSearch'></script>
```

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

### Installing and Uninstalling Package with npm (Shell)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Installs the custom package @somename/nf-form-elp as a dependency using npm. Optionally, it shows how to uninstall the original @nutflow/nf-form-elp dependency using npm uni (or npm uninstall).

```sh
npm i @somename/nf-form-elp

# 可选，删除原有依赖
npm uni @nutflow/nf-form-elp
```

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

### Configuring Avue Form Label Position (Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-layout.md

This snippet demonstrates how to set the position of form labels in an Avue Form component using the `labelPosition` option. The default position is 'left', but this example sets it to 'top'.

```vue
<avue-form :option="option"></avue-form>
<script>
export default {
    data() {
      return {
        option:{
          labelPosition:'top',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      }
    }
}
</script>
```

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

### Displaying a Dialog Form with $DialogForm (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/api.md

Demonstrates how to use the `$DialogForm.show` method to display a modal form. It configures the dialog title, width, menu position, form options (submit text, layout, columns with validation), and defines `beforeClose` and `callback` functions to handle dialog lifecycle events and form submission results.

```JavaScript
this.$DialogForm.show({
  title: '弹窗页面',
  width: '30%',
  menuPosition:'right',
  option:{
    submitText: '完成',
    span:24,
    column: [{
      label: "姓名",
      prop: "name",
      rules: [{
        required: true,
        message: "请输入姓名",
        trigger: "blur"
      }],
    }]
  },
  beforeClose: (done) => {
    this.$message.success('关闭前方法')
    done()
  },
  callback:(res)=>{
    console.log(res.data);
    this.$message.success('关闭等待框')
    setTimeout(() => {
      res.done()
      setTimeout(() => {
        this.$message.success('关闭弹窗')
        res.close()
      }, 1000)
    }, 1000)
  }
})
```

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

### Adding Label Tooltips in Avue Form (Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-layout.md

This example shows how to add tooltip text (`labelTip`) next to form labels in an Avue Form. The tooltip's placement can be controlled using `labelTipPlacement`, which defaults to 'bottom'.

```vue
<avue-form :option="option" ></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [
            {
              label: '内容1',
              prop: 'text1',
              labelTip:'我是一个标题提示语'
            },
            {
              label: '内容2',
              prop: 'text2',
              labelTip:'我是一个标题提示语',
              labelTipPlacement:'right'
            }
          ]
       }
    }
  }
}
</script>
```

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

### Copying Text to Clipboard with $Clipboard (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/api.md

Shows how to use the `$Clipboard` method to copy a specified text string to the user's clipboard. It includes `.then` and `.catch` handlers to provide feedback on the success or failure of the copy operation using `$message`.

```JavaScript
this.$Clipboard({
  text: '复制的文本内容'
}).then(() => {
  this.$message.success('复制成功')
}).catch(() => {
  this.$message.error('复制失败')
});
```

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

### Using avue-login Component in HTML Template

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/login.md

This HTML snippet shows the basic structure for integrating the avue-login component. It includes five instances, each configured with a different option prop (option, option1, option2, option3, option4) to represent different login scenarios (standard, image captcha, phone, custom fields, custom layout). It also binds event listeners like @submit, @refresh, and @send to corresponding methods.

```html
<div>
  <h2>普通用户登录</h2>
  <avue-login :option="option" @submit="submit">
  </avue-login>
  <hr />
  <h2>图片验证码登录</h2>
  <avue-login :option="option1" @refresh="refresh" :codesrc="codesrc" @submit="submit">
  </avue-login>
  <hr />
  <h2>手机号登录</h2>
  <avue-login :option="option2" @submit="submit" @send="send" v-model="form">
  </avue-login>
  <hr />
  <h2>改变字段</h2>
  <avue-login :option="option4" @submit="submit" @send="send">
  </avue-login>
  <hr />
  <h2>调整边距</h2>
  <avue-login :option="option3" @submit="submit" @send="send">
  </avue-login>
</div>
```

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

### Install Dependencies (Saber <= 4.2.x) - Yarn (Specific Versions)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Install specific versions (e.g., 1.2) of the required workflow form, form design, design, and echarts dependencies using Yarn for Saber versions 4.2.x and below.

```sh
yarn add @nutflow/nf-form-elp@1.2 @nutflow/nf-form-design-elp@1.2 @nutflow/nf-design-elp@1.2 echarts
```

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

### Configuring Global Qiniu Cloud Storage (JavaScript)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/docs/global.md

Details the structure and required properties for configuring Qiniu cloud storage integration via the `qiniu` property in the global Avue settings.

```javascript
{
  AK: '',
  SK: '',
  scope: '',
  url: '',
  deadline: 1
}
```

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

### Avue Form Custom Render Function - JavaScript

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-slot.md

Example of a custom render function within an Avue form column, demonstrating how to use Vue's `h` function to create custom HTML elements with attributes, classes, and styles dynamically.

```JavaScript
(h, params) => {
  return h('h2', {
    attrs: { id: 'box' },
    class: { 'demo': true },
    style: { color: 'pink', lineHeight: '30px' }
  }, 'Hello World Avue')
}
```

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

### Basic Usage of Avue Card Component (Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/card.md

This snippet demonstrates the fundamental implementation of the `avue-card` component. It shows how to bind configuration options (`option`) and data (`data`), handle `row-click` and `row-add` events, and customize the card's menu area using a scoped slot. The accompanying script defines the component's data properties and a simple method for handling events.

```Vue
<avue-card :option="option" :data="data" @row-click="tip" @row-add="tip">
  <template slot="menu" slot-scope="scope">
    <span @click.stop="tip(scope.row,scope.index)">操作1</span>
    <span @click.stop="tip(scope.row,scope.index)">操作2</span>
  </template>
</avue-card>
<script>
export default {
  data() {
    return {
      option: {
        // addBtn:false,
        props: {
          img: 'img',
          title: 'title',
          info: 'text',
        }
      },
      data: [{
        title: 'Alipay',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
      }, {
        title: 'Angular',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png'
      }, {
        title: 'Ant Design',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png'
      }, {
        title: 'Ant Design Pro',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'
      }, {
        title: 'Bootstrap',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
      }, {
        title: 'React',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png'
      }, {
        title: 'Vue',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png'
      }, {
        title: 'Webpack',
        text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png'
      }]
    }
  },
  methods: {
    tip(row, index) {
      this.$message.success('查看控制台')
      console.log(row, index)
    }
  }
}
</script>
```

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

### Install Dependencies (Saber <= 4.2.x, Vite < 5) - Yarn

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/saber3.md

Install the required workflow form, form design, design, and echarts dependencies using Yarn for Saber versions 4.2.x and below, specifically for projects using Vite versions less than 5.

```sh
yarn add @nutflow/nf-form-elp @nutflow/nf-form-design-elp @nutflow/nf-design-elp echarts
```

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

### Importing highlight.js CSS and Script HTML

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/default/code.md

Includes the necessary CSS stylesheet and JavaScript library for highlight.js from a CDN. These tags should be placed within the <head> section of the index.html file to enable syntax highlighting.

```HTML
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
```

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

### Controlling Avue Form Detail/Edit Mode (Vue)

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/form-layout.md

This example demonstrates using the `detail` option in Avue Form to switch between detail (read-only) and edit modes. A button is included to toggle the `detail` property, changing the form's behavior and a computed property's value.

```vue
<el-button @click="handle" style="margin-left: 20px">{{title}}</el-button>
<br /><br />
<avue-form  :option="option" v-model="obj" @submit="submit"></avue-form>
<script>
export default {
    computed: {
      title() {
        return this.option.detail ? '编 辑' : '保 存'
      }
    },
    data() {
      return {
        type: 0,
        obj: {},
        option: {
          detail:true,
          labelWidth:110,
          group: [
            {
              label: '用户信息',
              prop: 'jbxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '姓名',
                  prop: 'name',
                  rules: [
                    {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '性别',
                  prop: 'sex',
                }
              ]
            }, {
              label: '退款申请',
              prop: 'tksq',
              icon: 'el-icon-view',
              column: [
                {
                  label: '省份',
                  span:24,
                  prop: 'province',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
                  rules: [
                    {
                      required: true,
                      message: '请选择省份',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '多选',
                  prop: 'checkbox',
                  type: 'checkbox',
                  all:true,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  span: 24,
                  dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
                }
              ]
            }, {
              label: '用户信息',
              prop: 'yhxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '测试长度',
                  prop: 'len',
                  value:3,
                  maxlength: 5,
                }, {
                  label: '测试自定义',
                  prop: 'lens',
                  value:3,
                  formslot: true
                }
              ]
            }
          ]
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.obj = {
          name: 'small',
          province: '110000',
          checkbox: ['110000']
        }
      }, 100)
    },
    methods: {
      handle() {
       this.option.detail=!this.option.detail
      },
      submit() {
        this.$message.success(JSON.stringify(this.obj))
      }
    }
}
</script>
```

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

### Configuring easycom for uView and wf-ui in pages.json (JSON)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/rider.md

Configures the `easycom` feature in `pages.json` to automatically import components based on their tag names. It sets up rules for components prefixed with `u-` (from uView) and `wf-` (from wf-ui).

```json
"easycom": {
  "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
  "^wf-(.*)": "@/components/wf-ui/components/wf-$1/wf-$1.vue"
},
```

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

### Passing Additional Parameters in Avue Form dicUrl - Vue

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/form/cascader-item.md

This example shows how to include other form field values as parameters when fetching data for a dependent select field via `dicUrl`. It adds a 'params' field and includes its value in the `dicUrl` for the 'city' field using the `{{params}}` placeholder.

```Vue
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data(){
    return {
       form:{
          province: '110000',
          city: '110100',
          params: 'test'
       },
       option:{
          column: [{
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: `${baseUrl}/getProvince`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label:'参数',
            prop:'params'
          },
          {
            label: '城市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/{{key}}?params={{params}}`,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          }]
       }
    }
  }
}
<\/script>
```

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

### Defining Data for Avue Input Color in Vue Component

Source: https://github.com/yuchenhui/open-docs/blob/main/v2.avuejs.com/component/input-color.md

This JavaScript snippet defines the initial data properties (`form`, `form1`) within a Vue component's `data` function. These properties are used to bind the values of the `avue-input-color` components shown in the template, initializing them with example RGBA and HEX values.

```JavaScript
export default {
    data() {
      return {
        form:'rgba(255, 120, 0, 1)',
        form1:'#AE4141'
      }
    }
}
```

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

### Adding Flowable Dependency (BladeX 3)

Source: https://github.com/yuchenhui/open-docs/blob/main/nutflow/integration/boot.md

Add the `flowable-spring-boot-starter` dependency with version 6.7.2 to your `pom.xml` for BladeX 3.x projects. This replaces the removed default dependency or updates the version for older BladeX versions.

```xml
<!-- 工作流 -->
<dependency>
  <groupId>org.flowable</groupId>
  <artifactId>flowable-spring-boot-starter</artifactId>
  <version>6.7.2</version>
</dependency>
```
Tokens:
Raw