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">
            <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>{{ item.dese }}</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'" :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 === '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: 180px;" />
                        </div>
                    </el-space>
                </el-form-item>
            </template>


            <el-form-item v-if="form.appStatus === '3'" label="驳回原因" prop="rejectReason" :rules="{ required: true, message: '请输入驳回原因', trigger: 'blur' }">
                    <el-input v-model="form.rejectReason" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                     placeholder="请输入驳回原因" clearable  :disabled="disables.appStatus"/>
                </el-form-item>
        </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 { 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 getImages = (key) => {
    const imgs = form.value[key];
    console.log(233,imgs,key);
    
    if(!imgs){
        return [];
    }
    return imgs.split(',')
}

const handleInit = () => {
    try {
        const keys = props.column.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) => {
    console.log('initForm',data);
    form.value = data;
    if(disableData){
        disables.value = disableData;
    }
}


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

<style lang='scss' scoped></style>