输入组件

TIP

所有输入组件推荐以尽量原生的语法去使用，vue 的组件写法已经足够简明方便，不推荐 JSON 定义后渲染、不推荐 <FormItem type="输入组件名" /> 等。

AI AGENTS 时代所有的封装都是多余的，现在我们无需再为了方便徒增：学习、易读性损失 等成本，要怎么改告诉 AI 就行了，它不会就给它参考。

不过，我们还是保留了 <AgInput type="输入组件名" /> 这种渲染能力，实现于 src/components/agInput/index.vue，只推荐在动态表单场景使用。

除了 element plus 提供的各种输入组件外，ai-go-admin 还内置了以下必要输入组件； 框架封装的输入组件，都放在了 src\components\agInput\components 目录内。

数组组件

实现了左右两个输入框，单维数组的 KV 输入模式，需要一行更多输入框的，请自行封装组件。

属性

属性名	说明	类型	默认值
keyTitle	键名标题	`string`	键名
valueTitle	键值标题	`string`	键值
model-value / v-model	绑定值	`array`	—

使用示例

vue

<template>
    <div>
        <el-form-item label="数组" prop="array">
            <ArrayInput v-model="state.array" />
        </el-form-item>

        <el-form-item label="数组" prop="array">
            <ArrayInput v-model="state.array" key-title="名称" value-title="位置" />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import ArrayInput from '@/components/agInput/components/array.vue'

const state = reactive({
    array: [],
})
</script>

上传组件

上传组件内部是使用 @/api/common 内的 upload 请求函数完成上传请求的。

属性

属性名	说明	类型	默认值
type	类型	`image/images/file/files`	`image`
topic	业务分类，透传到上传接口 topic	`string`	`default`
driver	存储驱动，透传到上传接口 driver	`string`	`local`
returnFullURL	上传成功返回文件绝对路径	`boolean`	`false`
forceLocal	是否强制上传到本地存储	`boolean`	`false`
model-value / v-model	绑定值	`string/string[]/null`	—
hideImagePlusOnOverLimit	在上传数量达到限制时隐藏图片上传按钮	`boolean`	`false`

插槽/事件

同 el-upload，文档链接

使用示例

vue

<template>
    <div>
        <el-form-item label="图片上传" prop="image">
            <AgUpload type="image" v-model="state.image" />
        </el-form-item>

        <el-form-item label="图片上传多选" prop="images">
            <AgUpload type="images" v-model="state.images" @change="onImageChange" @success="onImageSuccess" />
        </el-form-item>

        <el-form-item label="文件多选" prop="files">
            <AgUpload type="files" v-model="state.files" :limit="3" />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import AgUpload from '@/components/agInput/components/agUpload.vue'
import { UploadFile, UploadFiles } from 'element-plus'

const state = reactive({
    image: '',
    images: [],
    files: ['a/b.txt', 'b/c.xls'],
})

const onImageChange = (uploadFile: UploadFile) => {
    console.log(uploadFile)
}

const onImageSuccess = (res: ApiResponse, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log(res)
}
</script>

富文本编辑器

系统实现了多富文本编辑器共存。
所有编辑器的代码位于 src/components/agInput/components/editor 文件夹，一个文件为一种编辑器，文件名则为编辑器名称。
目前已经实现了 md editor v3 编辑器，源码开源，可自行下载后放到以上文件夹内使用：https://gitee.com/ai-go-hub/ai-go-plugin

公共属性

属性名	说明	类型	默认值
editorType	编辑器类型（名称）	`string`	未安装任何编辑器取 `default`，安装后取第一个编辑器
model-value / v-model	绑定值	`string`	—

注意事项

每个编辑器拥有的属性是不尽相同的，请直接参考 src/components/agInput/components/editor 中的对应编辑器的 props 定义

使用示例

vue

<template>
    <div>
        <!-- 额外定义了按下 Ctrl + Enter 快键键时提交表单 -->
        <el-form-item label="富文本编辑器" prop="editor">
            <Editor v-model="state.editor" @keyup.enter.stop="" @keyup.ctrl.enter="manager.submitForm(formRef)" />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import Editor from '@/components/agInput/components/editor.vue'
import type { FormItemRule } from 'element-plus'
import { buildValidatorRule } from '@/utils/validate'

const state = reactive({
    editor: [],
})

const rules: Partial<Record<string, FormItemRule[]>> = {
    editor: [buildValidatorRule({ name: 'richTextRequired', title: '富文本必填' })],
}
</script>

图标选择器

属性

属性名	说明	类型	默认值
size	选择器自带输入框的大小	`default/small/large`	`default`
disabled	是否禁用	`boolean`	`false`
title	选择面板标题	`string`	`请选择图标`
type	要选择的图标类型（默认值）	`ele/lucide`	`ele`
placement	选择面板打开的方向	`top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end`	`bottom`
showIconName	是否显示图标名称	`boolean`	`false`
model-value / v-model	绑定值，当前选择的图标名称	`string`	—

事件

事件名	说明	类型
change	选择图标	`(value: string) => void`

使用示例

vue

<template>
    <div>
        <el-form-item label="图标" prop="icon">
            <IconSelect v-model="state.icon" />
        </el-form-item>

        <el-form-item label="图标" prop="icon">
            <IconSelect v-model="state.icon" :show-icon-name="true" @change="onIconChange" />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import IconSelect from '@/components/agInput/components/iconSelect.vue'

const state = reactive({
    icon: '',
})

const onIconChange = (val: string) => {
    console.log(val)
}
</script>

