jobsys-explore 4.0.1 → 4.0.2

package/.changeset/blue-bees-fix.md

@@ -0,0 +1,5 @@
+---
+"jobsys-explore": patch
+---
+
+address

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # jobsys-explore
 
+## 4.0.2
+
+### Patch Changes
+
+- address
+- e
+
 ## 4.0.1
 
 ### Patch Changes

package/components/form/ExAddress.jsx

@@ -1,10 +1,11 @@
-import { computed, defineComponent, ref, watch } from "vue"
+import { computed, defineComponent, inject, ref, watch } from "vue"
 import { Cascader } from "vant"
 import localData from "./addressData.json"
 import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
 import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
-import { isArray, last } from "lodash-es"
+import { cloneDeep, isArray, last } from "lodash-es"
 import { useFindTextsFromPath } from "../../hooks"
+import { EX_ADDRESS } from "../provider/ExProvider.jsx"
 
 /**
  * 地址组件
@@ -31,9 +32,23 @@ export default defineComponent({
 		 *    1: 省, 2: 省市, 3: 省市区
 		 */
 		level: { type: Number, default: 3 },
+
+		/**
+		 * 显示值的类型
+		 * 空值或all: 所有, last：最后
+		 */
+		displayTextType: { type: String, default: "" },
 	},
 	emits: ["update:modelValue"],
 	setup(props, { emit, slots, expose }) {
+		const addressProvider = inject(EX_ADDRESS, () => ({}))
+		const defaultAddressUrl = addressProvider.addressUrl || ""
+		const defaultDisplayTextType = addressProvider.displayTextType || ""
+		const defaultAfterFetched = addressProvider.afterFetched || ""
+		const optionKeys = addressProvider.optionKeys || {}
+
+		const { text: textKey, value: valueKey, children: childrenKey } = optionKeys
+
 		const defaultValue = isArray(props.modelValue) ? last(props.modelValue) : props.modelValue
 
 		const componentValue = ref(defaultValue)
@@ -50,20 +65,41 @@ export default defineComponent({
 			if (props.modelValue.length === 0) {
 				return ""
 			}
-			return useFindTextsFromPath(options.value, props.modelValue, {
-				value: "code",
-				children: "children",
-				label: "name",
-			}).join("/")
+			const optionsTexts = useFindTextsFromPath(options.value, props.modelValue, {
+				value: valueKey,
+				children: childrenKey,
+				label: textKey,
+			})
+			const displayTextType = props.displayTextType || defaultDisplayTextType
+			return displayTextType === "last" ? optionsTexts[optionsTexts.length - 1] : optionsTexts.join("/")
 		})
 
-		useOptionTrait(options, props, localData)
+		//把默认值赋值给props
+		const cloneProps = cloneDeep(props)
+		if (!cloneProps.url && defaultAddressUrl) {
+			cloneProps.url = defaultAddressUrl
+		}
+		if (!cloneProps.afterFetched && defaultAfterFetched) {
+			cloneProps.afterFetched = defaultAfterFetched
+		}
+		//先处理好 options
+		const dealOptions = () => {
+			useOptionTrait(options, cloneProps, localData)
+		}
+		dealOptions()
+
+		watch(
+			() => props.options,
+			() => {
+				dealOptions()
+			},
+		)
 
 		const onFinish = ({ selectedOptions }) => {
 			pickerRef.value.close()
 			emit(
 				"update:modelValue",
-				selectedOptions.map((item) => item.code),
+				selectedOptions.map((item) => item[valueKey]),
 			)
 		}
 
@@ -78,7 +114,7 @@ export default defineComponent({
 					default: () => (
 						<Cascader
 							v-model={componentValue.value}
-							fieldNames={{ text: "name", value: "code", children: "children" }}
+							fieldNames={{ text: textKey, value: valueKey, children: childrenKey }}
 							closeable={false}
 							showHeader={false}
 							options={options.value}

package/components/form/ExField.jsx

@@ -87,7 +87,8 @@ export default defineComponent({
 
 		const appendElem = () => {
 			if (props.append) {
-				return <div class={"ex-field__append"}>{isString(props.append) ? props.append : props.append()}</div>
+				const appendResult = isString(props.append) ? props.append : props.append()
+				return appendResult ? <div class={"ex-field__append"}>{appendResult}</div> : null
 			}
 			return null
 		}

package/components/form/ExForm.jsx

@@ -112,6 +112,7 @@ export default defineComponent({
 		 * @property {array|Function} [options] 组件选项
 		 * @property {string} [placeholder] 组件里的提示
 		 * @property {string|Function} [help] ExField 里的提示
+		 * @property {string|Function} [append] ExField 外的提示
 		 * @property {array} [rules] 验证规则
 		 * @property {boolean} [is-link] 是否展示右侧箭头并开启点击反馈
 		 * @property {boolean} [readonly] 是否只读

package/components/provider/ExProvider.jsx

@@ -1,6 +1,7 @@
 import { defineComponent, provide } from "vue"
 
 export const EX_UPLOADER = Symbol("EX_UPLOADER")
+export const EX_ADDRESS = Symbol("EX_ADDRESS")
 export const EX_FORM = Symbol("EX_FORM")
 export const EX_SEARCH = Symbol("EX_SEARCH")
 export const EX_PAGINATION = Symbol("EX_PAGINATION")
@@ -14,6 +15,7 @@ export default defineComponent({
 	/**
 	 * @typedef {Object} ProviderProps
 	 * @property {UploaderProviderProps} [uploader] `ExUploader` 配置
+	 * @property {AddressProviderProps} [address] `ExAddress` 配置
 	 * @property {FormProviderProps} [form] `ExForm` 配置
 	 * @property {SearchProviderProps} [search] `ExSearch` 配置
 	 * @property {PaginationProviderProps} [pagination] `ExPagination` 配置
@@ -46,6 +48,32 @@ export default defineComponent({
 			}),
 		},
 
+		/**
+		 * @typedef {Object} AddressProviderProps `ExAddress` 配置
+		 * @property {string} addressUrl 选项请求地址
+		 * @property {string} displayTextType 显示值的类型
+		 * @property {Function} [afterFetched] 处理接口返回数据的函数
+		 * @property {AddressOptionKeys} optionKeys 地址选项键名
+		 *
+		 * @typedef {Object} AddressOptionKeys 地址选项键名
+		 * @property {string} optionKeys.value 选项对应的值
+		 * @property {string} optionKeys.text 选项文字
+		 * @property {string} optionKeys.children 子选项列表
+		 */
+		address: {
+			type: Object,
+			default: () => ({
+				addressUrl: "",
+				displayTextType: "",
+				afterFetched: null,
+				optionKeys: {
+					value: "code",
+					text: "name",
+					children: "children",
+				},
+			}),
+		},
+
 		/**
 		 * @typedef {Object} FormProviderProps `ExForm` 配置
 		 * @property {Object} [format] 格式化配置, 如 {date: true} 表示在提交表单时使用 `useFormFormat` 格式所有日期字段
@@ -114,6 +142,17 @@ export default defineComponent({
 				...props.uploader?.defaultFileItem,
 			},
 		})
+		provide(EX_ADDRESS, {
+			addressUrl: props.address?.addressUrl || "",
+			displayTextType: props.address?.displayTextType || "",
+			afterFetched: props.address?.afterFetched,
+			optionKeys: {
+				value: "code",
+				text: "name",
+				children: "children",
+				...props.address?.optionKeys,
+			},
+		})
 		provide(EX_FORM, { format: {}, ...props.form })
 		provide(EX_SEARCH, {
 			maskClass: "",