123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- import { computed, ref, watch, unref } from 'vue'
- import { useElFormItemInject } from './use-form'
- import {
- isEmpty,
- isNotEmpty,
- getLabelByValue,
- isObject,
- isArray,
- isNumber, getFieldValue, setFieldValue, getUsingConfig
- } from '@cip/utils/util'
- import { judgeUseFn } from '@cip/components/cip-form-item/util'
- import { getValueByTemplate } from '../cip-form-input/form-value-store'
- import { UpdateFormStream } from '../helper/update-form-stream'
- const useUpdateStream = (props, context) => {
- const updateStream = new UpdateFormStream(props, (val) => context.emit('streamUpdate:model', val))
- return updateStream
- }
- const useProxyOtherValue = (props, maxOtherKey = 1, updateStream) => {
- const result = []
- for (let i = 0; i < maxOtherKey; i++) {
- const proxyValue = computed({
- get () {
- return props.values[i + 1]
- },
- set (val) {
- updateStream.appendOtherValue(val, i + 1)
- updateStream.end()
- }
- })
- result.push(proxyValue)
- }
- return result
- }
- const useFormBasicConfig = (props) => {
- const securityConfig = computed(() => {
- return props.config ?? {}
- })
- const clearable = computed(() => {
- return securityConfig.value.clearable ?? true
- })
- const width = computed(() => {
- return securityConfig.value.width ?? '100%'
- })
- const inputStyle = computed(() => {
- return securityConfig.value.inputStyle ?? {}
- })
- const placeholder = computed(() => {
- return securityConfig.value.placeholder
- })
- const noMatchText = computed(() => {
- return securityConfig.value.noMatchText ?? '无相关内容'
- })
- return {
- securityConfig, clearable, width, placeholder, inputStyle, noMatchText
- }
- }
- export const useFormInput = (props, context, { fromModelValue, toModelValue, maxOtherKey } = {}) => {
- const inputRef = ref()
- const updateStream = useUpdateStream(props, context)
- const { securityConfig, clearable, width, placeholder, inputStyle, noMatchText } = useFormBasicConfig(props)
- const emitInput = (val) => {
- emitModelValue(val)
- }
- const emitModelValue = (val) => {
- val = isNotEmpty(toModelValue) ? toModelValue(val) : val
- // 同时支持2中修改方式,在formItem中不在接受update:modelValue
- context.emit('update:modelValue', val)
- updateStream.appendValue(val)
- updateStream.end()
- }
- // 组件单独使用时不在支持对otherValue的修改
- const emitOtherValue = (val) => {
- // context.emit('update:otherValue', val)
- updateStream.appendOtherValue(val)
- updateStream.end()
- }
- const proxyOtherValue = useProxyOtherValue(props, maxOtherKey, updateStream)
- const proxyValue = computed({
- // 单值时使用
- get () {
- let modelValue = props.modelValue
- if (props.values && props.values.length > 0) {
- modelValue = props.values[0]
- }
- return isNotEmpty(fromModelValue) ? fromModelValue(modelValue) : modelValue // props.modelValue
- },
- set (val) {
- emitModelValue(val)
- }
- })
- watch([() => securityConfig.value.defaultValue, () => props.changeCount], ([defaultValue]) => {
- if (props.showTemplate === true) {
- // 处于展示模版模式时,同步展示默认值【注:此模式仅在设计表单时开启】
- emitInput(defaultValue)
- } else {
- // 处于实际值展示模式时, 需要modelValue 和defaultValue都不为空才进行值的更新
- if (isEmpty(props.modelValue) && isNotEmpty(defaultValue)) {
- // emitInput(getValueByTemplate(defaultValue)) // date下需要转换值后再写入
- proxyValue.value = getValueByTemplate(defaultValue)
- }
- }
- }, { immediate: true })
- return {
- inputRef,
- inputStyle,
- proxyValue,
- securityConfig,
- emitInput,
- emitModelValue,
- emitOtherValue,
- updateStream,
- proxyOtherValue,
- placeholder,
- clearable,
- width,
- noMatchText
- }
- }
- export const useFormView = (props, { maxOtherKey } = {}) => {
- const { securityConfig, clearable, width, placeholder, inputStyle } = useFormBasicConfig(props)
- const proxyOtherValue = useProxyOtherValue(props, maxOtherKey, () => { })
- return {
- securityConfig, clearable, width, inputStyle, placeholder, proxyOtherValue
- }
- }
- export const useElementFormEvent = () => {
- const elFormItem = useElFormItemInject()
- const handleChange = (val) => {
- // 2.2.17 修改为 elFormItem.validate
- // 2.2.x 使用 elFormItem.formItemMitt
- // console.log(elFormItem.validate())
- elFormItem.validate?.('change')
- elFormItem.formItemMitt?.emit('el.form.change', [val])
- }
- const handleBlur = (val) => {
- elFormItem.validate?.('blur')
- elFormItem.formItemMitt?.emit('el.form.blur', [val])
- }
- return {
- handleChange,
- handleBlur
- }
- }
- export const useOptions = (props, multiple, updateStream, context) => {
- const optionProps = computed(() => {
- return Object.assign({ label: 'label', value: 'value', children: 'children' }, props.config?.treeProps, props.config?.optionProps)
- })
- const otherKey = computed(() => {
- return props.config?.otherKey
- })
- const splitKey = computed(() => {
- return props.config?.splitKey ?? ','
- })
- const withObject = computed(() => {
- // 传出的值是否为object
- return props.config?.withObject ?? false
- })
- const realArray = computed(() => {
- // 需要返回的shu
- return props.config?.realArray ?? false
- })
- const options = ref([])
- let unwatch = null
- const getOptions = async (val, outVal) => {
- if (props.config.asyncOptions) {
- const asyncFunc = judgeUseFn('asyncOptions', props.config)
- options.value = await asyncFunc(val, outVal)
- } else {
- options.value = props.config?.options ?? []
- }
- if (unwatch) unwatch() // 获取一次options后重新开启监听
- unwatch = watch(() => props.changeCount, () => {
- if (isEmpty(props.modelValue) && props.config.autoSelect && updateStream) { // modelValue为空
- const autoValue = isObjectOption.value ? options.value[0][optionProps.value.value] : options.value[0]
- const autoLabel = isObjectOption.value ? options.value[0][optionProps.value.label] : options.value[0]
- // eslint-disable-next-line no-unused-expressions
- // emitInput(autoValue)
- // emitOtherValue && emitOtherValue(autoLabel)
- updateStream.appendValue(autoValue)
- updateStream.appendOtherValue(autoLabel)
- updateStream.end()
- }
- }, { immediate: true })
- }
- // 计算option类型
- const isObjectOption = computed(() => {
- return isObject(options.value[0])
- })
- // 获取otherValue的值
- const getOtherValueByValue = (value) => {
- if (unref(multiple)) {
- if (withObject.value) {
- return value.map(i => {
- return options.value?.find(v => v[optionProps.value.value] === i) ?? {}
- })
- }
- return value.map(val => getLabelByValue(val, options.value, optionProps.value) ?? val).join(splitKey.value)
- } else {
- if (withObject.value) {
- return options.value?.find(v => v[optionProps.value.value] === value) ?? {}
- }
- return getLabelByValue(value, options.value, optionProps.value) ?? value
- }
- }
- const getValue = (modelValue) => {
- if (unref(multiple)) {
- // 防止空字符串导致的['']错误
- const modelArray = isArray(modelValue) ? modelValue : (modelValue ? modelValue.split(splitKey.value) : [])
- // 如果option的value值是数字型将值转换为数字型,否则就是字符型
- const autoFormat = !(props.config?.multiple && props.config?.remote)
- if (autoFormat) {
- const optionCell = isObjectOption.value ? options.value[0]?.[optionProps.value.value] : options.value[0]
- if (isNumber(optionCell)) {
- return modelArray.map(i => parseInt(i))
- } else {
- return modelArray.map(i => String(i))
- }
- }
- return modelArray
- } else {
- return modelValue ?? ''
- }
- }
- const getModelValue = (value) => {
- if (unref(multiple)) {
- if (realArray.value) {
- return value
- } else {
- return isArray(value) ? value.join(splitKey.value) : value
- }
- } else {
- return value
- }
- }
- // 根据otherValue跟随modelValue变化
- const getOtherValue = (modelValue, value) => {
- if (isObjectOption.value) {
- return getOtherValueByValue(value)
- } else {
- return modelValue
- }
- }
- if (!(props.config.dependOn?.length) && !(props.config.outDependOn?.length)) {
- getOptions() // .then(() => { console.log('[init]: getOptions') })
- if (props.config.options) { // 动态表单设计时修改options需要触发此方法
- watch(() => props.config.options, (val) => {
- getOptions() // .then(() => { console.log('[config.options change]: getOptions') })
- })
- }
- } else {
- watch([() => props.dependOnValues, () => props.outDependOnValues], ([dependOnValues, outDependOnValues]) => {
- getOptions(dependOnValues || {}, outDependOnValues || {}) // .then(() => { console.log('[dependOn change]: getOptions') })
- }, { immediate: true })
- }
- // options部分组件重新定义proxyOptionsValue
- const proxyOptionsValue = computed({
- get () {
- return getValue(props.modelValue)
- },
- set (value) {
- const modelValue = getModelValue(value)
- if (context) {
- context.emit('update:modelValue', modelValue)
- }
- if (updateStream) {
- updateStream.appendValue(modelValue)
- if (otherKey.value) {
- const otherValue = getOtherValue(modelValue, value)
- // context.emit('update:otherValue', otherValue)
- updateStream.appendOtherValue(otherValue)
- // 目前仅支持单选
- if (!unref(multiple)) {
- const checkOption = options.value.find(v => v[optionProps.value.value] === value)
- updateStream.appendOtherValue(checkOption, 2)
- } else {
- const checkOptions = options.value.filter(v => value.includes(v[optionProps.value.value]))
- updateStream.appendOtherValue(checkOptions, 2)
- }
- }
- updateStream.end()
- } else {
- console.error('updateStream 不存在,无法更新数据')
- }
- }
- })
- return {
- optionProps,
- options,
- getOptions,
- splitKey,
- isObjectOption,
- getValue,
- getModelValue,
- getOtherValue,
- proxyOptionsValue
- }
- }
- /**
- * 从props.config去除制定的值
- * propKeys事例:
- * [
- * 'a', 获取A
- * ['b','b1'], 获取b的值转为b1
- * ['c',{key:'c1', defaultValue: 1}], 获取c的值转为c1若c的值不存在则赋值1
- * ['d',{ defaultValue: 1}] 获取d的若d不存在则赋值1
- * ]
- * @param props
- * @param propKeys
- *
- */
- export const useInputProps = (props, propKeys = []) => {
- return computed(() => {
- const config = props.config || {}
- return propKeys.reduce((acc, key) => {
- if (typeof key !== 'string') {
- const getKey = key[0]
- let setKey = key[0]
- let defaultValue
- if (isNotEmpty(key[1])) {
- if (typeof key[1] === 'string') {
- setKey = key[1]
- } else {
- setKey = getUsingConfig(key[1].key, key[0]) // 只存在defaultValue配置时使用第一位key
- defaultValue = key[1].defaultValue
- }
- }
- const propValue = getFieldValue(config, getKey)
- setFieldValue(acc, setKey, getUsingConfig(propValue, defaultValue))
- } else {
- const propValue = getFieldValue(config, key)
- setFieldValue(acc, key, propValue)
- }
- return acc
- }, {}) || {}
- })
- }
|