leromro-web/src/views/components/DialogForm/index.vue

<template> 
    <el-dialog :title="title" v-model="open" width="700px"  append-to-body>
        <el-form ref="dialogFormRef" :model="form" :label-width="labelWidth" class="dialogClass">
            <template v-for="item in column" :key="item.prop">
                <!-- 输入框 -->
                <el-form-item :label="item.label" v-if="item.type === 'input'" :prop="item.prop" :rules="item.rules">
                    <el-input v-model="form[item.prop]" :placeholder="'请输入' + item.label" clearable
                        :disabled="disables[item.prop]">
                        <template v-if="item.dese" #append> <a @click="item.deseClick ? item.deseClick(form) : ''">{{
                                item.dese }}</a> </template>
                    </el-input>
                </el-form-item>
                <!-- 文本域 -->
                <el-form-item :label="item.label" v-if="item.type === 'textarea' && (item.show ? item.show(form) : true)"
                    :prop="item.prop" :rules="item.rules">
                    <el-input v-model="form[item.prop]" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                        :placeholder="'请输入' + item.label" clearable :disabled="disables[item.prop]" />
                </el-form-item>

                <el-form-item :label="item.label" v-if="item.type === 'radio' && item.options" 
                    :prop="item.prop"
                    :rules="item.rules">
                    <el-radio-group v-model="form[item.prop]" :disabled="disables[item.prop]">
                        <el-radio v-for="dict in item.options" :key="dict.value" :value="dict.value">{{ dict.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>


                <!-- 时间选择 -->
                <el-form-item :label="item.label" v-if="item.type === 'date'" :prop="item.prop" :rules="item.rules">
                    <el-date-picker v-model="form[item.prop]" value-format="YYYY-MM-DD" type="daterange"
                        range-separator="-" start-placeholder="开始日期" clearable end-placeholder="结束日期"
                        :disabled="disables[item.prop]"></el-date-picker>
                </el-form-item>

                <el-form-item :label="item.label" v-if="item.type === 'picker'" :prop="item.prop" :rules="item.rules">
                    <el-date-picker v-model="form[item.prop]"  type="datetime"
                     :disabled="disables[item.prop]"></el-date-picker>
                </el-form-item>


                <!-- 下拉框选择 -->
                <el-form-item :label="item.label" v-if="item.type === 'select' && item.dictionary" :prop="item.prop"
                    :rules="item.rules">
                    <el-select v-model="form[item.prop]" :placeholder="'请选择' + item.label" clearable
                        :disabled="disables[item.prop]">
                        <el-option v-for="dict in dictionaryOptions[item.dictionary]" :key="dict.value"
                            :label="dict.label" :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label="item.label" v-if="item.type === 'select' && item.options" :prop="item.prop"
                    :rules="item.rules">
                    <el-select v-model="form[item.prop]" :placeholder="'请选择' + item.label" clearable
                        :disabled="disables[item.prop]">
                        <el-option v-for="dict in item.options" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>



                <!-- 联动选择框 -->
                <el-form-item :label="item.label" v-if="item.type === 'cascader'" :prop="item.prop">
                    <el-cascader v-model="form[item.prop]" :options="item.options || []" style="width: 100%;"
                        :props="item.props" :disabled="disables[item.prop]" />
                </el-form-item>

                <!-- 图片预览 -->
                <el-form-item :label="item.label" v-if="item.type === 'img'" :prop="item.prop">
                    <el-space wrap>
                        <div v-for="(imgItem, imgIndex) in getImages(item.prop)" :key="imgIndex">
                            <!-- <img :src="imgItem" alt="" srcset="" style="width: 100px;" /> -->
                            <el-image
                                style="width: 100px;"
                                :src="imgItem"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="getImages(item.prop)"
                                show-progress
                                :initial-index="4"
                                fit="cover"
                                />
                        </div>
                    </el-space>
                </el-form-item>
                 <!-- 文本显示 -->
                 <el-form-item :label="item.label" v-if="item.type === 'text'" :prop="item.prop" :rules="item.rules">
                        {{ form[item.prop] }} <a v-if="item.dese" @click="item.deseClick ? item.deseClick(form) : ''">{{
                                item.dese }}</a>
                    </el-form-item>

                    <!-- 字典显示 -->
                    <el-form-item :label="item.label" v-if="item.type === 'dict'" :prop="item.prop" :rules="item.rules">
                        <dict-tag v-if="item.dict" :options="item.dict" :value="String(form[item.prop])" />
                    </el-form-item>
            </template>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { toRaw } from 'vue';
import { computed, reactive } from 'vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
    title: {
        type: String,
        default: '新增',
    },
    column: {
        type: Object,
        default: [],
        required: true
    },
    labelWidth: {
        type: String,
        default: '120px',
    },


})

const open = ref(false);
const form = ref({});
const dictionaryOptions = reactive({})
const emit = defineEmits(['submit']);

const dialogFormRef = ref(null);

const disables = ref({});

const formStatus = ref('form') //form：表单 details:详情


const getImages = (key) => {
   
    if(typeof key === 'object'){
      return key.map(item =>{
            return  form.value[item]
        })
    }
    const imgs = form.value[key];
    if (!imgs) {
        return [];
    }
    return imgs.split(',')
}

const handleInit = () => {
    try {
        const data = props.column.value || props.column;
        const keys = data.map(item => {
            if (item.type === 'select' && item.dictionary) {
                return item.dictionary;
            }
        }).filter(Boolean);
        if (keys && keys.length > 0) {
            const res = proxy.useDict(keys);
            Object.assign(dictionaryOptions, res)
        }
    } catch (error) {
        console.log('error', error);

    }
}


onMounted(() => {
    handleInit();
})

const handleDialog = (status, data) => {
    console.log('status', status);
    if (data) {
        form.value = data;
    }
    open.value = status;
}


const submitForm = () => {
    proxy.$refs["dialogFormRef"].validate(valid => {
        if (valid) {
            console.log('form', form.value);
            emit('submit', form.value)
        }
    });
}
const cancel = () => {
    open.value = false;
    disables.value = {};
    dialogFormRef.value.resetFields();
    console.log('cancel');
}


const initForm = (data, disableData,formStatus) => {
    console.log('initForm', data);
    form.value = data;
    if (disableData) {
        disables.value = disableData;
    }
}


defineExpose({
    handleDialog,
    initForm,
})
</script>

<style lang='scss' scoped>
.dialogClass {
    height: calc(100vh - 280px);
    overflow: hidden;
    overflow-y: auto;
}
</style>