jobsys-explore 4.2.19 → 4.3.1

package/.changeset/empty-mice-share.md

@@ -0,0 +1,5 @@
+---
+"jobsys-explore": patch
+---
+
+Add matrix component and closable option

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # jobsys-explore
 
+## 4.3.1
+
+### Patch Changes
+
+- modify submit form in beforeSubit
+
+## 4.2.20
+
+### Patch Changes
+
+- Fix
+- Build
+- Drop the unused property
+- Add matrix component and closable option
+- Fix clear error in ExSearch
+- Rewrite ExPagiantion
+- Add init and beforeSubmit
+- Fix
+- Add disabled and readonly for ex form
+- hide upload when readonly or disabled
+- Add form item pattern support
+- Add cascader search and filter search issue
+- Fix sector style
+- Fix exupload
+- Add ex-decorator
+- clone the options before traverse
+- Upgrade useFormFormat
+- upgrade
+- Fix
+- Add useFindParentValues
+- Fix form submit await
+- Add status adapter and useFetch loading
+- Adjust form item render order
+- Add pagination expose
+- Fix upload file
+- Add useFindPropertyRecursive
+- upgrade
+- Fix beforeSubmit
+
 ## 4.2.19
 
 ### Patch Changes

package/business-components/index.js

@@ -0,0 +1 @@
+export * from "./survey"

package/business-components/survey/ExSurvey.jsx

@@ -0,0 +1,34 @@
+import { defineComponent } from "vue"
+import "./index.less"
+
+/**
+ * 调查问卷
+ * @version 4.4.0
+ */
+export default defineComponent({
+	name: "ExSurvey",
+	props: {
+		/**
+		 * 开场语
+		 */
+		opening: { type: String, default: "" },
+
+		/**
+		 * 结束语
+		 */
+		ending: { type: String, default: "" },
+	},
+	emits: [
+		/**
+		 * @event click
+		 * @param {Event} event 点击事件
+		 */
+		"click",
+	],
+
+	setup(props) {
+		const openingElem = () => (props.opening ? <div class={`ex-survey__opening`}>{props.opening}</div> : null)
+
+		return () => <div class={`ex-survey`}>{openingElem()}</div>
+	},
+})

package/business-components/survey/index.js

@@ -0,0 +1,5 @@
+import _ExSurvey from "./ExSurvey.jsx"
+import withInstall from "../../utils/withInstall"
+
+export const ExSurvey = withInstall(_ExSurvey)
+export default ExSurvey

package/components/form/ExCascader.jsx

@@ -2,7 +2,7 @@ import { computed, defineComponent, ref, watch } from "vue"
 import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
 import { Button, Cascader, Search } from "vant"
 import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
-import { useFindTextsFromPath } from "../../hooks"
+import { useFindParentLabels } from "../../hooks"
 import { isArray, last } from "lodash-es"
 
 /**
@@ -96,11 +96,7 @@ export default defineComponent({
 					const hasKeyword = item.text.toLowerCase().includes(keyword.toLowerCase())
 
 					// 如果包含关键字，或者有子级包含关键字，则保留该项
-					if (hasKeyword || (item.children && filterRecursively(item.children).length > 0)) {
-						return true
-					}
-
-					return false
+					return hasKeyword || (item.children && filterRecursively(item.children).length > 0)
 				})
 			}
 
@@ -109,17 +105,13 @@ export default defineComponent({
 		}
 
 		const displayText = computed(() => {
-			if (props.modelValue.length === 0) {
+			if (!componentValue.value) {
 				return ""
 			}
-			//textInValue状态下的初始值
-			if (props.textInValue && props.modelValue && props.modelValue.length === 1) {
-				return last(props.modelValue).text
-			}
 
-			const mValue = props.textInValue ? props.modelValue.map((item) => item.value) : props.modelValue
-			const optionsTexts = useFindTextsFromPath(options.value, mValue)
-			return props.displayTextType === "last" ? last(optionsTexts) : optionsTexts.join("/")
+			const labels = useFindParentLabels(options.value, componentValue.value, props.defaultProps?.fieldNames)
+
+			return labels ? (props.displayTextType === "last" ? last(labels) : labels.join("/")) : ""
 		})
 
 		const onFinish = ({ selectedOptions }) => {

package/components/form/ExForm.jsx

@@ -96,6 +96,21 @@ export default defineComponent({
 		 */
 		submitDisabled: { type: Boolean, default: false },
 
