123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- import { defineAsyncComponent } from 'vue'
- import { formInputProps, fromInputEmits } from '@cip/components/cip-form-input/form-input-props'
- import { useFormInput, useElementFormEvent } from '@cip/components/hooks/form-input'
- import CipButtonText from '@cip/components/cip-button-text'
- import './mobile.less'
- const CipFormItem = defineAsyncComponent(() => import('../../../cip-form-item'))
- export default {
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const { handleChange } = useElementFormEvent()
- const formInput = useFormInput(props, context)
- const { securityConfig, emitModelValue } = formInput
- const updateModelValue = (val, index) => {
- const data = props.modelValue
- data[index] = val
- emitModelValue(data)
- }
- const addItem = () => {
- const val = Array.isArray(props.modelValue) ? props.modelValue : []
- val.push({})
- handleChange(val)
- emitModelValue(val)
- }
- return () => <div class={'basic-table__mobile'}>
- {
- (props.modelValue || []).map((row, rowIndex) =>
- <div>
- <div>{rowIndex + 1}</div>
- {securityConfig.value.options.map((option, optionIndex) => {
- const inputConfig = { ...option.config }
- inputConfig.width = '100%'
- inputConfig.ruleKey = `${props.fieldKey}.${rowIndex}.${option.key}`
- return <CipFormItem
- key={`${rowIndex}-${optionIndex}`}
- model={row}
- fieldKey={option.key}
- config={inputConfig}
- inTable={true}
- tableData={props.modelValue}
- tableDependOnValues={props.dependOnValues}
- onUpdate:model={(val) => {
- row = val
- updateModelValue(val, rowIndex)
- }}
- />
- })}
- </div>
- )
- }
- <CipButtonText size="large" onClick={() => addItem()}>
- <i class="el-icon-circle-plus create-handle"/>
- </CipButtonText>
- </div>
- }
- }
|