Skip to content

phsl / admin

Go to a project
Commit 564439de by lijinqi
Options

Merge remote-tracking branch 'origin/develop' into develop

parents eca38645 66436236
Showing with 189 additions and 634 deletions
src/utils/dict.ts
...@@ -253,4 +253,9 @@ export enum DICT_TYPE { ...@@ -253,4 +253,9 @@ export enum DICT_TYPE {
INDUSTRY_APPLICATION_TYPE = 'industry_application_type', INDUSTRY_APPLICATION_TYPE = 'industry_application_type',
HOME_INFO_INFORMATION_CATEGORY = 'home_info_information_category', HOME_INFO_INFORMATION_CATEGORY = 'home_info_information_category',
HOME_INFO_INDUSTRY_CATEGORY = 'home_info_industry_category', HOME_INFO_INDUSTRY_CATEGORY = 'home_info_industry_category',
// 解决方案
GROUNDING_STATUS = 'grounding_status', // 上架状态
SOLUTION_CATEGORY = 'solution_category', // 类别
INDUSTRY_CATEGORY = 'industry_category' // 行业类别
} }
src/views/biz/bannerinfo/BannerInfoForm.vue
...@@ -7,36 +7,14 @@ ...@@ -7,36 +7,14 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="轮播图地址" prop="images"> <el-form-item label="轮播图地址" prop="image">
<div class="upload-box"> <UploadImg v-model="formData.image" />
<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
>
<el-icon>
<Plus />
</el-icon>
</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"> <p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 请上传 大小不超过 <span class="red-text">5MB</span> 格式为
<span class="red-text">png/jpg/jpeg</span> <span class="red-text">png/jpg/jpeg</span>
的文件 的文件
</p> </p>
</div>
</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>
...@@ -58,6 +36,11 @@ ...@@ -58,6 +36,11 @@
<el-form-item label="排序值" prop="orderNum"> <el-form-item label="排序值" prop="orderNum">
<el-input v-model="formData.orderNum" placeholder="请输入排序值" /> <el-input v-model="formData.orderNum" placeholder="请输入排序值" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="状态" prop="showStatus">-->
<!-- <el-radio-group v-model="formData.showStatus">-->
<!-- <el-radio value="1">请选择字典生成</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item label="状态" prop="showStatus"> <el-form-item label="状态" prop="showStatus">
<el-radio-group v-model="formData.showStatus"> <el-radio-group v-model="formData.showStatus">
<el-radio <el-radio
...@@ -81,13 +64,8 @@ ...@@ -81,13 +64,8 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BannerInfoApi } from '@/api/biz/bannerinfo' import { BannerInfoApi, BannerInfo } from '@/api/biz/bannerinfo'
import { import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
DICT_TYPE,
getIntDictOptions
} from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { Plus } from '@element-plus/icons-vue'
/** banner页管理 表单 */ /** banner页管理 表单 */
defineOptions({ name: 'BannerInfoForm' }) defineOptions({ name: 'BannerInfoForm' })
...@@ -95,20 +73,13 @@ defineOptions({ name: 'BannerInfoForm' }) ...@@ -95,20 +73,13 @@ 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,
images: [], // 改为数组，存储多张图片的地址 image: undefined,
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -141,13 +112,7 @@ const open = async (type: string, id?: number) => { ...@@ -141,13 +112,7 @@ const open = async (type: string, id?: number) => {
if (data.description === null) { if (data.description === null) {
data.description = '' data.description = ''
} }
// 将 images 字段转换为 file-list 需要的格式 formData.value = data
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
} }
...@@ -163,27 +128,7 @@ const submitForm = async () => { ...@@ -163,27 +128,7 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
// 确保只提取真实的 URL，而不是本地的 Blob URL const data = formData.value as unknown as BannerInfo
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') { if (formType.value === 'bannerCreate') {
await BannerInfoApi.createBannerInfo(data) await BannerInfoApi.createBannerInfo(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
...@@ -203,7 +148,7 @@ const submitForm = async () => { ...@@ -203,7 +148,7 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
images: [], image: undefined,
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -214,51 +159,13 @@ const resetForm = () => { ...@@ -214,51 +159,13 @@ 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> <style scoped>
.upload-box {
display: flex;
flex-direction: column;
}
.upload-tips { .upload-tips {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-top: 10px; margin-top: 10px;
margin-left: 10px;
} }
.red-text { .red-text {
......
src/views/biz/bannerinfo/index.vue
...@@ -93,10 +93,9 @@ ...@@ -93,10 +93,9 @@
<el-table-column label="排序值" align="center" prop="orderNum" /> <el-table-column label="排序值" align="center" prop="orderNum" />
<el-table-column label="轮播图地址" align="center" prop="images" width="100"> <el-table-column label="轮播图地址" align="center" prop="images" width="100">
<template #default="scope"> <template #default="scope">
<!-- 只显示第一张图片 -->
<img <img
v-if="scope.row.images && scope.row.images.length > 0" v-if="scope.row.image"
:src="scope.row.images[0]" :src="scope.row.image"
alt="轮播图" alt="轮播图"
class="h-36px" class="h-36px"
/> />
...@@ -257,10 +256,5 @@ const handleExport = async () => { ...@@ -257,10 +256,5 @@ const handleExport = async () => {
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
getList() getList()
console.log(
getIntDictOptions(DICT_TYPE.HOME_INFO_STATUS),
'getIntDictOptions(DICT_TYPE.HOME_INFO_STATUS)'
)
}) })
</script> </script>
src/views/biz/computilityinformation/ComputilityInformationForm.vue
...@@ -7,34 +7,8 @@ ...@@ -7,34 +7,8 @@
label-width="140px" label-width="140px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="展示图地址" prop="images"> <el-form-item label="展示图地址" prop="image">
<div class="upload-box"> <UploadImg v-model="formData.image" />
<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
>
<el-icon>
<Plus />
</el-icon>
</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>
</div>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="information"> <el-form-item label="内容" prop="information">
...@@ -91,17 +65,12 @@ ...@@ -91,17 +65,12 @@
<script setup lang="ts"> <script setup lang="ts">
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' import { useUpload } from '@/components/UploadFile/src/useUpload'
import { Plus } from '@element-plus/icons-vue' import {BannerInfo} from "@/api/biz/bannerinfo";
// 添加预览相关的响应式变量
const previewVisible = ref(false)
// 获取上传相关配置 // 获取上传相关配置
const { uploadUrl, httpRequest } = useUpload() const { uploadUrl, httpRequest } = useUpload()
const dialogImageUrl = ref('')
/** 计算资源首页管理 表单 */ /** 计算资源首页管理 表单 */
defineOptions({ name: 'ComputilityInformationForm' }) defineOptions({ name: 'ComputilityInformationForm' })
...@@ -114,7 +83,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加 ...@@ -114,7 +83,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,
images: [], image: undefined,
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -127,7 +96,7 @@ const formRules = reactive({ ...@@ -127,7 +96,7 @@ 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' }],
category: [{ required: true, message: '计算资源应用类别不能为空', trigger: 'change' }], category: [{ required: true, message: '计算资源应用类别不能为空', trigger: 'change' }],
showStatus: [{ required: true, message: '状态：0-已隐藏，1-已显示不能为空', trigger: 'blur' }] showStatus: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
...@@ -148,13 +117,7 @@ const open = async (type: string, id?: number) => { ...@@ -148,13 +117,7 @@ const open = async (type: string, id?: number) => {
data.description = '' data.description = ''
} }
// 将 images 字段转换为 file-list 需要的格式 formData.value = data
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
} }
...@@ -170,26 +133,7 @@ const submitForm = async () => { ...@@ -170,26 +133,7 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
// 确保只提取真实的 URL，而不是本地的 Blob URL const data = formData.value as unknown as BannerInfo
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') { if (formType.value === 'computilityCreate') {
await ComputilityInformationApi.createComputilityInformation(data) await ComputilityInformationApi.createComputilityInformation(data)
...@@ -210,7 +154,7 @@ const submitForm = async () => { ...@@ -210,7 +154,7 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
images: [], image: undefined,
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
...@@ -221,39 +165,6 @@ const resetForm = () => { ...@@ -221,39 +165,6 @@ 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> <style scoped>
......
src/views/biz/computilityinformation/index.vue
...@@ -110,8 +110,8 @@ ...@@ -110,8 +110,8 @@
<template #default="scope"> <template #default="scope">
<!-- 只显示第一张图片 --> <!-- 只显示第一张图片 -->
<img <img
v-if="scope.row.images && scope.row.images.length > 0" v-if="scope.row.image"
:src="scope.row.images[0]" :src="scope.row.image"
alt="展示图" alt="展示图"
class="h-36px" class="h-36px"
/> />
......
src/views/biz/industryapplication/index.vue
...@@ -106,39 +106,15 @@ ...@@ -106,39 +106,15 @@
> >
<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="110">
<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>
...@@ -153,11 +129,11 @@ ...@@ -153,11 +129,11 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="描述内容" align="center" prop="description">--> <!-- <el-table-column label="描述内容" align="center" prop="description">-->
<!-- <template #default="scope">--> <!-- <template #default="scope">-->
<!-- <div v-html="scope.row.description" class="line-clamp-2"></div>--> <!-- <div v-html="scope.row.description" class="line-clamp-2"></div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<el-table-column label="状态" align="center" prop="showStatus"> <el-table-column label="状态" align="center" prop="showStatus">
<template #default="scope"> <template #default="scope">
...@@ -222,7 +198,6 @@ const queryParams = reactive({ ...@@ -222,7 +198,6 @@ const queryParams = reactive({
title: undefined, title: undefined,
showStatus: undefined, showStatus: undefined,
createTime: [], createTime: [],
// homeImages: [],
assemblyType: undefined, assemblyType: undefined,
orderNum: undefined orderNum: undefined
}) })
......
src/views/biz/information/InformationForm.vue
...@@ -7,9 +7,13 @@ ...@@ -7,9 +7,13 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="资讯类别" prop="category"> <el-form-item label="资讯类别" prop="category">
<el-select v-model="formData.category" placeholder="请选择资讯类别" clearable class="!w-160px"> <el-select
v-model="formData.category"
placeholder="请选择资讯类别"
clearable
class="!w-160px"
>
<el-option <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_INFORMATION_CATEGORY)" v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_INFORMATION_CATEGORY)"
:key="dict.value" :key="dict.value"
...@@ -20,7 +24,12 @@ ...@@ -20,7 +24,12 @@
</el-form-item> </el-form-item>
<el-form-item label="行业类别" prop="industryCategory"> <el-form-item label="行业类别" prop="industryCategory">
<el-select v-model="formData.industryCategory" placeholder="请选择行业类别" clearable class="!w-160px"> <el-select
v-model="formData.industryCategory"
placeholder="请选择行业类别"
clearable
class="!w-160px"
>
<el-option <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_INDUSTRY_CATEGORY)" v-for="dict in getIntDictOptions(DICT_TYPE.HOME_INFO_INDUSTRY_CATEGORY)"
:key="dict.value" :key="dict.value"
...@@ -49,32 +58,34 @@ ...@@ -49,32 +58,34 @@
</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
>
<el-icon><Plus /></el-icon>
</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"> <p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件 请上传 大小不超过 <span class="red-text">5MB</span> 格式为
<span class="red-text">png/jpg/jpeg</span>
的文件
</p> </p>
</el-form-item> </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-->
<!-- >-->
<!-- <el-icon><Plus /></el-icon>-->
<!-- </el-upload>-->
<!-- &lt;!&ndash; 添加预览对话框 &ndash;&gt;-->
<!-- <el-dialog v-model="previewVisible" append-to-body>-->
<!-- <img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 添加提示信息 &ndash;&gt;-->
<!-- </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="请输入备注" />
...@@ -87,10 +98,10 @@ ...@@ -87,10 +98,10 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { InformationApi, Information } from '@/api/biz/information' import { InformationApi } 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' import { useUpload } from '@/components/UploadFile/src/useUpload'
import {Plus} from "@element-plus/icons-vue"; import {BannerInfo} from "@/api/biz/bannerinfo";
// 添加预览相关的响应式变量 // 添加预览相关的响应式变量
const previewVisible = ref(false) const previewVisible = ref(false)
...@@ -123,7 +134,7 @@ const formRules = reactive({ ...@@ -123,7 +134,7 @@ const formRules = reactive({
category: [{ required: true, message: '咨询类别不能为空', trigger: 'blur' }], category: [{ required: true, message: '咨询类别不能为空', trigger: 'blur' }],
industryCategory: [{ required: true, message: '行业类别不能为空', trigger: 'blur' }], industryCategory: [{ 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: '状态不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
...@@ -147,14 +158,7 @@ const open = async (type: string, id?: number) => { ...@@ -147,14 +158,7 @@ const open = async (type: string, id?: number) => {
data.category = Number(data.category) data.category = Number(data.category)
data.industryCategory = Number(data.industryCategory) data.industryCategory = Number(data.industryCategory)
// 将 images 字段转换为 file-list 需要的格式 formData.value = data
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
} }
...@@ -170,26 +174,7 @@ const submitForm = async () => { ...@@ -170,26 +174,7 @@ const submitForm = async () => {
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as BannerInfo
// 确保只提取真实的 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') { if (formType.value === 'informationCreate') {
await InformationApi.createInformation(data) await InformationApi.createInformation(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
...@@ -219,46 +204,14 @@ const resetForm = () => { ...@@ -219,46 +204,14 @@ 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 { <style scoped>
.upload-tips {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-top: 10px; margin-top: 10px;
margin-left: 10px;
} }
.red-text { .red-text {
......
src/views/biz/information/index.vue
...@@ -121,12 +121,12 @@ ...@@ -121,12 +121,12 @@
<!-- <img :src="scope.row.image" alt="预览图" class="h-36px" />--> <!-- <img :src="scope.row.image" alt="预览图" class="h-36px" />-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<el-table-column label="预览图" align="center" prop="images" width="100"> <el-table-column label="预览图" align="center" prop="image" width="100">
<template #default="scope"> <template #default="scope">
<!-- 只显示第一张图片 --> <!-- 只显示第一张图片 -->
<img <img
v-if="scope.row.images && scope.row.images.length > 0" v-if="scope.row.image"
:src="scope.row.images[0]" :src="scope.row.image"
alt="预览图" alt="预览图"
class="h-36px" class="h-36px"
/> />
...@@ -169,7 +169,6 @@ ...@@ -169,7 +169,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { isEmpty } from '@/utils/is' import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { InformationApi, Information } from '@/api/biz/information' import { InformationApi, Information } from '@/api/biz/information'
import InformationForm from './InformationForm.vue' import InformationForm from './InformationForm.vue'
......
src/views/biz/partner/PartnerForm.vue
...@@ -7,27 +7,13 @@ ...@@ -7,27 +7,13 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="展示图地址" prop="images"> <el-form-item label="展示图地址" prop="image">
<el-upload <UploadImg v-model="formData.image" />
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
>
<el-icon><Plus /></el-icon>
</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"> <p class="upload-tips">
请上传 大小不超过 <span class="red-text">5MB</span> 格式为 <span class="red-text">png/jpg/jpeg</span> 的文件 请上传 大小不超过 <span class="red-text">5MB</span> 格式为
<span class="red-text">png/jpg/jpeg</span>
的文件
</p> </p>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="information"> <el-form-item label="内容" prop="information">
...@@ -71,7 +57,8 @@ import { PartnerApi, Partner } from '@/api/biz/partner' ...@@ -71,7 +57,8 @@ import { PartnerApi, Partner } from '@/api/biz/partner'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useUpload } from '@/components/UploadFile/src/useUpload' import { useUpload } from '@/components/UploadFile/src/useUpload'
import {Plus} from "@element-plus/icons-vue"; import { Plus } from '@element-plus/icons-vue'
import {BannerInfo} from "@/api/biz/bannerinfo";
// 添加预览相关的响应式变量 // 添加预览相关的响应式变量
const previewVisible = ref(false) const previewVisible = ref(false)
...@@ -99,7 +86,7 @@ const formData = ref({ ...@@ -99,7 +86,7 @@ const formData = ref({
description: undefined, description: undefined,
orderNum: undefined, orderNum: undefined,
showStatus: undefined, showStatus: undefined,
remark: undefined, remark: undefined
}) })
const formRules = reactive({ const formRules = reactive({
information: [{ required: true, message: '内容不能为空', trigger: 'blur' }], information: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
...@@ -142,15 +129,7 @@ const open = async (type: string, id?: number) => { ...@@ -142,15 +129,7 @@ const open = async (type: string, id?: number) => {
data.description = '' data.description = ''
} }
// 将 images 字段转换为 file-list 需要的格式 formData.value = data
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 , homeImages: formData.value.homeImages} // 确保 image 是数组
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -167,25 +146,7 @@ const submitForm = async () => { ...@@ -167,25 +146,7 @@ const submitForm = async () => {
formLoading.value = true formLoading.value = true
try { try {
// 确保只提取真实的 URL，而不是本地的 Blob URL const data = formData.value as unknown as BannerInfo
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 === 'create') { if (formType.value === 'create') {
await PartnerApi.createPartner(data) await PartnerApi.createPartner(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
...@@ -205,55 +166,25 @@ const submitForm = async () => { ...@@ -205,55 +166,25 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
images: [], image: undefined,
information: undefined, information: undefined,
title: undefined, title: undefined,
url: undefined, url: undefined,
description: undefined, description: undefined,
orderNum: undefined, orderNum: undefined,
showStatus: undefined, showStatus: undefined,
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 { <style scoped>
.upload-tips {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-top: 10px; margin-top: 10px;
margin-left: 10px;
} }
.red-text { .red-text {
......
src/views/biz/partner/index.vue
...@@ -94,12 +94,12 @@ ...@@ -94,12 +94,12 @@
@selection-change="handleRowCheckboxChange" @selection-change="handleRowCheckboxChange"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="展示图地址" align="center" prop="images" width="100"> <el-table-column label="展示图地址" align="center" prop="image" width="100">
<template #default="scope"> <template #default="scope">
<!-- 只显示第一张图片 --> <!-- 只显示第一张图片 -->
<img <img
v-if="scope.row.images && scope.row.images.length > 0" v-if="scope.row.image"
:src="scope.row.images[0]" :src="scope.row.image"
alt="展示图" alt="展示图"
class="h-36px" class="h-36px"
/> />
......
src/views/biz/solution/SolutionForm.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
label-width="100px" label-width="140px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="主标题" prop="title"> <el-form-item label="主标题" prop="title">
...@@ -45,9 +45,15 @@ ...@@ -45,9 +45,15 @@
<el-form-item label="解决方案详情" prop="solutionInfo"> <el-form-item label="解决方案详情" prop="solutionInfo">
<Editor v-model="formData.solutionInfo" height="150px" /> <Editor v-model="formData.solutionInfo" height="150px" />
</el-form-item> </el-form-item>
<el-form-item label="状态：0-已下架，1-已上架" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status"> <el-radio-group v-model="formData.status">
<el-radio value="1">请选择字典生成</el-radio> <el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.GROUNDING_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
......
src/views/biz/solution/index.vue
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="68px"
> >
<el-form-item label="主标题" prop="title"> <el-form-item label="主标题" prop="title">
<el-input <el-input
...@@ -47,37 +46,46 @@ ...@@ -47,37 +46,46 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态：0-已下架，1-已上架" prop="status"> <el-form-item label="状态" prop="status">
<el-select <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
v-model="queryParams.status"
placeholder="请选择状态：0-已下架，1-已上架"
clearable
class="!w-240px"
>
<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> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button type="primary" @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<div class="bt-b10">
<el-button <el-button
type="primary" type="primary"
plain plain
@click="openForm('create')" @click="openForm('create')"
v-hasPermi="['biz:solution:create']" v-hasPermi="['biz:solution:create']"
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" />
新增
</el-button> </el-button>
<el-button <el-button
type="success" type="success"
...@@ -86,7 +94,8 @@ ...@@ -86,7 +94,8 @@
:loading="exportLoading" :loading="exportLoading"
v-hasPermi="['biz:solution:export']" v-hasPermi="['biz:solution:export']"
> >
<Icon icon="ep:download" class="mr-5px" /> 导出 <Icon icon="ep:download" class="mr-5px" />
导出
</el-button> </el-button>
<el-button <el-button
type="danger" type="danger"
...@@ -95,14 +104,10 @@ ...@@ -95,14 +104,10 @@
@click="handleDeleteBatch" @click="handleDeleteBatch"
v-hasPermi="['biz:solution:delete']" v-hasPermi="['biz:solution:delete']"
> >
<Icon icon="ep:delete" class="mr-5px" /> 批量删除 <Icon icon="ep:delete" class="mr-5px" />
批量删除
</el-button> </el-button>
</el-form-item> </div>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table <el-table
row-key="id" row-key="id"
v-loading="loading" v-loading="loading"
...@@ -112,7 +117,7 @@ ...@@ -112,7 +117,7 @@
@selection-change="handleRowCheckboxChange" @selection-change="handleRowCheckboxChange"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="主键" align="center" prop="id" /> <!-- <el-table-column label="主键" align="center" prop="id" />-->
<el-table-column label="主标题" align="center" prop="title" /> <el-table-column label="主标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" /> <el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="方案类别" align="center" prop="category"> <el-table-column label="方案类别" align="center" prop="category">
...@@ -127,7 +132,12 @@ ...@@ -127,7 +132,12 @@
</el-table-column> </el-table-column>
<el-table-column label="行业概述副标题" align="center" prop="titleIndustry" /> <el-table-column label="行业概述副标题" align="center" prop="titleIndustry" />
<el-table-column label="解决方案副标题" align="center" prop="titleSolution" /> <el-table-column label="解决方案副标题" align="center" prop="titleSolution" />
<el-table-column label="状态：0-已下架，1-已上架" align="center" prop="status" /> <!-- <el-table-column label="状态" align="center" prop="status" />-->
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.GROUNDING_STATUS" :value="Number(scope.row.status)" />
</template>
</el-table-column>
<el-table-column <el-table-column
label="创建时间" label="创建时间"
align="center" align="center"
...@@ -192,8 +202,8 @@ const queryParams = reactive({ ...@@ -192,8 +202,8 @@ const queryParams = reactive({
title: undefined, title: undefined,
category: undefined, category: undefined,
industryCategory: undefined, industryCategory: undefined,
status: undefined, status: undefined
createTime: [] // createTime: []
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false) // 导出的加载中
...@@ -246,15 +256,15 @@ const handleDeleteBatch = async () => { ...@@ -246,15 +256,15 @@ const handleDeleteBatch = async () => {
try { try {
// 删除的二次确认 // 删除的二次确认
await message.delConfirm() await message.delConfirm()
await SolutionApi.deleteSolutionList(checkedIds.value); await SolutionApi.deleteSolutionList(checkedIds.value)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
await getList(); await getList()
} catch {} } catch {}
} }
const checkedIds = ref<number[]>([]) const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: Solution[]) => { const handleRowCheckboxChange = (records: Solution[]) => {
checkedIds.value = records.map((item) => item.id); checkedIds.value = records.map((item) => item.id)
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
......
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