85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<template v-for="item in formItems" :key="item.title">
|
||
|
|
<form-cell v-if="item.cellType === 'formCellItem'" v-bind="item" :form="form" :disableChange="disabledMap[item.title]"
|
||
|
|
@change="change" @addRule="addRule" />
|
||
|
|
<custom-cell v-else-if="item.cellType === 'customCellItem'" v-bind="item" :form="form"
|
||
|
|
:readonly="disabledMap[item.title]" @change="change" @addRule="addRule" />
|
||
|
|
</template>
|
||
|
|
<form-cell />
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { computed, provide, ref } from 'vue';
|
||
|
|
import verifyForm from './verify.js';
|
||
|
|
|
||
|
|
import FormCell from './form-cell/index.vue';
|
||
|
|
// import CustomCell from './custom-cell/index.vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
disableTitles: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ([])
|
||
|
|
},
|
||
|
|
rule: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const formCellType = ['input', 'select', 'date', 'radio', 'region', 'textarea', 'multiSelectAndOther', 'selfMultipleDiseases'];
|
||
|
|
const formCellTitle = ['surgicalHistory'];
|
||
|
|
const customCellType = ['BMI', 'selfMultipleDiseases', 'bloodPressure', 'diagnosis'];
|
||
|
|
const disabledMap = computed(() => props.disableTitles.reduce((m, i) => {
|
||
|
|
if (typeof i === 'string' && i.trim()) {
|
||
|
|
m[i] = true;
|
||
|
|
}
|
||
|
|
return m
|
||
|
|
}, {}))
|
||
|
|
|
||
|
|
provide('addRule', addRule);
|
||
|
|
|
||
|
|
const customRule = ref({});
|
||
|
|
|
||
|
|
const formItems = computed(() => {
|
||
|
|
return props.items.map(i => {
|
||
|
|
let cellType = '';
|
||
|
|
if (customCellType.includes(i.type)) {
|
||
|
|
cellType = 'customCellItem';
|
||
|
|
} else if (formCellType.includes(i.type) || formCellTitle.includes(i.title)) {
|
||
|
|
cellType = 'formCellItem';
|
||
|
|
}
|
||
|
|
return { ...i, cellType }
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const rules = computed(() => ({ ...customRule.value, ...props.rule }));
|
||
|
|
|
||
|
|
function addRule({ title, fn }) {
|
||
|
|
if (title && props.items.some(i => i.title === title) && typeof fn === 'function') {
|
||
|
|
customRule.value[title] = fn;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function change(data) {
|
||
|
|
emits('change', data)
|
||
|
|
}
|
||
|
|
|
||
|
|
function verify() {
|
||
|
|
return verifyForm(props.items, rules.value, props.form)
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ verify })
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import './cell-style.css';
|
||
|
|
</style>
|