远程下拉组件

属性

属性名	说明	类型	默认值
pk	下拉 `value` 字段	`string`	`id`
field	下拉 `label` 字段	`string`	`name`
remoteUrl	数据接口URL，一般是后台功能的 `list` 接口	`string`	—
remoteParams	请求下拉数据额外发送的参数	`AnyObj`	`{}`
remoteSearchFields	筛选下拉数据时的快速搜索字段名	`string[]`	`[]`
labelFormatter	渲染 `label` 前通过此函数格式化	`(optionData: AnyObj, optionKey: string) => string`	—
tooltipParams	鼠标放置于选项上时，显示选项的更多字段信息而不只是 `label`	`AnyObj`	`{}`
model-value / v-model	绑定值	`string/number/string[]/number[]`	—
escBlur	按下 `ESC` 键时直接使下拉框脱焦而不只是关闭选择面板	`boolean`	`true`
disabled	是否禁用	`boolean`	`false`
pagination	是否显示分页组件	`boolean`	`true`

远程下拉组件基于 el-select，所以它的大部分属性/事件也可以使用。

事件

事件名	说明	类型
`row`	选项改变时，返回被选项的整行数据	`(val: any) => void`

属性详细解释

v-model

双向绑定值，支持 number | number[] | string | string[] 等多种类型，当 multiple 为 true 时，才应传递数组，推荐使用 number | number[]。

remoteUrl

远程下拉要请求的数据接口URL，组件将通过此接口获取数据，接口请至少返回 pk 和 field 字段。
只要数据表生成过CRUD代码，它就会拥有控制器，远程下拉可直接使用控制器的数据列表（ list ）URL，比如 admin 表对应的控制器查看URL为 /admin/auth/admin/list

pk

远程下拉组件的 value 字段，通常直接使用数据源表的主键字段，如 id。

field

作为 select 选项的 label 字段，只需确保此字段在数据表内存在即可。

tooltipParams

假设选项 label 为 name，则用户只可以看到 name 这一个字段的值供选择
此属性的存在解决以上问题，请想象您将鼠标置入一个选项之上时，旁边出现一个面板，面板上显示了该选项的 id、mobile、nickname 等属性
它使用一个 object 配置要显示的字段的键值对，值为字段标题，键为字段名，请确保字段在数据表内存在，详见下方示例。

使用示例

vue

<template>
    <div>
        <el-form-item label="远程下拉" prop="remote_select">
            <RemoteSelect
                v-model="state.remoteSelect"
                pk="id"
                field="username"
                remote-url="/admin/auth/admin/list"
                :remote-search-fields="['title', 'name', 'path']"
                @row="onRemoteSelectRow"
                @change="onRemoteChange"
                :empty-values="[null, 0]"
                :value-on-clear="0"
            />
        </el-form-item>

        <el-form-item label="远程下拉多选" prop="remote_selects">
            <RemoteSelect
                pk="id"
                field="username"
                remote-url="/admin/auth/admin/list"
                v-model="state.remoteSelects"
                :multiple="true"
                @row="onRemoteSelectRow"
                @change="onRemoteChange"
                :tooltip-params="{
                    nickname: '联系人昵称',
                    address: '交易地址',
                    phone: '联系人电话',
                }"
            />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import RemoteSelect from '@/components/agInput/components/remoteSelect.vue'

const state = reactive({
    remoteSelect: 0,
    remoteSelects: [0],
})

const onRemoteSelectRow = (rowData: any) => {
    console.log(rowData)
}

const onRemoteChange = () => {
    console.log('onRemoteChange')
}
</script>

省份城市选择器

TIP

省份城市数据很多，框架并不内置，请从此开源仓库下载后导入：https://gitee.com/ai-go-hub/ai-go-plugin

属性

属性名	说明	类型	默认值
level	层级	`number`	`3`
placeholder	占位文本	`string`	-

`level` 属性详细解释

选择层级值，即：

1=省份 仅能选择省份
2=城市 可同时选择省份和城市
3=区域 可同时选择省份、城市、区域

使用示例

vue

<template>
    <div>
        <el-form-item label="省份城市选择" prop="area">
            <AreaSelect class="w100" v-model="state.city1" :level="3" />
        </el-form-item>

        <!-- 仅省份的选择器 -->
        <el-form-item label="省份城市选择" prop="area">
            <AreaSelect class="w100" v-model="state.city2" :level="1" />
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import AreaSelect from '@/components/agInput/components/areaSelect.vue'

const state = reactive({
    city1: [],
    city2: [],
})
</script>

输入组件 ​

数组组件 ​

属性 ​

使用示例 ​

上传组件 ​

属性 ​

插槽/事件 ​

使用示例 ​

富文本编辑器 ​

公共属性 ​

注意事项 ​

使用示例 ​

图标选择器 ​

属性 ​

事件 ​

使用示例 ​

远程下拉组件 ​

属性 ​

事件 ​

属性详细解释 ​

v-model ​

remoteUrl ​

pk ​

field ​

tooltipParams ​

使用示例 ​

省份城市选择器 ​

属性 ​

level 属性详细解释 ​

使用示例 ​

输入组件

数组组件

属性

使用示例

上传组件

属性

插槽/事件

使用示例

富文本编辑器

公共属性

注意事项

使用示例

图标选择器

属性

事件

使用示例

远程下拉组件

属性

事件

属性详细解释

v-model

remoteUrl

pk

field

tooltipParams

使用示例

省份城市选择器

属性

`level` 属性详细解释

使用示例