|
|
@ -4,121 +4,118 @@ |
|
|
@ 备注: |
|
|
@ 备注: |
|
|
--> |
|
|
--> |
|
|
<template> |
|
|
<template> |
|
|
<el-form-item |
|
|
<el-form-item v-bind="data.item" :prop="tProp || data.name" :class="config.className" :rules="itemRules as any" |
|
|
v-bind="data.item" |
|
|
:label="getLabel(data.item as FormItem)"> |
|
|
:prop="tProp || data.name" |
|
|
<input v-model="value" type="hidden"> |
|
|
:class="config.className" |
|
|
<AssociatedForms :data="props.data" :form-props="formProps" :tablekey="props.tablekey" |
|
|
:rules="itemRules as any" |
|
|
:row-index="props.rowIndex" @value-changed="valueChanged" @value-changed-table="valueChangedTable"></AssociatedForms> |
|
|
:label="getLabel(data.item as FormItem)" |
|
|
</el-form-item> |
|
|
> |
|
|
|
|
|
<input v-model="value" type="hidden" > |
|
|
|
|
|
<AssociatedForms :data="props.data" :form-props="formProps" :tablekey="props.tablekey" @value-changed="valueChanged"></AssociatedForms> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<script lang='ts' setup> |
|
|
<script lang='ts' setup> |
|
|
import AssociatedForms from './associatedForms.vue'; |
|
|
import AssociatedForms from './associatedForms.vue'; |
|
|
import { |
|
|
import { |
|
|
constControlChange, |
|
|
constControlChange, |
|
|
constFormProps, |
|
|
constFormProps, |
|
|
} from '@/api/DesignForm/utils' |
|
|
} from '@/api/DesignForm/utils' |
|
|
import validate from '@/api/DesignForm/validate' |
|
|
import validate from '@/api/DesignForm/validate' |
|
|
import { FormItem, FormList } from '@/api/DesignForm/types' |
|
|
import { FormItem, FormList } from '@/api/DesignForm/types' |
|
|
const props = withDefaults( |
|
|
const props = withDefaults( |
|
|
defineProps<{ |
|
|
defineProps<{ |
|
|
data: FormList |
|
|
data: FormList |
|
|
tablekey: any |
|
|
tablekey: any |
|
|
|
|
|
rowIndex: any |
|
|
numrun?: number |
|
|
numrun?: number |
|
|
modelValue?: any // 子表和弹性布局时时有传 |
|
|
modelValue?: any // 子表和弹性布局时时有传 |
|
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|
|
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|
|
}>(), |
|
|
}>(), |
|
|
{} |
|
|
{} |
|
|
) |
|
|
) |
|
|
|
|
|
|
|
|
const emits = defineEmits<{ |
|
|
const emits = defineEmits<{ |
|
|
(e: 'update:modelValue', numVal: any): void |
|
|
(e: 'update:modelValue', numVal: any): void |
|
|
(e: 'asfValueChanged', val: any): void |
|
|
(e: 'asfValueChanged', val: any): void |
|
|
}>() |
|
|
}>() |
|
|
|
|
|
|
|
|
const formProps = inject(constFormProps, {}) as any |
|
|
const formProps = inject(constFormProps, {}) as any |
|
|
const type = computed(() => { |
|
|
const type = computed(() => { |
|
|
return formProps.value.type |
|
|
return formProps.value.type |
|
|
}) |
|
|
}) |
|
|
const config = computed(() => { |
|
|
const config = computed(() => { |
|
|
return props.data.config || {} |
|
|
return props.data.config || {} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const changeEvent = inject(constControlChange, '') as any |
|
|
const changeEvent = inject(constControlChange, '') as any |
|
|
|
|
|
|
|
|
const value = computed({ |
|
|
const value = computed({ |
|
|
get() { |
|
|
get() { |
|
|
if (props.tProp) { |
|
|
if (props.tProp) { |
|
|
// 表格和弹性布局 |
|
|
// 表格和弹性布局 |
|
|
return props.modelValue |
|
|
return props.modelValue |
|
|
} else { |
|
|
} else { |
|
|
return formProps.value.model[props.data.name] |
|
|
return formProps.value.model[props.data.name] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
set(newVal: any) { |
|
|
set(newVal: any) { |
|
|
if (props.tProp) { |
|
|
if (props.tProp) { |
|
|
emits('update:modelValue', newVal) |
|
|
emits('update:modelValue', newVal) |
|
|
} |
|
|
} |
|
|
updateModel(newVal) |
|
|
updateModel(newVal) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
const updateModel = (val: any) => { |
|
|
const updateModel = (val: any) => { |
|
|
console.log("dfsasdfasdf") |
|
|
//console.log("dfsasdfasdf") |
|
|
let controlAttribute = "" |
|
|
let controlAttribute = "" |
|
|
if(props.data.control){ |
|
|
if (props.data.control) { |
|
|
if(props.data.control.type){ |
|
|
if (props.data.control.type) { |
|
|
controlAttribute = props.data.control.type |
|
|
controlAttribute = props.data.control.type |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
changeEvent && |
|
|
changeEvent && |
|
|
changeEvent({ |
|
|
changeEvent({ |
|
|
key: props.data.name, |
|
|
key: props.data.name, |
|
|
value: val, |
|
|
value: val, |
|
|
data: props.data, |
|
|
data: props.data, |
|
|
tProp: props.tProp, |
|
|
tProp: props.tProp, |
|
|
type: props.data.type, |
|
|
type: props.data.type, |
|
|
attribute: controlAttribute |
|
|
attribute: controlAttribute |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getLabel = (ele: FormItem) => { |
|
|
const getLabel = (ele: FormItem) => { |
|
|
const showColon = formProps.value.showColon ? '：' : '' |
|
|
const showColon = formProps.value.showColon ? '：' : '' |
|
|
if (ele) { |
|
|
if (ele) { |
|
|
return ele.showLabel ? '' : ele.label + showColon |
|
|
return ele.showLabel ? '' : ele.label + showColon |
|
|
} else { |
|
|
} else { |
|
|
return '' |
|
|
return '' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 返回当前item项的校验规则 |
|
|
// 返回当前item项的校验规则 |
|
|
const itemRules = computed(() => { |
|
|
const itemRules = computed(() => { |
|
|
let temp |
|
|
let temp |
|
|
const itemR: any = props.data.item?.rules || [] |
|
|
const itemR: any = props.data.item?.rules || [] |
|
|
const customR = formatCustomRules() |
|
|
const customR = formatCustomRules() |
|
|
// 如果三个都没有设置，则返回undefined |
|
|
// 如果三个都没有设置，则返回undefined |
|
|
if (itemR?.length || customR?.length) { |
|
|
if (itemR?.length || customR?.length) { |
|
|
temp = [...customR, ...itemR] |
|
|
temp = [...customR, ...itemR] |
|
|
} |
|
|
} |
|
|
return temp |
|
|
return temp |
|
|
}) |
|
|
}) |
|
|
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|
|
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|
|
const formatCustomRules = () => { |
|
|
const formatCustomRules = () => { |
|
|
const rulesReg: any = {} |
|
|
const rulesReg: any = {} |
|
|
validate && |
|
|
validate && |
|
|
validate.forEach(item => { |
|
|
validate.forEach(item => { |
|
|
rulesReg[item.type] = item.regExp |
|
|
rulesReg[item.type] = item.regExp |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
// 获取校验方法 父级使用provide方法注入 |
|
|
// 获取校验方法 父级使用provide方法注入 |
|
|
const temp: any = [] |
|
|
const temp: any = [] |
|
|
props.data.customRules?.forEach((item: any) => { |
|
|
props.data.customRules?.forEach((item: any) => { |
|
|
if (!item.message && item.type !== 'methods') { |
|
|
if (!item.message && item.type !== 'methods') { |
|
|
return // 方法时允许提示信息为空 |
|
|
return // 方法时允许提示信息为空 |
|
|
} |
|
|
} |
|
|
@ -132,7 +129,7 @@ const formatCustomRules = () => { |
|
|
// 方法时 |
|
|
// 方法时 |
|
|
const methods: any = item.methods |
|
|
const methods: any = item.methods |
|
|
if (methods) { |
|
|
if (methods) { |
|
|
obj = { validator: inject(methods, {}) } |
|
|
obj = { validator: inject(methods, {}) } |
|
|
} |
|
|
} |
|
|
} else if (item.type) { |
|
|
} else if (item.type) { |
|
|
obj = { pattern: rulesReg[item.type as string] } |
|
|
obj = { pattern: rulesReg[item.type as string] } |
|
|
@ -152,39 +149,81 @@ const formatCustomRules = () => { |
|
|
message |
|
|
message |
|
|
) |
|
|
) |
|
|
) |
|
|
) |
|
|
}) |
|
|
}) |
|
|
return temp |
|
|
return temp |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const valueChanged = (val:any) =>{ |
|
|
const valueChanged = (val: any) => { |
|
|
//console.log("关联表单选择--->",val) |
|
|
//console.log("关联表单选择--->", val) |
|
|
|
|
|
|
|
|
|
|
|
value.value = val.currentVal |
|
|
|
|
|
emits("asfValueChanged", val) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const valueChangedTable = (val: any) => { |
|
|
|
|
|
//console.log("关联表单选择table--->", val) |
|
|
|
|
|
|
|
|
value.value = val.currentVal |
|
|
|
|
|
emits("asfValueChanged",val) |
|
|
emits("asfValueChanged", val) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//确定哪个或哪些表单是被放置在子表中的 |
|
|
|
|
|
//valueTest.value = formProps.model |
|
|
|
|
|
//console.log(formProps.value.model) |
|
|
|
|
|
for (let key in formProps.value.model) { |
|
|
|
|
|
if (key.startsWith("table")) { |
|
|
|
|
|
if (Array.isArray(formProps.value.model[key])) { |
|
|
|
|
|
if (formProps.value.model[key].length > 0) { |
|
|
|
|
|
for (let key1 in formProps.value.model[key][0]) { |
|
|
|
|
|
|
|
|
|
|
|
if (key1 == props.data.name) { |
|
|
|
|
|
/* console.log(key1) |
|
|
|
|
|
//当前关联表单在子表的第几行 |
|
|
|
|
|
console.log(props.rowIndex) |
|
|
|
|
|
//当值变化时 |
|
|
|
|
|
console.log(formProps.value.model[key][props.rowIndex][key1]) |
|
|
|
|
|
console.log(val.currentVal) */ |
|
|
|
|
|
formProps.value.model[key][props.rowIndex][key1] = val.currentVal |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style lang='scss' scoped> |
|
|
<style lang='scss' scoped> |
|
|
.imgbox{ |
|
|
.imgbox { |
|
|
padding: 0 5px; |
|
|
padding: 0 5px; |
|
|
max-width: 300px; |
|
|
max-width: 300px; |
|
|
max-height: 200px; |
|
|
max-height: 200px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 200px; |
|
|
height: 200px; |
|
|
.image-slot { |
|
|
|
|
|
display: flex; |
|
|
.image-slot { |
|
|
justify-content: center; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 100%; |
|
|
align-items: center; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
background: var(--el-fill-color-light); |
|
|
height: 100%; |
|
|
color: var(--el-text-color-secondary); |
|
|
background: var(--el-fill-color-light); |
|
|
font-size: 30px; |
|
|
color: var(--el-text-color-secondary); |
|
|
} |
|
|
font-size: 30px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
