Skip to content

F
factory_front
Commit 14e699f1 by linjinhong
Options

添加组件说明文档

parent 2e812739
Showing with 408 additions and 50 deletions
src/components/docx/CustomizeForm.md 0 → 100644
# CustomizeForm(待优化)
## CustomizeForm 属性 (Props)
| 参数 | 说明 | 类型 | 默认值 | 必填 |
| :-----------: | :--------------------------------------------: | :---------------------------: | :-------: | :--: |
| config | 表单配置项 | IFormConfig[] | [] | ✓ |
| modelValue | 表单数据对象 | Record<string, unknown> | {} | ✕ |
| labelWidth | 表单标签宽度 | string \|number | 100 | ✕ |
| formItemWidth | 表单项宽度 | string \|number | 50% | ✕ |
| size | 组件尺寸 | 'large'\| 'default'\| 'small' | 'default' | ✕ |
| inline | 是否行内布局 | boolean | false | ✕ |
| labelPosition | 标签位置 | 'left'\| 'right'\| 'top' | 'right' | ✕ |
| ... | 其余属性与 element-plus 文档中 form Props 相同 | ... | ... | ... |
- **CustomizeForm 说明**:
- CustomizeForm 属性 (Props) 可自行添加，添加属性与 element-plus 文档中 form Props 相同
- 可参考文件 src\views\logistics\logisticsMethod.vue
---
### IFormConfig 配置项
| 属性 | 说明 | 类型 | 默认值 |
| :-----------: | :------------------------------------------------------: | :-----------------------------------: | :----: |
| prop | 表单字段名 | string | - |
| label | 表单标签 | string | - |
| title | 分组标题 | string | - |
| type | 控件类型 | string | - |
| attrs | 控件属性配置 | SimpleFormData | - |
| rules | 验证规则 | FormItemRule\| FormItemRule[] | - |
| render | 自定义渲染函数 | () => VNode \| VNode[] \| JSX.Element | - |
| btn | 操作按钮 | JSX.Element \|(() => JSX.Element) | - |
| isIncludeProp | 是否包含在 prop 属性中， 需搭配 refashConfig（）方法使用 | boolean | - |
| fixed | 固定位置 | string | - |
- 可参考文件 src\views\logistics\declarationRule.vue
---
### 控件类型 (SimpleFormData)
| 类型值 | 对应组件 | 说明 |
| :-------------: | :-------------: | :------------: |
| input | ElInput | 普通输入框 |
| amountInput | AmountInput | 金额输入框 |
| dateRangePicker | DateRangePicker | 日期范围选择器 |
| datePicker | DatePicker | 日期选择器 |
| select | Select | 下拉选择框 |
| switch | Switch | 开关组件 |
- form 表格如需动态渲染则需要传入计算属性 config
```tsx **config 示例**
const config = [
//含有title属性的对象独占一行，目前最好只做标题使用，也可以用render自定义内容但是可能有bug待优化
{
title: '个人信息',
},
{
prop: 'name',
label: '姓名',
type: 'input',
attrs: {
placeholder: '请输入姓名',
clearable: true,
},
rules: { required: true, message: '姓名不能为空' },
},
{
prop: 'birthday',
label: '出生日期',
type: 'datePicker',
attrs: {
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
placeholder: '选择出生日期',
},
},
{
prop: 'gender',
label: '性别',
type: 'select',
attrs: {
options: [
{ label: '男', value: 1 },
{ label: '女', value: 2 },
{ label: '其他', value: 3 },
],
},
},
{
title: '联系信息',
},
{
prop: 'salary',
label: '期望薪资',
type: 'amountInput',
attrs: {
min: 0,
max: 100000,
precision: 0,
step: 1000,
controlsPosition: 'right',
//appendRender： amountInput组件插槽用法，需注意不可以直接使用v-model绑定
appendRender: () => {
return h(
ElSelect,
{
modelValue: editForm.value['unit'],
'onUpdate:modelValue': (val) => (editForm.value['unit'] = val),
disabled: editForm.value['id'] ? true : false,
placeholder: 'Select',
style: { width: '115px' },
},
() => [
h(ElOption, { label: 'oz', value: 'oz' }),
h(ElOption, { label: 'LB', value: 'LB' }),
],
)
},
},
},
{
prop: 'agree',
label: '用户协议',
type: 'switch',
},
]
```
---
## 事件 (Events)
| 事件名 | 说明 | 回调参数 |
| :---------------: | :----------: | :------------------: |
| update:modelValue | 表单数据更新 | 更新后的表单数据对象 |
---
## 可用方法
| 方法名 | 说明 | 参数 |
| :-----------: | :--------------------------------------------: | :-------------------: |
| validate | 表单验证 | 无 |
| clearValidate | 清除验证信息 | 无 |
| resetFields | 重置表单字段 | 无 |
| refashConfig | 刷新表单配置，需要搭配 isIncludeProp 字段 使用 | showFields?: string[] |
- **说明**: 可新增方法自行添加
- showFields 字段是一个由 config 中 设置为 isIncludeProp：true 的对象值组成的数组。例如['prop1', 'prop2']
```vue
<template>
<CustomizeForm ref="formRef" ... />
</template>
<script setup>
import { ref } from 'vue'
const formRef = ref()
// 验证表单
const validateForm = async () => {
try {
await formRef.value.validate()
// 验证通过逻辑
} catch (error) {
// 验证失败处理
}
}
// 重置表单
const resetForm = () => {
formRef.value.resetFields()
}
// 刷新配置
const refreshFormConfig = () => {
formRef.value.refashConfig(['prop1', 'prop2'])
}
</script>
```
src/components/docx/SearchForm.md 0 → 100644
# SearchForm(待优化)
## SearchForm 属性 (Props)
| 参数 | 说明 | 类型 | 默认值 | 必填 |
| :---------------: | :--------------------------------------------: | :---------------------------: | :-------: | :--: |
| config | 表单配置项 | ISeachFormConfig[] | [] | ✓ |
| modelValue | 表单数据对象 | ISearchForm | {} | ✕ |
| labelWidth | 表单标签宽度 | string | number | ✕ |
| size | 组件尺寸 | 'large'\| 'default' \|'small' | 'default' | ✕ |
| addPermissionName | 新增按钮权限名（目前没有作用待优化） | string \|string[] | '' | ✕ |
| isSearchBtn | 是否显示查询按钮 | boolean | true | ✕ |
| isResetBtn | 是否显示重置按钮 | boolean | true | ✕ |
| isAddBtn | 是否显示新增按钮 | boolean | true | ✕ |
| isDeleteBtn | 是否显示删除按钮 | boolean | true | ✕ |
| ... | 其余属性与 element-plus 文档中 form Props 相同 | ... | ... | ... |
- **Form 表格说明**:
- form 属性 (Props) 可自行添加
- 可参考文件 src\views\logistics\logisticsMethod.vue
---
### ISeachFormConfig 配置项
| 属性 | 说明 | 类型 | 默认值 |
| :----: | :------------: | :---------------------: | :----: |
| type | 控件类型 | EComponenetType | - |
| prop | 表单字段名 | string | - |
| label | 表单标签 | string | - |
| attrs | 控件属性配置 | Record<string, unknown> | - |
| render | 自定义渲染函数 | () => VNode | - |
---
### 控件类型 (EComponenetType)
| 类型值 | 对应组件 | 说明 | 数据类型 |
| :-------------: | :-------------: | :------------: | :-------: |
| amountInput | AmountInput | 金额输入框 | string |
| input | ElInput | 普通输入框 | string |
| dateRangePicker | DateRangePicker | 日期范围选择器 | array |
| datePicker | DatePicker | 日期选择器 | string |
| select | Select | 下拉选择框 | undefined |
- form 表格如需动态渲染则需要传入计算属性 config
```tsx **config 示例**
const config = [
// 普通输入框
{
type: 'input',
prop: 'orderId',
label: '订单号',
attrs: {
placeholder: '请输入订单号',
clearable: true
}
},
// 下拉选择框
{
type: 'select',
prop: 'payStatus',
label: '支付状态',
attrs: {
options: [
{ label: '全部', value: '' },
{ label: '已支付', value: 1 },
{ label: '未支付', value: 0 }
],
style: 'width: 180px'
}
},
// 金额输入框
{
type: 'amountInput',
prop: 'amountRange',
label: '金额区间',
attrs: {
min: 0,
max: 10000,
precision: 2,
placeholder: '请输入金额'
}
},
// 日期范围选择
{
type: 'dateRangePicker',
prop: 'createTime',
label: '创建时间',
attrs: {
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
style: 'width: 320px'
}
},
// 自定义渲染
{
prop: 'customRender',
label: '自定义组件',
render: () => (
<div class="custom-render">
<el-switch active-text="开" inactive-text="关" />
<el-input-number :min="1" :max="10" />
</div>
)
}
]
```
---
## 事件 (Events)
| 事件名 | 说明 | 回调参数 |
| :---------------: | :----------: | :------------------: |
| update:modelValue | 表单数据更新 | 更新后的表单数据对象 |
| search | 点击查询按钮 | 无 |
| reset | 点击重置按钮 | 无 |
| add | 点击新增按钮 | 无 |
| delete | 点击删除按钮 | 无 |
---
## 插槽 (Slots)
| 插槽名 | 说明 | 作用域参数 |
| :------------: | :--------------------------: | :--------: |
| header-content | 替换整个表单头部内容 | - |
| ontherBtn | 在操作按钮区域添加额外的按钮 | - |
```vue **插槽示例**
<SearchForm :config="formConfig">
<template #header-content>
<div class="custom-header">
<h3>高级搜索面板</h3>
<p>使用以下条件进行精确搜索</p>
</div>
</template>
<template #ontherBtn>
<el-button type="warning" @click="exportData">导出数据</el-button>
</template>
</SearchForm>
```
---
## 可用方法
| 方法名 | 说明 | 参数 |
| :------------: | :------------: | :------: |
| getSelectEvent | 获取选中行数据 | 无 |
| selectRowEvent | 设置高亮行 | row: any |
- **可用方法说明**: 可自行添加
src/components/docx/VxeTable.md
**Table 属性 (Props)** # vxeTable(待优化)
| 参数 | 说明 | 类型 | 默认值 | ## Table 属性 (Props)
| :-------------: | :----------------------------: | :-----------: | :----: |
| config | 表格列配置 | TableColumn[] | [] |
| tableEditConfig | 表格编辑配置 | Object | {} |
| modelValue | 表格数据 | Object[] | [] |
| getTablelist | 数据加载方法 | Function | null |
| isShowCheckBox | 是否显示复选框 | Boolean | true |
| ... | 其余属性与 vxetable 文档中相同 | ... | ... |
**TableColumn 结构** | 参数 | 说明 | 类型 | 默认值 |
| :-------------: | :---------------------------------------: | :-----------: | :----: |
| config | 表格列配置 | TableColumn[] | [] |
| tableEditConfig | 表格编辑配置 | Object | {} |
| modelValue | 表格数据 | Object[] | [] |
| getTablelist | 数据加载方法 | Function | null |
| isShowCheckBox | 是否显示复选框 | Boolean | true |
| ... | 其余属性与 vxetable 文档中 api Props 相同 | ... | ... |
| 参数 | 说明 | 类型 | - **Table 表格说明**:
| :----: | :------------: | :-------------------------------------------------------------------------------------------------------: | - table 表格如需动态渲染则需要传入计算属性 config
| prop | 列字段名 | string | - Table 属性 (Props) 可自行添加
| label | 列标题 | string | - 可参考文件 src\views\logistics\logisticsMethod.vue
| attrs | 额外属性 | ColumnAttrs |
| render | 自定义渲染函数 | RenderFunctions(默认使用 default，如要开启单元格编辑 edit 需在 Table 中传入 tableEditConfig.enabled=true) |
## ColumnAttrs ```tsx **config 示例**
const config = [
```ts
interface ColumnAttrs {
width?: string | number
[key: string]: unknown
}
```
_RenderFunctions_
```ts
interface RenderFunctions {
// 默认单元格渲染
default?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 编辑状态渲染
edit?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 其他自定义渲染
[key: string]:
| ((params: { row: TableRowData }) => VNode | VNode[] | JSX.Element)
| undefined
}
```
_示例_
```tsx
const columns = [
{ {
prop: 'name', prop: 'name',
label: '姓名', label: '姓名',
attrs: { attrs: {
width: 200, width: 120,
fixed: 'left',
align: 'center', align: 'center',
sortable: true, fixed: 'left',
className: 'name-column', resizable: false,
className: 'status-column',
}, },
}, },
{ {
...@@ -77,7 +49,41 @@ const columns = [ ...@@ -77,7 +49,41 @@ const columns = [
] ]
``` ```
**事件 (Events)** ---
## TableColumn 结构
| 参数 | 说明 | 类型 |
| :----: | :------------: | :-------------: |
| prop | 列字段名 | string |
| label | 列标题 | string |
| attrs | 额外属性 | ColumnAttrs() |
| render | 自定义渲染函数 | RenderFunctions |
- **TableColumn 表格说明**:
- attrs 中属性与 vxetable 文档中 Column Props 相同
- RenderFunctions 默认使用 default，如要开启单元格编辑 edit 需在 Table 中传入 tableEditConfig.enabled=true
```ts
interface ColumnAttrs {
width?: string | number
[key: string]: unknown
}
interface RenderFunctions {
// 默认单元格渲染
default?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 编辑状态渲染
edit?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 其他自定义渲染
[key: string]:
| ((params: { row: TableRowData }) => VNode | VNode[] | JSX.Element)
| undefined
}
```
---
## 事件 (Events)
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| :----------------: | :------------: | :--------------------------: | | :----------------: | :------------: | :--------------------------: |
...@@ -85,9 +91,13 @@ const columns = [ ...@@ -85,9 +91,13 @@ const columns = [
| checkbox-change | 复选框选择变化 | 当前选中行数据 | | checkbox-change | 复选框选择变化 | 当前选中行数据 |
| getCheckboxRecords | 获取选中行数据 | 当前选中行数据（含全选状态） | | getCheckboxRecords | 获取选中行数据 | 当前选中行数据（含全选状态） |
**可用方法** ---
## 可用方法
| 方法名 | 说明 | 参数 | | 方法名 | 说明 | 参数 |
| :------------: | :------------: | :------: | | :------------: | :------------: | :------: |
| getSelectEvent | 获取选中行数据 | 无 | | getSelectEvent | 获取选中行数据 | 无 |
| selectRowEvent | 设置高亮行 | row: any | | selectRowEvent | 设置高亮行 | row: any |
> **可用方法说明**: 可自行添加
src/views/logistics/logisticsMethod.vue
...@@ -375,6 +375,10 @@ const tableConfig = ref<TableColumn[]>([ ...@@ -375,6 +375,10 @@ const tableConfig = ref<TableColumn[]>([
prop: 'serviceCode', prop: 'serviceCode',
label: '物流编码', label: '物流编码',
}, },
{
prop: 'company',
label: '物流公司',
},
{ {
prop: 'status', prop: 'status',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment