mteacher/src/views/message/control/subform.vue

<template>
    <div class="oSubform" :class="[preview ? '' : 'o-unit']" v-if="widget.type == 'subform'">
        <!-- <input type="text" :name="widget.model" v-model="dataModel"> -->
        <!-- <van-field type="hidden" :name="widget.model" v-model="dataModel" /> -->
        <van-cell v-if="!preview" style="padding-bottom: 5px;" :title="(widget.name || '子表单')" :border="false"></van-cell>
        <div v-for="(child, iChild) in columns" :key="iChild" :class="preview ? 'previewSection' : null">
            <van-cell v-if="preview" class="previewTitle" :title="(widget.name || '子表单') + `${iChild + 1}`" :border="false"></van-cell>
            <span v-if="columns.length > 1 && !preview" class="delete">
                <span @click="onDelete(child, iChild)">删除</span>
            </span>
            <div v-if="child.list && child.list.length > 0" :class="[preview ? null : 'van-hairline--bottom']">
                <div v-for="(item, index) in child.list" :key="'o' + index">
                    <template v-if="item.type == 'input' && !item.hidden">
                        <o-input :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'textarea' && !item.hidden">
                        <o-textarea :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'number' && !item.hidden">
                        <o-number :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'radio' && !item.hidden">
                        <o-radio :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'checkbox' && !item.hidden">
                        <o-checkbox :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'date' && !item.hidden">
                        <o-date :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'rate' && !item.hidden">
                        <o-rate :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'select' && !item.hidden">
                        <o-select :widget="item" :fileCheck="fileCheck" @relationFormChange="relationFormChange" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'organ' && !item.hidden">
                        <o-organ :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'school' && !item.hidden">
                        <o-school :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'text' && !item.hidden">
                        <o-text :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'imgupload' && !item.hidden">
                        <o-img-upload :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'file' && !item.hidden">
                        <o-file-upload :widget="item" :fileCheck="fileCheck" @fileCheckRequired="fileCheckRequired" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'divider' && !item.hidden">
                        <o-divider :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <template v-if="item.type == 'cascader' && !item.hidden">
                        <o-cascader :widget="item" :fileCheck="fileCheck" :preview="preview" :value="defaultValue ? defaultValue[iChild] : null" />
                    </template>
                    <!-- <template v-if="item.type == 'subform'">
                        <o-subform :widget="item" />
                    </template> -->
                </div>
            </div>
        </div>
        <div class="addItem" @click="addItem" v-if="!preview">
            <van-icon name="plus" /> 添加
        </div>
    </div>
</template>
<script>
import OInput from './input'
import OTextarea from './textarea'
import ONumber from './number'
import ORadio from './radio'
import OCheckbox from './checkbox'
import ODate from './date'
import ORate from './rate'
import OSelect from './select'
import OOrgan from './organ'
import OSchool from './school'
import OText from './text'
import OImgUpload from './imgFile'
import OFileUpload from './fileUpload'
import ODivider from './divider'
import OCascader from './cascader'
export default {
    name: 'oSubform',
    components: {OInput, OTextarea, ONumber, ORadio, OCheckbox, ODate, ORate, OSelect, OOrgan, OSchool, OText, OImgUpload, OFileUpload, ODivider, OCascader },
    props: ['widget', 'value', 'preview', 'fileCheck'],
    data() {
        return {
            columns: [],
            tempColumns: [],
            models: {},
            defaultValue: null,
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        __init() {
            // 初始化参数
            this.columns = []
            this.tempColumns = []
            const columns = this.widget.columns || []
            let arr = {
                list: []
            }
            columns.forEach(item => {
                if(item.list?.length > 0) {
                    item.list.forEach(child => {
                        child.originModel = child.model
                        child.model = this.widget.model + '.' + child.model + '.0'
                    })
                    arr.list.push(...item.list)
                }
            });
            this.columns.push(arr)
            this.tempColumns.push(arr)
            if(this.value) {
                const widget = this.widget
                const model = widget.originModel || widget.model
                for(let v in this.value) {
                    if(v == model) {
                        this.defaultValue = this.value[v]
                    }
                }
            }
            // 对比值跟表单对比
            if(this.defaultValue) {
                let arrDiff = this.defaultValue.length - this.columns?.length
                if(arrDiff > 0) {
                    for(let i = 0; i < arrDiff; i++) {
                        this.addItem()
                    }
                }
            }
        },
        reSetFormData() {
            this.columns = []
            const columns = this.widget.columns || []
            let arr = {
                list: []
            }
            columns.forEach(item => {
                if(item.list?.length > 0) {
                    arr.list.push(...item.list)
                }
            });
            this.columns.push(arr)
        },
        addItem() {
            // 添加组件
            // console.log(this.tempColumns)
            let tempColumns = JSON.parse(JSON.stringify(this.tempColumns))
            tempColumns.forEach(item => {
                if(item.list?.length > 0) {
                    item.list.forEach(child => {
                        let model = child.model.split('.')
                        model.pop()
                        model = model.join('.')
                        child.model = model + '.' + this.columns.length
                    })
                }
            })
            this.columns.push(...tempColumns)
        },
        onDelete(child, index) {
            this.$dialog.confirm({
                message: `你确定要删除吗？`,
            }).then(() => {
                // on confirm
				if (index !== -1) {
					this.columns.splice(index, 1)
				}
            })
        },
        relationFormChange(value) { // 是否隐藏对应表单
            this.$emit('relationFormChange', value)
        },
        fileCheckRequired(value) { // 退费模板上传附件
            this.$emit('fileCheckRequired', value)
        },
    },
    computed: {
        options() {
            return this.widget.options || {}
        },
        // columns() {
        //     return this.widget.columns || []
        // }
    },
    watch: {
        // dataModel: {
        //     deep: true,
        //     handler(newValue) {
        //         if (newValue !== undefined && newValue !== null) {
        //         }
        //     }
        // },
        // value: {
        //     deep: true,
        //     handler(val) {
        //         this.models = { ...this.models, ...val }
        //     }
        // }
    }
}
</script>

<style lang='less' scoped>
.o-unit {
    margin-bottom: 12px;
}
.oSubform {
    .delete {
        color: #01C1B5;
        font-size: 0.14rem;
        padding: 0.05rem 0.1rem 0;
        display: block;
        text-align: right;
    }
    .o-unit {
        margin-bottom: 0;
        position: relative;
        &::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 16px;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
    /deep/.van-field {
        padding: 12px 16px;
        line-height: 1.3;
        display: flex;
        font-size: 16px;
    }

    .addItem {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: .1rem;
        color: #01C1B5;
        /deep/.van-icon {
            font-size: .16rem;
            padding-right: .03rem;
        }
    }

    .previewSection {
        padding: 0 .16rem;
        .previewTitle {
            padding: 0 .1rem;
            margin-top: .1rem;
            background: #f5f5f5;
            color: #808080;
        }
    }
}
</style>