admin1/jiangchengfeiyi-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决了日历有重复值的问题、富文本组件图片上传莫名撑大的问题

Browse Source
This commit is contained in:
yuanteng 2025-04-19 18:16:14 +08:00
parent 0766c051ed
commit fdaeec1cdf
14 changed files with 262 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/myAxios.ts
View File

@ -4,10 +4,10 @@ import router from '../router'
const myAxios = axios.create({
withCredentials:true,
baseURL: 'http://localhost:9092/api'
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
// baseURL: 'http://localhost:9092/api'
// baseURL: 'http://154.8.193.216:9093/api' //隋雨霏服务器测试环境
// baseURL: 'https://www.carboner.cn:8888/api'
baseURL: 'https://www.carboner.cn:8888/api'
// baseURL:'http://1.94.237.210:9092/api'
});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {

9
src/layout/components/richTextUtil.vue
View File

@ -21,6 +21,7 @@ const props = defineProps({
context: String,
disableRich: Boolean
})
const imgRegEx = /<img.*?>/gi;
onMounted(() => {
setTimeout(() => {
@ -48,7 +49,7 @@ editorConfig.MENU_CONF['uploadImage'] = {
maxFileSize: 1024 * 1024 * 10, //最大图片10M
async customUpload(file, insertFn) {
const res = await myAxios({
url: '/file/uploadFile',
url: '/file/upload',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
@ -77,6 +78,12 @@ const handleCreated = (editor) => {
const handleChange = (editor) => { //当选项改变时触发emit传值
emit('richTextContent', valueHtml.value)
const richText = valueHtml.value
valueHtml.value = richText.replace(imgRegEx, (match) => {
console.log(match)
return match.replace(/<img/, '<img style="width:100%;"');
});
emit('watchTxt', editor.getHtml())
}
</script>

8
src/utils/formatImgUpload.ts
View File

@ -1,9 +1,11 @@
//上传链接
export const uploadUrl : string = 'http://localhost:9092/api/file/uploadFile'
// export const uploadUrl : string = 'http://localhost:9092/api/file/upload'
// export const uploadUrl : string= 'https://www.carboner.cn:8888/api/file/uploadFile'
export const uploadUrl : string= 'https://www.carboner.cn:8888/api/file/upload'
// export const uploadUrl : string = 'http://154.8.193.216:9093/api/file/uploadFile' //测试环境
// export const uploadUrl : string = 'http://154.8.193.216:9093/api/file/upload' //测试环境
// export const uploadUrl : string = 'http://1.94.237.210:9092/api/file/upload'
//下载链接
export const downloadUrl : string = 'https://www.carboner.cn:8888/api/file/downloadFile?objectKey='

2
src/views/Commodity/EntityProductDetail.vue
View File

@ -129,7 +129,7 @@ onMounted(() => {
const getFestivalArr = async () => {
let tempFestivalArr : any = [] //临时数组，存放每一次获取的节日名称，用于判断
const res = await myAxios.get('/festival/get')
console.log('节日信息--->',res.data.data)
// console.log('节日信息--->',res.data.data)
if(res.data.code === 1) {
festivalArr.value = res.data.data
festivalArr.value.forEach((item : any) => {

43
src/views/Commodity/TypeManagement.vue
View File

@ -15,7 +15,7 @@
:auto-upload="false"
multiple="true"
:on-remove="handleRemove"
@change="(event: any) => handleChange(event)"
@change="compressImage"
:on-exceed="Exceed_ProductImg"
limit="1">
<el-icon>
@ -69,7 +69,8 @@ import {ElMessage, type UploadProps, type UploadUserFile,type UploadFile, genFil
import {ErrorInfo, SuccessInfo} from '@/utils/messageInfo';
import {onMounted, ref} from 'vue'
import myAxios from '@/api/myAxios';
import { downloadUrl } from '@/utils/formatImgUpload'
import {downloadUrl, uploadUrl} from '@/utils/formatImgUpload'
import Compressor from "compressorjs";
const fileSimple = ref() //单个文件
const selectedItems = ref([])
@ -96,30 +97,52 @@ onMounted(() => {
//获取类别列表
const getTypeList = async () => {
const res = await myAxios.post('/category/list/web')
// console.log(res.data.data)
console.log(res.data.data)
if (res.data.code === 1) {
tableData.value = res.data.data
} else {
ElMessage.error('获取类别列表失败，请检查服务')
}
}
const compressImage =(file: any)=> { //图片压缩方法
return new Promise((resolve, reject) => {
new Compressor(file.raw, {
quality: 0.2, //压缩质量，越高文件越大
success(result) {
// console.log('res--->',result)
// 压缩成功后的处理
// 可以在这里预览、上传或者做其他处理
const compressedFile = new File([result], file.raw.name, { type: result.type });
// 可以在这里预览、上传或者做其他处理
console.log("Compressed file:", compressedFile);
// 如果需要上传，可以在这里执行上传操作
handleChange(compressedFile)
// resolve(compressedFile);
},
error(err) {
reject("压缩失败");
console.log("Compressor error:", err.message);
}
});
});
}
//上传图片，一张图片，不需要flag值
const handleChange = async (file: any) => {
fileSimple.value = file
loading.value = true
let formData = new FormData() //这一步很重要 创建一个FormData对象
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
url: '/file/uploadFile',
url: uploadUrl,
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
},
data: {
biz: "test",
file: formData.get("file") // 取出formData对象中的file
file: file
}
})
console.log('图片上传--->',res.data);
if (res.data.code === 1) {
loading.value = false
SuccessInfo('上传成功')
@ -199,7 +222,7 @@ const addOrUpdateType = async () => {
ElMessage.error('更新失败')
}
}
getTypeList()
await getTypeList()
}
//重置表单
const resetForm = () => {
@ -234,7 +257,7 @@ const Delete_type = async (index: number) => {
message: '删除成功',
})
}
getTypeList()
await getTypeList()
}
const changeInput = () => { //当输入栏变化时解除禁用提交按钮
submitable.value = false

7
src/views/CostumeAppointments/ManagementCenter.vue
View File

@ -482,9 +482,12 @@ const submitDate = async ()=> { //提交日期方法
appointmentDateAddRequestList.value.forEach((item:any,index:number)=>{
Object.assign(item, {photoProductId : photoProductId}) //添加photoProductId到appointmentDateAddRequestList每一项中
})
console.log('预约---->',appointmentDateAddRequestList.value);
// console.log('预约---->',appointmentDateAddRequestList.value);
const res = await myAxios.post("/book/addBatch", appointmentDateAddRequestList.value)
console.log('添加日期返回的结果',res.data)
// console.log('添加日期返回的结果',res.data)
if(res.data.code === 1) {
reload()
}
await getOutfitList();
addDateVisible.value = false
appointmentDateAddRequestList.value = []

21
src/views/Coupons/CouponCenter.vue
View File

@ -27,6 +27,12 @@
<el-table-column prop="conditionAmount" label="优惠价格"></el-table-column>
<el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
<el-table-column prop="endTime" label="截止时间"></el-table-column>
<el-table-column label="上架状态">
<template #default="scope">
<span style="margin-left: 10px" v-if="scope.row.isShelves == 1">上架</span>
<span style="margin-left: 10px" v-if="scope.row.isShelves == 0">下架</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作" width="200px" >
<template #default="scope">
@ -36,6 +42,10 @@
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
编辑
</el-button>
<el-button size="small" @click="handleOffCoupon(scope.row.id)">
<div v-if="scope.row.isShelves == 1">下架</div>
<div v-if="scope.row.isShelves == 0">上架</div>
</el-button>
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
<template #reference>
@ -101,6 +111,7 @@
import {inject, onMounted, ref} from "vue";
import myAxios from "@/api/myAxios";
import {ElMessage} from "element-plus";
import {SuccessInfo, WarnInfo} from "@/utils/messageInfo";
onMounted(() => {
getCouponsList()
@ -211,6 +222,16 @@ const deleteCoupons = async (index: number) => {
}
}
const handleOffCoupon = async ( id:any )=> {
const res = await myAxios.post('/coupon/shelves',{ id: id })
if(res.data.code === 1) {
SuccessInfo('更新成功')
await getCouponsList()
} else {
WarnInfo('服务错误')
}
}
</script>
<style>

20
src/views/Orders/OrderList.vue
View File

@ -26,9 +26,9 @@
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
<el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
<el-table-column prop="userName" label="用户名" width="100"></el-table-column>
<el-table-column label="所购买的商品" width="150">
<el-table-column label="展开" type="expand" width="150">
<template #default="props">
@ -56,7 +56,10 @@
<el-table-column prop="addressSnapshot.region" label="地区" width="180" />
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
</el-table-column>
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
<el-table-column prop="postage" label="快递费用"></el-table-column>
<el-table-column prop="totalAmount" label="订单实付金额">
</el-table-column>
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
<el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
<el-table-column label="操作" width="220px" fixed="right">
@ -81,7 +84,7 @@
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
<template #reference>
<el-button v-if="['待发货'].includes(scope.row.orderStatus)" size="small" type="danger"
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger"
plain>退款</el-button>
</template>
</el-popconfirm>
@ -259,6 +262,11 @@ const openShipmentDialog = (id: number) => {
currentId.value = id;
}
const deliverGoods = async () => { //发货方法
const values = Object.values(shipment.value );
if (values.some((value: any) => value === null || value === undefined || value === '')) {
WarnInfo('请填写快递单号')
return;
}
if (currentId.value) {
const res = await myAxios.post('/order/update', {
id: currentId.value,
@ -269,7 +277,7 @@ const deliverGoods = async () => { //发货方法
type: 'success',
message: '发货成功'
})
getOrderList();
await getOrderList();
}
} else {
ElMessage.error('更新失败，请检查字段')
@ -300,7 +308,7 @@ const load = (onum : any) => { //搜索的方法
getOrderList()
}
const cancelOrder = async (row: any) => { //取消订单的方法(未支付能取消)
console.log('点击的这一行--->', row);
// console.log('点击的这一行--->', row);
const res = await myAxios.post('/order/cancel/id', { id: row.id })
if (res.data.code === 1) {
await getOrderList()

35
src/views/OtherManagement/CourseCarouseCenter.vue
View File

@ -68,7 +68,7 @@
:auto-upload="false"
multiple="true"
:on-remove="removePic"
@change="(event: any) => handleChange(event)"
@change="compressImage"
:on-exceed="Exceed_ProductImg"
limit="1" >
<el-icon>
@ -91,7 +91,8 @@ import { type UploadProps } from 'element-plus';
import myAxios from '@/api/myAxios';
import {ref, onMounted, inject } from 'vue'
import { WarnInfo, SuccessInfo } from '@/utils/messageInfo';
import { downloadUrl } from '@/utils/formatImgUpload'
import {downloadUrl, uploadUrl} from '@/utils/formatImgUpload'
import Compressor from "compressorjs";
const DialogVisible = ref(false); //表单显示
const disabled = ref(false)
@ -213,13 +214,33 @@ const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品
WarnInfo('请移除之前的再上传')
}
const compressImage =(file: any)=> { //图片压缩方法
return new Promise((resolve, reject) => {
new Compressor(file.raw, {
quality: 0.2, //压缩质量，越高文件越大
success(result) {
// console.log('res--->',result)
// 压缩成功后的处理
// 可以在这里预览、上传或者做其他处理
const compressedFile = new File([result], file.raw.name, { type: result.type });
// 可以在这里预览、上传或者做其他处理
console.log("Compressed file:", compressedFile);
// 如果需要上传，可以在这里执行上传操作
handleChange(compressedFile)
// resolve(compressedFile);
},
error(err) {
reject("压缩失败");
console.log("Compressor error:", err.message);
}
});
});
}
const handleChange = async (file: any ) => {
loading.value = true
fileSimple.value = file
let formData = new FormData() //这一步很重要 创建一个FormData对象
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
url: '/file/uploadFile',
url: uploadUrl,
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
@ -227,7 +248,7 @@ const handleChange = async (file: any ) => {
data: {
biz: "test",
// 取出formData对象中的file
file: formData.get("file")
file: file
}
})
if(res.data.code === 1) {

35
src/views/OtherManagement/EntityCarouseCenter.vue
View File

@ -68,7 +68,7 @@
:auto-upload="false"
multiple="true"
:on-remove="removePic"
@change="(event: any) => handleChange(event)"
@change="compressImage"
:on-exceed="Exceed_ProductImg"
limit="1" >
<el-icon>
@ -91,7 +91,8 @@ import { type UploadProps } from 'element-plus';
import myAxios from '@/api/myAxios';
import {ref, onMounted, inject } from 'vue'
import { WarnInfo, SuccessInfo } from '@/utils/messageInfo';
import { downloadUrl } from '@/utils/formatImgUpload'
import {downloadUrl, uploadUrl} from '@/utils/formatImgUpload'
import Compressor from "compressorjs";
const DialogVisible = ref(false); //表单显示
const disabled = ref(false)
@ -213,13 +214,33 @@ const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品
WarnInfo('请移除之前的再上传')
}
const compressImage =(file: any)=> { //图片压缩方法
return new Promise((resolve, reject) => {
new Compressor(file.raw, {
quality: 0.2, //压缩质量，越高文件越大
success(result) {
// console.log('res--->',result)
// 压缩成功后的处理
// 可以在这里预览、上传或者做其他处理
const compressedFile = new File([result], file.raw.name, { type: result.type });
// 可以在这里预览、上传或者做其他处理
console.log("Compressed file:", compressedFile);
// 如果需要上传，可以在这里执行上传操作
handleChange(compressedFile)
// resolve(compressedFile);
},
error(err) {
reject("压缩失败");
console.log("Compressor error:", err.message);
}
});
});
}
const handleChange = async (file: any ) => {
loading.value = true
fileSimple.value = file
let formData = new FormData() //这一步很重要 创建一个FormData对象
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
url: '/file/uploadFile',
url: uploadUrl,
method: 'post',
headers: {
'content-Type': 'multipart/form-data'
@ -227,7 +248,7 @@ const handleChange = async (file: any ) => {
data: {
biz: "test",
// 取出formData对象中的file
file: formData.get("file")
file: file
}
})
if(res.data.code === 1) {

92
src/views/OtherManagement/ExpressManagement.vue
View File

@ -0,0 +1,92 @@
<template>
<div class="flexCard">
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
<el-card class="form-container" shadow="never" >
<el-card shadow="always" style="margin-bottom: 50px">当前偏远地区包含：西藏、新疆、青海、内蒙古、宁夏、云南、海南、甘肃。可设置为0元，0元就是偏远地区包邮。</el-card>
<el-form ref="resetFormData" size="large" >
<el-form-item label="快递费用" prop="price" label-width="100">
<el-input-number v-model="price" min="0" :precision="2" :step="0.5" />
<p>元</p>
</el-form-item>
<div class="btnBox">
<el-form-item>
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
title="是否确认修改" @confirm="onSubmit" width=180>
<template #reference>
<el-button type="primary">修改</el-button>
</template>
</el-popconfirm>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item>
</div>
</el-form>
</el-card>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject } from 'vue';
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
import myAxios from "@/api/myAxios";
import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
const resetFormData = ref()
const reload: any = inject("reload") //导入组件刷新
const price = ref(0)
onMounted(() => {
getExpressPrice()
})
//提交表单
const onSubmit = async () => {
const res = await myAxios.get('/global/update/postage/price',{ params: { bigDecimal : price.value } })
if(res.data.code == 1) {
SuccessInfo('更新偏远快递费用成功');
await getExpressPrice()
}
}
const getExpressPrice = async () => {
const res = await myAxios.get('/global/query/postage/price')
if(res.data.code == 1) {
price.value = res.data.data;
} else {
WarnInfo('服务错误');
}
}
//清除表单
const resetForm = () => {
resetFormData.value.resetFields()
}
</script>
<style scoped>
.flexCard {
display: flex;
height: 100%;
min-width: 800px;
margin: 0 auto;
}
.form-container {
width: 700px;
margin: 0 auto;
}
.form {
/* width: 500px; */
margin: 0 auto;
}
.btnBox {
display: flex;
justify-content: space-around;
}
</style>

5
src/views/ServiceType/ProductCenter.vue
View File

@ -515,7 +515,10 @@ const submitDate = async ()=> { //提交日期方法
Object.assign(item, {goodId:goodId})
})
const res = await myAxios.post("/appointmentDate/addBatch", appointmentDateAddRequestList.value)
console.log(res)
if(res.data.code === 1) {
reload()
}
// console.log(res)
await getProductList();
addDateVisible.value = false
appointmentDateAddRequestList.value = []

18
src/views/ServiceType/ServiceProductDetail.vue
View File

@ -29,7 +29,7 @@
style="width: 300px;" />
</el-form-item>
</div>
<el-form-item label="课程详情图" prop="richText" v-loading="loading">
<el-form-item label="课程详情" prop="richText" v-loading="loading">
<richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
</el-form-item>
<div class="btnBox">
@ -61,14 +61,11 @@ const route = useRoute(); //路由
const resetFormData = ref()
const ImgArr: any = ref<UploadUserFile[]>([])
const detailFrom : any = ref({
id: 0,
name: '', //商品名称
price: '', //商品价格
intro: '',//产品简介
festivalName: '', //节日名称
type: '',//类别
label: '',//商品标签
goodImg: '', //商品图片url
inventory: '', //库存
richText: ''
})
const previewImgUrl = ref('') //预览图字符串
@ -112,8 +109,9 @@ const getServiceInfo = async () => {
//提交表单
const onSubmit = async () => {
const values = Object.values(detailFrom.value );
console.log('--->',detailFrom.value);
// 使用some()方法来检查是否有任何值为空
if (values.some((value: any) => value === null || value === undefined || value === '' || value === 0)) {
if (values.some((value: any) => value === null || value === undefined || value === '' || detailFrom.value.price === 0)) {
WarnInfo('请检查表单数据是否完整填写')
return; //空返回结束函数
}
@ -141,8 +139,12 @@ const resetForm = () => {
const getInfo = (info: any) => { //富文本赋值
// console.log('info', info)
previewRichText.value = info
detailFrom.value.richText = info
previewRichText.value = info;
detailFrom.value.richText = encode64(info);
}
function encode64(text: string): string {
return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
}
</script>

11
vite.config.ts
View File

@ -13,5 +13,14 @@ export default defineConfig({
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
},
// server: {
// proxy: {
// '/api': {
// target: 'http://1.94.237.210:9092',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ''),
// },
// }
// },
})