+		/**
+		 * 是否显示关闭按钮
+		 */
+		closable: { type: Boolean, default: false },
+
+		/**
+		 * 取消按钮文字
+		 */
+		cancelButtonText: { type: String, default: "取消" },
+
+		/**
+		 * 点击关闭时的动作
+		 */
+		close: { type: Function, default: null },
+
 		/**
 		 * 当有分割线时，分割线的配置
 		 */
@@ -110,11 +125,12 @@ export default defineComponent({
 		 * @property {string} title 显示的名字
 		 * @property {string} [type] 类型,默认是input
 		 * @property {array|Function} [options] 组件选项
+		 * @property {array|Function} [rows] 矩阵组件行标题
 		 * @property {string} [placeholder] 组件里的提示
 		 * @property {string|Function} [help] ExField 里的提示
 		 * @property {string|Function} [append] ExField 外的提示
 		 * @property {array} [rules] 验证规则
-		 * @property {boolean} [is-link] 是否展示右侧箭头并开启点击反馈
+		 * @property {boolean} [isLink] 是否展示右侧箭头并开启点击反馈
 		 * @property {boolean} [readonly] 是否只读
 		 * @property {boolean|Function} [required] 是否必填,默认是false
 		 * @property {boolean|Function} [disabled] 组件不可编辑状态,默认是false
@@ -296,7 +312,7 @@ export default defineComponent({
 			for (const item of itemsWithBeforeSubmit) {
 				form[item.key] = await item.beforeSubmit({
 					value: form[item.key],
-					submitForm: state.submitForm,
+					submitForm: form, //改成将 form 传出去，这样可以在 form 中添加参数
 				})
 			}
 
@@ -418,7 +434,7 @@ export default defineComponent({
 			return null
 		}
 
-		const submitBtnElem = () => {
+		const buttonsElem = () => {
 			if (state.isInitializing) {
 				return null
 			}
@@ -426,30 +442,44 @@ export default defineComponent({
 				return null
 			}
 
+			const cancelBtn = (
+				<ExButton
+					class={"ex-form__cancel-btn"}
+					type={"default"}
+					plain
+					onClick={() => {
+						if (props.close && isFunction(props.close)) {
+							props.close()
+						}
+					}}
+				>
+					{() => props.cancelButtonText}
+				</ExButton>
+			)
+
 			const submitBtn = (
 				<ExButton disabled={props.submitDisabled} type={"primary"} fetcher={state.submitFetcher} buttonProps={{ nativeType: "submit" }}>
-					{{
-						default: () => props.submitButtonText || "提交",
-					}}
+					{() => props.submitButtonText}
 				</ExButton>
 			)
 
 			if (props.fixed) {
-				return <div class={"ex-form__submit-btn-fixed van-hairline--top"}>{submitBtn}</div>
+				return <div class={"ex-form__btn-wrapper-fixed van-hairline--top"}>{[props.closable ? cancelBtn : null, submitBtn]}</div>
 			}
 
-			return <div class={"ex-form__submit-btn"}>{submitBtn}</div>
+			return <div class={"ex-form__btn-wrapper"}>{[props.closable ? cancelBtn : null, submitBtn]}</div>
 		}
 
 		return () => (
 			<Form
 				ref={formRef}
-				scrollToError={true}
 				labelWidth={props.labelWidth}
 				colon={props.colon}
 				class={`ex-form ${props.fixed ? "ex-form__fixed" : ""}`}
 				disabled={props.disabled}
 				readonly={props.readonly}
+				scrollToError={true}
+				validateFirst={true}
 				onSubmit={onSubmit}
 			>
 				{{
@@ -458,7 +488,7 @@ export default defineComponent({
 							{{ default: () => skeletonElem() }}
 						</CellGroup>,
 						footerElem(),
-						submitBtnElem(),
+						buttonsElem(),
 					],
 				}}
 			</Form>

package/components/form/ExMatrixCheckbox.jsx

@@ -0,0 +1,99 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { Checkbox } from "vant"
+import ExField from "./ExField.jsx"
+import { isFunction, pick, remove } from "lodash-es"
+
+/**
+ * ExMatrixRadio 矩阵单选
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExMatrixRadio",
+	props: {
+		...defaultFieldProps,
+		...defaultOptionsProps,
+
+		/**
+		 * 行标题
+		 */
+		rows: { type: [Array, Function], default: () => [] },
+		modelValue: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		const options = ref([])
+
+		useOptionTrait(options, props)
+
+		const rows = isFunction(props.rows) ? props.rows() : props.rows
+
+		const onChange = (row, value) => {
+			if (!componentValue.value[row]) {
+				componentValue.value[row] = []
+			}
+			if (componentValue.value[row].includes(value)) {
+				remove(componentValue.value[row], (item) => item === value)
+			} else {
+				componentValue.value[row].push(value)
+			}
+			emit("update:modelValue", componentValue.value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField class={"ex-matrix"} {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<div class={"ex-matrix-container"}>
+							<table>
+								<thead>
+									<tr>
+										<th></th>
+										{options.value.map((item) => (
+											<th>
+												<div class={"ex-matrix-option"}>{item.text}</div>
+											</th>
+										))}
+									</tr>
+								</thead>
+								<tbody>
+									{rows.map((row) => (
+										<tr>
+											<td>
+												<div class={"ex-matrix-row"}>{row}</div>
+											</td>
+											{options.value.map((option) => {
+												const checked = ref(componentValue.value[row]?.includes(option.value))
+												return (
+													<td>
+														<div class={"ex-matrix-option"}>
+															<Checkbox
+																v-model={checked.value}
+																shape={"square"}
+																onClick={() => onChange(row, option.value)}
+															></Checkbox>
+														</div>
+													</td>
+												)
+											})}
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExMatrixRadio.jsx

@@ -0,0 +1,86 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { Radio, RadioGroup } from "vant"
+import ExField from "./ExField.jsx"
+import { isFunction, pick } from "lodash-es"
+
+/**
+ * ExMatrixRadio 矩阵单选
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExMatrixRadio",
+	props: {
+		...defaultFieldProps,
+		...defaultOptionsProps,
+
+		/**
+		 * 行标题
+		 */
+		rows: { type: [Array, Function], default: () => [] },
+		modelValue: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		const options = ref([])
+
+		useOptionTrait(options, props)
+
+		const rows = isFunction(props.rows) ? props.rows() : props.rows
+
+		const onChange = () => {
+			emit("update:modelValue", componentValue.value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField class={"ex-matrix"} {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<div class={"ex-matrix-container"}>
+							<table>
+								<thead>
+									<tr>
+										<th></th>
+										{options.value.map((item) => (
+											<th>
+												<div class={"ex-matrix-option"}>{item.text}</div>
+											</th>
+										))}
+									</tr>
+								</thead>
+								<tbody>
+									{rows.map((row) => (
+										<tr>
+											<td>
+												<div class={"ex-matrix-row"}>{row}</div>
+											</td>
+											{options.value.map((option) => (
+												<td>
+													<div class={"ex-matrix-option"}>
+														<RadioGroup onChange={onChange} v-model={componentValue.value[row]}>
+															{() => <Radio name={option.value}></Radio>}
+														</RadioGroup>
+													</div>
+												</td>
+											))}
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExMatrixScale.jsx

@@ -0,0 +1,97 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { Radio, RadioGroup } from "vant"
+import ExField from "./ExField.jsx"
+import { isFunction, pick } from "lodash-es"
+
+/**
+ * ExMatrixScale 矩阵量表
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExMatrixScale",
+	props: {
+		...defaultFieldProps,
+		...defaultOptionsProps,
+
+		/**
+		 * 行标题
+		 */
+		rows: { type: [Array, Function], default: () => [] },
+		modelValue: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		let options = ref([])
+
+		useOptionTrait(options, props)
+
+		const level = props.defaultProps?.level || 5
+
+		if (options.value.length > level) {
+			options.value = options.value.slice(0, level)
+		} else if (options.value.length < level) {
+			//如果选项不及量表等级则补全
+			for (let i = options.value.length; i < level; i += 1) {
+				options.value.push({ text: i + 1, value: i + 1 })
+			}
+		}
+
+		const rows = isFunction(props.rows) ? props.rows() : props.rows
+
+		const onChange = () => {
+			emit("update:modelValue", componentValue.value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField class={"ex-matrix"} {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<div class={"ex-matrix-container"}>
+							<table>
+								<thead>
+									<tr>
+										<th></th>
+										{options.value.map((item) => (
+											<th>
+												<div class={"ex-matrix-option"}>{item.text}</div>
+											</th>
+										))}
+									</tr>
+								</thead>
+								<tbody>
+									{rows.map((row) => (
+										<tr>
+											<td>
+												<div class={"ex-matrix-row"}>{row}</div>
+											</td>
+											{options.value.map((option, index) => (
+												<td>
+													<div class={"ex-matrix-option"}>
+														<RadioGroup onChange={onChange} v-model={componentValue.value[row]}>
+															{() => <Radio name={index + 1}></Radio>}
+														</RadioGroup>
+													</div>
+												</td>
+											))}
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/FormItem.jsx

@@ -15,14 +15,17 @@ import ExAddress from "./ExAddress.jsx"
 import ExCascader from "./ExCascader.jsx"
 import ExTime from "./ExTime.jsx"
 import ExFieldUploader from "./ExFieldUploader.jsx"
+import ExMatrixRadio from "./ExMatrixRadio.jsx"
+import ExMatrixScale from "./ExMatrixScale.jsx"
+import ExMatrixCheckbox from "./ExMatrixCheckbox.jsx"
 import { Divider } from "vant"
 
 /**
  *
- * @param item
- * @param submitForm
- * @param props
- * @param slots
+ * @param {FormItemConfig} item
+ * @param {Object} submitForm
+ * @param {Object} [props]
+ * @param {Object} [slots]
  * @return {*|JSX.Element}
  */
 const render = (item, submitForm, { props, slots }) => {
@@ -48,19 +51,18 @@ const render = (item, submitForm, { props, slots }) => {
 	fieldProps.name = item.key
 	fieldProps.placeholder = fieldProps.placeholder || (isPicker ? `请选择${item.title}` : `请填写${item.title}`)
 	fieldProps.rules = fieldProps.rules?.length
-		? fieldProps.rules.map((rule) => {
-				if (rule.pattern) {
-					return {
-						...rule,
-						pattern: new RegExp(rule.pattern),
-					}
-				}
-				return { ...rule }
-		  })
+		? fieldProps.rules.map((rule) =>
+				rule.pattern
+					? {
+							...rule,
+							pattern: new RegExp(rule.pattern),
+					  }
+					: { ...rule },
+		  )
 		: []
 
 	// 具体组件的 props
-	const componentProps = merge(pick(item, ["options", "defaultProps"]), item.exProps || {})
+	const componentProps = merge(pick(item, ["options", "defaultProps", "rows"]), item.exProps || {})
 
 	//混合了Field和input slot组件的slots组合
 	const componentSlots = item.defaultSlots || {}
@@ -241,6 +243,48 @@ const render = (item, submitForm, { props, slots }) => {
 					</ExField>
 				)
 				break
+			case "matrix-radio": {
+				if (item.required) {
+					fieldProps.rules[fieldProps.rules.length - 1].validator = () => {
+						for (let i = 0; i < item.rows.length; i++) {
+							if (!submitForm[item.key][item.rows[i]]) {
+								return `请选择${item.rows[i]}`
+							}
+						}
+						return true
+					}
+				}
+				renderItem = <ExMatrixRadio v-model={submitForm[item.key]} {...componentProps} {...fieldProps} />
+				break
+			}
+			case "matrix-scale": {
+				if (item.required) {
+					fieldProps.rules[fieldProps.rules.length - 1].validator = () => {
+						for (let i = 0; i < item.rows.length; i++) {
+							if (!submitForm[item.key][item.rows[i]]) {
+								return `请选择${item.rows[i]}`
+							}
+						}
+						return true
+					}
+				}
+				renderItem = <ExMatrixScale v-model={submitForm[item.key]} {...componentProps} {...fieldProps} />
+				break
+			}
+			case "matrix-checkbox": {
+				if (item.required) {
+					fieldProps.rules[fieldProps.rules.length - 1].validator = () => {
+						for (let i = 0; i < item.rows.length; i++) {
+							if (!submitForm[item.key][item.rows[i]]) {
+								return `请选择${item.rows[i]}`
+							}
+						}
+						return true
+					}
+				}
+				renderItem = <ExMatrixCheckbox v-model={submitForm[item.key]} {...componentProps} {...fieldProps} />
+				break
+			}
 			default:
 				renderItem = (
 					<ExField v-model={submitForm[item.key]} {...fieldProps}>

package/components/form/index.js

@@ -20,6 +20,7 @@ import _ExSwitch from "./ExSwitch.jsx"
 import _ExRate from "./ExRate.jsx"
 import _ExSlider from "./ExSlider.jsx"
 import _ExFieldUploader from "./ExFieldUploader.jsx"
+import _ExMatrixRadio from "./ExMatrixRadio.jsx"
 
 import _ExForm from "./ExForm.jsx"
 
@@ -40,5 +41,6 @@ export const ExSwitch = withInstall(_ExSwitch)
 export const ExRate = withInstall(_ExRate)
 export const ExSlider = withInstall(_ExSlider)
 export const ExFieldUploader = withInstall(_ExFieldUploader)
+export const ExMatrixRadio = withInstall(_ExMatrixRadio)
 
 export const ExForm = withInstall(_ExForm)