wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交代码

Browse Source
This commit is contained in:
wangchengming 2025-08-20 23:50:16 +08:00
parent 6e28467f40
commit 19dc66d53d
7 changed files with 214 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/styles/ruoyi.scss
View File

@ -742,17 +742,12 @@ h6 {
transform: none;
}
.searchPanelForm .filterSelect .el-select__placeholder,
.searchSmallPanelForm .filterSelect .el-select__placeholder {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
// 处理带过滤的下拉框
.searchPanelForm .filterSelect .el-select__input-wrapper,
.searchSmallPanelForm .filterSelect .el-select__input-wrapper {
// 添加这三行，select中设置最小宽度，可以依据选择内容自适应
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.searchPanelForm .filterSelect .el-select__input,
@ -761,8 +756,8 @@ h6 {
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
// width: 70px;
line-height: 34px;
min-width: 30px;
line-height: 34px;
}
.searchPanelForm .el-select__input,
@ -775,7 +770,7 @@ h6 {
line-height: 34px;
width: 100%;
}
.searchPanelForm .el-select__caret,
.searchSmallPanelForm .el-select__caret {
color: #FFFFFF;
@ -1190,6 +1185,16 @@ h6 {
background: #EDF2F960;
}
// 文件类lable
.myDetailForm .filesItemContent .el-form-item__label {
min-height: 104px;
line-height: 104px;
}
// 文件类content
.myDetailForm .filesItemContent .item__content {
line-height: 80px;
}
.my_detailform_label .el-form-item__label {
line-height: 20px;
padding-top: 10px;

1
src/components/FileUpload/PdfPreview.vue
View File

@ -60,6 +60,7 @@ const zoomOut = () => {
overflow: auto;
transform-origin: top left;
}
.pdf-controls {
display: flex;

6
src/components/FileUpload/multiFileUpload.vue
View File

@ -41,7 +41,7 @@
<!-- 图片预览 -->
<el-dialog v-model="dialogVisible" width="1080px" class="my_dialog" align-center title="附件预览">
<el-dialog v-model="dialogVisible" width="1090px" class="my_dialog" align-center title="附件预览">
<img v-if="isImageFile(suffix)" :src="dialogImageUrl" class="preview-image" alt="Preview Image" />
<div v-else class="unsupported-file">
<pdf-preview :pdf-url="dialogImageUrl" />
@ -124,6 +124,7 @@ const requestUpload = async (options) => {
formData.append('file', file)
try {
proxy.$modal.loading('正在上传文件，请耐心等待...')
const res = await uploadFile(formData)
if (res.code === 200) {
fileList.value.push({
@ -146,9 +147,12 @@ const requestUpload = async (options) => {
size: res.size,
suffix: res.suffix
}]
proxy.$modal.closeLoading()
emit('setFormFile', fileList.value)
}
} catch (error) {
proxy.$modal.closeLoading()
proxy.$modal.msgError("上传失败")
console.error('上传失败:', error)
}
}

157
src/components/FileUpload/supplierDetailFile.vue Normal file
View File

@ -0,0 +1,157 @@
<template>
<div>
<div style="width: 100%;">
<div v-for="itemFile in fileList" class="image-wrapper">
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
<img v-else :src="iconOther" class="avatar viewFile"
@click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
</div>
</div>
<!-- 图片预览 -->
<el-dialog v-model="dialogVisible" width="1090px" class="my_dialog" align-center title="附件预览">
<img v-if="isImageFile(suffix)" :src="dialogImageUrl" class="preview-image" alt="Preview Image" />
<div v-else class="unsupported-file">
<pdf-preview :pdf-url="dialogImageUrl" />
</div>
</el-dialog>
</div>
</template>
<script setup>
import { defineExpose, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import iconDoc from '@/assets/images/iconDoc.png'
import iconOther from '@/assets/images/iconOther.png'
import iconPdf from '@/assets/images/iconPdf.png'
import iconVideo from '@/assets/images/iconVideo.png'
import iconXls from '@/assets/images/iconXls.png'
import iconZip from '@/assets/images/iconZip.png'
import iconMove from '@/assets/images/iconMove.png'
import iconTxt from '@/assets/images/iconTxt.png'
import iconPpt from '@/assets/images/iconPpt.png'
import PdfPreview from './PdfPreview.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['setFormFile'])
// 文件列表初始化
const fileList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const suffix = ref('')
const setFileInfo = (files) => {
fileList.value = files
}
// 判断是否为图片文件
const isImageFile = (suffix) => {
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
}
// 图片预览
const handleCardPreview = (filePath, _suffix) => {
suffix.value = _suffix
dialogImageUrl.value = filePath
dialogVisible.value = true
}
// 暴露方法给父组件
defineExpose({
setFileInfo
});
</script>
<style lang="scss" scoped>
.hasFileCard {
display: inline;
margin-left: 20px;
}
.noFileCard {
display: inline;
}
.viewFile {
width: 80px;
height: 80px;
border: 1px solid #dedede;
border-radius: 6px;
}
.upload-container {
position: relative;
display: inline-block;
}
.image-wrapper {
max-width: 80px;
height: 100px;
overflow: hidden;
margin-right: 20px;
padding: 10px 0;
float: left;
}
.avatar {
object-fit: cover;
}
:deep(.el-upload--picture-card) {
position: relative;
width: 80px;
height: 80px;
border-radius: 4px;
}
.image-wrapper:hover .actions {
display: block;
}
.preview-image {
width: 100%;
max-height: 70vh;
object-fit: contain;
}
.unsupported-file {
padding: 0px;
text-align: center;
color: #999;
width: 100%;
height: 70vh;
}
.myIcon {
width: 40px;
height: 40px;
color: #d2d2d2;
}
</style>

4
src/views/pitchPrice/index.vue
View File

@ -4,8 +4,8 @@
<el-form :inline="true" v-show="showSearch" class="searchPanelForm">
<el-form-item label="供应商:">
<el-select class="filterSelect" v-model="queryParams.supplierId" filterable remote reserve-keyword :remote-method="getSupplierList" :loading="selectLoading"
placeholder="请输入供应商名称检索" remote-show-suffix clearable
style="min-width: 30px;">
placeholder="请输入" remote-show-suffix clearable
style="min-width: 70px;">
<el-option v-for="item in supplierList" :key="item.supplierId" :label="item.supplierName"
:value="item.supplierId" />
</el-select>

28
src/views/supplier/supplierDetail.vue
View File

@ -70,8 +70,8 @@
</el-col>
<div class="splineBar" />
<el-col :span="24">
<el-form-item label="媒体权属" prop="business_department">
<!-- {{ detailForm.meitiNianxian }} -->
<el-form-item label="媒体权属" class="filesItemContent" prop="business_department">
<supplierDetailFile ref="mediaRightsRef" />
</el-form-item>
</el-col>
</el-row>
@ -218,8 +218,8 @@
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="营业执照" prop="business_department">
<el-form-item label="营业执照" class="filesItemContent" prop="business_department">
<supplierDetailFile ref="businessLicenseRef" />
</el-form-item>
</el-col>
</el-row>
@ -249,8 +249,8 @@
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="其他附件" prop="business_department">
<el-form-item label="其他附件" class="filesItemContent" prop="business_department">
<supplierDetailFile ref="otherFileRef" />
</el-form-item>
</el-col>
</el-row>
@ -282,10 +282,18 @@
import { onMounted, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { getBusSupplier } from "@/api/supplier"
import supplierDetailFile from '../../components/FileUpload/supplierDetailFile.vue';
const emit = defineEmits(['handleShowList']);
const detailForm = ref({})
const activeNames = ref(['1', '2', '3', '4'])
const businessLicenseRef = ref(null)
const otherFileRef = ref(null)
const mediaRightsRef = ref(null)
const businessLicenseList = ref([])
const otherFileList = ref([])
const mediaRightsList = ref([])
const handleClose = () => {
emit('handleShowList')
}
@ -299,6 +307,14 @@ const handleOpenMedio = () => {
const getSupplierInfo = (_supplierId) => {
getBusSupplier(_supplierId).then(res => {
detailForm.value = res.data
if (detailForm.value.busSupplierFileList && detailForm.value.busSupplierFileList.length > 0) {
businessLicenseList.value = detailForm.value.busSupplierFileList.filter(item => item.fileType == 1)
mediaRightsList.value = detailForm.value.busSupplierFileList.filter(item => item.fileType == 2)
otherFileList.value = detailForm.value.busSupplierFileList.filter(item => item.fileType == 9)
businessLicenseRef.value?.setFileInfo(businessLicenseList.value)
otherFileRef.value?.setFileInfo(otherFileList.value)
mediaRightsRef.value?.setFileInfo(mediaRightsList.value)
}
})
}
// 暴露方法\属性给父组件

16
src/views/supplier/supplierForm.vue
View File

@ -438,14 +438,13 @@ const getCountyList2 = (value) => {
// 人员规模选择
const handleChangeSize = (val) => {
console.log('选择', val, personnel_size.value)
const curSizeInfo = personnel_size.value.filter(item => item.value == val)[0]
ruleForm.value.renyuanSize = val
ruleForm.value.renyuanGuimo = curSizeInfo?.label
}
// 业务部门选择
const handleChangeDept = (val) => {
const handleChangeDept = (val) => {
const curDepInfo = deptList.value.filter(item => item.deptId == val)[0]
ruleForm.value.yewuDeptId = val
ruleForm.value.yewuDept = curDepInfo?.deptName
@ -482,7 +481,6 @@ const handleSubmit = () => {
if (valid) {
// 使用扩展运算符合并数组
const mergedArray = [...businessLicenseList.value, ...otherFileList.value, ...mediaRightsList.value];
console.log('营业资质', mergedArray)
ruleForm.value.busSupplierFileList = mergedArray
if (ruleForm.value.supplierId != undefined) {
updateBusSupplier(ruleForm.value).then(response => {
@ -506,6 +504,14 @@ const handleClose = () => {
const getSupplierInfo = () => {
getBusSupplier(ruleForm.value.supplierId).then(res => {
ruleForm.value = res.data
if (ruleForm.value.busSupplierFileList && ruleForm.value.busSupplierFileList.length > 0) {
businessLicenseList.value = ruleForm.value.busSupplierFileList.filter(item => item.fileType == 1)
mediaRightsList.value = ruleForm.value.busSupplierFileList.filter(item => item.fileType == 2)
otherFileList.value = ruleForm.value.busSupplierFileList.filter(item => item.fileType == 9)
businessLicenseRef.value?.setFileInfo(businessLicenseList.value)
otherFileRef.value?.setFileInfo(otherFileList.value)
mediaRightsRef.value?.setFileInfo(mediaRightsList.value)
}
handleResponse(res)
})
}
@ -534,9 +540,7 @@ const initForm = (_formTitle, _ruleForm) => {
businessLicenseRef.value._fileType = 1
otherFileRef.value._fileType = 9
mediaRightsRef.value._fileType = 2
// businessLicenseRef.value?.setFileInfo(ruleForm.value.beforeCondition.certificatePhoto)
// otherFileRef.value?.setFileInfo(ruleForm.value.beforeCondition.qualificationForm)
// mediaRightsRef.value?.setFileInfo(ruleForm.value.beforeCondition.shFile)
});
}
// 暴露方法\属性给父组件