SEONexusAdmin/src/views/manga/component/imgDialog.vue

<template>
    <el-dialog
        v-model="drawerVisible"
        :title="drawerProps.title + '--' + drawerProps.name"
        :destroy-on-close="true"
        width="1000px"
        draggable
    >
        <el-form
            ref="ruleFormRef"
            label-width="0px"
            label-suffix=" :"
            :rules="rules"
            :disabled="drawerProps.isView"
            :model="drawerProps.row"
            :hide-required-asterisk="drawerProps.isView"
        >
            <el-form-item v-for="e in formColumns" :key="e.label" :label="e.label" :prop="e.prop" :required="e.required">
                <template v-if="e.type === 'image'">
                    <div class="c-dialog-h">
                        <img v-for="(item, index) in e.value" :key="index" :src="item" alt="" />
                    </div>
                </template>
                <template v-if="e.type === 'textarea-i'">
                    <div :class="{ 'img-more-h': fileList.length > 0 }">
                        <UploadImgs disabled v-model:file-list="fileList" height="120px" width="13.3%" :drag="false">
                            <template #empty>
                                <el-icon><Picture /></el-icon>
                                <span>请上传照片</span>
                            </template>
                        </UploadImgs>
                    </div>
                </template>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="drawerVisible = false">取消</el-button>
            <el-button type="primary" @click="drawerVisible = false">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, computed } from "vue";
import { FormInstance } from "element-plus";
import { ChapterList } from "@/api/interface/manga/chapter";
import UploadImgs from "@/components/Upload/Imgs.vue";
type Options = {
    label: string;
    value: string | number;
};

type Fields = {
    label: string;
    prop: string;
    type: string;
    value: any;
    required: boolean;
    options?: Options[];
    fieldNames?: { label: string; value: string };
};
const generateRules = (fields: Fields[]) => {
    return fields.reduce(
        (acc, field) => {
            const { type, required, label, prop } = field;
            let message = "";
            if (type === "select") {
                message = `请选择${label}`;
            }
            if (type === "text") {
                message = `请输入${label}`;
            }
            if (type === "textarea") {
                message = `请输入${label}`;
            }
            if (type === "textareaMore") {
                message = `请输入${label}`;
            }
            if (type === "radio") {
                message = `请选择${label}`;
            }
            acc[prop] = [{ required, message }];
            return acc;
        },
        {} as Record<string, any>
    );
};

const formColumns = computed((): Fields[] => {
    return [
        {
            label: "",
            prop: "mhzj_nei_rong",
            type: "textarea-i",
            get value() {
                return drawerProps.value.row!.mhzj_nei_rong;
            },
            set value(val) {
                drawerProps.value.row!.mhzj_nei_rong = val;
            },
            required: false
        }
    ];
});
const rules = ref();
const fileList = ref([] as any);
interface DrawerProps {
    title: string;
    name?: any;
    isView: boolean;
    row: Partial<ChapterList.ResList>;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
    isView: false,
    title: "",
    name: "",
    row: {}
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
    drawerProps.value = params;
    rules.value = generateRules(formColumns.value);
    drawerProps.value.name = drawerProps.value.row!.mhzj_ming_zi;
    drawerVisible.value = true;
    fileList.value = [];
    if (drawerProps.value.row.mhzj_nei_rong) {
        const data = JSON.parse(drawerProps.value.row.mhzj_nei_rong);
        const newArray = data.map(item => ({ url: item }));
        // const newArray = data.map(() => ({ url: "https://loremflickr.com/390/122?random=59925" }));
        fileList.value = newArray;
    }
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();

defineExpose({
    acceptParams
});
</script>

<style>
.el-dialog .el-dialog__header {
    padding: 15px 0;
}
.c-dialog-h {
    display: flex;
    flex-wrap: wrap;
    width: 1100px;
    max-height: 600px;
    overflow-y: scroll;
}
.c-dialog-h img {
    width: 19.05%;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.img-more-h .upload .upload-image {
    object-fit: fill !important;
}
.img-more-h {
    height: 450px;
    margin-top: 15px;
    overflow-y: scroll;
}
.el-dialog {
    --el-dialog-margin-top: 4vh !important;
}
</style>