jobsys-explore 4.2.4 → 4.2.6

package/.changeset/chatty-donkeys-grin.md

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

package/.changeset/ten-needles-wait.md

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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # jobsys-explore
 
+## 4.2.6
+
+### Patch Changes
+
+- select
+- d
+- useFormFormat
+- rate default null
+- use Dayjs
+- select
+
+## 4.2.5
+
+### Patch Changes
+
+- select
+- d
+- useFormFormat
+- rate default null
+- use Dayjs
+
 ## 4.2.4
 
 ### Patch Changes

package/components/form/ExSelect.jsx

@@ -1,9 +1,9 @@
 import { computed, defineComponent, ref, watch } from "vue"
 import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
-import { Button, Picker } from "vant"
+import { Button, Picker, Search } from "vant"
 import { defaultFieldProps, defaultOptionsProps } from "../utils"
 import { useFetch } from "../../hooks"
-import { find, isArray, isFunction, isString } from "lodash-es"
+import { cloneDeep, find, isArray, isFunction, isString } from "lodash-es"
 
 /**
  * ExSelect 下拉选择
@@ -31,13 +31,31 @@ export default defineComponent({
 		 * 是否把选项的值返回到modelValue
 		 */
 		textInValue: { type: Boolean, default: false },
+
+		/**
+		 * 是否可以搜索
+		 */
+		filtable: { type: Boolean, default: false },
+
+		/**
+		 * 搜索链接
+		 */
+		filterUrl: { type: String, default: "" },
+
+		/**
+		 * 自定义渲染选项
+		 */
+		optionRender: { type: Function, default: null },
 	},
 	emits: ["update:modelValue", "change"],
 	setup(props, { emit, slots, expose }) {
 		const componentValue = ref([])
 		const options = ref([])
+		const recordOptions = ref([]) // 缓存 options
 		let columns = 1 //根据子项的数组数来确定 Picker 的列数，默认为1列
 		const pickerRef = ref()
+		const keyword = ref("")
+		const fetcher = ref({ loading: false })
 
 		const setModelValue = () => {
 			let value = isArray(props.modelValue) ? props.modelValue : [props.modelValue]
@@ -54,7 +72,7 @@ export default defineComponent({
 		)
 
 		const displayText = computed(() => {
-			if (!props.modelValue?.length) {
+			if (!props.modelValue || (isArray(props.modelValue) && !props.modelValue.length)) {
 				return ""
 			}
 			let modelValue = isArray(props.modelValue) ? props.modelValue : [props.modelValue]
@@ -101,22 +119,39 @@ export default defineComponent({
 
 				return isString(option) ? { value: option, label: option, text: option } : { text: option.label, ...option }
 			})
+
+			recordOptions.value = cloneDeep(options)
+
 			return options
 		}
 
-		prepareOptions(props.options).then((opts) => (options.value = opts))
+		prepareOptions(props.options).then((opts) => {
+			options.value = opts
+		})
 
 		watch(
 			() => props.options,
 			() => prepareOptions(props.options).then((opts) => (options.value = opts)),
 		)
 
+		const filterOnlineDataByKeyword = async () => {
+			let res = await useFetch(fetcher.value).get(props.filterUrl, { params: { keyword: keyword.value } })
+			if (props.afterFetched) {
+				res = props.afterFetched(res)
+			}
+			prepareOptions(res).then((opts) => (options.value = opts))
+		}
+
+		const filterLocalDataByKeyword = () => {
+			options.value = recordOptions.value.filter((item) => item.text.includes(keyword.value))
+		}
+
 		// @hack
 		// 由于在 Picker 清除 model value 后再次打开 Picker 在不重新选择新选项的情况下无法选中之前的选项
 		// 所以这里手动重新赋一次值给 model value
 		const onOpenWrapper = () => {
 			if (columns === 1 && !componentValue.value?.[0]) {
-				componentValue.value = [options.value[0].value]
+				componentValue.value = [options.value[0]?.value]
 			}
 		}
 
@@ -128,6 +163,30 @@ export default defineComponent({
 			pickerRef.value.close()
 		}
 
+		const onSearch = () => {
+			if (keyword.value) {
+				if (props.filterUrl) {
+					filterOnlineDataByKeyword()
+				} else {
+					filterLocalDataByKeyword()
+				}
+			} else {
+				if (props.filterUrl) {
+					filterOnlineDataByKeyword()
+				} else {
+					filterLocalDataByKeyword()
+				}
+			}
+		}
+
+		const onSearchClear = () => {
+			if (props.filterUrl) {
+				filterOnlineDataByKeyword()
+			} else {
+				filterLocalDataByKeyword()
+			}
+		}
+
 		const onClear = () => {
 			const value = columns === 1 ? null : []
 			emit("change", value)
@@ -137,6 +196,28 @@ export default defineComponent({
 
 		expose({ displayText })
 
+		/********** render **********/
+
+		const pickerSlotElem = () => {
+			const elem = {}
+			if (props.filtable) {
+				elem["columns-top"] = () => (
+					<Search
+						shape={"round"}
+						placeholder={"搜索"}
+						v-model={keyword.value}
+						onSearch={onSearch}
+						onClear={onSearchClear}
+						style={{ width: "100%" }}
+					></Search>
+				)
+			}
+			if (props.optionRender) {
+				elem["option"] = (option, index) => props.optionRender(option, index)
+			}
+			return elem
+		}
+
 		return () => (
 			<PickerWrapper ref={pickerRef} closeable={false} onOpen={onOpenWrapper} disabled={props.readonly || props.disabled}>
 				{{
@@ -146,9 +227,12 @@ export default defineComponent({
 							v-model={componentValue.value}
 							columns={options.value}
 							onConfirm={onConfirm}
+							loading={fetcher.value.loading}
 							onCancel={() => pickerRef.value.close()}
 							{...props.defaultProps}
-						/>,
+						>
+							{pickerSlotElem()}
+						</Picker>,
 						props.clearable ? (
 							<div class={"ex-field-popup__clear-btn"}>
 								<Button block type={"primary"} plain={true} round={true} onClick={onClear}>

package/components/search/ExSearch.jsx

@@ -1,9 +1,9 @@
-import { defineComponent, nextTick, reactive, ref, watch } from "vue"
+import { isArray, isFunction } from "lodash-es"
 import { Button, Icon, Popup, Search } from "vant"
-import { find, isArray, isFunction } from "lodash-es"
+import { computed, defineComponent, nextTick, reactive, ref, watch } from "vue"
+import ExGrid from "../grid/ExGrid.jsx"
 import { createExpand, createField, createQuick } from "./components"
 import "./index.less"
-import ExGrid from "../grid/ExGrid.jsx"
 
 /**
  * ExSearch 搜索组件
@@ -83,9 +83,6 @@ export default defineComponent({
 
 		const state = reactive({
 			queryForm: {}, // 搜索表单
-			quickColumns: [], //快速检索项
-			fieldColumns: [], //表单搜索项
-
 			showFilterPopup: false,
 		})
 
@@ -108,26 +105,20 @@ export default defineComponent({
 			return value
 		}
 
+		//快速检索项
+		const quickColumns = computed(() => {
+			return props.columns.filter((item) => item.quick)
+		})
+
+		//表单搜索项
+		const fieldColumns = computed(() => {
+			return props.columns.filter((item) => !item.quick)
+		})
+
 		const initQueryForm = () => {
 			const form = {}
 			props.columns.forEach((item) => {
-				const value = searchItemDefaultValue(item)
-
-				if (item.quick && !find(state.quickColumns, { key: item.key })) {
-					state.quickColumns.push(item)
-				} else {
-					if (item.expandable) {
-						if (!item.options) {
-							console.error(`expandable 为 true 时，必须提供 options 属性`)
-							return
-						}
-					}
-
-					if (!find(state.fieldColumns, { key: item.key })) {
-						state.fieldColumns.push(item)
-					}
-				}
-				form[item.key] = value
+				form[item.key] = searchItemDefaultValue(item)
 			})
 			state.queryForm = form
 		}
@@ -176,16 +167,16 @@ export default defineComponent({
 		}
 
 		const onClearFields = () => {
-			state.fieldColumns.forEach((item) => {
+			fieldColumns.value.forEach((item) => {
 				state.queryForm[item.key] = searchItemDefaultValue(item)
 			})
 		}
 
 		const reset = () => {
-			state.fieldColumns.forEach((item) => {
+			fieldColumns.value.forEach((item) => {
 				state.queryForm[item.key] = searchItemDefaultValue(item)
 			})
-			state.quickColumns.forEach((item) => {
+			quickColumns.value.forEach((item) => {
 				state.queryForm[item.key] = searchItemDefaultValue(item)
 			})
 			componentValue.value = ""
@@ -196,7 +187,7 @@ export default defineComponent({
 		/******************* render *********************/
 
 		const quickElems = () => {
-			return state.quickColumns.map((item) => createQuick(item, state.queryForm, onSearch))
+			return quickColumns.value.map((item) => createQuick(item, state.queryForm, onSearch))
 		}
 
 		const popupHeaderElem = () => (
@@ -214,7 +205,7 @@ export default defineComponent({
 
 		const fieldElems = () => (
 			<div class={"ex-search-popup__content"}>
-				{state.fieldColumns.map((item) => (item.expandable ? createExpand(item, state.queryForm) : createField(item, state.queryForm)))}
+				{fieldColumns.value.map((item) => (item.expandable ? createExpand(item, state.queryForm) : createField(item, state.queryForm)))}
 			</div>
 		)
 
@@ -236,13 +227,13 @@ export default defineComponent({
 		)
 
 		const quickBarElem = () => {
-			if (!state.quickColumns.length && !state.fieldColumns?.length) {
+			if (!quickColumns.value?.length && !fieldColumns.value?.length) {
 				return null
 			}
 			return (
 				<div class={"ex-search__quick-bar"}>
 					<div class={"ex-search__quick-container"}>{quickElems()}</div>
-					{state.fieldColumns?.length ? (
+					{fieldColumns.value?.length ? (
 						<div class={"ex-search__filter"} onClick={onOpenFilter}>
 							筛选<Icon name={"filter-o"}></Icon>
 						</div>