SEONexusAdmin/src/views/components/imgDialog.vue

<template>
    <el-drawer
        class="sc-sou-nav"
        v-model="drawerVisible"
        :title="drawerProps.title + '--' + drawerProps.name"
        :destroy-on-close="true"
        size="980"
        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 v-if="fileList.length == 0" style="width: 100%; height: 100px; line-height: 100px; text-align: center">
                        正在加载中....
                    </div>
                    <div v-else :class="{ 'img-more-h': fileList.length > 0 }">
                        <UploadImgs disabled v-model:file-list="fileList" height="100px" width="98px" :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-drawer>
</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";
import { fetchAndDecodeImage } from "@/utils/decrypt";

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!.name;
    drawerVisible.value = true;
    fileList.value = [];
    if (drawerProps.value.row.url) {
        if (drawerProps.value.row!.encrypted == false) {
            const data = drawerProps.value.row.url;
            const newArray = data.map(item => ({ url: item }));
            fileList.value = newArray;
        } else {
            // Assuming drawerProps.value.row.url is an array of URLs
            const newArray = drawerProps.value.row.url.map(item => ({ url: item }));
            // Process each URL with fetchAndDecodeImage before assigning to fileList
            const processedArrayPromises = newArray.map(async item => {
                const decodedUrl = await fetchAndDecodeImage(item.url);
                return { url: decodedUrl };
            });

            // Wait for all promises to resolve
            Promise.all(processedArrayPromises)
                .then(processedArray => {
                    fileList.value = processedArray;
                })
                .catch(error => {
                    console.error("Error processing URLs: ", error);
                });
        }
    }
};
// const acceptParams = async (params: DrawerProps) => {
//     drawerProps.value = params;
//     rules.value = generateRules(formColumns.value);
//     drawerProps.value.name = drawerProps.value.row!.name;
//     drawerVisible.value = true;
//     fileList.value = [];
//     if (drawerProps.value.row.url) {
//         const urls = drawerProps.value.row.url;
//         if (drawerProps.value.row.encrypted === false) {
//             // 如果未加密，直接处理
//             fileList.value = urls.map((url: string) => ({ url }));
//         } else {
//             // 如果加密，解码后处理
//             const uniqueUrls = [...new Set(urls)]; // 去重
//             const processedArrayPromises = uniqueUrls.map(async (url: any) => {
//                 const decodedUrl = await fetchAndDecodeImage(url);
//                 return { url: decodedUrl };
//             });

//             try {
//                 const processedArray = await Promise.all(processedArrayPromises);
//                 // 处理完后，将原始数组中的每个 URL 映射到处理后的 URL
//                 const urlMap = new Map(uniqueUrls.map((url, index) => [url, processedArray[index].url]));
//                 fileList.value = urls.map((url: string) => ({ url: urlMap.get(url) }));
//             } catch (error) {
//                 console.error("Error processing URLs: ", error);
//             }
//         }
//     }
// };
// const acceptParams = async (params: DrawerProps) => {
//     drawerProps.value = params;
//     rules.value = generateRules(formColumns.value);
//     drawerProps.value.name = drawerProps.value.row!.name;
//     drawerVisible.value = true;
//     fileList.value = [];
//     if (drawerProps.value.row.url) {
//         fileList.value = drawerProps.value.row.url;
//         console.log(fileList.value);
//     }
//     // if (drawerProps.value.row.url) {
//     //     const urls = drawerProps.value.row.url;
//     //     if (drawerProps.value.row.encrypted === false) {
//     //         // 如果未加密，直接处理
//     //         fileList.value = urls.map((url: string) => ({ url }));
//     //     } else {
//     //         // 如果加密，解码后处理
//     //         const uniqueUrls = [...new Set(urls)]; // 去重
//     //         const processedArrayPromises = uniqueUrls.map(async (url: any) => {
//     //             const decodedUrl = await fetchAndDecodeImage(url);
//     //             return { url: decodedUrl };
//     //         });

//     //         try {
//     //             const processedArray = await Promise.all(processedArrayPromises);
//     //             // 处理完后，将原始数组中的每个 URL 映射到处理后的 URL
//     //             const urlMap = new Map(uniqueUrls.map((url, index) => [url, processedArray[index].url]));
//     //             fileList.value = urls.map((url: string) => ({ url: urlMap.get(url) }));
//     //         } catch (error) {
//     //             console.error("Error processing URLs: ", error);
//     //         }
//     //     }
//     // }
//     // if (drawerProps.value.row.url) {
//     //     if (drawerProps.value.row!.encrypted == false) {
//     //         const data = drawerProps.value.row.url;
//     //         const newArray = data.map(item => ({ url: item }));
//     //         fileList.value = newArray;
//     //     } else {
//     //         // Assuming drawerProps.value.row.url is an array of URLs
//     //         const newArray = drawerProps.value.row.url.map(item => ({ url: item }));
//     //         // Process each URL with fetchAndDecodeImage before assigning to fileList
//     //         const processedArrayPromises = newArray.map(async item => {
//     //             const decodedUrl = await fetchAndDecodeImage(item.url);
//     //             return { url: decodedUrl };
//     //         });

//     //         // Wait for all promises to resolve
//     //         Promise.all(processedArrayPromises)
//     //             .then(processedArray => {
//     //                 fileList.value = processedArray;
//     //             })
//     //             .catch(error => {
//     //                 console.error("Error processing URLs: ", error);
//     //             });
//     //     }
//     // }
// };

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

defineExpose({
    acceptParams
});
</script>

<style lang="scss">
.img-more-h .upload .upload-image {
    object-fit: cover !important;
}
.img-more-h {
    overflow-y: scroll;
}
</style>
<style lang="scss">
.sc-sou-nav {
    .el-upload--picture-card {
        display: none;
    }
    .el-drawer__header {
        padding: 7px;
    }
    .el-drawer__body {
        padding: 7px !important;
    }
}
</style>