123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- import { computed, ref, watch, unref } from 'vue'
- import { useElFormItemInject } from './use-form'
- import {
- isEmpty,
- isNotEmpty,
- getLabelByValue,
- isObject,
- isArray,
- isNumber,
- getFieldValue,
- setFieldValue
- } from '@cip/utils/util'
- import { getValueByTemplate } from '@cip/components/cip-form-input/form-value-store'
- const useProxyOtherValue = (props, emitOtherValue) => {
- const result = []
- if (props.config.otherKey) {
- const isStringKey = typeof props.config.otherKey === 'string'
- const otherKey = isStringKey ? [props.config.otherKey] : props.config.otherKey
- otherKey.forEach(key => {
- const proxyValue = computed({
- get () {
- return isStringKey ? props.otherValue : getFieldValue(props.otherValue, key)
- },
- set (val) {
- if (isStringKey) {
- emitOtherValue(val)
- } else {
- const otherValue = props.otherValue
- setFieldValue(otherValue, key, val)
- emitOtherValue(otherValue)
- }
- }
- })
- 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 placeholder = computed(() => {
- return securityConfig.value.placeholder ?? ' '
- })
- return {
- securityConfig, clearable, width, placeholder
- }
- }
- export const useFormInput = (props, context) => {
- const inputRef = ref()
- const { securityConfig, clearable, width, placeholder } = useFormBasicConfig(props)
- const emitInput = (val) => {
- context.emit('update:modelValue', val)
- }
- const emitModelValue = (val) => {
- emitInput(val)
- }
- const emitOtherValue = (val) => {
- context.emit('update:otherValue', val)
- }
- const proxyOtherValue = useProxyOtherValue(props, emitOtherValue)
- watch(() => securityConfig.value.defaultValue, (defaultValue) => {
- if (props.showTemplate === true) {
- // 处于展示模版模式时,同步展示默认值【注:此模式仅在设计表单时开启】
- emitInput(defaultValue)
- } else {
- // 处于实际值展示模式时, 需要modelValue 和defaultValue都不为空才进行值的更新
- if (isEmpty(props.modelValue) && isNotEmpty(defaultValue)) {
- emitInput(getValueByTemplate(defaultValue))
- }
- }
- }, { immediate: true })
- const proxyValue = computed({
- // 单值时使用
- get () {
- return props.modelValue
- },
- set (val) {
- emitModelValue(val)
- }
- })
- return {
- inputRef,
- proxyValue,
- securityConfig,
- emitInput,
- emitModelValue,
- emitOtherValue,
- proxyOtherValue,
- placeholder,
- clearable,
- width
- }
- }
- export const useFormView = (props) => {
- const { securityConfig, clearable, width, placeholder } = useFormBasicConfig(props)
- const proxyOtherValue = useProxyOtherValue(props, () => {})
- return {
- securityConfig, clearable, width, placeholder, proxyOtherValue
- }
- }
- export const useElementFormEvent = () => {
- const elFormItem = useElFormItemInject()
- const handleChange = (val) => {
- elFormItem.formItemMitt?.emit('el.form.change', [val])
- }
- const handleBlur = (val) => {
- console.log(elFormItem, val)
- elFormItem.formItemMitt?.emit('el.form.blur', [val])
- }
- return {
- handleChange,
- handleBlur
- }
- }
- export const useOptions = (props, multiple, emitInput, emitOtherValue) => {
- const optionProps = computed(() => {
- const { label = 'label', value = 'value', children = 'children' } = props.config?.optionProps ?? {}
- return { label, value, children }
- })
- 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([])
- const getOptions = async (val, outVal) => {
- if (props.config.asyncOptions) {
- options.value = await props.config.asyncOptions(val, outVal)
- } else {
- options.value = props.config?.options ?? []
- }
- if (isEmpty(props.modelValue) && props.config.autoSelect && emitInput) { // 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)
- }
- }
- // 计算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 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))
- }
- } 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 })
- }
- return {
- optionProps,
- options,
- getOptions,
- isObjectOption,
- getValue,
- getModelValue,
- getOtherValue
- }
- }
|