修改轮播图bug

This commit is contained in:
Double-_-Z 2024-12-20 15:26:18 +08:00
parent 421300db39
commit 9042da3ace
2 changed files with 32 additions and 49 deletions

View File

@ -259,21 +259,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
* *
*/ */
// 应用管理 // 应用管理
// { {
// path: '/apply', path: '/apply',
// name: 'apply', name: 'apply',
// component: () => import('/@/views/service/apply/index.vue'), component: () => import('/@/views/service/apply/index.vue'),
// meta: { meta: {
// title: 'message.router.apply', title: 'message.router.apply',
// isLink: '', isLink: '',
// isHide: false, isHide: false,
// isKeepAlive: true, isKeepAlive: true,
// isAffix: false, isAffix: false,
// isIframe: false, isIframe: false,
// roles: ['admin', 'common'], roles: ['admin', 'common'],
// icon: 'iconfont icon-crew_feature', icon: 'iconfont icon-crew_feature',
// }, },
// children: [ children: [
// { // {
// path: '/apply/detail', // path: '/apply/detail',
// name: 'applyDetail', // name: 'applyDetail',
@ -289,8 +289,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
// icon: 'ele-Document', // icon: 'ele-Document',
// }, // },
// }, // },
// ] ]
// }, },
/** /**
* end * end

View File

@ -91,7 +91,8 @@
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
<template #file="{ file }"> <template #file="{ file }">
<div> <div>
<img class="el-upload-list__item-thumbnail" :src="encodeURI(file.url)" alt="" /> <img class="el-upload-list__item-thumbnail" :src="encodeURI(file.url.includes('http') ?
file.url : viteUrl+file.url)" alt="" />
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<span <span
class="el-upload-list__item-preview" class="el-upload-list__item-preview"
@ -202,7 +203,7 @@ const getTableData = async() => {
try { try {
state.tableData.loading = true; state.tableData.loading = true;
let res = await banApi.getBannerList(state.tableData.param); let res = await banApi.getBannerList(state.tableData.param);
console.log(res); // console.log(res);
if(res?.success){ if(res?.success){
state.tableData.data = res.data.records; state.tableData.data = res.data.records;
state.tableData.total = res.data.total; state.tableData.total = res.data.total;
@ -232,13 +233,9 @@ const viteUrl = import.meta.env.VITE_API_URL;
// //
const jpgFormatter = (row: any) => { const jpgFormatter = (row: any) => {
let newPath; let newPath = row?.data ? row.data.path : row.path;
if (row?.data) { newPath = encodeURI( newPath.includes('http') ? newPath : (viteUrl + newPath));
newPath = row.data.path.replaceAll('\\', '/')
} else {
newPath = row.path.replaceAll('\\\\', '/')
}
newPath = newPath.includes('http://localhost:8888/') ? newPath : encodeURI(viteUrl + newPath)
return `${newPath}`; return `${newPath}`;
}; };
@ -278,22 +275,21 @@ const uploadDisabled = ref(false)
const switchDrawer = async (id: number, staus) => { const switchDrawer = async (id: number, staus) => {
console.log("switchDrawer",id,state.formData,state.formData.fileList); // console.log("switchDrawer",id,state.formData,state.formData.fileList);
dialog.value = true; dialog.value = true;
if (staus == 1) { if (staus == 1) {
flag.value = false; flag.value = false;
state.formData.loading = true; state.formData.loading = true;
let res = await banApi.getBannerDetail(id) let res = await banApi.getBannerDetail(id)
console.log("res",res.data.path); // console.log("res",res.data.path);
if (res?.success) { if (res?.success) {
state.formData.fileList.push({ url: jpgFormatter(res.data) }); state.formData.fileList.push({ url: res.data.path });
// console.log("state.formData.fileList",state.formData); // console.log("state.formData.fileList",state.formData);
Object.assign(state.formData, res.data); Object.assign(state.formData, res.data);
// console.log("state.formData",state.formData); // console.log("state.formData",state.formData);
state.formData.path = jpgFormatter(res.data);
uploadDisabled.value = true; uploadDisabled.value = true;
state.formData.loading = false; state.formData.loading = false;
console.log("state.formData",state.formData); // console.log("state.formData",state.formData);
} else { } else {
ElMessage.error('获取轮播图详情失败!') ElMessage.error('获取轮播图详情失败!')
state.formData.loading = false; state.formData.loading = false;
@ -315,8 +311,8 @@ const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFil
const formdata = new FormData(); const formdata = new FormData();
formdata.append('file', file.raw); formdata.append('file', file.raw);
let res = await banApi.uploadFile(formdata); let res = await banApi.uploadFile(formdata);
console.log("result", res); // console.log("result", res);
console.log("state.formData", state.formData); // console.log("state.formData", state.formData);
if(res?.success){ if(res?.success){
// state.formData.url = jpgFormatter(res); // state.formData.url = jpgFormatter(res);
state.formData.path = res.data.path; state.formData.path = res.data.path;
@ -338,9 +334,9 @@ const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFil
ElMessageBox.alert('轮播图的格式不正确,请重新选择!', '提示', { ElMessageBox.alert('轮播图的格式不正确,请重新选择!', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
}) })
console.log("handleChange3",uploadFiles); // console.log("handleChange3",uploadFiles);
uploadFiles.pop() uploadFiles.pop()
console.log("handleChange4",uploadFiles); // console.log("handleChange4",uploadFiles);
uploadDisabled.value = false; uploadDisabled.value = false;
} }
} }
@ -349,24 +345,20 @@ const dialogImageUrl = ref('')
const dialogVisible = ref(false) const dialogVisible = ref(false)
const handlePictureCardPreview = (file: UploadFile,uploadFiles) => { const handlePictureCardPreview = (file: UploadFile,uploadFiles) => {
dialogImageUrl.value = file.url! dialogImageUrl.value = encodeURI(file.url.includes('http') ? file.url : viteUrl+file.url);
dialogVisible.value = true dialogVisible.value = true
} }
const uploadRef = ref(); const uploadRef = ref();
const handleRemove = (file: UploadFile, uploadFiles) => { const handleRemove = (file: UploadFile, uploadFiles) => {
console.log("handleRemove1",file);
console.log("handleRemove2",uploadFiles);
uploadRef.value.clearFiles(); uploadRef.value.clearFiles();
state.formData.path = ""; state.formData.path = "";
console.log("handleRemove3",uploadFiles);
uploadDisabled.value = false; uploadDisabled.value = false;
} }
// //
const deleteBanner = (id: number) => { const deleteBanner = (id: number) => {
console.log("删除",id);
ElMessageBox.confirm('确定要删除该轮播图吗?', '提示', { ElMessageBox.confirm('确定要删除该轮播图吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -396,13 +388,10 @@ const submitForm = (decision) => {
ruleFormRef.value?.validate(async(valid: boolean) => { ruleFormRef.value?.validate(async(valid: boolean) => {
if (valid) { if (valid) {
if (decision) { if (decision) {
console.log("新增新增新增");
loading.value = true; loading.value = true;
const form = { ...state.formData }; const form = { ...state.formData };
console.log('submitForm', form);
try { try {
let res = await banApi.addBanner(form); let res = await banApi.addBanner(form);
console.log("submitFormREs", res);
if(res?.success){ if(res?.success){
ElMessage({ ElMessage({
message: '保存成功!', message: '保存成功!',
@ -413,17 +402,13 @@ const submitForm = (decision) => {
dialog.value = false; dialog.value = false;
} }
} catch (error) { } catch (error) {
console.log(error);
ElMessage.error('保存失败!'); ElMessage.error('保存失败!');
loading.value = false; loading.value = false;
} }
} else { } else {
console.log("编辑编辑编辑");
const form = { ...state.formData }; const form = { ...state.formData };
console.log('submitForm', form);
try { try {
let res = await banApi.updateBanner(form); let res = await banApi.updateBanner(form);
console.log("submitFormREs", res);
if(res?.success){ if(res?.success){
ElMessage({ ElMessage({
message: '保存成功!', message: '保存成功!',
@ -459,8 +444,6 @@ const resetForm = () => {
const cancelForm = () => { const cancelForm = () => {
dialog.value = false; dialog.value = false;
resetForm(); resetForm();
console.log(state);
} }
// #endregion // #endregion