jobsys-newbie 2.2.0 → 2.2.1

package/components/search/NewbieSearch.jsx

@@ -40,7 +40,8 @@ export default defineComponent({
 		 * @property {Array} [conditions] 搜索项的条件，可选项为不同类型的内置条件
 		 * @property {*} [defaultValue] 默认搜索值
 		 * @property {*} [defaultCondition] 默认搜索条件
-		 * @property {Function} [collectItem] 收集搜索项的内容[内部使用]
+		 * @property {Function} [customRender] 自定义渲染搜索项， 接收 { item, queryForm, context } 作为参数，返回一个对象，包含 conditions, Component, displayValue, onComponentOpen 四个属性
+		 * @property {Function} [collectItem] 收集搜索项的内容]
 		 * */
 
 		/**
@@ -80,7 +81,7 @@ export default defineComponent({
 		 */
 		"search",
 	],
-	setup(props, { expose, emit }) {
+	setup(props, { expose, emit, slots }) {
 		const searchProvider = inject(NEWBIE_SEARCH, () => {})
 
 		const state = reactive({
@@ -333,7 +334,7 @@ export default defineComponent({
 			state.searchLabels = []
 
 			concat(state.fieldColumns, state.expandColumns).forEach((item) => {
-				let { value, searchLabel } = item.collectItem ? item.collectItem() : {}
+				let { value, searchLabel } = item.collectItem ? item.collectItem({ queryForm: state.queryForm, item }) : {}
 				const { condition, type } = state.queryForm[item.key]
 
 				if (
@@ -369,7 +370,13 @@ export default defineComponent({
 		 */
 		const setQueryForm = (fields) => {
 			Object.keys(fields).forEach((key) => {
-				state.queryForm[key].value = fields[key]
+				if (state.queryForm[key]) {
+					state.queryForm[key].value = fields[key]
+				} else {
+					state.queryForm[key] = {
+						value: fields[key],
+					}
+				}
 			})
 		}
 
@@ -398,6 +405,7 @@ export default defineComponent({
 			return state.fieldColumns.map((item) =>
 				createSearchItem(item, state.queryForm, searchState[item.key], {
 					props,
+					slots,
 					searchProvider,
 				}),
 			)

package/components/search/components/SearchItem.jsx

@@ -1,4 +1,4 @@
-import { find } from "lodash-es"
+import { find, isFunction } from "lodash-es"
 import { computed, nextTick, ref, Transition, withModifiers } from "vue"
 import { Dropdown, Menu, MenuItem, TypographyText } from "ant-design-vue"
 import { DownOutlined } from "@ant-design/icons-vue"
@@ -16,29 +16,44 @@ import { useT } from "../../../hooks/index.js"
  * @return {JSX.Element}
  */
 const render = (item, queryForm, itemState, context) => {
-	const { searchProvider, props } = context
+	const { searchProvider, props, slots } = context
 
 	const panelRef = ref(null)
 
 	let field = {}
 
-	if (!item.type || item.type === "input") {
-		field = Fields.createInput(item, queryForm, context)
-	} else if (item.type === "number") {
-		field = Fields.createNumber(item, queryForm, context)
-	} else if (item.type === "select") {
-		field = Fields.createSelect(item, queryForm, context)
-	} else if (item.type === "textarea") {
-		field = Fields.createTextarea(item, queryForm, context)
-	} else if (item.type === "date") {
-		field = Fields.createDate(item, queryForm, context)
-	} else if (item.type === "cascade") {
-		field = Fields.createCascader(item, queryForm, context)
-	} else if (item.type === "switch") {
-		field = Fields.createSwitch(item, queryForm, context)
+	if (item.customRender) {
+		field = item.customRender({ item, queryForm, context })
+	} else {
+		switch (item.type) {
+			case "number":
+				field = Fields.createNumber(item, queryForm, context)
+				break
+			case "select":
+				field = Fields.createSelect(item, queryForm, context)
+				break
+			case "textarea":
+				field = Fields.createTextarea(item, queryForm, context)
+				break
+			case "date":
+				field = Fields.createDate(item, queryForm, context)
+				break
+			case "cascade":
+				field = Fields.createCascader(item, queryForm, context)
+				break
+			case "switch":
+				field = Fields.createSwitch(item, queryForm, context)
+				break
+			default:
+				field = Fields.createInput(item, queryForm, context)
+				break
+		}
+	}
+	if (slots[item.key]) {
+		field.Component = slots[item.key]({ item, queryForm, context })
 	}
 
-	const { conditions, Component, displayValue, onComponentOpen } = field
+	const { conditions = [], Component, displayValue = "", onComponentOpen = null } = field
 
 	/**
 	 * 选择条件
@@ -144,7 +159,7 @@ const render = (item, queryForm, itemState, context) => {
 									</Dropdown>
 								)}
 							</div>
-							<div class={"newbie-search-input-container"}>{Component}</div>
+							<div class={"newbie-search-input-container"}>{isFunction(Component) ? Component() : Component}</div>
 						</div>
 					) : null}
 				</Transition>

package/components/table/NewbieTable.jsx

@@ -71,10 +71,15 @@ export default defineComponent({
 		tableEvents: { type: Object, default: () => ({}) },
 
 		/**
-		 * 原生 slot
+		 * 原生 slots
 		 */
 		tableSlots: { type: Object, default: () => ({}) },
 
+		/**
+		 * NewbieSearch slots
+		 */
+		searchSlots: { type: Object, default: () => ({}) },
+
 		/**
 		 * 是否使用分页，为 Object 时时使用自定义分页
 		 */
@@ -682,7 +687,11 @@ export default defineComponent({
 							filterableColumns={state.filterableColumns}
 							sortableColumns={state.sortableColumns}
 							onSearch={onSearch}
-						></NewbieSearch>,
+						>
+							{{
+								...props.searchSlots,
+							}}
+						</NewbieSearch>,
 						<Divider></Divider>,
 					]
 				: null