123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- import { ElCheckboxGroup, ElCheckbox, ElRadioGroup, ElRadio, ElInput, ElCol } from 'element-plus'
- import CipButton from '@cip/components/cip-button'
- import CipButtonText from '@cip/components/cip-button-text'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { computed, h } from 'vue'
- import { isArray } from '@cip/utils/util'
- import './index.less'
- export default {
- inheritAttrs: false,
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const { width, emitModelValue, ...formInput } = useFormInput(props, context)
- const isMultiple = computed(() => {
- if (['radio', 'checkbox'].includes(props.model?.type)) {
- return props.model.type === 'checkbox'
- } else {
- return props.model?.multiple ?? false
- }
- })
- const modelOptions = computed(() => {
- return props.otherValue ?? []
- })
- const limit = computed(() => {
- return props.config?.limit ?? ''
- })
- const transValue = computed({
- get () {
- const value = props.modelValue
- if (isMultiple.value) {
- if (!isArray(value)) {
- return value ? value.split(props.config.splitKey || ',') : []
- } else {
- return value ?? []
- }
- } else {
- return value ?? ''
- }
- }
- })
- const emitInput = val => {
- let modelValue = val
- if (isMultiple.value) {
- modelValue = val?.join(props.config.splitKey || ',') ?? val
- }
- emitModelValue(modelValue)
- }
- const getModelValue = (val) => {
- if (isMultiple.value) {
- return val.filter(v => modelOptions.value.includes(v))
- } else {
- return modelOptions.value.includes(val) ? val : ''
- }
- }
- // 输入框
- const inputItem = (value, index) => h(ElInput, {
- modelValue: value.label ?? value,
- maxlength: limit.value,
- 'show-word-limit': true,
- 'onUpdate:modelValue': val => {
- value.label ? value.label = val : value = val
- modelOptions.value[index] = value
- emitInput(getModelValue(transValue.value))
- context.emit('update:otherValue', modelOptions.value)
- }
- })
- // 删除按钮
- const deleteItem = (val, idx) => h(CipButton, {
- icon: 'el-icon-minus',
- type: 'danger',
- plain: true,
- round: true,
- size: 'small',
- onClick: e => {
- const deleteItem = modelOptions.value.splice(idx, 1)
- // 删除已选值时,清空默认值
- if (props.modelValue === deleteItem[0]) {
- emitInput()
- }
- context.emit('update:otherValue', modelOptions.value)
- }
- })
- const checkboxItem = (val, idx) => {
- const ElComponent = isMultiple.value ? ElCheckbox : ElRadio
- return h(ElComponent, {
- label: val.label ?? val,
- style: { display: 'block' },
- 'onUpdate:modelValue': emitInput
- }, {
- default: () => [inputItem(val, idx), deleteItem(val, idx)]
- })
- }
- // 新增
- const addItem = () => h(CipButtonText, {
- onClick: e => {
- modelOptions.value.push('新选项')
- context.emit('update:otherValue', modelOptions.value)
- }
- }, { default: () => '新增' })
- const checkboxItems = () => modelOptions.value.map(checkboxItem)
- const checkboxDefaultSlots = () => {
- return checkboxItems()
- }
- const checkboxGroup = () => {
- const ElComponentGroup = isMultiple.value ? ElCheckboxGroup : ElRadioGroup
- return h(ElComponentGroup, {
- ...context.attrs,
- ...formInput,
- modelValue: transValue.value,
- class: 'option-static-data',
- 'onUpdate:modelValue': emitInput
- },
- { default: checkboxDefaultSlots })
- }
- return () => h(ElCol, {}, { default: () => [checkboxGroup(), addItem()] })
- }
- }
|