Skip to content

phsl / admin

Go to a project
Commit e833565b by yangchen
Options

修改和创作操作界面，现在可以上传多个图片，并且该左上角标题也改为了和菜单名对应

parent b9582460
Showing with 657 additions and 87 deletions
src/api/biz/bannerinfo/index.ts
...@@ -49,5 +49,12 @@ export const BannerInfoApi = { ...@@ -49,5 +49,12 @@ export const BannerInfoApi = {
// 导出banner页管理 Excel // 导出banner页管理 Excel
exportBannerInfo: async (params) => { exportBannerInfo: async (params) => {
return await request.download({ url: `/biz/banner-info/export-excel`, params }) return await request.download({ url: `/biz/banner-info/export-excel`, params })
} },
// //图片上传
// uploadImage: async (file: File) => {
// const formData = new FormData();
// formData.append('file', file);
// return await request.post({ url: `/biz/banner-info/upload`, data: formData });
// }
} }
src/api/biz/industryapplication/index.ts
...@@ -4,14 +4,14 @@ import type { Dayjs } from 'dayjs'; ...@@ -4,14 +4,14 @@ import type { Dayjs } from 'dayjs';
/** 行业应用信息 */ /** 行业应用信息 */
export interface IndustryApplication { export interface IndustryApplication {
id: number; // 主键 id: number; // 主键
image: string; // 展示图地址 images: string; // 展示图地址
information?: string; // 内容 information?: string; // 内容
title?: string; // 标题 title?: string; // 标题
url: string; // 链接地址 url: string; // 链接地址
description: string; // 描述内容 description: string; // 描述内容
showStatus?: boolean; // 状态：0-已隐藏，1-已显示 showStatus?: boolean; // 状态：0-已隐藏，1-已显示
remark: string; // 备注 remark: string; // 备注
homeImage: string; // 首页展示图片 homeImages: string; // 首页展示图片
assemblyType: number; // 组件类型：0-全部 assemblyType: number; // 组件类型：0-全部
orderNum: number; // 排序值 orderNum: number; // 排序值
} }
...@@ -52,4 +52,4 @@ export const IndustryApplicationApi = { ...@@ -52,4 +52,4 @@ export const IndustryApplicationApi = {
exportIndustryApplication: async (params) => { exportIndustryApplication: async (params) => {
return await request.download({ url: `/biz/industry-application/export-excel`, params }) return await request.download({ url: `/biz/industry-application/export-excel`, params })
} }
} }
\ No newline at end of file
src/locales/zh-CN.ts
...@@ -312,7 +312,15 @@ export default { ...@@ -312,7 +312,15 @@ export default {
typeCreate: '字典类型新增', typeCreate: '字典类型新增',
typeUpdate: '字典类型编辑', typeUpdate: '字典类型编辑',
dataCreate: '字典数据新增', dataCreate: '字典数据新增',
dataUpdate: '字典数据编辑' dataUpdate: '字典数据编辑',
bannerCreate: '添加banner页管理',
bannerUpdate: '修改banner页管理',
computilityCreate: '添加计算资源首页管理',
computilityUpdate: '修改计算资源首页管理',
assemblyCreate: '添加组件管理',
assemblyUpdate: '修改组件管理',
informationCreate: '添加活动资源管理',
informationUpdate: '修改活动资源管理',
}, },
dialog: { dialog: {
dialog: '弹窗', dialog: '弹窗',
......
src/views/biz/bannerinfo/BannerInfoForm.vue
...@@ -7,9 +7,33 @@ ...@@ -7,9 +7,33 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="轮播图地址" prop="image"> <!-- <el-form-item label="轮播图地址" prop="image">-->
<UploadImg v-model="formData.image" /> <!-- <UploadImg v-model="formData.image" />-->
<!-- </el-form-item>-->
<el-form-item label="轮播图地址" prop="images">
<el-upload
v-model:file-list="formData.images"
:action="uploadUrl"
:http-request="httpRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 添加预览对话框 -->
<el-dialog v-model="previewVisible" append-to-body>
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 添加提示信息 -->
<p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件
</p>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="information"> <el-form-item label="内容" prop="information">
<el-input v-model="formData.information" placeholder="请输入内容" /> <el-input v-model="formData.information" placeholder="请输入内容" />
</el-form-item> </el-form-item>
...@@ -55,6 +79,7 @@ ...@@ -55,6 +79,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { BannerInfoApi, BannerInfo } from '@/api/biz/bannerinfo' import { BannerInfoApi, BannerInfo } from '@/api/biz/bannerinfo'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload'
/** banner页管理 表单 */ /** banner页管理 表单 */
defineOptions({ name: 'BannerInfoForm' }) defineOptions({ name: 'BannerInfoForm' })
...@@ -62,13 +87,20 @@ defineOptions({ name: 'BannerInfoForm' }) ...@@ -62,13 +87,20 @@ defineOptions({ name: 'BannerInfoForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 添加预览相关的响应式变量
const previewVisible = ref(false)
// 获取上传相关配置
const { uploadUrl, httpRequest } = useUpload()
const dialogImageUrl = ref('')
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
image: undefined, images: [], // 改为数组，存储多张图片的地址
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -80,7 +112,8 @@ const formData = ref({ ...@@ -80,7 +112,8 @@ const formData = ref({
const formRules = reactive({ const formRules = reactive({
information: [{ required: true, message: '内容不能为空', trigger: 'blur' }], information: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }], title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
showStatus: [{ required: true, message: '状态：0-已隐藏，1-已显示不能为空', trigger: 'blur' }] showStatus: [{ required: true, message: '状态：0-已隐藏，1-已显示不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
...@@ -100,7 +133,14 @@ const open = async (type: string, id?: number) => { ...@@ -100,7 +133,14 @@ const open = async (type: string, id?: number) => {
if (data.description === null) { if (data.description === null) {
data.description = '' data.description = ''
} }
formData.value = data // 将 images 字段转换为 file-list 需要的格式
if (data.images && Array.isArray(data.images)) {
formData.value.images = data.images.map(url => ({ url, name: 'image.jpg' })) // 添加 name 属性
} else {
formData.value.images = []
}
formData.value = { ...data, images: formData.value.images } // 确保 image 是数组
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -116,8 +156,26 @@ const submitForm = async () => { ...@@ -116,8 +156,26 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as BannerInfo // 确保只提取真实的 URL，而不是本地的 Blob URL
if (formType.value === 'create') { const imageUrls = formData.value.images
.filter(item => item.url && !item.url.startsWith('blob:')) // 过滤掉 Blob URL
.map(item => item.url);
// 如果还有 Blob URL，说明有文件还未上传完成
const hasBlobUrls = formData.value.images.some(item => item.url && item.url.startsWith('blob:'));
if (hasBlobUrls) {
message.warning('请等待图片上传完成后再提交');
formLoading.value = false;
return;
}
// 构造最终数据
const data = {
...formData.value,
images: imageUrls
};
if (formType.value === 'bannerCreate') {
await BannerInfoApi.createBannerInfo(data) await BannerInfoApi.createBannerInfo(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
...@@ -136,7 +194,7 @@ const submitForm = async () => { ...@@ -136,7 +194,7 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
image: undefined, images: [],
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -147,4 +205,49 @@ const resetForm = () => { ...@@ -147,4 +205,49 @@ const resetForm = () => {
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
// 预览图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
previewVisible.value = true // 使用独立的预览状态
}
// 删除图片
const handleRemove = (file, fileList) => {
// 更新 formData.image 数组
// formData.value.images = fileList.map(item => ({ url: item.url, name: item.name }))
formData.value.images = fileList
}
// 上传成功处理函数
const handleUploadSuccess = (response, file, fileList) => {
// 从响应中提取真实的URL并更新文件对象
if (response && response.data) {
// 根据 useUpload.ts 的实现，可能是 response.data.url 或直接是 response.data
const realUrl = response.data.url || response.data;
if (realUrl) {
file.url = realUrl;
}
}
// 更新 formData.images
formData.value.images = fileList;
}
// 上传失败处理函数
const handleUploadError = (err, file, fileList) => {
message.error('图片上传失败: ' + (err.message || '未知错误'))
}
</script> </script>
<style scoped>.upload-tips {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.red-text {
color: red;
}
</style>
src/views/biz/bannerinfo/index.vue
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
placeholder="请输入内容" placeholder="请输入内容"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-160px" class="!w-200px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
...@@ -23,21 +23,30 @@ ...@@ -23,21 +23,30 @@
placeholder="请输入标题" placeholder="请输入标题"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-160px" class="!w-200px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="排序值" prop="orderNum"> <el-form-item label="链接地址" prop="url">
<el-input <el-input
v-model="queryParams.orderNum" v-model="queryParams.url"
placeholder="请输入排序值" placeholder="请输入链接地址"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-160px" class="!w-200px"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="排序值" prop="orderNum">-->
<!-- <el-input-->
<!-- v-model="queryParams.orderNum"-->
<!-- placeholder="请输入排序值"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-160px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="状态" prop="showStatus"> <el-form-item label="状态" prop="showStatus">
<el-select v-model="queryParams.showStatus" placeholder="请选择状态" clearable class="!w-120px"> <el-select v-model="queryParams.showStatus" placeholder="请选择状态" clearable class="!w-200px">
<el-option <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_STATUS)" v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_STATUS)"
:key="dict.value" :key="dict.value"
...@@ -57,33 +66,33 @@ ...@@ -57,33 +66,33 @@
<!-- <el-option label="请选择字典生成" value="" />--> <!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>--> <!-- </el-select>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="创建时间" prop="createTime"> <!-- <el-form-item label="创建时间" prop="createTime">-->
<el-date-picker <!-- <el-date-picker-->
v-model="queryParams.createTime" <!-- v-model="queryParams.createTime"-->
value-format="YYYY-MM-DD HH:mm:ss" <!-- value-format="YYYY-MM-DD HH:mm:ss"-->
type="daterange" <!-- type="daterange"-->
start-placeholder="开始日期" <!-- start-placeholder="开始日期"-->
end-placeholder="结束日期" <!-- end-placeholder="结束日期"-->
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" <!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
class="!w-220px" <!-- class="!w-220px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="备注" prop="remark"> <!-- <el-form-item label="备注" prop="remark">-->
<el-input <!-- <el-input-->
v-model="queryParams.remark" <!-- v-model="queryParams.remark"-->
placeholder="请输入备注" <!-- placeholder="请输入备注"-->
clearable <!-- clearable-->
@keyup.enter="handleQuery" <!-- @keyup.enter="handleQuery"-->
class="!w-240px" <!-- class="!w-240px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button <el-button
type="primary" type="primary"
plain plain
@click="openForm('create')" @click="openForm('bannerCreate')"
v-hasPermi="['biz:banner-info:create']" v-hasPermi="['biz:banner-info:create']"
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
...@@ -123,11 +132,24 @@ ...@@ -123,11 +132,24 @@
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="排序值" align="center" prop="orderNum" /> <el-table-column label="排序值" align="center" prop="orderNum" />
<!-- <el-table-column label="轮播图地址" align="center" prop="image" />--> <!-- <el-table-column label="轮播图地址" align="center" prop="image" />-->
<el-table-column label="轮播图地址" align="center" prop="image" width="100"> <!-- <el-table-column label="轮播图地址" align="center" prop="images" width="100">-->
<!-- <template #default="scope">-->
<!-- <img :src="scope.row.images" alt="轮播图" class="h-36px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="轮播图地址" align="center" prop="images" width="100">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.image" alt="轮播图" class="h-36px" /> <!-- 只显示第一张图片 -->
<img
v-if="scope.row.images && scope.row.images.length > 0"
:src="scope.row.images[0]"
alt="轮播图"
class="h-36px"
/>
<span v-else>暂无图片</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="内容" align="center" prop="information" /> <el-table-column label="内容" align="center" prop="information" />
<el-table-column label="标题" align="center" prop="title" /> <el-table-column label="标题" align="center" prop="title" />
<el-table-column label="链接地址" align="center" prop="url" /> <el-table-column label="链接地址" align="center" prop="url" />
...@@ -152,7 +174,7 @@ ...@@ -152,7 +174,7 @@
<el-button <el-button
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('bannerUpdate', scope.row.id)"
v-hasPermi="['biz:banner-info:update']" v-hasPermi="['biz:banner-info:update']"
> >
编辑 编辑
...@@ -207,7 +229,8 @@ const queryParams = reactive({ ...@@ -207,7 +229,8 @@ const queryParams = reactive({
orderNum: undefined, orderNum: undefined,
showStatus: undefined, showStatus: undefined,
createTime: [], createTime: [],
remark: undefined remark: undefined,
url: undefined,
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false) // 导出的加载中
......
src/views/biz/computilityinformation/ComputilityInformationForm.vue
...@@ -7,9 +7,33 @@ ...@@ -7,9 +7,33 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="展示图地址" prop="image"> <!-- <el-form-item label="展示图地址" prop="images">-->
<UploadImg v-model="formData.image" /> <!-- <UploadImg v-model="formData.images" />-->
<!-- </el-form-item>-->
<el-form-item label="轮播图地址" prop="images">
<el-upload
v-model:file-list="formData.images"
:action="uploadUrl"
:http-request="httpRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 添加预览对话框 -->
<el-dialog v-model="previewVisible" append-to-body>
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 添加提示信息 -->
<p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件
</p>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="information"> <el-form-item label="内容" prop="information">
<el-input v-model="formData.information" placeholder="请输入内容" /> <el-input v-model="formData.information" placeholder="请输入内容" />
</el-form-item> </el-form-item>
...@@ -71,6 +95,15 @@ ...@@ -71,6 +95,15 @@
import { ComputilityInformationApi, ComputilityInformation } from '@/api/biz/computilityinformation' import { ComputilityInformationApi, ComputilityInformation } from '@/api/biz/computilityinformation'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload'
// 添加预览相关的响应式变量
const previewVisible = ref(false)
// 获取上传相关配置
const { uploadUrl, httpRequest } = useUpload()
const dialogImageUrl = ref('')
/** 计算资源首页管理 表单 */ /** 计算资源首页管理 表单 */
defineOptions({ name: 'ComputilityInformationForm' }) defineOptions({ name: 'ComputilityInformationForm' })
...@@ -83,7 +116,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加 ...@@ -83,7 +116,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
image: undefined, images: [],
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -116,7 +149,15 @@ const open = async (type: string, id?: number) => { ...@@ -116,7 +149,15 @@ const open = async (type: string, id?: number) => {
if (data.description === null) { if (data.description === null) {
data.description = '' data.description = ''
} }
formData.value = data
// 将 images 字段转换为 file-list 需要的格式
if (data.images && Array.isArray(data.images)) {
formData.value.images = data.images.map(url => ({ url, name: 'image.jpg' })) // 添加 name 属性
} else {
formData.value.images = []
}
formData.value = { ...data, images: formData.value.images } // 确保 image 是数组
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -132,8 +173,27 @@ const submitForm = async () => { ...@@ -132,8 +173,27 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as ComputilityInformation
if (formType.value === 'create') { // 确保只提取真实的 URL，而不是本地的 Blob URL
const imageUrls = formData.value.images
.filter(item => item.url && !item.url.startsWith('blob:')) // 过滤掉 Blob URL
.map(item => item.url);
// 如果还有 Blob URL，说明有文件还未上传完成
const hasBlobUrls = formData.value.images.some(item => item.url && item.url.startsWith('blob:'));
if (hasBlobUrls) {
message.warning('请等待图片上传完成后再提交');
formLoading.value = false;
return;
}
// 构造最终数据
const data = {
...formData.value,
images: imageUrls
};
if (formType.value === 'computilityCreate') {
await ComputilityInformationApi.createComputilityInformation(data) await ComputilityInformationApi.createComputilityInformation(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
...@@ -152,7 +212,7 @@ const submitForm = async () => { ...@@ -152,7 +212,7 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
image: undefined, images: [],
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -163,4 +223,50 @@ const resetForm = () => { ...@@ -163,4 +223,50 @@ const resetForm = () => {
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
// 预览图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
previewVisible.value = true // 使用独立的预览状态
}
// 删除图片
const handleRemove = (file, fileList) => {
// 更新 formData.image 数组
// formData.value.images = fileList.map(item => ({ url: item.url, name: item.name }))
formData.value.images = fileList
}
// 上传成功处理函数
const handleUploadSuccess = (response, file, fileList) => {
// 从响应中提取真实的URL并更新文件对象
if (response && response.data) {
// 根据 useUpload.ts 的实现，可能是 response.data.url 或直接是 response.data
const realUrl = response.data.url || response.data;
if (realUrl) {
file.url = realUrl;
}
}
// 更新 formData.images
formData.value.images = fileList;
}
// 上传失败处理函数
const handleUploadError = (err, file, fileList) => {
message.error('图片上传失败: ' + (err.message || '未知错误'))
}
</script> </script>
<style scoped>.upload-tips {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.red-text {
color: red;
}
</style>
src/views/biz/computilityinformation/index.vue
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
<el-button <el-button
type="primary" type="primary"
plain plain
@click="openForm('create')" @click="openForm('computilityCreate')"
v-hasPermi="['biz:computility-information:create']" v-hasPermi="['biz:computility-information:create']"
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
...@@ -135,11 +135,24 @@ ...@@ -135,11 +135,24 @@
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<!-- <el-table-column label="展示图地址" align="center" prop="image" />--> <!-- <el-table-column label="展示图地址" align="center" prop="image" />-->
<el-table-column label="展示图地址" align="center" prop="image" width="100"> <!-- <el-table-column label="展示图地址" align="center" prop="images" width="100">-->
<!-- <template #default="scope">-->
<!-- <img :src="scope.row.images" alt="资源展示图" class="h-36px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="展示图地址" align="center" prop="images" width="100">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.image" alt="资源展示图" class="h-36px" /> <!-- 只显示第一张图片 -->
<img
v-if="scope.row.images && scope.row.images.length > 0"
:src="scope.row.images[0]"
alt="展示图"
class="h-36px"
/>
<span v-else>暂无图片</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="内容" align="center" prop="information" /> <el-table-column label="内容" align="center" prop="information" />
<el-table-column label="标题" align="center" prop="title" /> <el-table-column label="标题" align="center" prop="title" />
<el-table-column label="链接地址" align="center" prop="url" /> <el-table-column label="链接地址" align="center" prop="url" />
...@@ -170,7 +183,7 @@ ...@@ -170,7 +183,7 @@
<el-button <el-button
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('computilityUpdate', scope.row.id)"
v-hasPermi="['biz:computility-information:update']" v-hasPermi="['biz:computility-information:update']"
> >
编辑 编辑
......
src/views/biz/industryapplication/IndustryApplicationForm.vue
...@@ -7,9 +7,33 @@ ...@@ -7,9 +7,33 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="展示图地址" prop="image"> <!-- <el-form-item label="展示图地址" prop="image">-->
<UploadImg v-model="formData.image" /> <!-- <UploadImg v-model="formData.image" />-->
<!-- </el-form-item>-->
<el-form-item label="轮播图地址" prop="images">
<el-upload
v-model:file-list="formData.images"
:action="uploadUrl"
:http-request="httpRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 添加预览对话框 -->
<el-dialog v-model="previewVisible" append-to-body>
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 添加提示信息 -->
<p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件
</p>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="information"> <el-form-item label="内容" prop="information">
<el-input v-model="formData.information" placeholder="请输入内容" /> <el-input v-model="formData.information" placeholder="请输入内容" />
</el-form-item> </el-form-item>
...@@ -38,8 +62,31 @@ ...@@ -38,8 +62,31 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" /> <el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
<el-form-item label="首页展示图片" prop="homeImage"> <!-- <el-form-item label="首页展示图片" prop="homeImage">-->
<UploadImg v-model="formData.homeImage" /> <!-- <UploadImg v-model="formData.homeImage" />-->
<!-- </el-form-item>-->
<el-form-item label="首页展示图片" prop="homeImages">
<el-upload
v-model:file-list="formData.homeImages"
:action="uploadUrl"
:http-request="httpRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemoveHomeImage"
:on-success="handleUploadHomeImageSuccess"
:on-error="handleUploadError"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 添加预览对话框 -->
<el-dialog v-model="previewVisible" append-to-body>
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 添加提示信息 -->
<p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件
</p>
</el-form-item> </el-form-item>
<!-- <el-form-item label="组件类型：0-全部" prop="assemblyType">--> <!-- <el-form-item label="组件类型：0-全部" prop="assemblyType">-->
<!-- <el-select v-model="formData.assemblyType" placeholder="请选择组件类型：0-全部">--> <!-- <el-select v-model="formData.assemblyType" placeholder="请选择组件类型：0-全部">-->
...@@ -72,6 +119,15 @@ ...@@ -72,6 +119,15 @@
import { IndustryApplicationApi, IndustryApplication } from '@/api/biz/industryapplication' import { IndustryApplicationApi, IndustryApplication } from '@/api/biz/industryapplication'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload'
// 添加预览相关的响应式变量
const previewVisible = ref(false)
// 获取上传相关配置
const { uploadUrl, httpRequest } = useUpload()
const dialogImageUrl = ref('')
/** 行业应用 表单 */ /** 行业应用 表单 */
defineOptions({ name: 'IndustryApplicationForm' }) defineOptions({ name: 'IndustryApplicationForm' })
...@@ -84,21 +140,22 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加 ...@@ -84,21 +140,22 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
image: undefined, images: [],
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
description: '', description: '',
showStatus: undefined, showStatus: undefined,
remark: undefined, remark: undefined,
homeImage: undefined, homeImages: [],
assemblyType: undefined, assemblyType: undefined,
orderNum: undefined orderNum: undefined
}) })
const formRules = reactive({ const formRules = reactive({
information: [{ required: true, message: '内容不能为空', trigger: 'blur' }], information: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }], title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
showStatus: [{ required: true, message: '状态：0-已隐藏，1-已显示不能为空', trigger: 'blur' }] showStatus: [{ required: true, message: '状态：0-已隐藏，1-已显示不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序值不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
...@@ -118,7 +175,21 @@ const open = async (type: string, id?: number) => { ...@@ -118,7 +175,21 @@ const open = async (type: string, id?: number) => {
if (data.description === null) { if (data.description === null) {
data.description = '' data.description = ''
} }
formData.value = data
// 将 images 字段转换为 file-list 需要的格式
if (data.images && Array.isArray(data.images)) {
formData.value.images = data.images.map(url => ({ url, name: 'image.jpg' })) // 添加 name 属性
} else {
formData.value.images = []
}
// 将 homeImages 字段转换为 file-list 需要的格式
if (data.homeImages && Array.isArray(data.homeImages)) {
formData.value.homeImages = data.homeImages.map(url => ({ url, name: 'homeImages.jpg' })) // 添加 name 属性
} else {
formData.value.homeImages = []
}
formData.value = { ...data, images: formData.value.images , homeImages: formData.value.homeImages} // 确保 image 是数组
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -134,8 +205,39 @@ const submitForm = async () => { ...@@ -134,8 +205,39 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as IndustryApplication
if (formType.value === 'create') { // 确保只提取真实的 URL，而不是本地的 Blob URL
const imageUrls = formData.value.images
.filter(item => item.url && !item.url.startsWith('blob:')) // 过滤掉 Blob URL
.map(item => item.url);
// 确保只提取真实的 URL，而不是本地的 Blob URL
const homeImageUrls = formData.value.homeImages
.filter(item => item.url && !item.url.startsWith('blob:')) // 过滤掉 Blob URL
.map(item => item.url);
// 如果还有 Blob URL，说明有文件还未上传完成
const hasBlobUrls = formData.value.images.some(item => item.url && item.url.startsWith('blob:'));
if (hasBlobUrls) {
message.warning('请等待图片上传完成后再提交');
formLoading.value = false;
return;
}
// 如果还有 Blob URL，说明有文件还未上传完成
const hasBlobUrls_2 = formData.value.homeImages.some(item => item.url && item.url.startsWith('blob:'));
if (hasBlobUrls_2) {
message.warning('请等待图片上传完成后再提交');
formLoading.value = false;
return;
}
// 构造最终数据
const data = {
...formData.value,
images: imageUrls,
homeImages : homeImageUrls
};
if (formType.value === 'assemblyCreate') {
await IndustryApplicationApi.createIndustryApplication(data) await IndustryApplicationApi.createIndustryApplication(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
...@@ -154,17 +256,84 @@ const submitForm = async () => { ...@@ -154,17 +256,84 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
image: undefined, images: [],
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
description: '', description: '',
showStatus: undefined, showStatus: undefined,
remark: undefined, remark: undefined,
homeImage: undefined, homeImages: [],
assemblyType: undefined, assemblyType: undefined,
orderNum: undefined orderNum: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
// 预览图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
previewVisible.value = true // 使用独立的预览状态
}
// 删除图片
const handleRemove = (file, fileList) => {
// 更新 formData.image 数组
// formData.value.images = fileList.map(item => ({ url: item.url, name: item.name }))
formData.value.images = fileList
}
// 上传成功处理函数
const handleUploadSuccess = (response, file, fileList) => {
// 从响应中提取真实的URL并更新文件对象
if (response && response.data) {
// 根据 useUpload.ts 的实现，可能是 response.data.url 或直接是 response.data
const realUrl = response.data.url || response.data;
if (realUrl) {
file.url = realUrl;
}
}
// 更新 formData.images
formData.value.images = fileList;
}
// 删除homeImage图片
const handleRemoveHomeImage = (file, fileList) => {
// 更新 formData.image 数组
// formData.value.images = fileList.map(item => ({ url: item.url, name: item.name }))
formData.value.homeImages = fileList
}
// homeImage上传成功处理函数
const handleUploadHomeImageSuccess = (response, file, fileList) => {
// 从响应中提取真实的URL并更新文件对象
if (response && response.data) {
// 根据 useUpload.ts 的实现，可能是 response.data.url 或直接是 response.data
const realUrl = response.data.url || response.data;
if (realUrl) {
file.url = realUrl;
}
}
// 更新 formData.images
formData.value.homeImages = fileList;
}
// 上传失败处理函数
const handleUploadError = (err, file, fileList) => {
message.error('图片上传失败: ' + (err.message || '未知错误'))
}
</script> </script>
<style scoped>.upload-tips {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.red-text {
color: red;
}
</style>
src/views/biz/industryapplication/index.vue
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
<el-button <el-button
type="primary" type="primary"
plain plain
@click="openForm('create')" @click="openForm('assemblyCreate')"
v-hasPermi="['biz:industry-application:create']" v-hasPermi="['biz:industry-application:create']"
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
...@@ -135,16 +135,42 @@ ...@@ -135,16 +135,42 @@
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="排序值" align="center" prop="orderNum" /> <el-table-column label="排序值" align="center" prop="orderNum" />
<el-table-column label="展示图地址" align="center" prop="image" width="100"> <!-- <el-table-column label="展示图地址" align="center" prop="image" width="100">-->
<!-- <template #default="scope">-->
<!-- <img :src="scope.row.image" alt="资源展示图" class="h-36px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="展示图地址" align="center" prop="images" width="100">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.image" alt="资源展示图" class="h-36px" /> <!-- 只显示第一张图片 -->
<img
v-if="scope.row.images && scope.row.images.length > 0"
:src="scope.row.images[0]"
alt="展示图"
class="h-36px"
/>
<span v-else>暂无图片</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="首页展示图片" align="center" prop="homeImage" width="100">
<!-- <el-table-column label="首页展示图片" align="center" prop="homeImage" width="100">-->
<!-- <template #default="scope">-->
<!-- <img :src="scope.row.homeImage" alt="首页展示图片" class="h-36px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="首页展示图片" align="center" prop="homeImages" width="100">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.homeImage" alt="首页展示图片" class="h-36px" /> <!-- 只显示第一张图片 -->
<img
v-if="scope.row.homeImages && scope.row.homeImages.length > 0"
:src="scope.row.homeImages[0]"
alt="首页展示图片"
class="h-36px"
/>
<span v-else>暂无图片</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="首页展示图片" align="center" prop="homeImage" />--> <!-- <el-table-column label="首页展示图片" align="center" prop="homeImage" />-->
<el-table-column label="内容" align="center" prop="information" /> <el-table-column label="内容" align="center" prop="information" />
<el-table-column label="标题" align="center" prop="title" /> <el-table-column label="标题" align="center" prop="title" />
...@@ -182,7 +208,7 @@ ...@@ -182,7 +208,7 @@
<el-button <el-button
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('assemblyUpdate', scope.row.id)"
v-hasPermi="['biz:industry-application:update']" v-hasPermi="['biz:industry-application:update']"
> >
编辑 编辑
...@@ -234,7 +260,7 @@ const queryParams = reactive({ ...@@ -234,7 +260,7 @@ const queryParams = reactive({
title: undefined, title: undefined,
showStatus: undefined, showStatus: undefined,
createTime: [], createTime: [],
homeImage: undefined, // homeImages: [],
assemblyType: undefined, assemblyType: undefined,
orderNum: undefined orderNum: undefined
}) })
......
src/views/biz/information/InformationForm.vue
...@@ -49,9 +49,33 @@ ...@@ -49,9 +49,33 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="预览图" prop="image"> <!-- <el-form-item label="预览图" prop="image">-->
<UploadImg v-model="formData.image" /> <!-- <UploadImg v-model="formData.image" />-->
<!-- </el-form-item>-->
<el-form-item label="轮播图地址" prop="images">
<el-upload
v-model:file-list="formData.images"
:action="uploadUrl"
:http-request="httpRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 添加预览对话框 -->
<el-dialog v-model="previewVisible" append-to-body>
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 添加提示信息 -->
<p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件
</p>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" /> <el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
...@@ -65,6 +89,14 @@ ...@@ -65,6 +89,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { InformationApi, Information } from '@/api/biz/information' import { InformationApi, Information } from '@/api/biz/information'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload'
// 添加预览相关的响应式变量
const previewVisible = ref(false)
// 获取上传相关配置
const { uploadUrl, httpRequest } = useUpload()
const dialogImageUrl = ref('')
/** 活动资讯管理 表单 */ /** 活动资讯管理 表单 */
defineOptions({ name: 'InformationForm' }) defineOptions({ name: 'InformationForm' })
...@@ -83,7 +115,7 @@ const formData = ref({ ...@@ -83,7 +115,7 @@ const formData = ref({
title: undefined, title: undefined,
description: '', description: '',
showStatus: undefined, showStatus: undefined,
image: undefined, images: [],
remark: undefined remark: undefined
}) })
const formRules = reactive({ const formRules = reactive({
...@@ -110,7 +142,15 @@ const open = async (type: string, id?: number) => { ...@@ -110,7 +142,15 @@ const open = async (type: string, id?: number) => {
if (data.description === null) { if (data.description === null) {
data.description = '' data.description = ''
} }
formData.value = data
// 将 images 字段转换为 file-list 需要的格式
if (data.images && Array.isArray(data.images)) {
formData.value.images = data.images.map(url => ({ url, name: 'image.jpg' })) // 添加 name 属性
} else {
formData.value.images = []
}
formData.value = { ...data, images: formData.value.images } // 确保 image 是数组
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -126,8 +166,27 @@ const submitForm = async () => { ...@@ -126,8 +166,27 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as Information
if (formType.value === 'create') { // 确保只提取真实的 URL，而不是本地的 Blob URL
const imageUrls = formData.value.images
.filter(item => item.url && !item.url.startsWith('blob:')) // 过滤掉 Blob URL
.map(item => item.url);
// 如果还有 Blob URL，说明有文件还未上传完成
const hasBlobUrls = formData.value.images.some(item => item.url && item.url.startsWith('blob:'));
if (hasBlobUrls) {
message.warning('请等待图片上传完成后再提交');
formLoading.value = false;
return;
}
// 构造最终数据
const data = {
...formData.value,
images: imageUrls
};
if (formType.value === 'informationCreate') {
await InformationApi.createInformation(data) await InformationApi.createInformation(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
...@@ -151,9 +210,54 @@ const resetForm = () => { ...@@ -151,9 +210,54 @@ const resetForm = () => {
title: undefined, title: undefined,
description: '', description: '',
showStatus: undefined, showStatus: undefined,
image: undefined, images: [],
remark: undefined remark: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
// 预览图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
previewVisible.value = true // 使用独立的预览状态
}
// 删除图片
const handleRemove = (file, fileList) => {
// 更新 formData.image 数组
// formData.value.images = fileList.map(item => ({ url: item.url, name: item.name }))
formData.value.images = fileList
}
// 上传成功处理函数
const handleUploadSuccess = (response, file, fileList) => {
// 从响应中提取真实的URL并更新文件对象
if (response && response.data) {
// 根据 useUpload.ts 的实现，可能是 response.data.url 或直接是 response.data
const realUrl = response.data.url || response.data;
if (realUrl) {
file.url = realUrl;
}
}
// 更新 formData.images
formData.value.images = fileList;
}
// 上传失败处理函数
const handleUploadError = (err, file, fileList) => {
message.error('图片上传失败: ' + (err.message || '未知错误'))
}
</script> </script>
<style scoped>.upload-tips {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.red-text {
color: red;
}
</style>
src/views/biz/information/index.vue
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<el-button <el-button
type="primary" type="primary"
plain plain
@click="openForm('create')" @click="openForm('informationCreate')"
v-hasPermi="['biz:information:create']" v-hasPermi="['biz:information:create']"
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
...@@ -130,9 +130,21 @@ ...@@ -130,9 +130,21 @@
</el-table-column> </el-table-column>
<!-- <el-table-column label="预览图" align="center" prop="image" />--> <!-- <el-table-column label="预览图" align="center" prop="image" />-->
<el-table-column label="预览图" align="center" prop="image" width="100"> <!-- <el-table-column label="预览图" align="center" prop="image" width="100">-->
<!-- <template #default="scope">-->
<!-- <img :src="scope.row.image" alt="预览图" class="h-36px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="预览图" align="center" prop="images" width="100">
<template #default="scope"> <template #default="scope">
<img :src="scope.row.image" alt="预览图" class="h-36px" /> <!-- 只显示第一张图片 -->
<img
v-if="scope.row.images && scope.row.images.length > 0"
:src="scope.row.images[0]"
alt="预览图"
class="h-36px"
/>
<span v-else>暂无图片</span>
</template> </template>
</el-table-column> </el-table-column>
...@@ -148,7 +160,7 @@ ...@@ -148,7 +160,7 @@
<el-button <el-button
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('informationUpdate', scope.row.id)"
v-hasPermi="['biz:information:update']" v-hasPermi="['biz:information:update']"
> >
编辑 编辑
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment