first
This commit is contained in:
make
279
src/views/components/imgDialog.vue
Normal file
279
src/views/components/imgDialog.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user