bugfix
This commit is contained in:
parent
b70b789919
commit
4ab2a5462f
0
f/web-kboss/BINARY_IMAGE_UPLOAD_FIX.md
Normal file
0
f/web-kboss/BINARY_IMAGE_UPLOAD_FIX.md
Normal file
0
f/web-kboss/CHANGES_AFTER_PREVIEW_REMOVAL.md
Normal file
0
f/web-kboss/CHANGES_AFTER_PREVIEW_REMOVAL.md
Normal file
0
f/web-kboss/README_IMAGE_OPTIMIZATION.md
Normal file
0
f/web-kboss/README_IMAGE_OPTIMIZATION.md
Normal file
@ -125,3 +125,22 @@ export function reqExportProduct(data){
|
||||
data
|
||||
})
|
||||
}
|
||||
//产品添加子级和兄弟节点
|
||||
export function reqAddProductMenu(data){
|
||||
return request({
|
||||
url: '/product/homepage_category_tree_add.dspy',
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
})
|
||||
}
|
||||
//资质查询
|
||||
export function reqEnterpriseAuditInfoSearch(data){
|
||||
return request({
|
||||
url: '/user/enterprise_audit_info_search.dspy',
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -516,6 +516,7 @@ import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCod
|
||||
import {reqApplyChannel} from "@/api/customer/channel";
|
||||
import {reqSearchProductList} from "@/api/product/product";
|
||||
import {bdProducts, jdProducts} from "@/views/product/productionData";
|
||||
import { getHomePath } from "@/views/setting/tools";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -1238,7 +1239,7 @@ export default {
|
||||
sessionStorage.removeItem('userId')
|
||||
this.$store.commit('setLoginState', false)
|
||||
|
||||
await this.$router.push(`/homePage/index`);
|
||||
await this.$router.push(getHomePath());
|
||||
// window.location.reload()
|
||||
},
|
||||
|
||||
|
||||
@ -900,7 +900,6 @@ export const asyncRoutes = [
|
||||
]
|
||||
},
|
||||
{
|
||||
hidden: true,
|
||||
path: "/menuMangement",
|
||||
component:Layout,
|
||||
name: "menuMangement",
|
||||
|
||||
@ -98,8 +98,6 @@
|
||||
<el-button slot="reference" type="text" style="color: #F56C6C;margin-left: 10px;"
|
||||
size="small">删除</el-button>
|
||||
</el-popconfirm>
|
||||
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@ -405,7 +405,7 @@ export default Vue.extend({
|
||||
localStorage.removeItem('userId')
|
||||
|
||||
if (!window.location.href.includes('homePage/index')) {
|
||||
await this.$router.push(`/homePage/index`);
|
||||
await this.$router.push(getHomePath());
|
||||
}
|
||||
},
|
||||
edituserPassword() {//修改密码
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script >
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { reqPublishProductSearchFirstPage } from '@/api/ncmatch'
|
||||
import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
@ -15,6 +15,7 @@ export default Vue.extend({
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showTip: false,
|
||||
total: 0,
|
||||
publish_type: null,
|
||||
sendProductVisible: false,
|
||||
@ -143,14 +144,29 @@ export default Vue.extend({
|
||||
|
||||
},
|
||||
methods: {
|
||||
goInfo(){
|
||||
this.showTip = false
|
||||
this.$router.push('/customer/approve')
|
||||
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.current_page = val
|
||||
this.init_product_list()
|
||||
},
|
||||
sendInfo(type) {
|
||||
if (this.loginState) {
|
||||
reqEnterpriseAuditInfoSearch({
|
||||
url_link: window.location.href,
|
||||
}).then(res => {
|
||||
if (res.data.length !== 0||!sessionStorage.getItem('juese').includes('客户')) {
|
||||
this.publish_type = type
|
||||
this.sendProductVisible = true
|
||||
} else {
|
||||
this.showTip = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
@ -251,6 +267,13 @@ export default Vue.extend({
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary" @click="goInfo">信息完善</el-button></span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -36,18 +36,75 @@
|
||||
<el-drawer title="菜单管理" :visible.sync="drawer" :direction="direction">
|
||||
|
||||
<div style="margin: 20px;"></div>
|
||||
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
<el-form style="margin: 10px;" :label-position="labelPosition" label-width="100px" :model="formLabelAlign" :rules="formRules" ref="menuForm">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formLabelAlign.name" placeholder="请输入菜单名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!formLabelAlign.parentid" label="菜单图标" prop="icon">
|
||||
<div class="icon-upload-container">
|
||||
<!-- 图片预览区域 -->
|
||||
<div v-if="formLabelAlign.icon" class="icon-preview">
|
||||
<div class="preview-wrapper">
|
||||
<!-- SVG图片显示 -->
|
||||
<img v-if="isSvgImage(formLabelAlign.icon)"
|
||||
:src="formLabelAlign.icon"
|
||||
class="preview-image svg-image"
|
||||
alt="菜单图标">
|
||||
<!-- 普通图片显示 -->
|
||||
<img v-else
|
||||
:src="formLabelAlign.icon"
|
||||
class="preview-image"
|
||||
alt="菜单图标">
|
||||
<div class="preview-actions">
|
||||
<el-button type="text" size="mini" @click="removeIcon" icon="el-icon-delete" style="color: #F56C6C;">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传组件 -->
|
||||
<el-upload
|
||||
v-if="!formLabelAlign.icon"
|
||||
class="icon-uploader"
|
||||
action="#"
|
||||
:http-request="handleIconUpload"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeIconUpload"
|
||||
accept=".svg,.png,.jpg"
|
||||
drag>
|
||||
<i class="el-icon-plus uploader-icon"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<!-- <div class="el-upload__tip" slot="tip">
|
||||
<i class="el-icon-info"></i>
|
||||
支持 SVG、PNG、JPG格式，文件大小不超过 5MB
|
||||
</div> -->
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单排序" style="margin-top: 10px!important;" prop="poriority">
|
||||
<el-input-number :controls="false" v-model="formLabelAlign.poriority" :step="1" :min="0" :max="100" placeholder="请输入排序值"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单来源" prop="source">
|
||||
<el-input v-model="formLabelAlign.source" placeholder="请输入菜单来源"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reqNcMatchMenu } from '@/api/ncmatch';
|
||||
import { reqNcMatchMenu,reqAddProductMenu } from '@/api/ncmatch';
|
||||
export default {
|
||||
name: 'menuMangement',
|
||||
data() {
|
||||
@ -58,10 +115,23 @@ export default {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
labelPosition: 'right',
|
||||
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
icon: '',
|
||||
iconFile: null, // 存储二进制文件对象
|
||||
url_link: '',
|
||||
parentid: '',
|
||||
poriority: '',
|
||||
source: '',
|
||||
},
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
|
||||
],
|
||||
poriority: [
|
||||
{ required: true, message: '请输入菜单排序', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -69,8 +139,155 @@ export default {
|
||||
this.getCategories();
|
||||
},
|
||||
methods: {
|
||||
// 处理图标上传
|
||||
handleIconUpload(options) {
|
||||
const file = options.file;
|
||||
console.log('上传文件:', file);
|
||||
|
||||
// 创建本地预览URL
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.formLabelAlign.icon = e.target.result;
|
||||
this.$message.success('图片上传成功！');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// 保存文件对象到表单数据中，用于后续提交
|
||||
this.formLabelAlign.iconFile = file;
|
||||
},
|
||||
|
||||
// 上传前验证
|
||||
beforeIconUpload(file) {
|
||||
// 检查文件类型
|
||||
const isValidType = this.isValidImageType(file.type);
|
||||
if (!isValidType) {
|
||||
this.$message.error('只支持 SVG、PNG、JPG格式的图片！');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件大小 (5MB)
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
this.$message.error('图片大小不能超过 5MB！');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// 验证图片类型
|
||||
isValidImageType(type) {
|
||||
const validTypes = [
|
||||
'image/svg+xml',
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/gif',
|
||||
'image/webp'
|
||||
];
|
||||
return validTypes.includes(type);
|
||||
},
|
||||
|
||||
// 判断是否为SVG图片
|
||||
isSvgImage(src) {
|
||||
return src && (src.includes('.svg') || src.startsWith('data:image/svg+xml'));
|
||||
},
|
||||
|
||||
// 删除图标
|
||||
removeIcon() {
|
||||
this.$confirm('确定要删除这个图标吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.formLabelAlign.icon = '';
|
||||
this.formLabelAlign.iconFile = null;
|
||||
this.$message.success('图标已删除');
|
||||
}).catch(() => {});
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
submitForm() {
|
||||
this.$refs.menuForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 创建FormData对象
|
||||
const formData = new FormData();
|
||||
|
||||
// 添加基本表单数据
|
||||
formData.append('name', this.formLabelAlign.name);
|
||||
formData.append('poriority', this.formLabelAlign.poriority);
|
||||
formData.append('source', this.formLabelAlign.source);
|
||||
formData.append('url_link', window.location.href);
|
||||
|
||||
// 只有当parentid为null时才传递图片
|
||||
if (!this.formLabelAlign.parentid || this.formLabelAlign.parentid === '' || this.formLabelAlign.parentid === '0') {
|
||||
if (this.formLabelAlign.iconFile) {
|
||||
formData.append('icon', this.formLabelAlign.iconFile);
|
||||
console.log('包含图片上传');
|
||||
} else if (this.formLabelAlign.icon) {
|
||||
// 如果有现有图片URL，也传递
|
||||
formData.append('iconUrl', this.formLabelAlign.icon);
|
||||
console.log('包含现有图片URL');
|
||||
}
|
||||
} else {
|
||||
console.log('跳过图片上传，parentid不为null');
|
||||
}
|
||||
|
||||
// 添加parentid
|
||||
if (this.formLabelAlign.parentid) {
|
||||
formData.append('parentid', this.formLabelAlign.parentid);
|
||||
}
|
||||
|
||||
// 打印FormData内容（调试用）
|
||||
for (let [key, value] of formData.entries()) {
|
||||
console.log(`${key}:`, value);
|
||||
}
|
||||
|
||||
// 这里调用API保存数据
|
||||
this.saveMenuData(formData);
|
||||
} else {
|
||||
this.$message.error('请检查表单信息！');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 保存菜单数据
|
||||
saveMenuData(formData) {
|
||||
// 这里添加实际的API调用
|
||||
// 例如：
|
||||
reqAddProductMenu(formData).then(res => {
|
||||
if (res.status) {
|
||||
this.$message.success('保存成功！');
|
||||
this.drawer = false;
|
||||
this.getCategories(); // 刷新数据
|
||||
}else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error('保存失败：' + error.message);
|
||||
});
|
||||
|
||||
// // 临时模拟成功
|
||||
// this.$message.success('保存成功！');
|
||||
// this.drawer = false;
|
||||
// console.log('FormData数据已准备就绪，可以发送到服务器');
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.$refs.menuForm.resetFields();
|
||||
this.formLabelAlign.icon = '';
|
||||
this.formLabelAlign.iconFile = null;
|
||||
},
|
||||
addNode(row, type) {
|
||||
this.drawer = true;
|
||||
this.resetForm();
|
||||
if (type === 'child') {
|
||||
this.formLabelAlign.parentid = row.id;
|
||||
} else if (type === 'sibling') {
|
||||
this.formLabelAlign.parentid = row.parentid;
|
||||
}
|
||||
console.log('新增节点:', row, '类型:', type);
|
||||
},
|
||||
getCategories() {
|
||||
@ -89,11 +306,20 @@ export default {
|
||||
},
|
||||
editNode(row) {
|
||||
this.drawer = true;
|
||||
this.formLabelAlign = { ...row };
|
||||
// 编辑时清除iconFile，避免重复上传
|
||||
this.formLabelAlign.iconFile = null;
|
||||
console.log('编辑节点:', row);
|
||||
},
|
||||
deleteNode(row) {
|
||||
this.drawer = true;
|
||||
this.$confirm('确定要删除这个菜单吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
console.log('删除节点:', row);
|
||||
this.$message.success('删除成功！');
|
||||
}).catch(() => {});
|
||||
},
|
||||
buildTree(data, parentId = null) {
|
||||
if (!Array.isArray(data)) {
|
||||
@ -323,4 +549,172 @@ export default {
|
||||
.el-loading-mask {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.license-uploader {
|
||||
border: 2px dashed #d1d9e0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width:150px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.license-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #667eea;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.license-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标上传容器样式 */
|
||||
.icon-upload-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 图标预览样式 */
|
||||
.icon-preview {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.preview-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.preview-wrapper:hover {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.svg-image {
|
||||
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-actions .el-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* 上传组件样式 */
|
||||
.icon-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.icon-uploader .el-upload {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .icon-uploader .el-upload-dragger {
|
||||
width: 150px!important;
|
||||
height: 150px!important;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s;
|
||||
display: flex ;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.icon-uploader .el-upload-dragger:hover {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.el-upload__text em {
|
||||
color: #409eff;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 表单样式优化 */
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.preview-image {
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.icon-uploader .el-upload-dragger {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user