first

src/views/manga/component/imgDialog.vue

@@ -0,0 +1,175 @@
+<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>