admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-08 01:58:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 调整ColPicker多列选择器文档中省市区数据源及演示demo

Browse Source
This commit is contained in:
weisheng 2024-07-06 00:23:26 +08:00
parent 9237a04bcb
commit d09bd037e7
9 changed files with 365 additions and 4871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
docs/component/col-picker.md
View File

@ -4,6 +4,71 @@
使用多列选择器来做级联，交互效果较好，多列选择器支持无限级选择。 使用多列选择器来做级联，交互效果较好，多列选择器支持无限级选择。
::: tip 提示
多列选择器常用于选择省市区，我们使用 Vant 提供的中国省市区数据作为数据源，你可以安装 [@vant/area-data](https://github.com/youzan/vant/tree/main/packages/vant-area-data) npm 包来引入：
```bash
# 通过 npm
npm i @vant/area-data
# 通过 yarn
yarn add @vant/area-data
# 通过 pnpm
pnpm add @vant/area-data
# 通过 Bun
bun add @vant/area-data
```
:::
**_为了方便开发者使用`@vant/area-data`进行开发调试，我们封装了`useColPickerData`，你可以直接使用`useColPickerData`来获取数据源。_**
::: details 基于@vant/area-data 包装的`useColPickerData`
```typescript
// 可以将此代码放置于项目src/hooks/useColPickerData.ts中
import { useCascaderAreaData } from '@vant/area-data'
export type CascaderOption = {
text: string
value: string
children?: CascaderOption[]
}
/**
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
* @returns
*/
export function useColPickerData() {
// '@vant/area-data' 数据源
const colPickerData: CascaderOption[] = useCascaderAreaData()
// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
if (!code) {
return data
}
for (const item of data) {
if (item.value === code) {
return item.children || null
}
if (item.children) {
const childrenResult = findChildrenByCode(item.children, code)
if (childrenResult) {
return childrenResult
}
}
}
return null
}
return { colPickerData, findChildrenByCode }
}
```
:::
## 基本用法 ## 基本用法
`label` 设置左侧文本内容； `label` 设置左侧文本内容；
@ -29,27 +94,30 @@
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([]) const value = ref<string[]>([])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -74,15 +142,17 @@ function handleConfirm({ value }) {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([]) const value = ref<string[]>([])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
@ -96,12 +166,14 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
toast.error.error('数据请求失败，请重试') toast.error.error('数据请求失败，请重试')
return return
} }
if (areaData[selectedItem.value]) { // 这里为什么用selectedItem.value作为code呢？是因为area构造的时候就是将标识放到了value字段上，同理你也可以改为其他字段，只要和area的字段对应即可
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -128,38 +200,42 @@ function handleConfirm({ value }) {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
const value = ref<any[]>(['150000', '150100', '150121']) import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>(['150000', '150100', '150121'])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}), }),
Object.keys(areaData[130000]).map((key) => { findChildrenByCode(colPickerData, '130000')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130000][key] label: item.text
} }
}), }),
Object.keys(areaData[130200]).map((key) => { findChildrenByCode(colPickerData, '130200')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130200][key] label: item.text
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -171,7 +247,6 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
function handleConfirm({ value }) { function handleConfirm({ value }) {
console.log(value) console.log(value)
} }
``` ```
2）设置 `auto-complete` 属性，当 `columns` 数组长度小于 `value` 或长度为 0 时，会自动触发 `columnChange` 函数来补齐数据。设置了该属性后，因为数据需要动态补全，因此 传递出来的参数 selectedItem 只有 value 字段，没有 label 字段。 2）设置 `auto-complete` 属性，当 `columns` 数组长度小于 `value` 或长度为 0 时，会自动触发 `columnChange` 函数来补齐数据。设置了该属性后，因为数据需要动态补全，因此 传递出来的参数 selectedItem 只有 value 字段，没有 label 字段。
@ -181,23 +256,26 @@ function handleConfirm({ value }) {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
const toast = useToast() const toast = useToast()
const value = ref<any[]>(['150000', '150100', '150121']) const value = ref<string[]>(['150000', '150100', '150121'])
const area = ref<any[]>(areaData) const area = ref<any[]>([])
const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
const value = index === -1 ? 86 : selectedItem.value const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[value][key] label: item.text
} }
}) })
) )
@ -232,26 +310,30 @@ const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([]) const value = ref<string[]>([])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text,
disabled: item.value === '140000'
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -270,26 +352,31 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
const value = ref<any[]>([]) import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key], label: item.text,
tip: key === '150000' ? '该地区配送时间可能较长' : '' disabled: item.value === '140000',
tip: item.value === '140000' ? '该地区无货，暂时无法选择' : item.value === '150000' ? '该地区配送时间可能较长' : ''
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -315,38 +402,42 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>(['130000', '130200', '130204']) const value = ref<string[]>(['130000', '130200', '130204'])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}), }),
Object.keys(areaData[130000]).map((key) => { findChildrenByCode(colPickerData, '130000')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130000][key] label: item.text
} }
}), }),
Object.keys(areaData[130200]).map((key) => { findChildrenByCode(colPickerData, '130200')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130200][key] label: item.text
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -354,7 +445,8 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
finish() finish()
} }
} }
const displayFormat = (selectedItems) => { // 格式化方法
const displayFormat = (selectedItems: Record<string, any>[]) => {
return selectedItems[selectedItems.length - 2].label + '-' + selectedItems[selectedItems.length - 1].label return selectedItems[selectedItems.length - 2].label + '-' + selectedItems[selectedItems.length - 1].label
} }
``` ```
@ -383,25 +475,29 @@ const displayFormat = (selectedItems) => {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
const value = ref<any[]>([]) import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -409,14 +505,22 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
finish() finish()
} }
} }
const beforeConfirm = (value, selectedItems, resolve) => { const beforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => {
if (parseInt(value[2]) > 120000) { if (parseInt(String(value[2])) > 120000) {
toast.error('该地区库存不足') toast.error('该地区库存不足')
resolve(false) resolve(false)
} else { } else {
resolve(true) resolve(true)
} }
} }
function handleConfirm({ selectedItems }: any) {
displayValue.value = selectedItems
.map((item: any) => {
return item.label
})
.join('')
}
``` ```
## 错误状态 ## 错误状态
@ -463,28 +567,31 @@ const beforeConfirm = (value, selectedItems, resolve) => {
``` ```
```typescript ```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下 // useColPickerData可以参考本章节顶部的介绍
import areaData from '../utils/area.json' // 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([]) const value = ref<string[]>([])
const displayValue = ref('') const displayValue = ref('')
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const columnChange = ({ selectedItem, resolve, finish }) => { const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -497,7 +604,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ | ------- | -------- | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ------ | ------- | -------- |
| v-model | 选中项 | array | - | - | - | | v-model | 选中项 | array | - | - | - |
| columns | 选择器数据，二维数组 | array | - | - | - | | columns | 选择器数据，二维数组 | array | - | - | - |
| value-key | 选项对象中，value 对应的 key | string | - | value | - | | value-key | 选项对象中，value 对应的 key | string | - | value | - |
@ -530,7 +637,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
### FormItemRule 数据结构 ### FormItemRule 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| --- | --- | --- | | --------- | ------------------------------------------------------- | ------------------------------------- |
| required | 是否为必选字段 | `boolean` | | required | 是否为必选字段 | `boolean` |
| message | 错误提示文案 | `string` | | message | 错误提示文案 | `string` |
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` | | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
@ -548,8 +655,8 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
## Events ## Events
| 事件名称 | 说明 | 参数 | 最低版本 | | 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------------- | ----------------------------------------------- | -------- | | -------- | -------------------------- | ------------------------------------------------ | -------- |
| confirm | 最后一列选项选中时触发 | `{ value(选项值数组), selectedItem(选项数组) }` | - | | confirm | 最后一列选项选中时触发 | `{ value(选项值数组), selectedItems(选项数组) }` | - |
| cancel | 点击关闭按钮或者蒙层时触发 | - | - | | cancel | 点击关闭按钮或者蒙层时触发 | - | - |
## Methods ## Methods

23
docs/component/form.md
View File

@ -525,8 +525,11 @@ function handleSubmit() {
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util' import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types' import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { areaData } from '@/utils/area'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const model = reactive<{ const model = reactive<{
couponName: string couponName: string
@ -764,20 +767,21 @@ const promotionlist = ref<any[]>([
]) ])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const areaChange = ({ selectedItem, resolve, finish }) => { const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )
@ -785,6 +789,7 @@ const areaChange = ({ selectedItem, resolve, finish }) => {
finish() finish()
} }
} }
const toast = useToast() const toast = useToast()
const form = ref() const form = ref()

37
src/hooks/useColPickerData.ts Normal file
View File

@ -0,0 +1,37 @@
import { useCascaderAreaData } from '@vant/area-data'
export type CascaderOption = {
text: string
value: string
children?: CascaderOption[]
}
/**
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
* @returns
*/
export function useColPickerData() {
// '@vant/area-data' 数据源
const colPickerData: CascaderOption[] = useCascaderAreaData()
// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
if (!code) {
return data
}
for (const item of data) {
if (item.value === code) {
return item.children || null
}
if (item.children) {
const childrenResult = findChildrenByCode(item.children, code)
if (childrenResult) {
return childrenResult
}
}
}
return null
}
return { colPickerData, findChildrenByCode }
}

72
src/pages/colPicker/Index.vue
View File

@ -47,9 +47,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { areaData } from '../../utils/area'
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types' import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value1 = ref<any[]>([]) const value1 = ref<any[]>([])
const value2 = ref<any[]>(['150000', '150100', '150121']) const value2 = ref<any[]>(['150000', '150100', '150121'])
@ -68,64 +70,65 @@ const value14 = ref<any[]>([])
const value15 = ref<any[]>([]) const value15 = ref<any[]>([])
const displayValue = ref<string>('') const displayValue = ref<string>('')
const areaData1 = ref<any[]>([ const areaData1 = ref<any[]>([
Object.keys(areaData[86]).map((key: string) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const areaData2 = ref<any[]>([]) const areaData2 = ref<any[]>([])
const areaData3 = ref<any[]>([ const areaData3 = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}), }),
Object.keys(areaData[130000]).map((key) => { findChildrenByCode(colPickerData, '130000')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130000][key] label: item.text
} }
}), }),
Object.keys(areaData[130200]).map((key) => { findChildrenByCode(colPickerData, '130200')!.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[130200][key] label: item.text
} }
}) })
]) ])
const areaData4 = ref<any[]>([ const areaData4 = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key], label: item.text,
disabled: key === '140000' disabled: item.value === '140000'
} }
}) })
]) ])
const areaData5 = ref<any[]>([ const areaData5 = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key], label: item.text,
disabled: key === '140000', disabled: item.value === '140000',
tip: key === '140000' ? '该地区无货，暂时无法选择' : key === '150000' ? '该地区配送时间可能较长' : '' tip: item.value === '140000' ? '该地区无货，暂时无法选择' : item.value === '150000' ? '该地区配送时间可能较长' : ''
} }
}) })
]) ])
const toast = useToast() const toast = useToast()
const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumnChangeOption) => { const columnChange1: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
const value = index === -1 ? 86 : selectedItem.value const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData[value]) { if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[value][key] label: item.text
} }
}) })
) )
@ -133,19 +136,20 @@ const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumn
finish() finish()
} }
} }
const columnChange2 = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => { const columnChange2: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
setTimeout(() => { setTimeout(() => {
if (Math.random() > 0.7) { if (Math.random() > 0.7) {
finish(false) finish(false)
toast.error('数据请求失败，请重试') toast.error('数据请求失败，请重试')
return return
} }
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )

19
src/pages/configProvider/Index.vue
View File

@ -111,8 +111,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { useToast, useMessage } from '@/uni_modules/wot-design-uni' import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types' import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { areaData } from '@/utils/area'
import { ref } from 'vue' import { ref } from 'vue'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const showAction = ref<boolean>(false) const showAction = ref<boolean>(false)
const actions = ref<any[]>([]) const actions = ref<any[]>([])
@ -168,20 +170,21 @@ const address = ref<any[]>([])
const count = ref<number>(1) const count = ref<number>(1)
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const areaChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => { const areaChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )

20
src/pages/form/demo3.vue
View File

@ -114,7 +114,10 @@ import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types' import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { type FormInstance, type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types' import { type FormInstance, type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import type { UploadFileItem } from '@/uni_modules/wot-design-uni/components/wd-upload/types' import type { UploadFileItem } from '@/uni_modules/wot-design-uni/components/wd-upload/types'
import { areaData } from '@/utils/area' import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
const model = reactive<{ const model = reactive<{
@ -353,20 +356,21 @@ const promotionlist = ref<any[]>([
]) ])
const area = ref<any[]>([ const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => { colPickerData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[86][key] label: item.text
} }
}) })
]) ])
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => { const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) { const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve( resolve(
Object.keys(areaData[selectedItem.value]).map((key) => { areaData.map((item) => {
return { return {
value: key, value: item.value,
label: areaData[selectedItem.value][key] label: item.text
} }
}) })
) )

90
src/static/touch-emulator.js
View File

@ -1,90 +0,0 @@
/**
* Minified by jsDelivr using Terser v5.14.1.
* Original file: /npm/@vant/touch-emulator@1.4.0/dist/index.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!(function () {
if ('undefined' != typeof window) {
var e,
t = 'ontouchstart' in window
document.createTouch ||
(document.createTouch = function (e, t, o, u, c, i, r) {
return new n(t, o, { pageX: u, pageY: c, screenX: i, screenY: r, clientX: u - window.pageXOffset, clientY: c - window.pageYOffset }, 0, 0)
}),
document.createTouchList ||
(document.createTouchList = function () {
for (var e = u(), t = 0; t < arguments.length; t++) e[t] = arguments[t]
return (e.length = arguments.length), e
}),
Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector),
Element.prototype.closest ||
(Element.prototype.closest = function (e) {
var t = this
do {
if (t.matches(e)) return t
t = t.parentElement || t.parentNode
} while (null !== t && 1 === t.nodeType)
return null
})
var n = function (e, t, n, o, u) {
;(o = o || 0),
(u = u || 0),
(this.identifier = t),
(this.target = e),
(this.clientX = n.clientX + o),
(this.clientY = n.clientY + u),
(this.screenX = n.screenX + o),
(this.screenY = n.screenY + u),
(this.pageX = n.pageX + o),
(this.pageY = n.pageY + u)
},
o = !1
;(s.multiTouchOffset = 75), t || new s()
}
function u() {
var e = []
return (
(e.item = function (e) {
return this[e] || null
}),
(e.identifiedTouch = function (e) {
return this[e + 1] || null
}),
e
)
}
function c(t) {
return function (n) {
var u, c, s
;('mousedown' === n.type && (o = !0), 'mouseup' === n.type && (o = !1), 'mousemove' !== n.type || o) &&
(('mousedown' === n.type || !e || (e && !e.dispatchEvent)) && (e = n.target),
null == e.closest('[data-no-touch-simulate]') &&
((u = t),
(c = n),
(s = document.createEvent('Event')).initEvent(u, !0, !0),
(s.altKey = c.altKey),
(s.ctrlKey = c.ctrlKey),
(s.metaKey = c.metaKey),
(s.shiftKey = c.shiftKey),
(s.touches = r(c)),
(s.targetTouches = r(c)),
(s.changedTouches = i(c)),
e.dispatchEvent(s)),
'mouseup' === n.type && (e = null))
}
}
function i(t) {
var o = u()
return o.push(new n(e, 1, t, 0, 0)), o
}
function r(e) {
return 'mouseup' === e.type ? u() : i(e)
}
function s() {
window.addEventListener('mousedown', c('touchstart'), !0),
window.addEventListener('mousemove', c('touchmove'), !0),
window.addEventListener('mouseup', c('touchend'), !0)
}
})()
//# sourceMappingURL=/sm/09d4343b52fa585c57a1a2c7344e01acc2c39070e2053d5939820b8f1140409d.map

4576
src/utils/area.ts
View File

File diff suppressed because it is too large Load Diff