el-plus 0.0.113 → 0.0.115

package/docs/components/select.md

@@ -1,249 +1,249 @@
-# EpSelect 下拉选择
-
-基于 el-select 封装，支持接口获取选项、自定义 label 等功能。
-
-## 基本用法
-
-```vue
-<template>
-  <EpSelect v-model="value" :options="options" />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const value = ref('')
-const options = [
-  { label: '选项1', value: '1' },
-  { label: '选项2', value: '2' },
-]
-</script>
-```
-
-## Props
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| v-model | 绑定值 ^el^ | `string \| number \| array` | - |
-| options | 选项列表 ^el^ | `array` | `[]` |
-| api | 选项接口地址 | `string \| (reqData) => Promise` | - |
-| method | 请求方法 | `string` | `'post'` |
-| reqData | 请求体数据 | `object` | `{}` |
-| reqParams | URL 参数 | `object` | `{}` |
-| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
-| reqAfter | 响应后处理 | `(res) => options` | - |
-| labelKey | label 字段名 | `string` | `'label'` |
-| valueKey | value 字段名 | `string` | `'value'` |
-| formatLabel | 自定义 label 格式化 | `(item) => string` | - |
-| disabledOption | 禁用选项判断 | `(item) => boolean` | - |
-| lazy | 延迟加载（api模式） | `boolean` | `false` |
-| codeInLabel | 下拉label 中显示 code ,当为boolean默认是valueKey| `boolean \| string` | - |
-| clearable | 是否可清空 ^el^ | `boolean` | `true` |
-
-> ^el^ 表示继承自 [el-select](https://element-plus.org/zh-CN/component/select.html#select-attributes) 的属性
-
-## 在 Form 中使用
-
-```tsx
-const formItemList = [
-  {
-    prop: 'status',
-    label: '状态',
-    type: 'EpSelect',
-    props: {
-      options: [
-        { label: '启用', value: 1 },
-        { label: '禁用', value: 0 },
-      ],
-    },
-  },
-]
-```
-
-## 接口获取选项
-
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    api: '/test',
-    valueKey: 'code',
-    labelKey: 'name',
-  },
-}
-```
-
-## 远程搜索
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    api: '/test',
-    valueKey: 'code',
-    labelKey: 'name',
-    remote: true,
-    filterable: true,
-  },
-}
-
-```
-
-## 带描述
-- 适用于有code，但配置为remote/lazy，导致没有name的情况
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    api: '/test',
-    valueKey: 'code',
-    labelKey: 'name',
-    lazy: true,
-    desc: '描述信息'
-  },
-}
-```
-
-## 自定义 label 格式
-
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    api: '/test',
-    valueKey: 'code',
-    labelKey: 'name',
-    formatLabel: (item) => `${item.name} (${item.code})`,
-  },
-}
-```
-
-## 监听变化
-
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    options: [],
-  },
-  onChange: (value, item) => {
-    // value: 选中的值
-    // item: 选中的选项对象
-    formData.testName = item?.name
-  },
-}
-```
-
-## codeInLabel 模式
-
-下拉同时显示 code 和 label：
-
-```tsx
-{
-  prop: 'testCode',
-  label: '测试',
-  type: 'EpSelect',
-  props: {
-    api: '/test',
-    valueKey: 'code',
-    labelKey: 'name',
-    codeInLabel: true, // 显示为 "name code"
-    // codeInLabel: 'testCode', // 显示为 "name testCode字段值"
-  },
-}
-```
-
-## 常用场景
-
-```tsx
-// 公司 - 简单接口选择
-{
-  prop: 'companyCode',
-  label: '公司',
-  type: 'EpSelect',
-  props: {
-    api: '/api-pms-order/api/common/queryAllCompany',
-    method: 'post',
-    labelKey: 'name',
-    valueKey: 'code',
-  },
-}
-
-// 币种 - 简单接口选择
-{
-  prop: 'currencyCode',
-  label: '币种',
-  type: 'EpSelect',
-  props: {
-    api: '/api-finance-base/api/finance/base/currency/queryList',
-    method: 'post',
-    labelKey: 'name',
-    valueKey: 'code',
-  },
-}
-
-// 账套 - 简单接口选择
-{
-  prop: 'accountSetCode',
-  label: '账套',
-  type: 'EpSelect',
-  props: {
-    api: '/api-globalization/api/accountSet/queryLatestVerAccountSet',
-    labelKey: 'accountSetName',
-    valueKey: 'accountSetCode',
-  },
-}
-
-// 仓库 - 远程搜索（数据量大，输入关键词搜索）
-{
-  prop: 'warehouseCode',
-  label: '仓库',
-  type: 'EpSelect',
-  props: {
-    api: '/api-wms/api/warehouse/search/list',
-    method: 'post',
-    remote: true,
-    filterable: true,
-    reqData: {
-      statusList: [1],
-      name: '$query',
-      pageNum: 1,
-      pageSize: 20,
-    },
-    labelKey: 'name',
-    valueKey: 'code',
-  },
-}
-
-// 人员 - 远程搜索 + 自定义格式（同时展示编码和名称）
-{
-  prop: 'personAccount',
-  label: '人员',
-  type: 'EpSelect',
-  props: {
-    api: '/api-u/api/saas/user/personInfoManage/queryPersonInfoPage',
-    method: 'post',
-    remote: true,
-    filterable: true,
-    reqData: {
-      page: 1,
-      pageSize: 20,
-      searchText: '$query',
-    },
-    labelKey: 'name',
-    valueKey: 'account',
-    formatLabel: (item) => `${item.account || ''} ${item.name || ''}`,
-  },
-}
-```
-
-> `reqData` 中 `$query` 为占位符，组件会自动替换为用户输入的搜索关键词。
+# EpSelect 下拉选择
+
+基于 el-select 封装，支持接口获取选项、自定义 label 等功能。
+
+## 基本用法
+
+```vue
+<template>
+  <EpSelect v-model="value" :options="options" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+]
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| v-model | 绑定值 ^el^ | `string \| number \| array` | - |
+| options | 选项列表 ^el^ | `array` | `[]` |
+| api | 选项接口地址 | `string \| (reqData) => Promise` | - |
+| method | 请求方法 | `string` | `'post'` |
+| reqData | 请求体数据 | `object` | `{}` |
+| reqParams | URL 参数 | `object` | `{}` |
+| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
+| reqAfter | 响应后处理 | `(res) => options` | - |
+| labelKey | label 字段名 | `string` | `'label'` |
+| valueKey | value 字段名 | `string` | `'value'` |
+| formatLabel | 自定义 label 格式化 | `(item) => string` | - |
+| disabledOption | 禁用选项判断 | `(item) => boolean` | - |
+| lazy | 延迟加载（api模式） | `boolean` | `false` |
+| codeInLabel | 下拉label 中显示 code ,当为boolean默认是valueKey| `boolean \| string` | - |
+| clearable | 是否可清空 ^el^ | `boolean` | `true` |
+
+> ^el^ 表示继承自 [el-select](https://element-plus.org/zh-CN/component/select.html#select-attributes) 的属性
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'EpSelect',
+    props: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+  },
+]
+```
+
+## 接口获取选项
+
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    api: '/test',
+    valueKey: 'code',
+    labelKey: 'name',
+  },
+}
+```
+
+## 远程搜索
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    api: '/test',
+    valueKey: 'code',
+    labelKey: 'name',
+    remote: true,
+    filterable: true,
+  },
+}
+
+```
+
+## 带描述
+- 适用于有code，但配置为remote/lazy，导致没有name的情况
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    api: '/test',
+    valueKey: 'code',
+    labelKey: 'name',
+    lazy: true,
+    desc: '描述信息'
+  },
+}
+```
+
+## 自定义 label 格式
+
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    api: '/test',
+    valueKey: 'code',
+    labelKey: 'name',
+    formatLabel: (item) => `${item.name} (${item.code})`,
+  },
+}
+```
+
+## 监听变化
+
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    options: [],
+  },
+  onChange: (value, item) => {
+    // value: 选中的值
+    // item: 选中的选项对象
+    formData.testName = item?.name
+  },
+}
+```
+
+## codeInLabel 模式
+
+下拉同时显示 code 和 label：
+
+```tsx
+{
+  prop: 'testCode',
+  label: '测试',
+  type: 'EpSelect',
+  props: {
+    api: '/test',
+    valueKey: 'code',
+    labelKey: 'name',
+    codeInLabel: true, // 显示为 "name code"
+    // codeInLabel: 'testCode', // 显示为 "name testCode字段值"
+  },
+}
+```
+
+## 常用场景
+
+```tsx
+// 公司 - 简单接口选择
+{
+  prop: 'companyCode',
+  label: '公司',
+  type: 'EpSelect',
+  props: {
+    api: '/api-pms-order/api/common/queryAllCompany',
+    method: 'post',
+    labelKey: 'name',
+    valueKey: 'code',
+  },
+}
+
+// 币种 - 简单接口选择
+{
+  prop: 'currencyCode',
+  label: '币种',
+  type: 'EpSelect',
+  props: {
+    api: '/api-finance-base/api/finance/base/currency/queryList',
+    method: 'post',
+    labelKey: 'name',
+    valueKey: 'code',
+  },
+}
+
+// 账套 - 简单接口选择
+{
+  prop: 'accountSetCode',
+  label: '账套',
+  type: 'EpSelect',
+  props: {
+    api: '/api-globalization/api/accountSet/queryLatestVerAccountSet',
+    labelKey: 'accountSetName',
+    valueKey: 'accountSetCode',
+  },
+}
+
+// 仓库 - 远程搜索（数据量大，输入关键词搜索）
+{
+  prop: 'warehouseCode',
+  label: '仓库',
+  type: 'EpSelect',
+  props: {
+    api: '/api-wms/api/warehouse/search/list',
+    method: 'post',
+    remote: true,
+    filterable: true,
+    reqData: {
+      statusList: [1],
+      '$query':'name',
+      pageNum: 1,
+      pageSize: 20,
+    },
+    labelKey: 'name',
+    valueKey: 'code',
+  },
+}
+
+// 人员 - 远程搜索 + 自定义格式（同时展示编码和名称）
+{
+  prop: 'personAccount',
+  label: '人员',
+  type: 'EpSelect',
+  props: {
+    api: '/api-u/api/saas/user/personInfoManage/queryPersonInfoPage',
+    method: 'post',
+    remote: true,
+    filterable: true,
+    reqData: {
+      page: 1,
+      pageSize: 20,
+      searchText: '$query',
+    },
+    labelKey: 'name',
+    valueKey: 'account',
+    formatLabel: (item) => `${item.account || ''} ${item.name || ''}`,
+  },
+}
+```
+
+> `reqData` 中 `$query` 为占位符，组件会自动替换为用户输入的搜索关键词。