Skip to content

Y
yd-middle-front
Commit 710c08f3 by yuzhenWang
Options

产品上架发布测试

parent c2e25e1b
Showing with 6711 additions and 53 deletions
package.json
......@@ -29,6 +29,7 @@
"js-beautify": "1.14.11",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"lodash-es": "^4.17.21",
"nprogress": "0.2.0",
"pinia": "3.0.2",
"splitpanes": "^4.0.4",
......
src/api/common.js
......@@ -26,3 +26,11 @@ export function getVisitPermission(projectBizId, tenantBizId) {
method: 'get'
})
}
//获取保险公司列表
export function getAllCompanys(data) {
return request({
url: '/user/api/sysDept/company/page',
method: 'post',
data: data
})
}
src/api/product/index.js 0 → 100644
import request from '@/utils/request'
// 查询产品上架列表
export function getProductList(data) {
return request({
url: '/product/api/product/page',
method: 'post',
data: data
})
}
// 查询产品上架列表
export function getCategoryTreeList(data) {
return request({
url: '/base/api/category/page',
method: 'post',
data: data
})
}
// 新增产品
export function addProduct(data) {
return request({
url: '/product/api/productLaunch/add/category',
method: 'post',
data: data
})
}
// 获取产品详情
export function getProductDetail(productLaunchBizId) {
return request({
url: `/product/api/productLaunch/detail?productLaunchBizId=${productLaunchBizId}`,
method: 'get'
})
}
// 查询产品参数信息
export function productParams(data) {
return request({
url: '/base/api/relObjectField/query',
method: 'post',
data: data
})
}
// 查询产品参数右侧下拉框数据
export function ParamRightOptions(data) {
return request({
url: '/base/api/relFieldValue/field/list',
method: 'post',
data: data
})
}
// 查询产品规格信息列表
export function productSpecies(data) {
return request({
url: '/base/api/relObjectSpecies/query',
method: 'post',
data: data
})
}
// 查询选中的分类列表
export function querySelectCategory(data) {
return request({
url: '/base/api/relObjectCategory/query/selected',
method: 'post',
data: data
})
}
// 保存上架产品
export function saveProductLaunch(data) {
return request({
url: '/product/api/productLaunch/save',
method: 'post',
data: data
})
}
// 发佣管理更新规格信息
export function exportSpecies(data) {
return request({
url: '/product/api/announcementSpecies/import/species',
method: 'post',
data: data
})
}
// 发佣管理查询公告佣列表
export function sendSpecies(data) {
return request({
url: '/product/api/announcementSpecies/page',
method: 'post',
data: data
})
}
// 发佣管理查询公告佣金明细列表
export function sendCommissionRatio(data) {
return request({
url: '/product/api/announcementCommissionRatio/page',
method: 'post',
data: data
})
}
// 发佣管理批量保存公告佣金设置
export function saveBatchSendCommission(data) {
return request({
url: '/product/api/announcementCommissionRatio/batch/save',
method: 'post',
data: data
})
}
// 发佣管理单个删除公告佣金设置
export function deleteCommission(announcementCommissionRatioBizId) {
return request({
url: `/product/api/announcementCommissionRatio/del?announcementCommissionRatioBizId=${announcementCommissionRatioBizId}`,
method: 'delete'
})
}
// 获得来佣列表的数据
export function comeCommissionList(data) {
return request({
url: '/product/api/expectedSpecies/page',
method: 'post',
data: data
})
}
// 获得来佣列表的数据
export function comeExpectedSpecies(data) {
return request({
url: '/product/api/expectedSpecies/import/species',
method: 'post',
data: data
})
}
// 批量保存来佣佣金设置
export function comeBatchSave(data) {
return request({
url: '/product/api/expectedCommissionRatio/batch/save',
method: 'post',
data: data
})
}
// 批量保存来佣佣金设置
export function comeCommissionRatio(data) {
return request({
url: '/product/api/expectedCommissionRatio/page',
method: 'post',
data: data
})
}
// 来佣管理单个删除佣金设置
export function deleteComeCommission(expectedCommissionRatioBizId) {
return request({
url: `/product/api/expectedCommissionRatio/del?expectedCommissionRatioBizId=${expectedCommissionRatioBizId}`,
method: 'delete'
})
}
// 商品列表
export function goodsList(data) {
return request({
url: '/product/api/productLaunch/page',
method: 'post',
data: data
})
}
// 审核商品状态
export function productApproval(data) {
return request({
url: '/product/api/productLaunch/approval',
method: 'put',
data: data
})
}
// 修改商品上架下架状态
export function changeProductStatus(data) {
return request({
url: '/product/api/productLaunch/edit/status',
method: 'put',
data: data
})
}
// 修改来佣佣金设置状态
export function changeComeStatus(data) {
return request({
url: `/product/api/expectedCommissionRatio/edit/status?expectedCommissionRatioBizId=${data.expectedCommissionRatioBizId}&status=${data.status}`,
method: 'put'
})
}
// 修改发佣佣金设置状态
export function changeSendStatus(data) {
return request({
url: `/product/api/announcementCommissionRatio/edit/status?announcementCommissionRatioBizId=${data.announcementCommissionRatioBizId}&status=${data.status}`,
method: 'put'
})
}
src/components/CategoryTable/index.vue 0 → 100644
<template>
<div class="box">
<el-row>
<el-col :span="12">
<!-- v-model="queryParams.productName"
@blur="handleSelectChange"
:remote-method="searchProduct"
-->
<!-- <el-select
filterable
remote
default-first-option
:reserve-keyword="false"
placeholder="类目搜索"
clearable
remote-show-suffix
style="margin-bottom: 10px"
>
<el-option
v-for="item in productList"
:key="item.productBizId"
:label="item.productName"
:value="item.productBizId"
/>
</el-select> -->
</el-col>
<el-col :span="24" v-if="categoryName">
<div class="chooseName">
<span style="color: rgb(0 0 0 / 55%)">已选类目：</span>{{ categoryName }}
</div>
</el-col>
</el-row>
<div class="category-container">
<div class="tableHeader">
<div
class="headerItem"
:style="{ width: `${100 / categoryList.length}%` }"
v-for="item in categoryList"
:key="item.level"
>
{{ item.title }}
</div>
</div>
<div class="tableBody">
<div
class="bodyItem"
v-for="(item, index) in categoryList"
:key="item.level"
:style="{
width: `${100 / categoryList.length}%`,
borderRight: categoryList.length - 1 === index ? 'none' : '1px solid #ccc'
}"
>
<div
class="categoryItem"
v-for="(cItem, cIndex) in item.data"
:key="cItem.id"
@click="handleClickCategory(item, cItem, cIndex)"
:style="{
backgroundColor: cItem.isSelected ? 'rgb(64, 158, 255,0.1)' : null
}"
>
<span> {{ cItem.name }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { getCategoryTreeList } from '@/api/product/index'
import { computed } from 'vue'
import { ref } from 'vue'
const props = defineProps({
// 类目数据,
data: {
type: Array,
default: () => []
},
// 类型，是新增还是编辑,
type: {
type: String,
default: 'add'
}
})
const categoryList = ref([])
const level1Obj = ref([])
// 中文数字单位
const units = ['', '十', '百', '千']
const bigUnits = ['', '万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载']
// 中文数字字符
const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const categoryName = computed(() => {
let result = []
categoryList.value.forEach(item => {
item.data.forEach(c => {
if (c.isSelected) result.push(c.name)
})
})
if (result.length > 0) {
return result.join(' > ')
} else {
return ''
}
})
const emit = defineEmits(['handleClickCategory'])
const handleClickCategory = (fItem, cItem, cIndex) => {
categoryList.value.forEach(item => {
item.data.forEach(c => {
if (c.categoryBizId == cItem.categoryBizId && fItem.level == item.level) {
c.isSelected = true
} else if (fItem.level == item.level) {
c.isSelected = false
}
})
})
getCategoryData(cItem)
}
function getCategoryData(obj) {
// let name = query ? query.trim() : ''
let data = {
// name: name,
type: 'PRODUCT',
pid: obj.categoryBizId ? obj.categoryBizId : '0',
pageSize: 9999,
pageNo: 1
}
getCategoryTreeList(data).then(response => {
if (response.code === 200) {
let res = response.data.records
res.forEach(item => {
item.isSelected = false
})
if (!obj.level) {
categoryList.value = [
{ level: 1, data: res, title: `${convertSection(1)}级类目` },
{ level: 2, data: [], title: `${convertSection(2)}级类目` },
{ level: 3, data: [], title: `${convertSection(3)}级类目` },
{ level: 4, data: [], title: `${convertSection(4)}级类目` }
]
} else {
if (res.length > 0) {
// 先删除当前层级以后的数据
if (categoryList.value.length > 4 && obj.level > 4) {
categoryList.value.splice(obj.level, categoryList.value.length - obj.level)
}
let cIndex = categoryList.value.findIndex(item => item.level == res[0].level)
if (cIndex > -1) {
// 固定显示4个类目，如果超过4个类目，则删除多余的类目
if (categoryList.value.length > 4 && obj.level < 4) {
categoryList.value.splice(4, categoryList.value.length - 4)
}
categoryList.value[cIndex].data = res
for (let i = cIndex + 1; i < categoryList.value.length; i++) {
categoryList.value[i].data = []
}
} else {
categoryList.value.push({
level: res[0].level,
data: res,
title: `${convertSection(res[0].level)}级类目`
})
}
}
}
console.log('categoryList', categoryList.value)
} else {
categoryList.value = []
proxy.$modal.msgError(response.msg)
}
})
}
// 转换4位数字节
const convertSection = sectionNum => {
const len = sectionNum
let result = ''
let hasZero = false
for (let i = 0; i < len; i++) {
const digit = sectionNum
if (digit === 0) {
hasZero = true
} else {
if (hasZero) {
result += '零'
hasZero = false
}
result += digits[digit]
return result
}
}
// 处理全零的情况
if (result === '') {
return '零'
}
return result
}
if (props.type == 'add') {
getCategoryData({ categoryBizId: '0' })
} else if (props.type == 'edit') {
console.log('props.data', props.data);
// 先回显已经选择好的类目
categoryList.value = JSON.parse(JSON.stringify(props.data))
categoryList.value.forEach(item => {
item.title = `${convertSection(item.level)}级类目`
// 还应该把data里的数据都加上 isSelected: true
})
}
// 暴露给父组件
defineExpose({
categoryList,
categoryName
})
</script>
<style lang="scss" scoped>
.box {
width: 100%;
box-sizing: border-box;
}
.category-container {
width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
height: 100%;
}
.tableHeader {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
color: rgb(0 0 0 / 55%);
font-size: 16px;
}
.headerItem {
padding: 10px 20px;
text-align: left;
}
.tableBody {
display: flex;
justify-content: space-between;
color: rgb(0 0 0 / 55%);
font-size: 14px;
height: calc(100% - 40px);
}
.bodyItem {
overflow-y: auto;
padding: 10px 10px;
}
.categoryItem {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.chooseName {
padding: 10px 20px;
background-color: #f7f7f7;
border-radius: 5px;
font-size: 14px;
margin-bottom: 10px;
}
</style>
src/components/ImageUpload/index.vue
<template>
<div class="component-upload-image">
<div class="component-upload-media">
<el-upload
multiple
:disabled="disabled"
:action="uploadImgUrl"
list-type="picture-card"
:action="uploadUrl"
:list-type="listType"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:data="data"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
ref="mediaUpload"
:before-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:on-preview="handlePreview"
:class="{ hide: fileList.length >= limit }"
>
<el-icon class="avatar-uploader-icon"><plus /></el-icon>
......@@ -24,8 +24,14 @@
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip && !disabled">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
<template v-if="imageSize || videoSize">
<span v-if="imageSize"
>图片大小不超过 <b style="color: #f56c6c">{{ imageSize }}MB</b></span
>
<span v-if="imageSize && videoSize">，</span>
<span v-if="videoSize"
>视频大小不超过 <b style="color: #f56c6c">{{ videoSize }}MB</b></span
>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
......@@ -33,8 +39,21 @@
的文件
</div>
<el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
<!-- 预览对话框 -->
<el-dialog v-model="dialogVisible" :title="previewTitle" width="800px" append-to-body>
<img
v-if="previewType === 'image'"
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
<video
v-else-if="previewType === 'video'"
:src="dialogImageUrl"
controls
style="display: block; max-width: 100%; margin: 0 auto"
>
您的浏览器不支持视频播放
</video>
</el-dialog>
</div>
</template>
......@@ -43,6 +62,7 @@
import { getToken } from '@/utils/auth'
import { isExternal } from '@/utils/validate'
import Sortable from 'sortablejs'
import videoThumbnail from '@/assets/images/video-thumbnail.png'
const props = defineProps({
modelValue: [String, Object, Array],
......@@ -51,6 +71,11 @@ const props = defineProps({
type: String,
default: '/common/upload'
},
// 来源
source: {
type: String,
default: ''
},
// 上传携带的参数
data: {
type: Object
......@@ -60,12 +85,17 @@ const props = defineProps({
type: Number,
default: 5
},
// 大小限制(MB)
fileSize: {
// 图片大小限制(MB)
imageSize: {
type: Number,
default: 5
default: 10
},
// 视频大小限制(MB)
videoSize: {
type: Number,
default: 500
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
// 文件类型, 例如['png', 'jpg', 'jpeg', 'mp4']
fileType: {
type: Array,
default: () => ['png', 'jpg', 'jpeg']
......@@ -75,7 +105,7 @@ const props = defineProps({
type: Boolean,
default: true
},
// 禁用组件（仅查看图片）
// 禁用组件（仅查看文件）
disabled: {
type: Boolean,
default: false
......@@ -84,20 +114,75 @@ const props = defineProps({
drag: {
type: Boolean,
default: true
},
// 列表类型，根据文件类型自动调整
listType: {
type: String,
default: 'picture-card'
}
})
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const emit = defineEmits(['file-change', 'update:modelValue'])
const number = ref(0)
const uploadList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const previewType = ref('image') // 'image' 或 'video'
const previewTitle = ref('预览')
const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传的图片服务器地址
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action)
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const fileList = ref([])
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
const showTip = computed(
() => props.isShowTip && (props.fileType || props.imageSize || props.videoSize)
)
// 获取文件扩展名
const getFileExtension = fileName => {
if (!fileName) return ''
const lastDotIndex = fileName.lastIndexOf('.')
return lastDotIndex > -1 ? fileName.slice(lastDotIndex + 1).toLowerCase() : ''
}
// 判断文件类型 - 更安全的方式
const isImage = file => {
if (!file) return false
// 优先检查文件类型
if (file.type && typeof file.type === 'string' && file.type.startsWith('image/')) {
return true
}
// 通过文件扩展名判断
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
const fileExtension = getFileExtension(file.name || file.url || '')
return imageExtensions.includes(fileExtension)
}
const isVideo = file => {
if (!file) return false
// 优先检查文件类型
if (file.type && typeof file.type === 'string' && file.type.startsWith('video/')) {
return true
}
// 通过文件扩展名判断
const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'webm']
const fileExtension = getFileExtension(file.name || file.url || '')
return videoExtensions.includes(fileExtension)
}
// 获取文件对应的最大大小
const getFileSizeLimit = file => {
if (isImage(file)) {
return props.imageSize
} else if (isVideo(file)) {
return props.videoSize
}
return Math.max(props.imageSize, props.videoSize) // 默认取较大的值
}
watch(
() => props.modelValue,
......@@ -126,37 +211,43 @@ watch(
// 上传前loading加载
function handleBeforeUpload(file) {
let isImg = false
let isFileTypeValid = false
if (props.fileType.length) {
let fileExtension = ''
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
}
isImg = props.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true
const fileExtension = getFileExtension(file.name)
isFileTypeValid = props.fileType.some(type => {
if (file.type && file.type.indexOf(type) > -1) return true
if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false
})
} else {
isImg = file.type.indexOf('image') > -1
// 如果没有指定文件类型，默认允许图片和视频
isFileTypeValid =
file.type && (file.type.indexOf('image') > -1 || file.type.indexOf('video') > -1)
}
if (!isImg) {
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join('/')}图片格式文件!`)
if (!isFileTypeValid) {
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join('/')}格式文件!`)
return false
}
if (file.name.includes(',')) {
proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
return false
}
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) {
proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
return false
}
// 根据文件类型获取对应的大小限制
const maxSize = getFileSizeLimit(file)
const isLt = file.size / 1024 / 1024 < maxSize
if (!isLt) {
const fileType = isImage(file) ? '图片' : '视频'
proxy.$modal.msgError(`上传${fileType}大小不能超过 ${maxSize} MB!`)
return false
}
proxy.$modal.loading('正在上传图片，请稍候...')
proxy.$modal.loading('正在上传文件，请稍候...')
number.value++
return true
}
// 文件个数超出
......@@ -165,27 +256,66 @@ function handleExceed() {
}
// 上传成功回调
// function handleUploadSuccess(res, file) {
// if (res.code === 200) {
// console.log('文件上传成功', res)
// // 添加上传文件的类型信息
// const fileItem = {
// name: res.data.originalName,
// url: res.data.url,
// raw: file // 保存原始文件对象以便后续使用
// }
// uploadList.value.push(fileItem)
// uploadedSuccessfully()
// } else {
// number.value--
// proxy.$modal.closeLoading()
// proxy.$modal.msgError(res.msg)
// proxy.$refs.mediaUpload.handleRemove(file)
// uploadedSuccessfully()
// }
// }
// 上传成功回调
function handleUploadSuccess(res, file) {
if (res.code === 200) {
console.log('图片上传', res)
console.log('文件上传成功', res)
// 添加上传文件的类型信息
const fileItem = {
name: res.data.originalName,
url: res.data.url,
raw: file, // 保存原始文件对象以便后续使用
isVideo: isVideo(file) // 标记是否为视频
}
// 为视频文件设置一个默认的封面图标
if (isVideo(file)) {
fileItem.thumbnail = videoThumbnail // 准备一个视频封面图标
}
uploadList.value.push({ name: res.data.originalName, url: res.data.url })
uploadList.value.push(fileItem)
uploadedSuccessfully()
} else {
number.value--
proxy.$modal.closeLoading()
proxy.$modal.msgError(res.msg)
proxy.$refs.imageUpload.handleRemove(file)
proxy.$refs.mediaUpload.handleRemove(file)
uploadedSuccessfully()
}
}
// 删除图片
// 删除文件
function handleDelete(file) {
const findex = fileList.value.map(f => f.name).indexOf(file.name)
if (findex > -1 && uploadList.value.length === number.value) {
fileList.value.splice(findex, 1)
emit('update:modelValue', listToString(fileList.value))
const newValue = listToString(fileList.value)
emit('update:modelValue', newValue)
emit('file-change', {
count: fileList.value.length,
fileList: fileList.value,
value: newValue,
type: 'delete',
source: props.source
})
return false
}
}
......@@ -196,20 +326,68 @@ function uploadedSuccessfully() {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
uploadList.value = []
number.value = 0
emit('update:modelValue', listToString(fileList.value))
const newValue = listToString(fileList.value)
emit('update:modelValue', newValue)
proxy.$modal.closeLoading()
emit('file-change', {
count: fileList.value.length,
fileList: fileList.value,
value: newValue,
type: 'success',
source: props.source
})
}
}
// 上传失败
function handleUploadError() {
proxy.$modal.msgError('上传图片失败')
proxy.$modal.msgError('上传文件失败')
proxy.$modal.closeLoading()
}
// 预览
function handlePictureCardPreview(file) {
// 预览 - 修复错误处理
function handlePreview(file) {
console.log('预览文件:', file) // 调试用
if (!file || !file.url) {
proxy.$modal.msgError('文件信息不完整，无法预览')
return
}
dialogImageUrl.value = file.url
// 安全地判断文件类型
try {
if (isImage(file)) {
previewType.value = 'image'
previewTitle.value = '图片预览'
} else if (isVideo(file)) {
previewType.value = 'video'
previewTitle.value = '视频预览'
} else {
// 如果无法确定类型，根据URL扩展名再次判断
const ext = getFileExtension(file.url)
const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
const videoExts = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'webm']
if (imageExts.includes(ext)) {
previewType.value = 'image'
previewTitle.value = '图片预览'
} else if (videoExts.includes(ext)) {
previewType.value = 'video'
previewTitle.value = '视频预览'
} else {
previewType.value = 'image'
previewTitle.value = '文件预览'
}
}
} catch (error) {
console.error('预览类型判断错误:', error)
// 出错时默认按图片处理
previewType.value = 'image'
previewTitle.value = '文件预览'
}
dialogVisible.value = true
}
......@@ -229,14 +407,17 @@ function listToString(list, separator) {
onMounted(() => {
if (props.drag && !props.disabled) {
nextTick(() => {
const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
Sortable.create(element, {
onEnd: evt => {
const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
fileList.value.splice(evt.newIndex, 0, movedItem)
emit('update:modelValue', listToString(fileList.value))
}
})
const element = proxy.$refs.mediaUpload?.$el?.querySelector('.el-upload-list')
if (element) {
Sortable.create(element, {
onEnd: evt => {
const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
fileList.value.splice(evt.newIndex, 0, movedItem)
const newValue = listToString(fileList.value)
emit('update:modelValue', newValue)
}
})
}
})
}
})
......@@ -251,4 +432,45 @@ onMounted(() => {
:deep(.el-upload.el-upload--picture-card.is-disabled) {
display: none !important;
}
.component-upload-media {
:deep(.el-upload-list__item) {
transition: none !important;
// 为视频文件添加特殊样式
&.is-video {
.el-upload-list__item-thumbnail {
position: relative;
&::before {
content: '▶';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
z-index: 1;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 0;
}
}
}
}
// 视频缩略图样式
:deep(.el-upload-list__item-thumbnail) {
object-fit: cover;
}
}
</style>
src/utils/1.js 0 → 100644
{
"apiAttributeSettingDtoList": [
{
"attributeSettingBizId": "attribute_setting_WlkMorcKwiNbm0Em",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_UmvLSgtBj3j02JHI",
"fieldValueBizId": "field_value_PBa8PgSYxaYUeIRi",
"name": "是否区分吸烟",
"value": "不区分",
"isCustomize": "0",
"remark": null,
"textBoxType": "select"
},
{
"attributeSettingBizId": "attribute_setting_pP32oWpjgrlF6xan",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_HEyLqvSBsDXvIWAd",
"fieldValueBizId": "",
"name": "经纪人",
"value": "",
"isCustomize": "0",
"remark": null,
"textBoxType": "text"
},
{
"attributeSettingBizId": "attribute_setting_xEAA2nPCOcAlBcpq",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_IgjqsyU9oI5FCWFF",
"fieldValueBizId": "field_value_MARgbetAoKpL1jNY",
"name": "性别",
"value": "男",
"isCustomize": "0",
"remark": null,
"textBoxType": "select"
},
{
"attributeSettingBizId": "attribute_setting_EbJWfWYiVgno9MNy",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_9CmvVH4Zltcjy0Ld",
"fieldValueBizId": "field_value_aPkDpPxZtLEBoqup",
"name": "证件类型",
"value": "身份证",
"isCustomize": "0",
"remark": null,
"textBoxType": "select"
},
{
"attributeSettingBizId": "attribute_setting_TcUdpmiPQUhYL8A3",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_AEUevz9S6o6jmOtp",
"fieldValueBizId": "",
"name": "保单日期",
"value": "",
"isCustomize": "0",
"remark": null,
"textBoxType": "date"
},
{
"attributeSettingBizId": "attribute_setting_jCOxZccDQLJTESKE",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "field_YX8KbhC0NPJfBoRR",
"fieldValueBizId": "",
"name": "颜色",
"value": "field_value_9GeaIYompsO6kizv;field_value_OMwQQKAl7PjLjjuL;field_value_mTCXOVFgWs9WlzRX",
"isCustomize": "0",
"remark": null,
"textBoxType": "multipleSelect"
},
{
"attributeSettingBizId": "attribute_setting_DZ5SjMXlOSXBXwtE",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "custom1765265051120",
"fieldValueBizId": "",
"name": "222",
"value": "333",
"isCustomize": "1",
"remark": null,
"textBoxType": null,
"customValue": "自定义参数"
},
{
"attributeSettingBizId": "attribute_setting_pjtvm7lZtFutvgx9",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "custom1765265062476",
"fieldValueBizId": "",
"name": "555",
"value": "666",
"isCustomize": "1",
"remark": null,
"textBoxType": null,
"customValue": "自定义参数"
},
{
"attributeSettingBizId": "attribute_setting_04iIGcmvdVBE04rZ",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"fieldBizId": "custom1765266273226",
"fieldValueBizId": "",
"name": "",
"value": "",
"isCustomize": "1",
"remark": null,
"textBoxType": null,
"customValue": "自定义参数"
}
],
"apiSpeciesSettingDtoList": [
{
"isIllustration": "1",
"speciesName": "species_type_IUVxfmyu8RUTHsfq",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq",
"typeName": "保障计划",
"speciesId": 1765273896521,
"isAdd": false,
"isCustomize": "0",
"value": "保障1",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
},
{
"speciesId": 1765273899121,
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq",
"isAdd": false,
"value": "保障2",
"typeName": "保障计划",
"isCustomize": "0",
"isIllustration": "1",
"illustrationUrl": "",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
},
{
"isIllustration": "0",
"speciesName": "species_type_TcQNeGLE4rcBcjsj",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj",
"typeName": "供款年期",
"speciesId": 1765273906553,
"isAdd": false,
"isCustomize": "0",
"value": "供款1",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
},
{
"speciesId": 1765273908642,
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj",
"isAdd": false,
"value": "供款2",
"typeName": "供款年期",
"isCustomize": "0",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
},
{
"typeName": "颜色",
"value": "红的",
"isIllustration": "0",
"isCustomize": "1",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
},
{
"typeName": "颜色",
"value": "黑的",
"isCustomize": "1",
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
}
],
"apiSpeciesPriceDtoList": [
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 11,
"inventory": 21,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障1",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款1",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "红的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障1",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款1",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "黑的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障1",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款2",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "红的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障1",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款2",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "黑的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障2",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款1",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "红的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障2",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款1",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "黑的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障2",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款2",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "红的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
},
{
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"price": 0,
"inventory": 0,
"illustrationUrl": "",
"status": "1",
"apiSpeciesSettingDtoList": [
{
"value": "保障2",
"typeName": "保障计划",
"isIllustration": "1",
"speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
},
{
"value": "供款2",
"typeName": "供款年期",
"isIllustration": "0",
"illustrationUrl": "",
"speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
},
{
"value": "黑的",
"typeName": "颜色",
"isIllustration": "0",
"illustrationUrl": ""
}
]
}
],
"apiProductLaunchDto": {
"productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
"productBizId": "product_1001",
"title": "万通保险产品",
"shortTitle": "第一个短标题",
"mainUrlsList": [
"https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/cfafe35897824f28949af08a4c455b10.png",
"https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/6e0de16e242049189605e493c1bcee14.png",
"https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/7215aa9e91b74170a7e5ef918cade0b7.png",
"https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/12/09/0b7640e688c64c1f83173da38c7dfec6.png"
],
"detailUrlsList": [
"https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/12/09/503f71294ffc43f08dd868e5c9e8fffd.png"
],
"detailDescription": "产品的详细描述",
"status": "DSH",
"isTiming": "1",
"releaseDate": "2025-12-10 02:00:00",
"isHiddenPrice": "1",
"isPurchaseLimit": "1",
"limitDateUnit": "YEARLY",
"limitQuantity": 9,
"projectBizIdList": [
"project_IbjfmMTYvNEBuh2S",
"project_p6OxrioQjvEJD3BZ",
"project_prvciwgfQSRfsbRH",
"project_UEdpnAgfnlmUbVuy"
],
"apiProjectDtoList": [
{
"projectBizId": "project_IbjfmMTYvNEBuh2S",
"projectName": "CSF-小程序",
"projectCode": "PROJECT1019"
},
{
"projectBizId": "project_p6OxrioQjvEJD3BZ",
"projectName": "SW001",
"projectCode": "PROJECT1016"
},
{
"projectBizId": "project_prvciwgfQSRfsbRH",
"projectName": "邮件群发系统",
"projectCode": "PROJECT1018"
},
{
"projectBizId": "project_UEdpnAgfnlmUbVuy",
"projectName": "制作薯片",
"projectCode": "PROJECT1017"
}
],
"categoryBizIdList": [
"category_49nw0brogpbZfwIi",
"category_G0oLWjCx8G788o3Y",
"category_LYKKjcf7O3XG5nz8"
]
}
}
src/utils/2.js 0 → 100644
speciesJson
:
"[{\"isIllustration\":\"1\",\"speciesTypeBizId\":\"species_type_IUVxfmyu8RUTHsfq\",\"typeCode\":\"PROTECTION_PLAN\",\"typeName\":\"保障计划\",\"value\":\"70岁\"},{\"illustrationUrl\":\"\",\"isIllustration\":\"0\",\"speciesTypeBizId\":\"species_type_TcQNeGLE4rcBcjsj\",\"typeCode\":\"PAYMENT_TERM\",\"typeName\":\"供款年期\",\"value\":\"3\"},{\"illustrationUrl\":\"\",\"isIllustration\":\"0\",\"speciesTypeBizId\":\"species_type_uvdLgZQHUZQMfv1k\",\"typeCode\":\"SPECIES_TYPE_CODE1616036003\",\"typeName\":\"尺码\",\"value\":\"S\"}]"
status
:
1
src/utils/request.js
......@@ -122,6 +122,9 @@ service.interceptors.response.use(
} else if (code === 601) {
ElMessage({ message: msg, type: 'warning' })
return Promise.reject(new Error(msg))
} else if (code == 1004) {
// 后端自定义的错误码便于前端显示错误信息，非系统性
return Promise.resolve(res.data)
} else if (code !== 200) {
ElNotification.error({ title: msg })
return Promise.reject('error')
......
src/views/merchandise/addProduce.vue 0 → 100644
<template>
<div class="app-container">
<div class="form-content">
<div class="formHeader">基础信息</div>
<el-form :model="queryParams" ref="queryRef" label-position="top">
<el-row>
<el-col :span="12">
<div class="commonHeader">产品标题</div>
<el-select
v-model="queryParams.productName"
filterable
remote
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择产品名称"
@blur="handleSelectChange"
:remote-method="searchProduct"
clearable
remote-show-suffix
>
<el-option
v-for="item in productList"
:key="item.productBizId"
:label="item.productName"
:value="item.productBizId"
/>
</el-select>
</el-col>
<el-col :span="24">
<div class="nameTip">
<span style="color: #ccc">标题需包含产品名称。</span>
<el-tooltip placement="bottom" effect="light" trigger="click">
<template #content>
<div style="width: 300px">
<div v-for="item in nameRequireList" :key="item.key" style="margin-bottom: 8px">
<span style="font-size: 13px">•</span>
<span style="margin-left: 5px">{{ item.label }}</span>
</div>
</div>
</template>
<span style="color: #576b95; cursor: pointer">查看命名要求</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="24" v-if="showNameTip">
<div class="tipCon">
<el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
<span>标题信息过少，请至少输入5个有效字数（含中文、英文、数字）</span>
</div>
</el-col>
<el-col :span="24" style="margin: 20px 0">
<div class="commonHeader">
图片和视频
<span style="color: rgb(111, 111, 111); font-size: 15px"
>({{ imageInfo.count }}/9)</span
>
</div>
<image-upload
v-model="queryParams.picture"
:action="'/oss/api/oss/upload'"
:limit="9"
:image-size="10"
:video-size="500"
:file-type="['png', 'jpg', 'jpeg', 'mp4']"
:is-show-tip="false"
@change="handleImageChange"
@file-change="handleFileChange"
/>
</el-col>
<el-col :span="24">
<div v-for="(item, index) in imageRequireList" :key="item.key" class="imgTip">
<span>{{ index + 1 }}.</span>
<span>{{ item.label }}</span>
<el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
<template #content>
<div style="width: 300px">
<div v-for="item in imageTipList" :key="item.key" style="margin-bottom: 8px">
<span style="font-size: 13px">•</span>
<span style="margin-left: 5px">{{ item.label }}</span>
</div>
</div>
</template>
<span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="24" v-if="imageInfo.count > 0 && imageInfo.count < 3">
<div class="tipCon">
<el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
<span>请上传至少3张产品主图</span>
</div>
</el-col>
<el-col :span="24" style="margin: 20px 0">
<div class="commonHeader">产品类目</div>
<!-- <div class="classTip" v-if="!queryParams.productName || imageInfo.count < 3">
填写标题及上传主图后，即可选择类目
</div> -->
<CategoryTable style="height: 300px" type="add" ref="categoryData" />
</el-col>
</el-row>
</el-form>
</div>
<div class="bottomBtn">
<el-button type="primary" size="large" @click="submitProduct">下一步</el-button>
</div>
</div>
</template>
<script setup name="InsuranceProduct">
import { getProductList, addProduct } from '@/api/product/index'
import useUserStore from '@/store/modules/user'
import { computed, ref } from 'vue'
import ImageUpload from '@/components/ImageUpload/index.vue' //图片上传组件
import CategoryTable from '@/components/CategoryTable/index.vue' //图片上传组件
const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
// const { bx_product_type, sys_scope, bx_product_status, bx_smoking_allowed, bx_currency_type } =
// proxy.useDict(
// 'bx_product_type',
// 'sys_scope',
// 'bx_product_status',
// 'bx_smoking_allowed',
// 'bx_currency_type'
// )
const showNameTip = ref(false)
const imageInfo = ref({ count: 0, fileList: [] })
const productList = ref([])
const categoryData = ref(null)
const nameRequireList = ref([
{
label: '标题中必须包含产品名称',
key: '1'
},
{
label: '标题禁止出现连续重复的关键词',
key: '2'
},
{
label: '标题字数不少于5个字，包括中文、 英文、数字',
key: '3'
},
{
label: '标题为非中文时需要附带与产品对应一致的中文翻译',
key: '4'
},
{
label: '标题中需避免填写错别字',
key: '5'
}
])
const imageRequireList = ref([
{
label: '商品主图须符合平台要求，否则将无法通过审核。',
key: '1',
showTip: true,
tipContent: '查看主图要求'
},
{
label: '最少上传3个素材，最多上传9个素材，其中最多上传1个视频(mp4格式)，拖拽图片可排序。',
key: '2'
},
{
label: '视频时长不超过180秒，视频大小不超过500M；单张图片需限制在10M以内。',
key: '3'
}
])
const imageTipList = ref([
{
label: '全类目的产品主图要求提供不少于3张产品相关图片',
key: '1'
},
{
label: '主图第一张需为产品实物图',
key: '2'
},
{
label: '产品主图中不可包含相同的图片',
key: '3'
},
{
label: '产品图片不允许为手机截图、空白图',
key: '4'
},
{
label: '图片需清晰，不允许打码、遮挡/ps',
key: '5'
}
])
const data = reactive({
form: {},
queryParams: {},
rules: {
productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
scope: [{ required: true, message: '作用域不能为空', trigger: 'blur' }],
productType: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
currency: [{ required: true, message: '货币不能为空', trigger: 'blur' }],
premiumRate: [
{ required: true, message: '基础费率不能为空', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === '' || value === null) {
callback(new Error('基础费率不能为空'))
return
}
const numValue = Number(value)
if (isNaN(numValue)) {
callback(new Error('请输入有效的数字'))
} else if (numValue < 0) {
callback(new Error('基础费率不能小于0'))
} else if (numValue > 100) {
callback(new Error('基础费率不能大于100'))
} else {
callback()
}
},
trigger: 'blur'
}
],
smokingAllowed: [{ required: true, message: '是否区分吸烟不能为空', trigger: 'blur' }],
productStatus: [{ required: true, message: '产品状态不能为空', trigger: 'blur' }],
startAge: [
{ required: true, message: '起保年龄不能为空', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!Number.isInteger(Number(value)) || value <= 0) {
callback(new Error('请输入正整数'))
} else {
callback()
}
},
trigger: 'blur'
}
],
endAge: [
{ required: true, message: '终保年龄不能为空', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!Number.isInteger(Number(value)) || value <= 0) {
callback(new Error('请输入正整数'))
} else if (Number(value) <= Number(form.value.startAge)) {
callback(new Error('终保必须大于起保'))
} else {
callback()
}
},
trigger: 'blur'
}
],
tenantBizId: [{ required: true, message: '所属租户不能为空', trigger: 'blur' }],
ssDeptBizIdList: [
{
required: true,
message: '所属保险公司不能为空',
trigger: 'change',
validator: (rule, value, callback) => {
if (!value || value.length === 0) {
callback(new Error('请至少选择一个所属保险公司'))
} else {
callback()
}
}
}
],
picture: [
{
required: true,
validator: (rule, value, callback) => {
if (!value || value.trim() === '') {
callback(new Error('请上传产品图片'))
} else {
callback()
}
},
trigger: 'change'
}
]
}
})
const { queryParams, form, rules } = toRefs(data)
function handleImageChange(value) {
console.log('图片', value)
}
const handleFileChange = info => {
imageInfo.value = JSON.parse(JSON.stringify(info))
console.log('图片信息', imageInfo.value)
}
const handleSelectChange = () => {
if (queryParams.value.productName && queryParams.value.productName.length < 5) {
showNameTip.value = true
} else if (!queryParams.value.productName) {
showNameTip.value = true
} else {
showNameTip.value = false
}
}
/** 查询产品列表 */
function searchProduct(query) {
let productName = query ? query.trim() : ''
let data = {
productName: productName,
pageSize: 10,
pageNo: 1
}
getProductList(data).then(response => {
if (response.code === 200) {
productList.value = response.data.records
} else {
productList.value = []
proxy.$modal.msgError(response.msg)
}
})
}
/** 新增产品 */
function submitProduct() {
let productBizId = ''
let categoryBizIdList = []
let mainUrlsList = []
let productName = queryParams.value.productName
if (!productName) {
proxy.$modal.msgError('产品名称不能为空或长度小于5')
showNameTip.value = true
return
} else {
productList.value.forEach(item => {
if (item.productBizId === productName) {
productBizId = item.productBizId
productName = item.productName
}
})
}
if (imageInfo.value.fileList && imageInfo.value.fileList.length > 0) {
imageInfo.value.fileList.forEach(item => {
mainUrlsList.push(item.url)
})
} else {
proxy.$modal.msgError('请上传产品图片')
return
}
if (categoryData.value) {
categoryData.value.categoryList.forEach(item => {
item.data.forEach(item2 => {
if (item2.isSelected) {
categoryBizIdList.push(item2.categoryBizId)
}
})
})
}
if (categoryBizIdList.length === 0) {
proxy.$modal.msgError('请选择产品类目')
return
}
let data = {
productBizId: productBizId,
productName: productName,
mainUrlsList: mainUrlsList,
categoryBizIdList: categoryBizIdList
}
// return
addProduct(data).then(response => {
if (response.code === 200) {
router.push({
path: '/merchandise/putOnSale',
query: {
productBizId: response.data.productBizId,
productLaunchBizId: response.data.productLaunchBizId
}
})
} else {
proxy.$modal.msgError(response.msg)
}
})
}
searchProduct()
</script>
<style lang="scss" scoped>
.app-container {
width: 100%;
box-sizing: border-box;
/* background-color: rgb(247 247 247) !important; */
/* padding: 0 !important; */
/* height: 500px !important;
overflow: hidden;
overflow-y: scroll; */
}
.form-content {
width: 100%;
box-sizing: border-box;
height: 72.5vh;
overflow: hidden;
overflow-y: scroll;
/* padding: 20px; */
/* background-color: #fff; */
}
.formHeader {
margin-bottom: 20px;
font-size: 22px;
font-weight: 600;
}
.nameTip {
font-size: 13px;
margin-top: 10px;
}
.tipCon {
/* width: 450px; */
width: fit-content;
/* 为了更好的兼容性，可以加上带前缀的版本 */
width: -moz-fit-content;
width: -webkit-fit-content;
margin: 5px 0;
padding: 10px 10px;
border-radius: 5px;
background-color: rgb(247 247 247);
font-size: 14px;
display: flex;
align-items: center;
span {
color: rgb(111 111 111);
}
}
.commonHeader {
font-size: 16px;
margin-bottom: 15px;
}
.imgTip {
color: #ccc;
font-size: 14px;
margin-bottom: 10px;
}
.classTip {
color: #ccc;
font-size: 14px;
}
.bottomBtn {
border-top: 1px solid rgb(247 247 247);
width: 100%;
padding: 30px 20px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #fff;
}
</style>
src/views/merchandise/components/comeInfo.vue 0 → 100644
<template>
<div class="app-container">
<el-row style="margin-bottom: 20px">
<el-col style="display: flex; justify-content: space-between"
><div>
<el-button type="primary" plain icon="Refresh" @click="updateSpecies">更新规格</el-button>
</div>
</el-col>
</el-row>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
row-key="rowKey"
>
<!-- 动态生成所有列 -->
<template v-for="column in tableColumns" :key="column.prop">
<el-table-column :prop="column.prop" :label="column.label" />
</template>
<!-- 固定操作列 -->
<el-table-column
label="操作"
:width="tableData.length > 0 ? 180 : 0"
align="center"
fixed="right"
>
<template #default="scope">
<el-button type="primary" size="small" @click="handleCommissionSetting(scope.row)">
佣金设置
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getSpeciesList"
style="margin-top: 10px"
/>
<!-- 佣金设置 -->
<el-dialog
title="佣金设置"
v-model="showCommisionSetting"
width="1200px"
append-to-body
:close-on-click-modal="false"
>
<!-- 表格数据 -->
<el-table v-loading="settingLoading" :data="settingList" border ref="settingTableRef">
<el-table-column
label="序号 "
width="55"
align="center"
type="index"
fixed="left"
></el-table-column>
<el-table-column label="费用名称" prop="expenseName" width="150" fixed="left">
<template #header>
<span class="required-label">费用名称</span>
</template>
<template #default="scope">
<el-select v-model="scope.row.expenseName" placeholder="请选择">
<el-option
v-for="item in commission_cost_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="佣金年限(起)" prop="startPeriod" width="120">
<template #header>
<span class="required-label">佣金年限(起)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.startPeriod"
type="number"
placeholder="请输入"
:min="1"
clearable
@input="handleNumberInput(scope.row, 'startPeriod', 'positive')"
@blur="handlePeriodBlur(scope.row, scope.$index, 'startPeriod')"
/>
</template>
</el-table-column>
<el-table-column label="佣金年限(止)" prop="endPeriod" width="120">
<template #header>
<span class="required-label">佣金年限(止)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.endPeriod"
type="number"
:min="1"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'endPeriod', 'positive')"
@blur="handlePeriodBlur(scope.row, scope.$index, 'endPeriod')"
/>
</template>
</el-table-column>
<el-table-column label="佣金率(%)" prop="commissionRate" width="120">
<template #header>
<span class="required-label">佣金率(%)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.commissionRate"
type="number"
:min="0"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'commissionRate', 'non-negative')"
/>
</template>
</el-table-column>
<el-table-column label="折标系数(%)" prop="discountRatio" width="120">
<template #header>
<span class="required-label">折标系数(%)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.discountRatio"
type="number"
:min="0"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'discountRatio', 'non-negative')"
/>
</template>
</el-table-column>
<el-table-column label="生效日期(起)" prop="effectiveStart" width="150">
<template #header>
<span class="required-label">生效日期(起)</span>
</template>
<template #default="scope">
<el-date-picker
v-model="scope.row.effectiveStart"
style="width: 100%"
type="date"
placeholder="请选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="handleStartDateChange(scope.row, scope.$index)"
/>
</template>
</el-table-column>
<el-table-column label="生效日期(止)" prop="effectiveEnd" width="150">
<template #header>
<span class="required-label">生效日期(止)</span>
</template>
<template #default="scope">
<el-date-picker
v-model="scope.row.effectiveEnd"
style="width: 100%"
type="date"
placeholder="请选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="handleEndDateChange(scope.row, scope.$index)"
/>
</template>
</el-table-column>
<el-table-column label="是否受汇率影响" prop="isExchangeRate" width="150">
<template #header>
<span class="required-label">是否受汇率影响</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.isExchangeRate"
style="width: 100%"
placeholder="请选择"
clearable
>
<el-option
v-for="item in sys_no_yes"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="结算币种" prop="currency" width="120">
<template #header>
<span class="required-label">结算币种</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.currency"
style="width: 100%"
placeholder="请选择"
clearable
>
<el-option
v-for="item in bx_currency_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column
label="对账公司"
prop="reconciliationCompanyName"
align="center"
width="150"
>
<template #header>
<span class="required-label">对账公司</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.reconciliationCompanyName"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, 'reconciliationCompanyName')"
:loading="searchLoadingStates['reconciliationCompanyName']"
>
<el-option
v-for="item in searchOptions['reconciliationCompanyName'] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="销售组织" prop="salesOrgName" align="center" width="150">
<template #header>
<span class="required-label">销售组织</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.salesOrgName"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, 'salesOrgName')"
:loading="searchLoadingStates['salesOrgName']"
>
<el-option
v-for="item in searchOptions['salesOrgName'] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="状态" prop="status" width="120">
<template #header>
<span class="required-label">状态</span>
</template>
<!-- <template #default="scope">
<el-select
v-model="scope.row.status"
style="width: 100%"
placeholder="请选择"
clearable
>
<el-option
v-for="item in sys_status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template> -->
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-value="1"
inactive-value="0"
@change="switchChange(scope.row)"
/>
<span style="margin-left: 8px">
{{ scope.row.status === '1' ? '启用' : '禁用' }}
</span>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" width="200">
<template #default="scope">
<el-input v-model="scope.row.remark" type="textarea" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column label="最近一次操作人" prop="updaterName" width="120" />
<el-table-column label="最近一次操作时间" prop="updateTime" width="160">
<template #default="scope">
<span>{{ scope.row.updateTime ? parseTime(scope.row.updateTime) : '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right">
<template #default="scope">
<div class="btnCon">
<el-button
v-if="scope.$index == settingList.length - 1"
@click="handleAddCommission(scope.row)"
text
size="small"
type="primary"
>新增</el-button
>
<el-button
text
size="small"
type="danger"
@click="handleDeleteCommission(scope.row, scope.$index)"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeSetting">关闭</el-button>
<el-button type="primary" @click="submitSetting">提 交</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="佣金设置错误提示" v-model="errorTip" width="500px" append-to-body>
<div style="margin-bottom: 10px" v-for="item in settingErrorTip">{{ item }}</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="errorTip = false">去修改</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="SendInfo">
import { cloneDeep } from 'lodash-es'
import {
comeCommissionRatio,
comeCommissionList,
comeExpectedSpecies,
comeBatchSave,
deleteComeCommission,
changeComeStatus
} from '@/api/product/index'
import { getAllCompanys } from '@/api/common'
import { ref, watch } from 'vue'
const props = defineProps({
// 类型，是新增还是编辑,
activeName: {
type: String,
default: ''
}
})
const route = useRoute()
const { proxy } = getCurrentInstance()
const loading = ref(true)
const settingLoading = ref(true)
const total = ref(0) //规格表格的总条数
const settingTotal = ref(0) //规格表格的总条数
const showCommisionSetting = ref(false) //佣金设置弹窗开关
const errorTip = ref(false) //佣金设置弹窗开关
const settingList = ref([]) //佣金设置表格数据
const currentSettingRow = ref([]) //当前选中的佣金设置行
const settingErrorTip = ref([]) //提交佣金错误提示信息
const searchOptions = ref({}) // 存储不同key对应的选项
const searchLoadingStates = ref({}) // 存储不同key对应的加载状态
const data = reactive({
queryParams: {
pageNo: 1,
pageSize: 10,
productLaunchBizId: route.query.productLaunchBizId
},
settingQueryParams: {
pageNo: 1,
pageSize: 9999
}
})
const { queryParams, settingQueryParams } = toRefs(data)
const { bx_currency_type, commission_cost_type, sys_no_yes, sys_status } = proxy.useDict(
'bx_currency_type',
'commission_cost_type',
'sys_no_yes',
'sys_status'
)
const switchChange = row => {
if (!row.expectedCommissionRatioBizId) {
return
}
try {
changeComeStatus({
expectedCommissionRatioBizId: row.expectedCommissionRatioBizId,
status: Number(row.status)
}).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess('状态修改成功')
}
})
} catch (error) {
row.status = row.status === '1' ? '0' : '1'
}
}
// 搜索方法
const searchSelectList = async (query, fieldKey) => {
// 设置该字段的加载状态
searchLoadingStates.value[fieldKey] = true
try {
// 根据不同的字段key调用不同的API
if (fieldKey === 'reconciliationCompanyName' || fieldKey === 'salesOrgName') {
const params = {
deptName: query.trim(),
pageNo: 1,
pageSize: 10
}
getAllCompanys(params).then(response => {
response.data.records = response.data.records.map(item => {
return {
...item,
label: item.deptName,
value: item.deptBizId
}
})
searchOptions.value[fieldKey] = response.data.records
})
}
} catch (error) {
console.error(`${fieldKey} 搜索失败`, error)
searchOptions.value[fieldKey] = []
} finally {
searchLoadingStates.value[fieldKey] = false
}
}
const handleDeleteCommission = (row, index) => {
if (settingList.value.length === 1) {
proxy.$modal.msgError('至少保留一条佣金设置数据')
return
}
proxy.$modal
.confirm(`是否确认删除第${index + 1}行数据?`)
.then(function () {
if (row.expectedCommissionRatioBizId) {
deleteComeCommission(row.expectedCommissionRatioBizId).then(response => {
if (response.code === 200) {
settingList.value.splice(index, 1)
} else {
proxy.$modal.msgError(response.msg)
}
})
} else {
settingList.value.splice(index, 1)
}
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}
const handleNumberInput = (row, field, type = 'positive') => {
const value = row[field]
if (value === null || value === undefined || value === '') return
let numValue = Number(value)
if (isNaN(numValue)) {
row[field] = null
return
}
if (type === 'positive') {
// 正整数：移除负号和小数部分
if (numValue <= 0) {
row[field] = null
return
}
// 取整数部分
row[field] = Math.floor(Math.abs(numValue))
} else if (type === 'non-negative') {
// 非负数：允许0及以上，不允许负数
if (numValue < 0) {
row[field] = 0
}
}
}
// 处理开始日期变化
const handleStartDateChange = (row, index) => {
if (row.effectiveStart && row.effectiveEnd) {
const start = new Date(row.effectiveStart)
const end = new Date(row.effectiveEnd)
if (start > end) {
proxy.$modal.msgError(
`第${index + 1}行：生效日期(起)不能晚于生效日期(止),请重新选择生效日期(起)`
)
// 清空结束日期，让用户重新选择
setTimeout(() => {
row.effectiveStart = ''
}, 0)
}
}
}
// 处理结束日期变化
const handleEndDateChange = (row, index) => {
console.log('时间', row)
if (row.effectiveStart && row.effectiveEnd) {
const start = new Date(row.effectiveStart)
const end = new Date(row.effectiveEnd)
if (end < start) {
proxy.$modal.msgError(
`第${index + 1}行：生效日期(止)不能早于生效日期(起),请重新选择生效日期(止)`
)
// 清空开始日期，让用户重新选择
setTimeout(() => {
row.effectiveEnd = ''
}, 0)
}
}
}
const handlePeriodBlur = (row, index, key) => {
if (row.startPeriod && row.endPeriod && row.startPeriod > row.endPeriod) {
proxy.$modal.msgError(`第${index + 1}行：佣金开始年限不能大于佣金结束年限,请重新填写`)
row[key] = ''
row.unadd = true
} else {
row.unadd = false
}
console.log('年限', row)
}
const handleAddCommission = row => {
let newRow = cloneDeep(row)
let obj = {}
// 复制当前条的数据
for (const key in newRow) {
if (key !== 'startPeriod' && key !== 'endPeriod' && key !== 'commissionRate') {
obj[key] = newRow[key]
} else {
obj[key] = ''
}
}
if (!row.unadd) {
settingList.value.push(obj)
}
}
const closeSetting = () => {
showCommisionSetting.value = false
settingQueryParams.value = {
pageNo: 1,
pageSize: 9999
}
}
// 批量提交佣金设置
const submitSetting = async () => {
// 校验表格数据
const validationResult = validateTableData()
if (!validationResult.valid) {
proxy.$modal.msgError(validationResult.message)
return
}
let saveTable = cloneDeep(settingList.value)
saveTable.forEach(item => {
if (item.reconciliationCompanyName) {
searchOptions.value['reconciliationCompanyName'].forEach(item1 => {
if (item.reconciliationCompanyName == item1.value) {
item.reconciliationCompanyName = item1.label
item.reconciliationCompany = item1.value
}
})
}
if (item.salesOrgName) {
searchOptions.value['salesOrgName'].forEach(item1 => {
if (item.salesOrgName == item1.value) {
item.salesOrgName = item1.label
item.salesOrg = item1.value
}
})
}
})
// return
try {
comeBatchSave({
expectedSpeciesBizId: currentSettingRow.value.expectedSpeciesBizId,
ratioBatchSaveDtoList: saveTable
}).then(response => {
console.log('response', response)
if (response.code === 200) {
showCommisionSetting.value = false
proxy.$modal.msgSuccess('提交成功')
} else if (response.code === 1004) {
if (response.msg) {
settingErrorTip.value = response.msg.split('\n').filter(item => item !== '')
}
errorTip.value = true
}
})
} catch (error) {
console.log('错误了', error)
}
}
// 表格数据校验函数
const validateTableData = () => {
const errors = []
const requiredFields = [
{ key: 'expenseName', label: '费用名称' },
{ key: 'startPeriod', label: '佣金年限(起)' },
{ key: 'endPeriod', label: '佣金年限(止)' },
{ key: 'commissionRate', label: '佣金率(%)' },
{ key: 'discountRatio', label: '折标系数(%)' },
{ key: 'effectiveStart', label: '生效日期(起)' },
{ key: 'effectiveEnd', label: '生效日期(止)' },
{ key: 'isExchangeRate', label: '是否受汇率影响' },
{ key: 'currency', label: '结算币种' },
{ key: 'salesOrgName', label: '销售组织' },
{ key: 'reconciliationCompanyName', label: '对账公司' }
]
settingList.value.forEach((row, index) => {
requiredFields.forEach(field => {
const value = row[field.key]
let isValid = true
if (Array.isArray(value)) {
isValid = value.length > 0
} else {
isValid = value !== null && value !== undefined && value !== ''
}
if (!isValid) {
errors.push({
rowIndex: index,
field: field.key,
label: field.label,
rowNumber: index + 1
})
}
})
})
if (errors.length === 0) {
return { valid: true }
}
// 生成友好的错误提示信息
const errorMessages = errors
.slice(0, 3)
.map(error => `第${error.rowNumber}行【${error.label}】未填写`)
let message = errorMessages.join('；')
if (errors.length > 3) {
message += `等，共${errors.length}处必填项未填写`
}
return {
valid: false,
errors,
message
}
}
/** 获得佣金设置数据 */
function getSettingList() {
settingLoading.value = true
let obj = {
expenseName: '',
startPeriod: '',
endPeriod: '',
commissionRate: '',
discountRatio: '',
effectiveStart: '',
effectiveEnd: '',
isExchangeRate: '',
currency: '',
status: '1',
remark: '',
salesOrgName: '',
reconciliationCompanyName: ''
}
settingList.value = []
settingQueryParams.value.expectedSpeciesBizId = currentSettingRow.value.expectedSpeciesBizId
comeCommissionRatio(settingQueryParams.value).then(response => {
if (response.code === 200) {
if (response.data.records.length > 0) {
settingList.value = response.data.records
settingList.value.forEach(row => {
row.status = row.status === 1 ? '1' : row.status === 0 ? '0' : ''
})
} else {
settingList.value.push(obj)
}
settingTotal.value = response.data.total
settingLoading.value = false
showCommisionSetting.value = true
} else {
settingLoading.value = false
proxy.$modal.msgError(response.msg)
}
})
}
// 原始数据
const originalData = ref([])
// 表格列配置
const tableColumns = ref([])
// 表格数据
const tableData = ref([])
// 合并行配置，存储每列需要合并的行数
const spanConfig = ref({})
// 从数据中提取所有可能的列
const extractColumnsFromData = data => {
const columnSet = new Map()
data.forEach(item => {
try {
if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
item.apiSpeciesSettingDtoList.forEach(species => {
if (!columnSet.has(species.typeCode)) {
columnSet.set(species.typeCode, {
prop: species.typeCode,
label: species.typeName,
width: species.typeName.length * 15 + 30,
align: 'center',
sortable: false
})
}
})
}
} catch (e) {
console.log('计算列失败', e)
}
})
// 将 Map 转换为数组并按 typeCode 排序（可选）
return Array.from(columnSet.values())
}
// 处理数据，生成表格需要的格式
const processTableData = () => {
if (!originalData.value || originalData.value.length === 0) {
tableData.value = []
spanConfig.value = {}
return
}
// 1. 提取所有列
const columns = extractColumnsFromData(originalData.value)
tableColumns.value = columns
// 2. 转换数据格式
const processedData = []
originalData.value.forEach((item, index) => {
const rowData = {
rowKey: `${item.id}_${index}`, // 生成唯一 rowKey
id: item.id, // 保留原始ID
rawData: item // 保留原始数据
}
// 填充所有列的值
columns.forEach(column => {
try {
if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
const matchedSpecies = item.apiSpeciesSettingDtoList.find(s => s.typeCode === column.prop)
rowData[column.prop] = matchedSpecies ? matchedSpecies.value : ''
} else {
rowData[column.prop] = ''
}
} catch (e) {
console.log('填充所有列的值失败', e)
}
})
processedData.push(rowData)
})
// 3. 计算合并配置
calculateSpanConfig(processedData, columns)
tableData.value = processedData
}
// 计算合并配置
const calculateSpanConfig = (data, columns) => {
const config = {}
// 为每一列计算合并配置
columns.forEach((column, columnIndex) => {
config[column.prop] = []
let pos = 0
while (pos < data.length) {
const currentValue = data[pos][column.prop]
let rowspan = 1
// 向后查找相同值的行
for (let i = pos + 1; i < data.length; i++) {
// 只有当该列之前的所有列的值都相同时才合并
let shouldMerge = true
for (let j = 0; j < columnIndex; j++) {
const prevColumn = columns[j]
if (data[pos][prevColumn.prop] !== data[i][prevColumn.prop]) {
shouldMerge = false
break
}
}
if (shouldMerge && data[i][column.prop] === currentValue) {
rowspan++
} else {
break
}
}
// 记录合并配置
config[column.prop][pos] = rowspan
// 跳过已经计算的行
pos += rowspan
}
// 填充剩余的配置为0（不合并）
for (let i = 0; i < data.length; i++) {
if (!config[column.prop][i]) {
config[column.prop][i] = 0
}
}
})
spanConfig.value = config
}
// 合并单元格的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
// 最后一列是操作列，不合并
if (columnIndex === tableColumns.value.length) {
return {
rowspan: 1,
colspan: 1
}
}
const columnProp = tableColumns.value[columnIndex].prop
const rowspan = spanConfig.value[columnProp]?.[rowIndex] || 0
if (rowspan > 0) {
return {
rowspan: rowspan,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
// 佣金设置操作
const handleCommissionSetting = row => {
currentSettingRow.value = row.rawData
console.log(' currentSettingRow.value', currentSettingRow.value)
getSettingList()
}
/** 获得规格数据 */
function getSpeciesList() {
loading.value = true
comeCommissionList(queryParams.value).then(response => {
if (response.code === 200) {
originalData.value = response.data.records
total.value = response.data.total
loading.value = false
if (originalData.value.length == 0) {
proxy.$modal.msgError('该商品暂无规格数据，请先更新规格数据')
} else {
let codeArr = []
// 自定义没有typeCode影响表格得展示
originalData.value[0].apiSpeciesSettingDtoList.forEach((item, index) => {
if (item.isCustomize == '1') {
item.typeCode = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
codeArr.push({ index: index, code: item.typeCode })
}
})
originalData.value.forEach((item, oIndex) => {
item.apiSpeciesSettingDtoList.forEach((species, sIndex) => {
if (codeArr.length > 0) {
codeArr.forEach(codeItem => {
if (codeItem.index == sIndex) {
species.typeCode = codeItem.code
}
})
}
})
})
}
// 计算表格
processTableData()
searchSelectList('', 'reconciliationCompanyName')
searchSelectList('', 'salesOrgName')
} else {
proxy.$modal.msgError(response.msg)
}
})
}
/** 更新规格数据 */
function updateSpecies() {
loading.value = true
comeExpectedSpecies({ productLaunchBizId: route.query.productLaunchBizId }).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess('来佣管理-规格更新成功')
getSpeciesList()
} else {
proxy.$modal.msgError(response.msg)
}
})
}
//========多选下拉框悬停效果结束=========
watch(
() => props.activeName,
newVal => {
if (newVal == 'comeCommission') {
getSpeciesList()
}
}
)
</script>
<style lang="scss" scoped>
.required-label::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
}
.btnCon {
display: flex;
align-items: center;
justify-content: center;
}
/* 错误行样式 */
.error-row {
background-color: #fff2f0 !important;
animation: highlight 0.6s ease-in-out;
}
/* 错误字段高亮 */
.error-field :deep(.el-input__wrapper) {
border-color: #f56c6c !important;
box-shadow: 0 0 0 1px #f56c6c !important;
}
.error-field :deep(.el-input__inner) {
color: #f56c6c;
}
.error-field :deep(.el-select__wrapper) {
border-color: #f56c6c !important;
box-shadow: 0 0 0 1px #f56c6c !important;
}
/* 闪烁动画吸引用户注意力 */
@keyframes highlight {
0%,
50% {
background-color: #fff2f0;
}
25%,
75% {
background-color: #ffeaea;
}
100% {
background-color: #fff2f0;
}
}
/* 错误提示消息样式 */
.validation-message-box {
:deep(.el-message-box__content) {
max-height: 400px;
overflow-y: auto;
}
}
</style>
src/views/merchandise/components/productBaseInfo.vue 0 → 100644
<template>
<div class="baseBox">
<div class="form-content">
<!-- <div class="formHeader">基础信息</div> -->
<el-form>
<!-- 基础信息 -->
<el-card class="cardStyle" v-if="showImage">
<template #header>
<div @click="categoryDialogOpen = true">
<span class="cardTitle">基础信息</span>
<span class="chooseClass" v-if="categoryName">{{ categoryName }}</span>
<span class="editTxt">修改</span>
</div>
</template>
<div>
<el-row>
<el-col :span="12">
<div class="commonHeader">产品标题</div>
<el-select
v-model="form['apiProductLaunchDto'].title"
filterable
remote
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择产品名称"
@blur="handleSelectChange"
:remote-method="searchProduct"
clearable
remote-show-suffix
>
<el-option
v-for="item in productList"
:key="item.productBizId"
:label="item.productName"
:value="item.productBizId"
/>
</el-select>
</el-col>
<el-col :span="24" :class="showNameTip ? '' : 'colBottomGap'">
<div class="nameTip">
<span style="color: #ccc">标题需包含产品名称。</span>
<el-tooltip placement="bottom" effect="light" trigger="click">
<template #content>
<div style="width: 300px">
<div
v-for="item in nameRequireList"
:key="item.key"
style="margin-bottom: 8px"
>
<span style="font-size: 13px">•</span>
<span style="margin-left: 5px">{{ item.label }}</span>
</div>
</div>
</template>
<span style="color: #576b95; cursor: pointer">查看命名要求</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="24" v-if="showNameTip">
<div class="tipCon">
<el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
<span>标题信息过少，请至少输入5个有效字数（含中文、英文、数字）</span>
</div>
</el-col>
<el-col :span="12">
<div class="commonHeader">产品短标题</div>
<el-input
v-model="form['apiProductLaunchDto'].shortTitle"
placeholder="请输入"
maxlength="20"
show-word-limit
/>
</el-col>
<el-col :span="24" class="colBottomGap">
<div class="nameTip">
<span style="color: #ccc">短标题会展示在对话、朋友圈分享等场景。</span>
</div>
</el-col>
<el-col :span="24">
<div class="commonHeader">产品参数</div>
<el-row :gutter="20">
<template v-if="form.apiAttributeSettingDtoList.length">
<el-col
:span="item.isCustomize == '1' ? 24 : 8"
v-for="(item, index) in form.apiAttributeSettingDtoList"
>
<div
class="paramsItem"
v-if="item.isCustomize == '0'"
:style="{ marginBottom: item.errorMsg ? '0px' : '20px' }"
>
<div class="paramsLeft" style="width: 30%">
<el-select
v-model="item.name"
placeholder="请选择"
@change="changeLeft(item, index)"
>
<el-option
v-for="left in item.leftOptions"
:key="left.value"
:label="left.fieldCnName"
:value="left.fieldBizId"
/>
</el-select>
</div>
<div class="paramsMiddle" style="width: 63%">
<el-input
v-model="item.value"
placeholder="请输入"
@blur="paramsErr"
v-if="item.textBoxType == 'text'"
/>
<el-input-number
v-if="item.textBoxType == 'number'"
v-model="item.value"
:min="1"
style="width: 100%"
/>
<!-- 单选下拉框 -->
<el-select
v-model="item.value"
@blur="paramsErr"
placeholder="请选择"
v-if="item.textBoxType == 'select'"
>
<el-option
v-for="middle in item.middleOptions"
:key="middle.fieldValueBizId"
:label="middle.value"
:value="middle.fieldValueBizId"
clearable
/>
</el-select>
<!-- 多选下拉框 -->
<el-select
v-model="item.value"
@blur="paramsErr"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
placeholder="请选择"
v-if="item.textBoxType == 'multipleSelect'"
clearable
>
<el-option
v-for="middle in item.middleOptions"
:key="middle.fieldValueBizId"
:label="middle.value"
:value="middle.fieldValueBizId"
/>
</el-select>
<!-- 带时分的时间框 -->
<el-date-picker
@blur="paramsErr"
v-model="item.value"
style="width: 100%"
v-if="item.textBoxType == 'dateTime'"
type="datetime"
placeholder="请选择"
@change="handleDateChange()"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm:ss"
/>
<!-- 不带时分 -->
<el-date-picker
@blur="paramsErr"
v-model="item.value"
style="width: 100%"
v-if="item.textBoxType == 'date'"
type="date"
placeholder="请选择"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="handleDateChange()"
/>
</div>
<div
class="paramsRight"
style="width: 8%"
@click="deleteParams(item, index)"
>
<el-icon><Delete /></el-icon>
</div>
</div>
<div
class="paramsItem"
v-else
:style="{ marginBottom: item.errorMsg ? '0px' : '20px' }"
>
<div class="paramsLeft" style="width: 30%">
<el-select
v-model="item.customValue"
placeholder="请选择"
@change="changeCustomLeft(item, index)"
>
<el-option
v-for="left in item.leftOptions"
:key="left.value"
:label="left.fieldCnName"
:value="left.fieldBizId"
/>
</el-select>
</div>
<div class="paramsMiddle" style="width: 63%">
<el-input
v-model="item.name"
placeholder="请输入参数名"
@blur="paramsErr"
/>
</div>
<div class="paramsMiddle customMiddle" style="width: 63%">
<el-input
v-model="item.value"
placeholder="请输入参数值"
@blur="paramsErr"
/>
</div>
<div
class="paramsRight"
style="width: 8%"
@click="deleteCustomParams(item, index)"
>
<el-icon><Delete /></el-icon>
</div>
</div>
<div class="errorParams" v-if="item.errorMsg">
<el-icon color="red" :size="20" style="margin-right: 5px"
><Warning
/></el-icon>
<span>{{ item.errorMsg }}</span>
</div>
</el-col>
</template>
<el-col :span="24" class="addTxt">
<el-icon :size="24"><CirclePlus /></el-icon>
<span style="margin-left: 5px" @click="addParams">添加新参数</span>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</el-card>
<!-- 配图 -->
<el-card class="cardStyle" v-if="showImage">
<template #header>
<div>
<span class="cardTitle">产品展示与介绍</span>
</div>
</template>
<div>
<el-row>
<!-- 主图 -->
<el-col :span="24" style="margin: 20px 0">
<div class="commonHeader">
图片和视频
<span style="color: rgb(111, 111, 111); font-size: 15px"
>({{ imageInfo.count }}/9)</span
>
</div>
<image-upload
v-model="form['apiProductLaunchDto'].mainUrlsList"
:action="'/oss/api/oss/upload'"
:limit="9"
:image-size="10"
:video-size="500"
:file-type="['png', 'jpg', 'jpeg', 'mp4']"
:is-show-tip="false"
source="main"
@file-change="handleFileChange"
/>
</el-col>
<el-col :span="24">
<div v-for="(item, index) in imageRequireList" :key="item.key" class="imgTip">
<span>{{ index + 1 }}.</span>
<span>{{ item.label }}</span>
<el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
<template #content>
<div style="width: 300px">
<div
v-for="item in imageTipList"
:key="item.key"
style="margin-bottom: 8px"
>
<span style="font-size: 13px">•</span>
<span style="margin-left: 5px">{{ item.label }}</span>
</div>
</div>
</template>
<span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="24" v-if="imageInfo.count > 0 && imageInfo.count < 3">
<div class="tipCon">
<el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
<span>请上传至少3张产品主图</span>
</div>
</el-col>
<!-- 详情图 -->
<el-col :span="24" style="margin: 20px 0">
<div class="commonHeader">
详情图和描述
<span style="color: rgb(111, 111, 111); font-size: 15px"
>({{ subImageInfo.count }}/50)</span
>
</div>
<image-upload
v-model="form['apiProductLaunchDto'].detailUrlsList"
:action="'/oss/api/oss/upload'"
:limit="50"
:image-size="10"
:file-type="['png', 'jpg', 'jpeg']"
:is-show-tip="false"
source="sub"
@file-change="handleFileChange"
/>
</el-col>
<el-col :span="24">
<div v-for="(item, index) in desRequireList" :key="item.key" class="imgTip">
<span>{{ index + 1 }}.</span>
<span>{{ item.label }}</span>
<el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
<template #content>
<div style="width: 310px">
<div v-for="item in desTipList" :key="item.key" style="margin-bottom: 8px">
<span style="font-size: 13px">•</span>
<span style="margin-left: 5px">{{ item.label }}</span>
</div>
</div>
</template>
<span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="24" v-if="subImageInfo.count == 0">
<div class="tipCon">
<el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
<span>请上传至少1张产品详情图</span>
</div>
</el-col>
<el-col :span="24" style="margin-top: 10px">
<el-input
v-model="form['apiProductLaunchDto'].detailDescription"
type="textarea"
placeholder="产品描述(选填)"
/>
</el-col>
</el-row>
</div>
</el-card>
<!-- 规格和库存价格 -->
<el-card class="cardStyle" v-if="showImage">
<template #header>
<div>
<span class="cardTitle">规格和库存价格</span>
</div>
</template>
<div>
<el-row>
<el-col :span="24">规格</el-col>
<el-col :span="24">
<div
class="speciesItem"
v-for="(item, index) in form.speciesData"
:key="item.speciesTypeBizId"
>
<div class="speciesTop">
<div class="speciesTopLeft">
<el-select
v-model="item.speciesName"
placeholder="请选择"
@change="changeSpeciesSelect(item, index)"
style="width: 300px"
>
<el-option
v-for="left in item.options"
:key="left.speciesTypeBizId"
:label="left.typeName"
:value="left.speciesTypeBizId"
/>
</el-select>
<!-- 自定义规格名称 -->
<div class="customizeInput" v-if="item.isCustomize == '1'">
<el-input
v-model="item.typeName"
placeholder="请输入规格名称"
@blur="changCustomSpecies(item)"
style="width: 300px"
/>
<div class="customizeErrorMsg" v-if="item.errorMsg">
{{ item.errorMsg }}
</div>
</div>
<!-- 切换配图得switch -->
<template v-if="index == 0">
<el-popconfirm
v-if="item.isIllustration == '1'"
width="300"
class="box-item"
title="关闭开关会清空现在的配图"
placement="bottom"
hide-icon
@confirm="switchChange(item, 'close')"
>
<template #reference>
<div>
<el-switch
v-model="item.isIllustration"
active-value="1"
inactive-value="0"
style="margin: 0 5px 0px 15px"
:before-change="switchBeforeChange"
></el-switch>
<span class="imgSwitch">配图</span>
</div>
</template>
</el-popconfirm>
<div v-else>
<el-switch
v-model="item.isIllustration"
active-value="1"
inactive-value="0"
style="margin: 0 5px 0px 15px"
@change="switchChange(item, 'open')"
></el-switch>
<span class="imgSwitch">配图</span>
</div>
</template>
</div>
<div class="speciesTopRight" @click="deleteSpecies(item)">
<el-icon :size="18"><Delete /></el-icon>
</div>
</div>
<el-row :gutter="20" style="margin-top: 15px">
<el-col
:span="8"
v-for="(species, sIndex) in item.apiSpeciesSettingDtoList"
:key="species.speciesId"
>
<div class="paramsItem" style="margin-bottom: 20px">
<div
class="paramsLeft speciesLeft"
style="width: 8%"
v-if="species.isIllustration == '1'"
>
<el-upload
:action="uploadUrl"
style="display: flex"
list-type="picture"
:headers="headers"
:show-file-list="false"
:on-success="(res, file) => handleUploadSuccess(res, file, species)"
:before-upload="handleBeforeUpload"
>
<el-icon v-if="!species.illustrationUrl" :size="24" color="#969696"
><Picture
/></el-icon>
<!-- <el-popconfirm
width="300"
class="box-item"
title="关闭开关会清空现在的配图"
placement="bottom"
hide-icon
>
</el-popconfirm> -->
<img v-else :src="species.illustrationUrl" style="width: 100%; height:
32px;object-fit: cover"
</el-upload>
</div>
<div
class="paramsMiddle speciesMiddle"
:style="{ width: getSpeciesMiddleWidth(species, item) }"
>
<el-input
v-model="species.value"
placeholder="请输入"
@keydown="speciesInputChange(species, sIndex, item)"
/>
</div>
<div
v-if="item.apiSpeciesSettingDtoList.length > 1"
class="paramsRight speciesRight"
style="width: 8%"
@click="deleteSpeciesValue(species)"
>
<el-icon><Delete /></el-icon>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="24" class="addTxt">
<el-icon :size="22"><CirclePlus /></el-icon>
<span style="margin-left: 5px" @click="addSpecies">创建新规格</span>
</el-col>
<el-col :span="24" style="margin-top: 20px">价格与库存</el-col>
<!-- 规格价格得设置 -->
<el-col
:span="24"
style="margin-top: 10px; margin-bottom: 10px"
v-if="speciesSelectList.length > 0"
>
<!-- 规格值得选择 -->
<div class="speciesSelect">
<div v-for="item in speciesSelectList">
<el-select
placeholder="请选择"
style="width: 220px; margin-right: 20px"
v-model="selectedValues[item.speciesTypeBizId]"
>
<el-option
v-for="left in item.options"
:key="left.speciesId"
:label="left.value"
:value="left.speciesId"
/>
</el-select>
</div>
</div>
<!-- 产品价格等得固定设置 -->
<div class="settingBox">
<div class="paramsItem settingItem">
<div class="paramsLeft settingLeft">售卖价</div>
<div class="paramsMiddle settingRight">
<el-input type="number" v-model="batchPrice" placeholder="请输入售卖价" />
</div>
</div>
<div class="paramsItem settingItem">
<div class="paramsLeft settingLeft">库存</div>
<div class="paramsMiddle settingRight">
<el-input type="number" v-model="batchInventory" placeholder="请输入库存" />
</div>
</div>
<el-button
type="primary"
plain
@click="handleBatchSet"
:disabled="!batchPrice && !batchInventory"
>设置</el-button
>
</div>
</el-col>
<!-- 规格表格部分 -->
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
height="250"
>
<!-- 动态规格列 -->
<el-table-column
v-for="spec in form.speciesData.filter(
item => item.typeName && item.apiSpeciesSettingDtoList[0].value
)"
:key="spec.speciesTypeBizId"
:prop="spec.speciesTypeBizId"
:label="spec.typeName"
align="center"
:width="form.speciesData.length > 5 ? 150 : 'auto'"
fixed="left"
>
<template #default="scope">
{{ scope.row[spec.speciesTypeBizId] }}
</template>
</el-table-column>
<!-- 价格列 -->
<el-table-column
prop="price"
label="价格"
:width="tableData.length > 0 ? 120 : 'auto'"
align="center"
>
<template #header>
<span class="required-label">价格</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.price" type="number" />
<div class="errMsg" v-if="scope.row.priceErrorMsg">
{{ scope.row.priceErrorMsg }}
</div>
</template>
</el-table-column>
<!-- 库存列 -->
<el-table-column
prop="inventory"
label="库存"
:width="tableData.length > 0 ? 120 : 'auto'"
align="center"
>
<template #header>
<span class="required-label">库存</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.inventory" type="number" />
<div class="errMsg" v-if="scope.row.inventoryErrorMsg">
{{ scope.row.inventoryErrorMsg }}
</div>
</template>
</el-table-column>
<!-- 配图列 -->
<el-table-column
prop="illustrationUrl"
label="配图"
:width="tableData.length > 0 ? 120 : 'auto'"
align="center"
>
<template #default="scope">
<div style="display: flex; align-items: center; justify-content: center">
<img
v-if="scope.row.illustrationUrl"
:src="scope.row.illustrationUrl"
style="width: 60%; height: 60%; object-fit: cover"
/>
<el-icon v-else :size="24" color="#969696">
<Picture />
</el-icon>
</div>
</template>
</el-table-column>
<!-- 状态列 -->
<el-table-column
prop="status"
label="状态"
:width="tableData.length > 0 ? 120 : 'auto'"
align="center"
fixed="right"
>
<template #default="scope">
<el-switch v-model="scope.row.status" active-value="1" inactive-value="0" />
<span style="margin-left: 8px">
{{ scope.row.status === '1' ? '上架' : '下架' }}
</span>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</el-card>
<!-- 更多设置 -->
<el-card class="cardStyle">
<template #header>
<div>
<span class="cardTitle">更多设置</span>
</div>
</template>
<el-row>
<el-col :span="24">
<div class="moreBox">
<div class="moreTitle">定时开售</div>
<div class="moreItem">
<div class="moreLeft">设置定时</div>
<div class="moreRight">
<el-switch
v-model="form.apiProductLaunchDto['isTiming']"
active-value="1"
inactive-value="0"
style="margin: 0 5px 0px 15px"
></el-switch>
<span class="imgSwitch">{{
form.apiProductLaunchDto['isTiming'] == '1' ? '已开启' : '已关闭'
}}</span>
</div>
</div>
<div class="moreItem" v-if="form.apiProductLaunchDto['isTiming'] == '1'">
<div class="moreLeft">开售日期</div>
<div class="moreRight" style="margin-left: 15px">
<el-date-picker
v-model="form.apiProductLaunchDto['releaseDate']"
style="width: 100%"
type="datetime"
placeholder="请选择开售日期"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</div>
</div>
<div class="moreItem" v-if="form.apiProductLaunchDto['isTiming'] == '1'">
<div class="moreLeft">隐藏信息</div>
<div class="moreRight" style="margin-left: 15px">
<el-checkbox
v-model="form.apiProductLaunchDto['isHiddenPrice']"
label="价格"
size="large"
/>
</div>
</div>
</div>
<div class="moreBox">
<div class="moreTitle">购买设置</div>
<div class="moreItem">
<div class="moreLeft">
{{ form.apiProductLaunchDto['isPurchaseLimit'] == '1' ? '购买限制' : '限购' }}
</div>
<div class="moreRight">
<el-switch
v-model="form.apiProductLaunchDto['isPurchaseLimit']"
active-value="1"
inactive-value="0"
style="margin: 0 5px 0px 15px"
></el-switch>
<span class="imgSwitch">{{
form.apiProductLaunchDto['isPurchaseLimit'] == '1' ? '开启限购' : '未开启'
}}</span>
</div>
</div>
<div class="moreItem" v-if="form.apiProductLaunchDto['isPurchaseLimit'] == '1'">
<div class="moreLeft"></div>
<div class="moreRight" style="margin-left: 15px">
<span>每人</span>
<el-select
placeholder="请选择"
style="width: 100px; margin-right: 5px"
v-model="form.apiProductLaunchDto['limitDateUnit']"
>
<el-option
v-for="option in limitoptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
<span>限购</span>
<el-input
v-model="form.apiProductLaunchDto['limitQuantity']"
placeholder="件数"
type="number"
style="width: 120px; margin-right: 20px"
>
<template #append>
<span>件</span>
</template>
</el-input>
</div>
</div>
</div>
<div class="moreBox">
<div class="moreTitle">上架平台</div>
<el-button
type="primary"
plain
@click="choosePlatform"
style="margin-top: 10px; margin-bottom: 10px"
>选择平台</el-button
>
<el-table :data="choosePlatformList" border>
<el-table-column
label="项目名称"
prop="projectName"
:show-overflow-tooltip="true"
/>
<el-table-column label="项目编号" prop="projectCode" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
fixed="right"
>
<template #default="scope">
<el-button
link
type="danger"
icon="Delete"
@click="deletePlatform(scope.row, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-card>
</el-form>
</div>
<div class="bottomBtn">
<el-button type="primary" size="large" @click="submitProduct">提交</el-button>
</div>
<!-- 选择平台 -->
<el-dialog title="平台" v-model="platFormOpen" width="700px" append-to-body>
<el-form
:model="platFormQueryParams"
ref="platFormQueryRef"
:inline="true"
label-width="68px"
>
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="platFormQueryParams.projectName"
placeholder="请输入项目名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="searchPlatformTable">搜索</el-button>
<el-button icon="Refresh" @click="paltformReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table
v-loading="platFormLoading"
:data="platFormList"
@selection-change="platformSelectionChange"
:row-key="row => row.projectBizId"
:reserve-selection="true"
ref="platformTableRef"
>
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="项目名称" prop="projectName" />
<el-table-column label="项目编号" prop="projectCode" />
</el-table>
<pagination
v-show="platformTotal > 0"
:total="platformTotal"
v-model:page="platFormQueryParams.pageNo"
v-model:limit="platFormQueryParams.pageSize"
@pagination="getPlatFormList"
/>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="confirmPlatform">确 定</el-button>
<el-button @click="closePlatform">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 修改分类类目 -->
<el-dialog title="修改产品类目" v-model="categoryDialogOpen" width="1000px" append-to-body>
<CategoryTable
style="height: 300px"
type="edit"
ref="categoryRef"
:data="selectCategoryData"
/>
<template #footer>
<div class="categoryDialogFooter">
<el-button type="primary" @click="categoryConfirm">确 定</el-button>
<el-button @click="categoryDialogOpen = false">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog
:title="`${errorList.length}处需修改`"
v-model="errorDialogOpen"
width="800px"
append-to-body
>
<div class="errorContent">
<div class="errorTitle">以下问题会导致提交不通过，建议修改完再提交</div>
<div class="errorItem" v-for="error in errorList">
<el-icon class="errMsg" :size="22" style="margin-right: 5px"><Warning /></el-icon>
<span>{{ error.msg }}</span>
</div>
</div>
<template #footer>
<div class="categoryDialogFooter">
<el-button type="primary" @click="errorDialogOpen = false">去修改</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="InsuranceProduct">
import { assign, cloneDeep } from 'lodash-es'
import {
getProductList,
addProduct,
getProductDetail,
productParams,
ParamRightOptions,
productSpecies,
querySelectCategory,
saveProductLaunch
} from '@/api/product/index'
import { listProject } from '@/api/system/project'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
import { ref, computed, watch, nextTick } from 'vue'
import ImageUpload from '@/components/ImageUpload/index.vue' //图片上传组件
import CategoryTable from '@/components/CategoryTable/index.vue' //图片上传组件
const emit = defineEmits(['handleSuccess'])
const props = defineProps({
// 类型，是新增还是编辑,
activeName: {
type: String,
default: ''
},
detailInfo: {
type: Object,
default: () => {}
}
})
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/oss/api/oss/upload')
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const showImage = ref(true)
const SummaryRightOptions = ref([]) //产品参数右侧下拉框汇总列表
const paramsList = ref([]) //产品参数总列表
const subImageInfo = ref({ count: 0, fileList: [] }) //详情图信息
const showNameTip = ref(false)
const imageInfo = ref({ count: 0, fileList: [] })
const productList = ref([])
const errorList = ref([]) //存储错误信息
const errorDialogOpen = ref(false)
const showOnce = ref(false)
const allProductList = ref([])
const nameRequireList = ref([
{
label: '标题中必须包含产品名称',
key: '1'
},
{
label: '标题禁止出现连续重复的关键词',
key: '2'
},
{
label: '标题字数不少于5个字，包括中文、 英文、数字',
key: '3'
},
{
label: '标题为非中文时需要附带与产品对应一致的中文翻译',
key: '4'
},
{
label: '标题中需避免填写错别字',
key: '5'
}
])
const imageRequireList = ref([
{
label: '商品主图须符合平台要求，否则将无法通过审核。',
key: '1',
showTip: true,
tipContent: '查看主图要求'
},
{
label: '最少上传3个素材，最多上传9个素材，其中最多上传1个视频(mp4格式)，拖拽图片可排序。',
key: '2'
},
{
label: '视频时长不超过180秒，视频大小不超过500M；单张图片需限制在10M以内。',
key: '3'
}
])
const desRequireList = ref([
{
label: '商品详情图须符合平台要求，否则将无法通过审核。',
key: '1',
showTip: true,
tipContent: '查看详情图要求'
},
{
label: '至少上传1个素材，最多上传50个素材，拖拽可进行排序。',
key: '2'
},
{
label: '单张图片需限制在10M以内。',
key: '3'
}
])
const imageTipList = ref([
{
label: '全类目的产品主图要求提供不少于3张产品相关图片',
key: '1'
},
{
label: '主图第一张需为产品实物图',
key: '2'
},
{
label: '产品主图中不可包含相同的图片',
key: '3'
},
{
label: '产品图片不允许为手机截图、空白图',
key: '4'
},
{
label: '图片需清晰，不允许打码、遮挡/ps',
key: '5'
}
])
const desTipList = ref([
{
label: '商品详情图不得少于1张',
key: '1'
},
{
label: '详情图需为与商品相关的图片',
key: '2'
},
{
label: '商品详情图中不可包含相同的图片',
key: '3'
},
{
label: '商品图片不允许为手机截图、空白图',
key: '4'
},
{
label: '图片需清晰，不允许打码、遮挡/ps、第三方平台信息等',
key: '5'
}
])
const data = reactive({
form: {
apiProductLaunchDto: {},
apiAttributeSettingDtoList: [],
speciesData: [], //规格设置的数据
apiSpeciesPriceDtoList: []
},
queryParams: {},
platFormQueryParams: {
pageNo: 1,
pageSize: 10
}
})
const { queryParams, form, platFormQueryParams } = toRefs(data)
const handleDateChange = () => {}
// ===========更多设置开始===========
const choosePlatformList = ref([]) // 表格数据
const platFormOpen = ref(false)
const platFormLoading = ref(false)
const platFormList = ref([])
const platformSelectRows = ref([])
const platformTotal = ref(0)
const platformTableRef = ref()
const selectedRows = ref([])
// 使用 Set 来管理已选择的ID，方便查找
const selectedPlatformIds = ref(new Set())
const limitoptions = ref([
{
label: '每日',
value: 'DAILY',
key: '1'
},
{
label: '每周',
value: 'WEEKLY',
key: '2'
},
{
label: '每月',
value: 'MONTHLY',
key: '3'
},
{
label: '每年',
value: 'YEARLY',
key: '4'
}
])
const platformSelectionChange = rows => {
platformSelectRows.value = rows
// 实时更新ID集合
selectedPlatformIds.value = new Set(rows.map(item => item.projectBizId))
}
const paltformReset = () => {
platFormQueryParams.value = {
pageNo: 1,
pageSize: 10
}
getPlatFormList()
}
const closePlatform = () => {
platFormQueryParams.value = {
pageNo: 1,
pageSize: 10
}
platFormOpen.value = false
}
// 确定选择的平台
const confirmPlatform = () => {
choosePlatformList.value = cloneDeep(platformSelectRows.value)
// 更新已选择的ID集合
selectedPlatformIds.value = new Set(choosePlatformList.value.map(item => item.projectBizId))
closePlatform()
}
// 2. 修改弹窗打开函数
const choosePlatform = async () => {
platFormOpen.value = true
platFormQueryParams.value.pageNo = 1
// 获取列表数据
await getPlatFormList()
}
const getPlatFormList = () => {
platFormLoading.value = true
try {
listProject(platFormQueryParams.value).then(response => {
platFormList.value = response.data.records
platformTotal.value = response.data.total
// 数据加载后，设置选择状态
nextTick(() => {
if (platformTableRef.value) {
// 先清空所有选择
// platformTableRef.value.clearSelection()
platFormList.value.forEach(row => {
// 不可删除，删除会有bug
choosePlatformList.value.forEach(item => {
if (item.projectBizId == row.projectBizId) {
platformTableRef.value.toggleRowSelection(row, true)
}
})
const isSelected = selectedPlatformIds.value.has(row.projectBizId)
platformTableRef.value.toggleRowSelection(row, isSelected)
})
}
})
})
} catch (error) {
platFormList.value = []
} finally {
platFormLoading.value = false
}
}
const searchPlatformTable = () => {
platFormQueryParams.value.pageNo = 1
getPlatFormList()
}
const deletePlatform = (row, index) => {
proxy.$modal
.confirm('是否确认删除平台名称为"' + row.projectName + '"的数据项?')
.then(function () {
if (choosePlatformList.value.length > 0) {
choosePlatformList.value.splice(index, 1)
platformSelectRows.value.splice(index, 1)
// 从已选择的ID集合中移除
selectedPlatformIds.value.delete(row.projectBizId)
}
})
.catch(() => {})
}
// ===========更多设置结束===========
// ===========产品规格与库存相关操作开始===========
const tableData = ref([]) // 表格数据
const tableColumns = ref([]) // 表格列配置
const comboData = ref({}) // 存储每个规格组合的数据（价格、库存等）
const speciesList = ref([])
const speciesSelectList = ref([])
const isSettingSpeciesPrice = ref(false) //是否根据详情值回显规格价格的值
// 存储每个规格下拉框选中的值
const selectedValues = ref({})
// 价格和库存输入
const batchPrice = ref('')
const batchInventory = ref('')
/** 获取产品的所有规格 */
function getProductSpeciesInfo() {
productSpecies({ objectBizIdList: form.value.apiProductLaunchDto.categoryBizIdList }).then(
response => {
if (response.code == 200) {
// 应该做获取右侧的下拉框值了
speciesList.value = []
speciesList.value = response.data
let obj = {
speciesTypeBizId: `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
isCustomize: '1', //是否自定义 0-否 1-是
typeName: '自定义规格'
}
speciesList.value.push(obj)
if (
props.detailInfo.apiSpeciesTypeDtoList &&
props.detailInfo.apiSpeciesTypeDtoList.length > 0
) {
form.value.speciesData = cloneDeep(props.detailInfo.apiSpeciesTypeDtoList)
// 回显规格数据，处理每一项规格的options和自定义规格
form.value.speciesData.forEach(item => {
if (item.isCustomize == '1') {
item.speciesTypeBizId = `customSpecies${
Date.now() + Math.floor(Math.random() * 1000)
}`
item.speciesName = obj.speciesTypeBizId
} else {
item.speciesName = item.speciesTypeBizId
}
let options = getResidueSpecies()
// 非自定义规格的options需要从speciesList中获取
speciesList.value.forEach(item3 => {
if (item3.speciesTypeBizId == item.speciesTypeBizId) {
options.unshift(item3)
item.typeCode = item3.typeCode
}
})
item.apiSpeciesSettingDtoList.forEach((item2, index2) => {
item2.speciesTypeBizId = item.speciesTypeBizId
item2.speciesId = item2.speciesSettingBizId
item2.typeCode = item.typeCode
if (index2 == item.apiSpeciesSettingDtoList.length - 1) {
item2.isAdd = true
} else {
item2.isAdd = false
}
})
item.options = options
})
}
} else {
proxy.$modal.msgError(response.msg)
}
}
)
}
// 获取剩余的规格
function getResidueSpecies() {
const remainData = speciesList.value.filter(species => {
// 检查当前规格是否已经在 form.value.speciesList 中
return !form.value.speciesData.some(item => item.speciesTypeBizId === species.speciesTypeBizId)
})
return remainData
}
// 添加规格
function addSpecies() {
const residueSpecies = cloneDeep(getResidueSpecies())
if (residueSpecies.length > 1) {
const newSpecies = residueSpecies[0]
let speciesId = Date.now() + Math.floor(Math.random() * 1000)
newSpecies.speciesName = newSpecies.speciesTypeBizId
newSpecies.options = cloneDeep(residueSpecies)
newSpecies.isCustomize = '0'
//因为只有第一个规格需要添加图片，所以这里先判断一下，如果长度为0，则添加图片
if (form.value.speciesData.length == 0) {
newSpecies.isIllustration = '1'
newSpecies.illustrationUrl = ''
} else {
newSpecies.isIllustration = '0'
newSpecies.illustrationUrl = ''
}
newSpecies.apiSpeciesSettingDtoList = [
{
isIllustration: newSpecies.isIllustration,
speciesName: newSpecies.speciesName,
speciesTypeBizId: newSpecies.speciesTypeBizId,
typeName: newSpecies.typeName,
speciesId: speciesId,
isAdd: true,
isCustomize: '0'
}
]
form.value.speciesData.push(newSpecies)
} else {
// 如果只剩下一个规格，则直接添加自定义规格
let newObj = {
speciesTypeBizId: `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
isCustomize: '1', //是否自定义 0-否 1-是
typeName: ''
}
if (form.value.speciesData.length == 0) {
newObj.isIllustration = '1'
} else {
newObj.isIllustration = '0'
}
newObj.apiSpeciesSettingDtoList = [
{
...newObj,
speciesId: Date.now() + Math.floor(Math.random() * 1000),
isAdd: true
}
]
form.value.speciesData.push(newObj)
}
// 由于新增的时候，规格值会重置，所以需要更新规格下拉框的值
getNewSpeciesOptions()
}
// 处理规格值得宽度
function getSpeciesMiddleWidth(species, item) {
if (species.isIllustration == '1' && item.apiSpeciesSettingDtoList.length < 2) {
// 有配图，但规格数量只有一个
return '92%'
} else if (species.isIllustration == '0' && item.apiSpeciesSettingDtoList.length > 1) {
// 无配图，但规格数量有多个
return '92%'
} else if (species.isIllustration == '0' && item.apiSpeciesSettingDtoList.length == 1) {
// 无配图，但规格数量只有一个
return '100%'
} else if (species.isIllustration == '1' && item.apiSpeciesSettingDtoList.length > 1) {
// 有配图，但规格数量有多个
return '84%'
} else {
return '100%'
}
}
// 规格上传图片前得校验
function handleBeforeUpload(file) {
const isLt = file.size / 1024 / 1024 < 2
if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 2 MB!`)
return false
}
return true
}
// 规格上传图片成功
const handleUploadSuccess = (res, file, species) => {
if (res.code == 200) {
form.value.speciesData.forEach(item => {
if (item.speciesTypeBizId == species.speciesTypeBizId) {
item.apiSpeciesSettingDtoList.forEach(item2 => {
if (item2.speciesId == species.speciesId) {
item2.illustrationUrl = res.data.url
}
})
}
})
}
}
// 添加规格值
const speciesInputChange = (species, sIndex) => {
let speciesObj = { ...species }
// 添加规格值
let speciesId = Date.now() + Math.floor(Math.random() * 1000)
let newSpeciesValue = {
speciesId: speciesId,
speciesTypeBizId: speciesObj.speciesTypeBizId,
isAdd: true,
value: '',
typeName: speciesObj.typeName,
isCustomize: speciesObj.isCustomize
}
if (species.isIllustration == '1') {
newSpeciesValue.isIllustration = '1'
newSpeciesValue.illustrationUrl = ''
} else {
newSpeciesValue.isIllustration = '0'
newSpeciesValue.illustrationUrl = ''
}
form.value.speciesData.forEach((item, index) => {
if (item.speciesTypeBizId == speciesObj.speciesTypeBizId) {
item.apiSpeciesSettingDtoList.forEach((item2, i) => {
if (item2.speciesId == speciesObj.speciesId && item2.isAdd) {
item.apiSpeciesSettingDtoList.push(newSpeciesValue)
item2.isAdd = false
}
})
}
})
}
// 配图开关切换
const switchBeforeChange = obj => {
return false
}
// 配图开关
const switchChange = (obj, type) => {
form.value.speciesData.forEach((item, index) => {
if (item.speciesTypeBizId == obj.speciesTypeBizId) {
if (type == 'close') {
if (obj.isIllustration == '0') {
item.isIllustration = '1'
} else if (obj.isIllustration == '1') {
item.isIllustration = '0'
}
} else {
item.isIllustration = obj.isIllustration
}
item.apiSpeciesSettingDtoList.forEach((item2, i) => {
item2.isIllustration = item.isIllustration
if (item.isIllustration == '0') {
item2.illustrationUrl = ''
}
})
}
})
}
// 规格下拉框切换
const changeSpeciesSelect = (obj, index) => {
//自定义规格只是把当前的规格给替换掉，并不是新增，写到这里了
let slefObj = { ...obj }
let newForm = { ...form.value }
const sameItem = speciesList.value.filter(item => {
if (item.speciesTypeBizId == slefObj.speciesName) {
return item
}
})
//更新form里对应的数据
newForm.speciesData.forEach((item, i) => {
let newSpecies = {}
if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
if (slefObj.speciesName.includes('customSpecies')) {
// 如果是自定义的要把自定义的数据替换成新的，
item.speciesTypeBizId = `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`
item.typeName = ''
item.isCustomize = '1'
newSpecies = { ...item }
} else {
item.isCustomize = '0'
item.speciesTypeBizId = slefObj.speciesName
item.typeName = sameItem[0].typeName
newSpecies = { ...sameItem[0] }
}
if (index == 0) {
newSpecies.isIllustration = '1'
} else {
newSpecies.isIllustration = '0'
}
item.apiSpeciesSettingDtoList = [
{ ...newSpecies, speciesId: Date.now() + Math.floor(Math.random() * 1000), isAdd: true }
]
}
})
form.value = newForm
// 由于规格下拉框切换的时候，规格值会重置，所以需要更新规格下拉框的值
getNewSpeciesOptions()
}
// 得到最新的规格下拉框数据
const getNewSpeciesOptions = () => {
const remainSpeciesOptins = getResidueSpecies()
if (remainSpeciesOptins.length > 0) {
form.value.speciesData.forEach(item => {
if (item.options) {
let newOptions = cloneDeep(remainSpeciesOptins)
item.options.forEach(option => {
if (item.speciesTypeBizId == option.speciesTypeBizId) {
newOptions.unshift(option)
}
})
item.options = newOptions
} else {
item.speciesName = remainSpeciesOptins[0].speciesTypeBizId
item.options = remainSpeciesOptins
}
})
}
}
// 改变规格自定义名字得时候，规格值得typeName要同步
const changCustomSpecies = obj => {
let newObj = { ...obj }
// 自定义规格的时候要看一下有没有重复的，如果有重复的就加错误信息，没有重复的就清空错误信息
let repeat = form.value.speciesData.filter(item => item.typeName == newObj.typeName)
form.value.speciesData.forEach((item, index) => {
if (item.speciesTypeBizId == newObj.speciesTypeBizId) {
if (repeat.length > 1) {
item.errorMsg = '规格名称不能重复'
} else if (!newObj.typeName && item.apiSpeciesSettingDtoList[0].value) {
item.errorMsg = '规格名称不能为空'
} else {
item.errorMsg = ''
}
item.apiSpeciesSettingDtoList.forEach((item2, i) => {
item2.typeName = newObj.typeName
})
}
})
}
// 删除规格
const deleteSpecies = obj => {
let slefObj = { ...obj }
form.value.speciesData.forEach((item, index) => {
if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
form.value.speciesData.splice(index, 1)
}
})
if (form.value.speciesData.length > 0) {
form.value.speciesData[0].isIllustration = '1'
form.value.speciesData[0].apiSpeciesSettingDtoList.forEach((item2, i) => {
item2.isIllustration = '1'
})
}
}
// 删除规格值
const deleteSpeciesValue = obj => {
let slefObj = { ...obj }
form.value.speciesData.forEach((item, index) => {
if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
item.apiSpeciesSettingDtoList.forEach((item2, i2) => {
if (item2.speciesId == slefObj.speciesId) {
item.apiSpeciesSettingDtoList.splice(i2, 1)
}
})
}
})
}
//规格设置下拉框
const getSpeciesSelect = () => {
speciesSelectList.value = []
let newArray = cloneDeep(form.value.speciesData)
newArray.forEach(item => {
if (item.typeName && item.apiSpeciesSettingDtoList[0].value) {
let newOptions = item.apiSpeciesSettingDtoList.filter(item2 => {
return item2.value
})
newOptions.unshift({
value: `全部${item.typeName}`,
speciesId: item.speciesTypeBizId,
type: 'all'
})
item.options = newOptions
speciesSelectList.value.push(item)
}
})
}
// 初始化选中状态，默认选中"全部"
const initSelectedValues = () => {
speciesSelectList.value.forEach(item => {
// 找到"全部"选项，类型为'all'
const allOption = item.options.find(opt => opt.type === 'all')
if (allOption) {
selectedValues.value[item.speciesTypeBizId] = allOption.speciesId
}
})
}
// 批量设置价格和库存
const handleBatchSet = () => {
if (!batchPrice.value && !batchInventory.value) {
proxy.$modal.msgError('请输入价格或库存')
return
}
// 获取当前选中的规格值
const currentSelections = {}
speciesSelectList.value.forEach(item => {
const speciesTypeBizId = item.speciesTypeBizId
const selectedValue = selectedValues.value[speciesTypeBizId]
currentSelections[speciesTypeBizId] = selectedValue
})
// 过滤需要更新的表格行
const filteredRows = tableData.value.filter(row => {
// 检查每一行是否满足所有规格条件
return Object.keys(currentSelections).every(speciesTypeBizId => {
const selectedValue = currentSelections[speciesTypeBizId]
// 如果选择的是"全部"（speciesId等于speciesTypeBizId）
if (selectedValue === speciesTypeBizId) {
// "全部"意味着匹配该规格的所有值
return true
}
// 否则检查具体值是否匹配
// 通过_id字段来匹配
const rowSpeciesId = row[`${speciesTypeBizId}_id`]
return rowSpeciesId === selectedValue
})
})
// 更新匹配的行
filteredRows.forEach(row => {
if (batchPrice.value !== '') {
row.price = Number(batchPrice.value)
}
if (batchInventory.value !== '') {
row.inventory = Number(batchInventory.value)
}
})
tableData.value.forEach(item => {
if (!item.price) {
item.priceErrorMsg = '请输入价格'
} else {
item.priceErrorMsg = ''
}
if (!item.inventory) {
item.inventoryErrorMsg = '请输入库存'
} else {
item.inventoryErrorMsg = ''
}
})
}
// 在生成speciesSelectList后调用
watch(
() => speciesSelectList.value,
() => {
if (speciesSelectList.value.length > 0) {
initSelectedValues()
}
},
{ immediate: true, deep: true }
)
// 生成所有规格组合（笛卡尔积）
const generateAllCombinations = specs => {
if (specs.length === 0) return []
const result = []
const firstSpec = specs[0]
const restSpecs = specs.slice(1)
// 如果还有剩余的规格，递归生成剩余规格的组合
const restCombinations = restSpecs.length > 0 ? generateAllCombinations(restSpecs) : [{}]
// 遍历第一个规格的每个值
for (let valueObj of firstSpec.apiSpeciesSettingDtoList) {
// 跳过空值（新增的空白项）
if (valueObj.value === '') continue
for (let restComb of restCombinations) {
let row = {
// 存储每个规格的值和ID
[firstSpec.speciesTypeBizId]: valueObj.value,
[`${firstSpec.speciesTypeBizId}_id`]: valueObj.speciesId,
speciesId: valueObj.speciesId,
speciesTypeBizId: firstSpec.speciesTypeBizId,
// 存储规格信息用于合并计算
_specs: {
[firstSpec.speciesTypeBizId]: {
value: valueObj.value,
typeName: firstSpec.typeName,
isIllustration: firstSpec.isIllustration,
speciesId: firstSpec.speciesId,
speciesTypeBizId: firstSpec.speciesTypeBizId,
isCustomize: firstSpec.isCustomize
}
}
}
// 添加剩余规格的值
for (let spec of restSpecs) {
row[spec.speciesTypeBizId] = restComb[spec.speciesTypeBizId]
row[`${spec.speciesTypeBizId}_id`] = restComb[`${spec.speciesTypeBizId}_id`]
row._specs[spec.speciesTypeBizId] = {
value: restComb[spec.speciesTypeBizId],
typeName: spec.typeName,
isIllustration: spec.isIllustration,
illustrationUrl: spec.illustrationUrl || '',
isCustomize: spec.isCustomize,
speciesTypeBizId: spec.speciesTypeBizId
}
if (!spec.speciesTypeBizId.includes('customSpecies')) {
row._specs[spec.speciesTypeBizId].speciesTypeBizId = spec.speciesTypeBizId
}
}
// 生成组合ID
const comboId = specs.map(spec => row[`${spec.speciesTypeBizId}_id`]).join('_')
row.comboId = comboId
// 如果有存储的数据，使用存储的数据
if (comboData.value[comboId]) {
row = { ...row, ...comboData.value[comboId] }
} else {
// 默认值
row.price = 0
row.inventory = 0
row.status = '1' // 1:上架, 0:下架
row.illustrationUrl = ''
}
if (valueObj.isIllustration && valueObj.isIllustration == '1') {
row.isIllustration = valueObj.isIllustration
}
if (valueObj.illustrationUrl) {
row.illustrationUrl = valueObj.illustrationUrl
}
if (valueObj.speciesId) {
row.speciesId = valueObj.speciesId
}
result.push(row)
}
}
return result
}
// 生成表格列配置
const generateTableColumns = specs => {
const columns = []
// 动态规格列
specs.forEach(spec => {
if (spec.typeName) {
columns.push({
prop: spec.speciesTypeBizId,
label: spec.typeName,
isSpec: true
})
}
})
return columns
}
// 计算合并单元格
const computeSpans = (data, specs) => {
const spans = []
let pos = 0
// 初始化
for (let i = 0; i < data.length; i++) {
spans[i] = []
for (let j = 0; j < specs.length; j++) {
spans[i][j] = { rowspan: 1, colspan: 1 }
}
}
// 对每个规格列进行处理
for (let j = 0; j < specs.length; j++) {
const specId = specs[j].speciesTypeBizId
let startRow = 0
for (let i = 1; i <= data.length; i++) {
// 需要比较当前行和上一行的值，以及前面规格的值
let same = true
for (let k = 0; k <= j; k++) {
const prevSpecId = specs[k].speciesTypeBizId
if (i < data.length && data[i][prevSpecId] !== data[i - 1][prevSpecId]) {
same = false
break
}
}
if (i === data.length || !same) {
// 从startRow到i-1行合并
for (let k = startRow; k < i; k++) {
if (k === startRow) {
spans[k][j].rowspan = i - startRow
} else {
spans[k][j].rowspan = 0
spans[k][j].colspan = 0
}
}
startRow = i
}
}
}
return spans
}
// 合并单元格方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
let newArray = cloneDeep(form.value.speciesData)
const specs = newArray.filter(item => item.typeName && item.apiSpeciesSettingDtoList[0].value)
if (columnIndex < specs.length && spans.value[rowIndex]) {
return [spans.value[rowIndex][columnIndex].rowspan, spans.value[rowIndex][columnIndex].colspan]
}
return [1, 1]
}
const spans = ref([])
// 生成表格数据
const generateTable = () => {
tableColumns.value = []
let newArray = cloneDeep(form.value.speciesData)
const specs = newArray.filter(item => item.typeName && item.apiSpeciesSettingDtoList[0].value)
// 生成列
tableColumns.value = generateTableColumns(specs)
// 生成行数据
tableData.value = generateAllCombinations(specs)
// 计算合并单元格
spans.value = computeSpans(tableData.value, specs)
if (isSettingSpeciesPrice.value) {
// 刚进来的时候，要根据详情中的apiSpeciesPriceDtoList去更新tableData中的价格和库存
let apiSpeciesPriceDtoList = cloneDeep(props.detailInfo.apiSpeciesPriceDtoList)
tableData.value.forEach((item1, index1) => {
apiSpeciesPriceDtoList.forEach((item2, index2) => {
if (index1 == index2) {
item1.status = String(item2.status)
item1.illustrationUrl = item2.illustrationUrl
item1.inventory = item2.inventory
item1.price = item2.price
}
})
})
isSettingSpeciesPrice.value = false
}
}
// 监听规格数据变化
watch(
() => form.value.speciesData,
(newVal, oldVal) => {
// 更新规格表格数据
generateTable()
//设置规格设置下拉框
getSpeciesSelect()
},
{ deep: true }
)
// ===========产品规格与库存相关操作结束===========
// ===========产品参数相关操作开始===========
const deleteParams = (item, index) => {
form.value.apiAttributeSettingDtoList.splice(index, 1)
// 还要处理每一项的leftOptions
getNewLeftOptions()
}
const deleteCustomParams = (item, index) => {
form.value.apiAttributeSettingDtoList.splice(index, 1)
}
const addParams = changeItem => {
let changeParam = { ...changeItem }
// 不要随意切换代码位置，会出现时机问题，会出现bug
// 正确的筛选逻辑：过滤出 form.value.apiAttributeSettingDtoList 中不存在的参数
const remainParams = getRemainData()
// 因为最后一个是自定义参数，所以加参加到最后一个直接走自定义参数的逻辑
if (!(changeParam.name && changeParam.name.includes('custom')) && remainParams.length > 1) {
// 按照 paramsList.value 的顺序，只添加第一个未添加的参数
form.value.apiAttributeSettingDtoList.push({
...remainParams[0],
isCustomize: '0',
leftOptions: remainParams, // 所有剩余参数作为 leftOptions
name: remainParams[0].fieldBizId
})
// 还要处理每一项的leftOptions
getNewLeftOptions()
} else {
let leftOptions = getRemainData()
// 因为这里添加自定义参数的时候，需要把之前的自定义参数先删除，在增加新的自定义参数，这样左侧的下拉框中的才能对应上
leftOptions.splice(leftOptions.length - 1, 1)
let fieldBizId = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
// 如果没有剩余参数，则添加自定义参数
const customParam = {
productLaunchBizId: route.query.productLaunchBizId, //产品上架信息表唯一业务ID
fieldBizId: fieldBizId, //字段表唯一业务ID
fieldValueBizId: '', //字段值表唯一业务ID
name: '', //字段名称
value: '', //字段值
isCustomize: '1', //是否自定义 0-否 1-是
fieldCnName: '自定义参数',
customValue: fieldBizId //自定义值
}
leftOptions.push(customParam)
customParam.leftOptions = leftOptions
form.value.apiAttributeSettingDtoList.push(customParam)
// 还要处理每一项的leftOptions,自定义的参数不需要处理,先暂时不处理，先放在这，需要处理的
// let remainLeftOptins = getRemainData().map(item => {
// if (!item.isCustomize) return item
// })
// remainLeftOptins.push(customParam)
// if (remainLeftOptins.length > 0) {
// form.value.apiAttributeSettingDtoList.forEach(item => {
// if (item.leftOptions && !item.isCustomize) {
// let newOptions = JSON.parse(JSON.stringify(remainLeftOptins))
// item.leftOptions.forEach(option => {
// if (item.fieldBizId == option.fieldBizId) {
// newOptions.unshift(option)
// }
// })
// item.leftOptions = newOptions
// }
// })
// }
}
// 处理必填提示
paramsErr()
}
// 给产品参数加必填提示
const paramsErr = () => {
let errorList = []
form.value.apiAttributeSettingDtoList.forEach(item => {
if (item.isCustomize == '0' && item.value.length == 0) {
item.fieldCnName = item.leftOptions[0].fieldCnName
item.errorMsg = `参数${item.fieldCnName}为必填项`
errorList.push({ msg: item.errorMsg })
} else if (item.isCustomize == '1') {
if (!item.name && !item.value) {
item.errorMsg = `参数名称不能为空，参数值不能为空`
errorList.push({ msg: item.errorMsg })
} else if (!item.name) {
item.errorMsg = `参数名称不能为空`
errorList.push({ msg: item.errorMsg })
} else if (!item.value) {
item.errorMsg = `参数值不能为空`
errorList.push({ msg: item.errorMsg })
} else {
item.errorMsg = ``
}
} else {
item.errorMsg = ``
}
})
return errorList
}
const getRemainData = () => {
const remainData = paramsList.value.filter(param => {
// 检查当前参数是否已经在 form.value.apiAttributeSettingDtoList 中
return !form.value.apiAttributeSettingDtoList.some(item => item.fieldBizId === param.fieldBizId)
})
return remainData
}
const getNewLeftOptions = () => {
const remainLeftOptins = getRemainData()
if (remainLeftOptins.length > 0) {
form.value.apiAttributeSettingDtoList.forEach(item => {
if (item.leftOptions) {
let newOptions = cloneDeep(remainLeftOptins)
item.leftOptions.forEach(option => {
if (item.fieldBizId == option.fieldBizId) {
newOptions.unshift(option)
}
})
item.leftOptions = newOptions
} else {
let newOptions = cloneDeep(remainLeftOptins)
let option = cloneDeep(paramsList.value).filter(
item2 => item.isCustomize == '0' && item2.fieldBizId == item.fieldBizId
)
if (option.length > 0) {
newOptions.unshift(option[0])
}
if (item.isCustomize == '1') {
item.customValue = '自定义参数'
}
item.leftOptions = newOptions
}
})
}
}
const changeLeft = (changeItem, index) => {
const currentItem = cloneDeep(changeItem)
//如果选择的是自定义参数，则走添加参数的流程
if (currentItem.name.includes('custom')) {
// 先删除掉form中的当前项
if (form.value.apiAttributeSettingDtoList.length > 0) {
form.value.apiAttributeSettingDtoList.splice(index, 1)
}
// 再添加自定义参数
addParams(currentItem)
return
}
// return
// 非自定义参数，切换下拉框的值
// 1.先在 paramsList.value 中查找是否有相同的项
const identicalItem = paramsList.value.find(item => item.fieldBizId === currentItem.name) //选择的当前项
// 判断form中fieldBizId和changeItem.fieldBizId，一致就更新掉form中的当前项的数据
form.value.apiAttributeSettingDtoList.forEach(item => {
if (item.fieldBizId == currentItem.fieldBizId) {
item.name = currentItem.name
for (const key in identicalItem) {
item[key] = identicalItem[key]
}
}
})
getNewLeftOptions()
}
const changeCustomLeft = (item, index) => {
const currentItem = { ...item }
//如果选择的是自定义参数，则走添加参数的流程
if (currentItem.customValue.includes('custom')) {
return
} else {
// 先删除掉form中的当前项
if (form.value.apiAttributeSettingDtoList.length > 0) {
form.value.apiAttributeSettingDtoList.splice(index, 1)
}
// 依据当前选择的customValue，去paramsList中查找对应的项再添加到form中
const identicalItem = paramsList.value.find(item => item.fieldBizId === currentItem.customValue) //选择的当前项
identicalItem.name = currentItem.customValue
identicalItem.leftOptions = getRemainData()
form.value.apiAttributeSettingDtoList.push(identicalItem)
// 还要处理每一项的leftOptions
getNewLeftOptions()
}
}
/** 获取产品参数信息 */
function getProductParamsInfo() {
productParams({ objectBizIdList: form.value.apiProductLaunchDto.categoryBizIdList }).then(
response => {
if (response.code == 200) {
// 应该做获取右侧的下拉框值了
paramsList.value = []
form.value.apiAttributeSettingDtoList = []
paramsList.value = response.data
const fieldBizIdList = response.data.map(item => item.fieldBizId)
if (paramsList.value.length > 0) {
paramsList.value.forEach(item => {
item.isCustomize = '0'
})
}
paramsList.value.push({
productLaunchBizId: route.query.productLaunchBizId, //产品上架信息表唯一业务ID
fieldBizId: `custom${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
fieldValueBizId: '', //字段值表唯一业务ID
name: '', //字段名称
value: '', //字段值
isCustomize: '1', //是否自定义 0-否 1-是
fieldCnName: '自定义参数'
})
// 赋值
if (props.detailInfo.apiAttributeSettingDtoList.length == 0) {
if (paramsList.value.length == 0) {
form.value.apiAttributeSettingDtoList.push({
...paramsList.value[0],
leftOptions: paramsList.value,
name: '',
customValue: paramsList.value[0].fieldBizId
})
}
// else {
// form.value.apiAttributeSettingDtoList.push({
// ...paramsList.value[0],
// leftOptions: paramsList.value,
// name: paramsList.value[0].fieldBizId
// })
// }
} else {
// 回显的时候没有leftOptions和middleOptions，需要赋值
form.value.apiAttributeSettingDtoList = cloneDeep(
props.detailInfo.apiAttributeSettingDtoList
)
form.value.apiAttributeSettingDtoList.forEach(item => {
if (item.isCustomize == '0' && item.textBoxType !== 'multipleSelect') {
item.name = item.fieldBizId
if (item.fieldValueBizId) {
item.value = item.fieldValueBizId
}
}
if (item.textBoxType == 'multipleSelect') {
item.value = item.value.split(';')
}
})
}
getNewLeftOptions()
RightParamsOptionList(fieldBizIdList)
} else {
proxy.$modal.msgError(response.msg)
}
}
)
}
/** 获取产品参数右侧汇总options */
function RightParamsOptionList(fieldBizIdList) {
ParamRightOptions({ fieldBizIdList }).then(response => {
if (response.code == 200) {
SummaryRightOptions.value = response.data
paramsList.value.forEach(item => {
SummaryRightOptions.value.forEach(item2 => {
if (item.fieldBizId == item2.fieldBizId) {
item.middleOptions = item2.fieldValueListResponseList
}
})
})
form.value.apiAttributeSettingDtoList.forEach(item => {
SummaryRightOptions.value.forEach(item2 => {
if (item.fieldBizId == item2.fieldBizId) {
item.middleOptions = item2.fieldValueListResponseList
}
})
})
} else {
proxy.$modal.msgError(response.msg)
}
})
}
// ===========产品参数相关操作结束===========
const handleFileChange = info => {
if (info.source == 'main') {
imageInfo.value = cloneDeep(info)
form.value['apiProductLaunchDto'].mainUrlsList = info.fileList.map(item => item.url)
} else if (info.source == 'sub') {
subImageInfo.value = cloneDeep(info)
form.value['apiProductLaunchDto'].detailUrlsList = info.fileList.map(item => item.url)
}
}
const handleSelectChange = () => {
if (
form.value['apiProductLaunchDto'].title &&
form.value['apiProductLaunchDto'].title.length < 5
) {
showNameTip.value = true
} else if (!form.value['apiProductLaunchDto'].title) {
showNameTip.value = true
} else {
showNameTip.value = false
}
}
/** 查询产品列表 */
function searchProduct(query) {
let productName = query ? query.trim() : ''
let data = {
productName: productName,
pageSize: showOnce.value ? 9999 : 10,
pageNo: 1
}
getProductList(data).then(response => {
if (response.code === 200) {
productList.value = response.data.records
if (showOnce.value) {
allProductList.value = response.data.records
showOnce.value = false
console.log('allProductList.value', allProductList.value)
}
} else {
productList.value = []
proxy.$modal.msgError(response.msg)
}
})
}
// ===========基础信息相关操作开始===========
const selectCategoryData = ref([]) //已经选择的分类数据
const categoryDialogOpen = ref(false) //已经选择的分类数据
const categoryRef = ref(null)
// 选择的分类名称
const categoryName = computed(() => {
let result = []
selectCategoryData.value.forEach(item => {
item.data.forEach(c => {
if (c.isSelected) result.push(c.name)
})
})
if (result.length > 0) {
return result.join(' > ')
} else {
return ''
}
})
/** 查询已经选中的分类列表 */
function getSelectCategory() {
let data = {
objectBizId: form.value['apiProductLaunchDto'].productLaunchBizId,
type: 'PRODUCT'
}
querySelectCategory(data).then(response => {
if (response.code === 200) {
response.data = response.data.map(item => {
item.data = item.selectedResponseList
return item
})
selectCategoryData.value = response.data
} else {
selectCategoryData.value = []
proxy.$modal.msgError(response.msg)
}
})
}
const categoryConfirm = () => {
selectCategoryData.value = categoryRef.value.categoryList
categoryDialogOpen.value = false
}
// ===========基础信息相关操作结束===========
/** 上架产品 保存接口*/
function submitProduct() {
let submitObj = {}
errorList.value = []
// 产品
// 类目信息form.value['apiProductLaunchDto'].categoryBizIdList对应的是 selectCategoryData
if (!form.value['apiProductLaunchDto'].title) {
errorList.value.push({ msg: '标题信息过少，请至少输入5个有效字数（含中文、英文、数字）' })
}
// 处理图片
if (
!form.value['apiProductLaunchDto'].mainUrlsList ||
form.value['apiProductLaunchDto'].mainUrlsList.length == 0
) {
errorList.value.push({ msg: '请上传至少三张产品主图' })
}
if (
!form.value['apiProductLaunchDto'].detailUrlsList ||
form.value['apiProductLaunchDto'].detailUrlsList.length == 0
) {
errorList.value.push({ msg: '请上传至少一张产品详情图' })
}
//处理产品参数
let paramsErrors = paramsErr()
if (paramsErrors.length > 0) {
errorList.value.push(...paramsErrors)
}
// 处理产品参数
let apiAttributeSettingDtoList = cloneDeep(form.value.apiAttributeSettingDtoList)
apiAttributeSettingDtoList.forEach(item => {
if (!item.isCustomize) {
item.isCustomize = '0'
}
if (item.leftOptions) {
item.leftOptions.forEach(item2 => {
if (item.name == item2.fieldBizId) {
item.name = item2.fieldCnName
}
})
}
if (item.middleOptions) {
item.middleOptions.forEach(item2 => {
if (item.value == item2.fieldValueBizId) {
item.fieldValueBizId = item2.fieldValueBizId
item.value = item2.value
}
})
}
if (item.textBoxType == 'multipleSelect') {
item.value = item.value.join(';')
}
item.productLaunchBizId = form.value['apiProductLaunchDto'].productLaunchBizId
delete item.leftOptions
delete item.middleOptions
})
// 处理产品规格和库存
// 处理规格列表
let apiSpeciesSettingDtoList = []
let newData = cloneDeep(form.value.speciesData)
if (newData.length == 0) {
proxy.$modal.msgError('请添加产品规格')
return
}
newData.forEach(item => {
if (item.errorMsg) {
errorList.value.push({ msg: item.errorMsg })
}
item.apiSpeciesSettingDtoList.forEach(item2 => {
item2.productLaunchBizId = form.value['apiProductLaunchDto'].productLaunchBizId
if (item2.isCustomize == '1' && item2.value) {
apiSpeciesSettingDtoList.push({
typeName: item2.typeName,
value: item2.value,
isIllustration: item2.isIllustration,
illustrationUrl: item2.illustrationUrl,
isCustomize: item2.isCustomize,
productLaunchBizId: form.value['apiProductLaunchDto'].productLaunchBizId
})
} else if (item2.isCustomize == '0' && item2.value) {
apiSpeciesSettingDtoList.push(item2)
}
})
})
// 处理价格库存列表
let apiSpeciesPriceDtoList = []
tableData.value.forEach(item => {
if (!item.price) {
item.priceErrorMsg = '请输入价格'
} else {
item.priceErrorMsg = ''
}
if (!item.inventory) {
item.inventoryErrorMsg = '请输入库存'
} else {
item.inventoryErrorMsg = ''
}
if (!item.price || !item.inventory) {
errorList.value.push({ msg: item.priceErrorMsg || item.inventoryErrorMsg })
}
})
let newPrice = cloneDeep(tableData.value)
newPrice.forEach(item => {
item.apiSpeciesSettingDtoList = []
for (let key in item._specs) {
speciesList.value.forEach(spec => {
if (spec.speciesTypeBizId == key) {
item._specs[key].typeCode = spec.typeCode
}
})
item.apiSpeciesSettingDtoList.push(item._specs[key])
}
apiSpeciesPriceDtoList.push({
productLaunchBizId: form.value['apiProductLaunchDto'].productLaunchBizId,
price: item.price, //价格
inventory: item.inventory, //库存
illustrationUrl: item.illustrationUrl, //配图url
status: item.status, //状态：0=下架，1=上架
apiSpeciesSettingDtoList: item.apiSpeciesSettingDtoList
})
})
if (errorList.value.length > 0) {
errorDialogOpen.value = true
return
} else {
errorDialogOpen.value = false
}
// 处理类目数据
form.value['apiProductLaunchDto'].categoryBizIdList = []
selectCategoryData.value.forEach(item => {
if (item.data) {
item.data.forEach(item2 => {
if (item2.isSelected) {
form.value['apiProductLaunchDto'].categoryBizIdList.push(item2.categoryBizId)
}
})
}
})
// 处理平台数据
let projectBizIdList = []
choosePlatformList.value.forEach(item => {
projectBizIdList.push(item.projectBizId)
})
form.value['apiProductLaunchDto'].projectBizIdList = projectBizIdList
// 处理定期开售
if (form.value['apiProductLaunchDto'].isTiming == '0') {
form.value['apiProductLaunchDto'].releaseDate = ''
form.value['apiProductLaunchDto'].isHiddenPrice = ''
} else if (form.value['apiProductLaunchDto'].isTiming == '1') {
form.value['apiProductLaunchDto'].isHiddenPrice = form.value['apiProductLaunchDto']
.isHiddenPrice
? '1'
: '0'
}
// 处理限购
if (form.value['apiProductLaunchDto'].isPurchaseLimit == '0') {
form.value['apiProductLaunchDto'].limitDateUnit = ''
form.value['apiProductLaunchDto'].limitQuantity = ''
}
submitObj.apiAttributeSettingDtoList = apiAttributeSettingDtoList
submitObj.apiSpeciesSettingDtoList = apiSpeciesSettingDtoList
submitObj.apiSpeciesPriceDtoList = apiSpeciesPriceDtoList
submitObj.apiProductLaunchDto = form.value['apiProductLaunchDto']
if (route.query.source && route.query.source == 'copy') {
submitObj.source = 1
} else {
submitObj.source = null
}
if (form.value['apiProductLaunchDto'].title) {
allProductList.value.forEach(item => {
if (item.productBizId == form.value['apiProductLaunchDto'].title) {
submitObj.apiProductLaunchDto.title = item.productName
submitObj.apiProductLaunchDto.productBizId = item.productBizId
}
})
}
// return
saveProductLaunch(submitObj).then(response => {
if (response.code === 200) {
if (route.query.source && route.query.source == 'copy') {
proxy.$modal.msgSuccess('产品复制成功')
emit('handleSuccess', 'baseInfo', response.data)
} else {
proxy.$modal.msgSuccess('产品上架成功')
emit('handleSuccess', 'baseInfo')
}
} else {
proxy.$modal.msgError(response.msg)
}
})
}
watch(
() => props.detailInfo,
newVal => {
if (newVal) {
form.value.apiProductLaunchDto = cloneDeep(newVal.apiProductLaunchDto)
imageInfo.value.count = form.value['apiProductLaunchDto'].mainUrlsList.length
subImageInfo.value.count = form.value['apiProductLaunchDto'].detailUrlsList.length
// 给平台赋值
if (form.value['apiProductLaunchDto'].apiProjectDtoList) {
choosePlatformList.value = cloneDeep(form.value['apiProductLaunchDto'].apiProjectDtoList)
// 更新已选择的ID集合
selectedPlatformIds.value = new Set(choosePlatformList.value.map(item => item.projectBizId))
}
if (newVal.apiSpeciesPriceDtoList.length > 0) {
isSettingSpeciesPrice.value = true
}
if (form.value['apiProductLaunchDto'].isHiddenPrice) {
form.value['apiProductLaunchDto'].isHiddenPrice =
form.value['apiProductLaunchDto'].isHiddenPrice == '1' ? true : false
}
getSelectCategory() // 获取已经选中的分类
/**
* 参数操作：
* 1.先拿到所有参数信息，默认只展示参数列表的第一个，用拿到的所有参数的fieldBizId去请求所有右侧下拉框的options
* 2.第一个参数列表的options也就是左侧的下拉框是参数列表的所有数据，当选了某一个option,下拉框里就没有当前选择的这个option了
* 3.当点击添加参数时，左侧下拉框是除了已经添加的参数外的paramsList外剩余的参数，右侧下拉框是当前参数对应的options
* 回显注意：
* 4.当回显的时候需要依据详情的值对form进行赋值,这一步还未做，等做编辑的时候再做
*/
getProductParamsInfo()
/**
* 产品规格操作
* 1.先拿到所有规格信息，创建新规格默认只展示规格列表的第一个
*/
getProductSpeciesInfo()
showOnce.value = true
searchProduct()
}
}
)
watch(
() => props.activeName,
newVal => {
if (newVal == 'baseInfo') {
// searchProduct()
}
}
)
</script>
<style lang="scss" scoped>
.baseBox {
width: 100%;
box-sizing: border-box;
height: 100%;
/* background-color: rgb(247 247 247) !important; */
/* padding: 0 !important; */
/* height: 500px !important;
overflow: hidden;
overflow-y: scroll; */
}
.cardStyle {
margin-bottom: 20px;
border: none !important;
}
.cardTitle {
font-size: 17px;
font-weight: 600;
}
.chooseClass {
font-size: 14px;
margin: 0px 10px;
}
.editTxt {
font-size: 14px;
color: #576b95;
}
.colBottomGap {
margin-bottom: 30px;
}
.form-content {
width: 100%;
box-sizing: border-box;
height: 73vh;
overflow: hidden;
overflow-y: scroll;
padding: 10px 10px;
}
.form-content :deep(.el-card) {
border: none !important;
}
.formHeader {
margin-bottom: 20px;
font-size: 22px;
font-weight: 600;
}
.nameTip {
font-size: 13px;
margin-top: 10px;
}
.tipCon {
/* width: 450px; */
width: fit-content;
/* 为了更好的兼容性，可以加上带前缀的版本 */
width: -moz-fit-content;
width: -webkit-fit-content;
margin: 5px 0;
padding: 10px 10px;
border-radius: 5px;
background-color: rgb(247 247 247);
font-size: 14px;
display: flex;
align-items: center;
span {
color: rgb(111 111 111);
}
}
.commonHeader {
font-size: 16px;
margin-bottom: 15px;
}
.imgTip {
color: #ccc;
font-size: 14px;
margin-bottom: 10px;
}
.classTip {
color: #ccc;
font-size: 14px;
}
.bottomBtn {
border-top: 1px solid rgb(247 247 247);
width: 100%;
padding: 10px 20px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #fff;
}
.paramsItem {
display: flex;
align-items: center;
border: 1px solid rgb(0 0 0 / 10%);
border-radius: 3px;
/* margin-bottom: 20px; */
}
.paramsItem:hover {
border-color: rgba(64, 158, 255, 1);
}
.paramsLeft {
border-right: 1px solid rgb(0 0 0 / 10%);
}
.paramsRight {
border-left: 1px solid rgb(0 0 0 / 10%);
display: flex;
align-items: center;
justify-content: center;
height: 32px;
background-color: #f7f7f7;
}
/* 通用：去除 el-select 和 el-input 的外框 */
.paramsItem :deep(.el-input__wrapper) {
box-shadow: none !important;
}
.paramsItem :deep(.el-select__wrapper) {
box-shadow: none !important;
}
/* 专门针对 el-select：去除获得焦点时的蓝色外框 */
.paramsItem :deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: none !important;
}
/* 专门针对 el-input：去除获得焦点时的蓝色外框 */
.paramsItem :deep(.el-input .el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.customMiddle {
border-left: 1px solid rgb(0 0 0 / 10%);
}
.errorParams {
background-color: #f7f7f7;
padding: 10px;
border-radius: 5px;
font-size: 14px;
margin: 10px 0px;
display: flex;
align-items: center;
}
.addTxt {
color: #576b95;
font-size: 15px;
display: flex;
align-items: center;
margin-top: 20px;
}
.speciesItem {
background-color: #f7f7f7;
padding: 10px 20px;
margin: 15px 0px;
border-radius: 5px;
}
.speciesTop {
margin-top: 10px;
}
.imgSwitch {
color: rgb(0 0 0 / 55%);
font-size: 14px;
}
.speciesTop {
display: flex;
align-items: center;
justify-content: space-between;
}
.speciesTopLeft {
display: flex;
/* align-items: center; */
}
.customizeInput {
margin-left: 20px;
}
.customizeErrorMsg {
margin-top: 5px;
font-size: 14px;
color: #fa5151;
}
.speciesTopRight {
display: flex;
align-items: center;
justify-content: center;
/* padding: 5px; */
border-radius: 50%;
border: 1px solid rgb(0 0 0 / 10%);
width: 40px;
height: 40px;
}
.speciesLeft {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
}
.required-label::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
}
.speciesSelect {
margin-bottom: 10px;
display: flex;
}
.settingBox {
display: flex;
}
.settingItem {
width: 220px;
margin-right: 20px;
}
.settingLeft {
color: rgb(0 0 0 / 50%);
font-size: 14px;
text-align: center;
width: 25%;
}
.settingRight {
width: 80%;
}
.errMsg {
color: #f56c6c;
font-size: 12px;
}
.moreBox {
margin-bottom: 20px;
}
.moreTitle {
font-size: 17px;
font-weight: 500;
}
.moreItem {
display: flex;
align-items: center;
justify-content: flex-start;
color: rgb(0 0 0 / 90%);
margin-top: 10px;
font-size: 14px;
}
.moreLeft {
width: 5%;
}
.categoryDialogFooter {
margin-top: 50px;
}
.errorContent {
height: 450px;
overflow-y: scroll;
/* overflow: hidden; */
}
.errorTitle {
font-size: 13px;
color: rgba(0, 0, 0, 50%);
}
.errorItem {
padding: 10px;
background-color: #f7f7f7;
margin: 10px 0px;
border-radius: 5px;
width: 100%;
font-size: 12px;
display: flex;
align-items: center;
}
</style>
src/views/merchandise/components/sendInfo.vue 0 → 100644
<template>
<div class="app-container">
<el-row style="margin-bottom: 20px">
<el-col style="display: flex; justify-content: space-between"
><div>
<el-button type="primary" plain icon="Refresh" @click="updateSpecies">更新规格</el-button>
</div>
</el-col>
</el-row>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
row-key="rowKey"
>
<!-- 动态生成所有列 -->
<template v-for="column in tableColumns" :key="column.prop">
<el-table-column :prop="column.prop" :label="column.label" />
</template>
<!-- 固定操作列 -->
<el-table-column
label="操作"
:width="tableData.length > 0 ? 180 : 0"
align="center"
fixed="right"
>
<template #default="scope">
<el-button type="primary" size="small" @click="handleCommissionSetting(scope.row)">
佣金设置
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getSpeciesList"
style="margin-top: 10px"
/>
<!-- 佣金设置 -->
<el-dialog
title="佣金设置"
v-model="showCommisionSetting"
width="1200px"
append-to-body
:close-on-click-modal="false"
>
<el-form :model="settingQueryParams" ref="settingQueryRef" :inline="true" label-width="68px">
<!-- <el-form-item label="项目名称" prop="projectName">
<el-input
v-model="platFormQueryParams.projectName"
placeholder="请输入项目名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="searchPlatformTable">搜索</el-button>
<el-button icon="Refresh" @click="paltformReset">重置</el-button>
</el-form-item> -->
</el-form>
<!-- 表格数据 -->
<el-table v-loading="settingLoading" :data="settingList" border ref="settingTableRef">
<el-table-column
label="序号 "
width="55"
align="center"
type="index"
fixed="left"
></el-table-column>
<el-table-column label="费用名称" prop="expenseName" width="150" fixed="left">
<template #header>
<span class="required-label">费用名称</span>
</template>
<template #default="scope">
<el-select v-model="scope.row.expenseName" placeholder="请选择">
<el-option
v-for="item in commission_cost_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="佣金年限(起)" prop="startPeriod" width="120">
<template #header>
<span class="required-label">佣金年限(起)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.startPeriod"
type="number"
placeholder="请输入"
:min="1"
clearable
@input="handleNumberInput(scope.row, 'startPeriod', 'positive')"
@blur="handlePeriodBlur(scope.row, scope.$index, 'startPeriod')"
/>
</template>
</el-table-column>
<el-table-column label="佣金年限(止)" prop="endPeriod" width="120">
<template #header>
<span class="required-label">佣金年限(止)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.endPeriod"
type="number"
:min="1"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'endPeriod', 'positive')"
@blur="handlePeriodBlur(scope.row, scope.$index, 'endPeriod')"
/>
</template>
</el-table-column>
<el-table-column label="佣金率(%)" prop="commissionRate" width="120">
<template #header>
<span class="required-label">佣金率(%)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.commissionRate"
type="number"
:min="0"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'commissionRate', 'non-negative')"
/>
</template>
</el-table-column>
<el-table-column label="折标系数(%)" prop="discountRatio" width="120">
<template #header>
<span class="required-label">折标系数(%)</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.discountRatio"
type="number"
:min="0"
placeholder="请输入"
clearable
@input="handleNumberInput(scope.row, 'discountRatio', 'non-negative')"
/>
</template>
</el-table-column>
<el-table-column label="生效日期(起)" prop="effectiveStart" width="150">
<template #header>
<span class="required-label">生效日期(起)</span>
</template>
<template #default="scope">
<el-date-picker
v-model="scope.row.effectiveStart"
style="width: 100%"
type="date"
placeholder="请选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="handleStartDateChange(scope.row, scope.$index)"
/>
</template>
</el-table-column>
<el-table-column label="生效日期(止)" prop="effectiveEnd" width="150">
<template #header>
<span class="required-label">生效日期(止)</span>
</template>
<template #default="scope">
<el-date-picker
v-model="scope.row.effectiveEnd"
style="width: 100%"
type="date"
placeholder="请选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="handleEndDateChange(scope.row, scope.$index)"
/>
</template>
</el-table-column>
<el-table-column label="适用范围" prop="scope" width="300">
<template #header>
<span class="required-label">适用范围</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.scope"
style="width: 100%"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
placeholder="请选择"
clearable
>
<el-option
v-for="item in commission_scope_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="是否受汇率影响" prop="isExchangeRate" width="150">
<template #header>
<span class="required-label">是否受汇率影响</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.isExchangeRate"
style="width: 100%"
placeholder="请选择"
clearable
>
<el-option
v-for="item in sys_no_yes"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="结算币种" prop="currency" width="120">
<template #header>
<span class="required-label">结算币种</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.currency"
style="width: 100%"
placeholder="请选择"
clearable
>
<el-option
v-for="item in bx_currency_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="状态" prop="status" width="120">
<template #header>
<span class="required-label">状态</span>
</template>
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-value="1"
inactive-value="0"
@change="switchChange(scope.row)"
/>
<span style="margin-left: 8px">
{{ scope.row.status === '1' ? '启用' : '禁用' }}
</span>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" width="200">
<template #default="scope">
<el-input v-model="scope.row.remark" type="textarea" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column label="最近一次操作人" prop="updaterName" width="120" />
<el-table-column label="最近一次操作时间" prop="updateTime" width="160">
<template #default="scope">
<span>{{ scope.row.updateTime ? parseTime(scope.row.updateTime) : '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right">
<template #default="scope">
<div class="btnCon">
<el-button
v-if="scope.$index == settingList.length - 1"
@click="handleAddCommission(scope.row)"
text
size="small"
type="primary"
>新增</el-button
>
<el-button
text
size="small"
type="danger"
@click="handleDeleteCommission(scope.row, scope.$index)"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeSetting">关闭</el-button>
<el-button type="primary" @click="submitSetting">提 交</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="佣金设置错误提示" v-model="errorTip" width="500px" append-to-body>
<div style="margin-bottom: 10px" v-for="item in settingErrorTip">{{ item }}</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="errorTip = false">去修改</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="SendInfo">
import { cloneDeep } from 'lodash-es'
import {
exportSpecies,
sendSpecies,
sendCommissionRatio,
saveBatchSendCommission,
deleteCommission,
changeSendStatus
} from '@/api/product/index'
import { ref, watch } from 'vue'
const props = defineProps({
// 类型，是新增还是编辑,
activeName: {
type: String,
default: ''
}
})
const route = useRoute()
const { proxy } = getCurrentInstance()
const loading = ref(true)
const settingLoading = ref(true)
const total = ref(0) //规格表格的总条数
const settingTotal = ref(0) //规格表格的总条数
const dateRange = ref([])
const showCommisionSetting = ref(false) //佣金设置弹窗开关
const errorTip = ref(false) //佣金设置弹窗开关
const settingList = ref([]) //佣金设置表格数据
const currentSettingRow = ref([]) //当前选中的佣金设置行
const settingErrorTip = ref([]) //提交佣金错误提示信息
const data = reactive({
queryParams: {
pageNo: 1,
pageSize: 10,
productLaunchBizId: route.query.productLaunchBizId
},
settingQueryParams: {
pageNo: 1,
pageSize: 9999
}
})
const { queryParams, settingQueryParams } = toRefs(data)
const { bx_currency_type, commission_scope_type, commission_cost_type, sys_no_yes, sys_status } =
proxy.useDict(
'bx_currency_type',
'commission_scope_type',
'commission_cost_type',
'sys_no_yes',
'sys_status'
)
const switchChange = row => {
if (!row.announcementCommissionRatioBizId) {
return
}
try {
changeSendStatus({
announcementCommissionRatioBizId: row.announcementCommissionRatioBizId,
status: Number(row.status)
}).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess('状态修改成功')
}
})
} catch (error) {
row.status = row.status === '1' ? '0' : '1'
}
}
const handleDeleteCommission = (row, index) => {
if (settingList.value.length === 1) {
proxy.$modal.msgError('至少保留一条佣金设置数据')
return
}
proxy.$modal
.confirm(`是否确认删除第${index + 1}行数据?`)
.then(function () {
if (row.announcementCommissionRatioBizId) {
deleteCommission(row.announcementCommissionRatioBizId).then(response => {
if (response.code === 200) {
settingList.value.splice(index, 1)
} else {
proxy.$modal.msgError(response.msg)
}
})
} else {
settingList.value.splice(index, 1)
}
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}
const handleNumberInput = (row, field, type = 'positive') => {
const value = row[field]
if (value === null || value === undefined || value === '') return
let numValue = Number(value)
if (isNaN(numValue)) {
row[field] = null
return
}
if (type === 'positive') {
// 正整数：移除负号和小数部分
if (numValue <= 0) {
row[field] = null
return
}
// 取整数部分
row[field] = Math.floor(Math.abs(numValue))
} else if (type === 'non-negative') {
// 非负数：允许0及以上，不允许负数
if (numValue < 0) {
row[field] = 0
}
}
}
// 处理开始日期变化
const handleStartDateChange = (row, index) => {
if (row.effectiveStart && row.effectiveEnd) {
const start = new Date(row.effectiveStart)
const end = new Date(row.effectiveEnd)
if (start > end) {
proxy.$modal.msgError(
`第${index + 1}行：生效日期(起)不能晚于生效日期(止),请重新选择生效日期(起)`
)
// 清空结束日期，让用户重新选择
setTimeout(() => {
row.effectiveStart = ''
}, 0)
}
}
}
// 处理结束日期变化
const handleEndDateChange = (row, index) => {
console.log('时间', row)
if (row.effectiveStart && row.effectiveEnd) {
const start = new Date(row.effectiveStart)
const end = new Date(row.effectiveEnd)
if (end < start) {
proxy.$modal.msgError(
`第${index + 1}行：生效日期(止)不能早于生效日期(起),请重新选择生效日期(止)`
)
// 清空开始日期，让用户重新选择
setTimeout(() => {
row.effectiveEnd = ''
}, 0)
}
}
}
const handlePeriodBlur = (row, index, key) => {
if (row.startPeriod && row.endPeriod && row.startPeriod > row.endPeriod) {
proxy.$modal.msgError(`第${index + 1}行：佣金开始年限不能大于佣金结束年限,请重新填写`)
row[key] = ''
row.unadd = true
} else {
row.unadd = false
}
console.log('年限', row)
}
const handleAddCommission = row => {
let newRow = cloneDeep(row)
let obj = {}
// 复制当前条的数据
for (const key in newRow) {
if (key !== 'startPeriod' && key !== 'endPeriod' && key !== 'commissionRate') {
obj[key] = newRow[key]
} else {
obj[key] = ''
}
}
if (!row.unadd) {
settingList.value.push(obj)
}
}
const closeSetting = () => {
showCommisionSetting.value = false
settingQueryParams.value = {
pageNo: 1,
pageSize: 9999
}
}
// 批量提交佣金设置
const submitSetting = async () => {
// 校验表格数据
const validationResult = validateTableData()
if (!validationResult.valid) {
proxy.$modal.msgError(validationResult.message)
return
}
let saveTable = cloneDeep(settingList.value)
saveTable.forEach(row => {
if (row.scope.length > 0) {
row.scope = row.scope.join(';')
}
})
console.log('saveTable', saveTable)
// return
try {
saveBatchSendCommission({
announcementSpeciesBizId: currentSettingRow.value.announcementSpeciesBizId,
ratioBatchSaveDtoList: saveTable
}).then(response => {
console.log('response', response)
if (response.code === 200) {
showCommisionSetting.value = false
proxy.$modal.msgSuccess('提交成功')
} else if (response.code === 1004) {
if (response.msg) {
settingErrorTip.value = response.msg.split('\n').filter(item => item !== '')
}
errorTip.value = true
}
})
} catch (error) {
console.log('错误了', error)
}
}
// 表格数据校验函数
const validateTableData = () => {
const errors = []
const requiredFields = [
{ key: 'expenseName', label: '费用名称' },
{ key: 'startPeriod', label: '佣金年限(起)' },
{ key: 'endPeriod', label: '佣金年限(止)' },
{ key: 'commissionRate', label: '佣金率(%)' },
{ key: 'discountRatio', label: '折标系数(%)' },
{ key: 'effectiveStart', label: '生效日期(起)' },
{ key: 'effectiveEnd', label: '生效日期(止)' },
{ key: 'scope', label: '适用范围' },
{ key: 'isExchangeRate', label: '是否受汇率影响' },
{ key: 'currency', label: '结算币种' },
{ key: 'status', label: '状态' }
]
settingList.value.forEach((row, index) => {
requiredFields.forEach(field => {
const value = row[field.key]
let isValid = true
if (Array.isArray(value)) {
isValid = value.length > 0
} else {
isValid = value !== null && value !== undefined && value !== ''
}
if (!isValid) {
errors.push({
rowIndex: index,
field: field.key,
label: field.label,
rowNumber: index + 1
})
}
})
})
if (errors.length === 0) {
return { valid: true }
}
// 生成友好的错误提示信息
const errorMessages = errors
.slice(0, 3)
.map(error => `第${error.rowNumber}行【${error.label}】未填写`)
let message = errorMessages.join('；')
if (errors.length > 3) {
message += `等，共${errors.length}处必填项未填写`
}
return {
valid: false,
errors,
message
}
}
/** 获得佣金设置数据 */
function getSettingList() {
settingLoading.value = true
let obj = {
expenseName: '',
startPeriod: '',
endPeriod: '',
commissionRate: '',
discountRatio: '',
effectiveStart: '',
effectiveEnd: '',
scope: '',
isExchangeRate: '',
currency: '',
status: '',
remark: ''
}
settingList.value = []
settingQueryParams.value.announcementSpeciesBizId =
currentSettingRow.value.announcementSpeciesBizId
sendCommissionRatio(settingQueryParams.value).then(response => {
if (response.code === 200) {
if (response.data.records.length > 0) {
settingList.value = response.data.records
settingList.value.forEach(row => {
if (row.scope) {
row.scope = row.scope.split(';')
}
row.status = row.status === 1 ? '1' : row.status === 0 ? '0' : ''
})
} else {
settingList.value.push(obj)
}
settingTotal.value = response.data.total
settingLoading.value = false
showCommisionSetting.value = true
} else {
settingLoading.value = false
proxy.$modal.msgError(response.msg)
}
})
}
// 原始数据
const originalData = ref([])
// 表格列配置
const tableColumns = ref([])
// 表格数据
const tableData = ref([])
// 合并行配置，存储每列需要合并的行数
const spanConfig = ref({})
// 从数据中提取所有可能的列
const extractColumnsFromData = data => {
const columnSet = new Map()
data.forEach(item => {
try {
if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
item.apiSpeciesSettingDtoList.forEach(species => {
if (!columnSet.has(species.typeCode)) {
columnSet.set(species.typeCode, {
prop: species.typeCode,
label: species.typeName,
width: species.typeName.length * 15 + 30,
align: 'center',
sortable: false
})
}
})
}
} catch (e) {
console.log('计算列失败', e)
}
})
// 将 Map 转换为数组并按 typeCode 排序（可选）
return Array.from(columnSet.values())
}
// 处理数据，生成表格需要的格式
const processTableData = () => {
if (!originalData.value || originalData.value.length === 0) {
tableData.value = []
spanConfig.value = {}
return
}
console.log('originalData.value', originalData.value)
// 1. 提取所有列
const columns = extractColumnsFromData(originalData.value)
tableColumns.value = columns
// 2. 转换数据格式
const processedData = []
originalData.value.forEach((item, index) => {
const rowData = {
rowKey: `${item.id}_${index}`, // 生成唯一 rowKey
id: item.id, // 保留原始ID
rawData: item // 保留原始数据
}
// 填充所有列的值
columns.forEach(column => {
try {
if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
const matchedSpecies = item.apiSpeciesSettingDtoList.find(s => s.typeCode === column.prop)
rowData[column.prop] = matchedSpecies ? matchedSpecies.value : ''
} else {
rowData[column.prop] = ''
}
} catch (e) {
console.log('填充所有列的值失败', e)
}
})
processedData.push(rowData)
})
// 3. 计算合并配置
calculateSpanConfig(processedData, columns)
tableData.value = processedData
}
// 计算合并配置
const calculateSpanConfig = (data, columns) => {
const config = {}
// 为每一列计算合并配置
columns.forEach((column, columnIndex) => {
config[column.prop] = []
let pos = 0
while (pos < data.length) {
const currentValue = data[pos][column.prop]
let rowspan = 1
// 向后查找相同值的行
for (let i = pos + 1; i < data.length; i++) {
// 只有当该列之前的所有列的值都相同时才合并
let shouldMerge = true
for (let j = 0; j < columnIndex; j++) {
const prevColumn = columns[j]
if (data[pos][prevColumn.prop] !== data[i][prevColumn.prop]) {
shouldMerge = false
break
}
}
if (shouldMerge && data[i][column.prop] === currentValue) {
rowspan++
} else {
break
}
}
// 记录合并配置
config[column.prop][pos] = rowspan
// 跳过已经计算的行
pos += rowspan
}
// 填充剩余的配置为0（不合并）
for (let i = 0; i < data.length; i++) {
if (!config[column.prop][i]) {
config[column.prop][i] = 0
}
}
})
spanConfig.value = config
}
// 合并单元格的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
// 最后一列是操作列，不合并
if (columnIndex === tableColumns.value.length) {
return {
rowspan: 1,
colspan: 1
}
}
const columnProp = tableColumns.value[columnIndex].prop
const rowspan = spanConfig.value[columnProp]?.[rowIndex] || 0
if (rowspan > 0) {
return {
rowspan: rowspan,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
// 佣金设置操作
const handleCommissionSetting = row => {
currentSettingRow.value = row.rawData
console.log('佣金设置', currentSettingRow.value)
getSettingList()
}
/** 获得规格数据 */
function getSpeciesList() {
loading.value = true
sendSpecies(queryParams.value).then(response => {
if (response.code === 200) {
originalData.value = response.data.records
total.value = response.data.total
loading.value = false
if (originalData.value.length == 0) {
proxy.$modal.msgError('该商品暂无规格数据，请先更新规格数据')
} else {
let codeArr = []
// 自定义没有typeCode影响表格得展示
originalData.value[0].apiSpeciesSettingDtoList.forEach((item, index) => {
if (item.isCustomize == '1') {
item.typeCode = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
codeArr.push({ index: index, code: item.typeCode })
}
})
originalData.value.forEach((item, oIndex) => {
item.apiSpeciesSettingDtoList.forEach((species, sIndex) => {
if (codeArr.length > 0) {
codeArr.forEach(codeItem => {
if (codeItem.index == sIndex) {
species.typeCode = codeItem.code
}
})
}
})
})
}
// 计算表格
processTableData()
} else {
proxy.$modal.msgError(response.msg)
}
})
}
/** 更新规格数据 */
function updateSpecies() {
loading.value = true
exportSpecies({ productLaunchBizId: route.query.productLaunchBizId }).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess('发佣管理-规格更新成功')
getSpeciesList()
} else {
proxy.$modal.msgError(response.msg)
}
})
}
//========多选下拉框悬停效果结束=========
watch(
() => props.activeName,
newVal => {
if (newVal == 'sendCommission') {
getSpeciesList()
}
}
)
</script>
<style lang="scss" scoped>
.required-label::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
}
.btnCon {
display: flex;
align-items: center;
justify-content: center;
}
/* 错误行样式 */
.error-row {
background-color: #fff2f0 !important;
animation: highlight 0.6s ease-in-out;
}
/* 错误字段高亮 */
.error-field :deep(.el-input__wrapper) {
border-color: #f56c6c !important;
box-shadow: 0 0 0 1px #f56c6c !important;
}
.error-field :deep(.el-input__inner) {
color: #f56c6c;
}
.error-field :deep(.el-select__wrapper) {
border-color: #f56c6c !important;
box-shadow: 0 0 0 1px #f56c6c !important;
}
/* 闪烁动画吸引用户注意力 */
@keyframes highlight {
0%,
50% {
background-color: #fff2f0;
}
25%,
75% {
background-color: #ffeaea;
}
100% {
background-color: #fff2f0;
}
}
/* 错误提示消息样式 */
.validation-message-box {
:deep(.el-message-box__content) {
max-height: 400px;
overflow-y: auto;
}
}
</style>
src/views/merchandise/productsList.vue 0 → 100644
<template>
<div class="app-container">
<el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
<el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
<el-row>
<el-form :model="queryParams" :inline="true">
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入标题"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList">
<el-table-column label="商品图片" align="center" prop="mainUrls" width="150">
<template #default="scope">
<el-image
v-if="scope.row.mainUrls"
:src="scope.row.mainUrls"
class="logo-image"
fit="cover"
>
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
</div>
</template>
</el-image>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />
<el-table-column
label="短标题"
prop="shortTitle"
:show-overflow-tooltip="true"
width="150"
/>
<el-table-column label="状态" prop="status" align="left">
<template #default="scope">
<dict-tag :options="product_launch_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
fixed="right"
>
<template #default="scope">
<div class="btnCon">
<el-button text size="small" type="primary" @click="handleEdit(scope.row)"
>编辑</el-button
>
<!-- <el-button text size="small" type="danger">删除</el-button> -->
<el-dropdown placement="left" style="margin-left: 10px">
<el-button type="primary" link size="small">
更多 <el-icon><ArrowDown /></el-icon
></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="scope.row.status == 'DSH' || scope.row.status == 'SB'"
@click="changeStatus(scope.row, 'SH')"
>审核</el-dropdown-item
>
<el-dropdown-item
v-if="scope.row.status == 'XJ'"
@click="changeStatus(scope.row, 'SJ')"
>上架</el-dropdown-item
>
<el-dropdown-item
v-if="scope.row.status == 'ZS' || scope.row.status == 'YS'"
@click="changeStatus(scope.row, 'XJ')"
>下架</el-dropdown-item
>
<el-dropdown-item @click="handleEdit(scope.row, 'copy')"
>复制</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
<el-col style="display: flex; justify-content: flex-end">
<pagination
v-show="total >= 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getTableList"
/>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
<el-dialog title="审核" v-model="showReview" width="500px" append-to-body>
<el-form :model="reviewForm" label-width="68px">
<el-form-item label="审核状态" prop="approvalStatus">
<el-radio-group v-model="reviewForm.approvalStatus">
<el-radio value="TG" size="large">通过</el-radio>
<el-radio value="WTG" size="large">不通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="reviewForm.approvalStatus == 'WTG'" label="备注">
<el-input
v-model="reviewForm.approvalRemark"
placeholder="请输入备注"
clearable
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="confirmReview">提交审核</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="InsuranceProduct">
import { goodsList, changeProductStatus, productApproval } from '@/api/product/index'
import { ref, watch } from 'vue'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const { product_launch_status } = proxy.useDict('product_launch_status')
const activeName = ref('all')
const total = ref(0)
const loading = ref(false)
const tableList = ref([])
const showReview = ref(false)
const currentRow = ref({})
const data = reactive({
queryParams: {},
allQueryParams: {
pageNo: 1,
pageSize: 10,
selectType: null
},
saleQueryParams: {
pageNo: 1,
pageSize: 10,
selectType: 1
},
delistQueryParams: {
pageNo: 1,
pageSize: 10,
selectType: 2
},
reviewForm: {},
rules: {
approvalStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}
})
const { queryParams, allQueryParams, saleQueryParams, delistQueryParams, reviewForm } = toRefs(data)
const tabsList = ref([
{
label: '全部',
name: 'all',
key: 'all',
id: 1
},
{
label: '销售中',
name: 'sale',
id: 2,
key: 'sale'
},
{
label: '已下架',
name: 'delist',
id: 3,
key: 'delist'
}
])
// Tab切换前的验证
const beforeTabLeave = (activeTabName, oldTabName) => {
return true
}
const handleEdit = (row, type) => {
let obj = {
productBizId: row.productBizId,
productLaunchBizId: row.productLaunchBizId
}
if (type && type == 'copy') {
obj.source = 'copy'
}
router.push({
path: '/merchandise/putOnSale',
query: {
...obj
}
})
}
// 提交审核
const confirmReview = () => {
if (!reviewForm.value.approvalStatus) {
proxy.$modal.msgError('请选择审核状态')
return
}
productApproval({
productLaunchBizId: currentRow.value.productLaunchBizId,
...reviewForm.value
}).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess(`已提交审核`)
getTableList()
showReview.value = false
reviewForm.value = {}
} else {
proxy.$modal.msgError(response.msg)
}
})
}
// 上下架
const changeStatus = (row, type) => {
console.log('type', type)
currentRow.value = { ...row }
if (type == 'SH') {
showReview.value = true
} else if (type == 'SJ' || type == 'XJ') {
proxy.$modal
.confirm(`是否确认${type == 'SJ' ? '上架' : '下架'}${row.title}?`)
.then(function () {
changeProductStatus({
productLaunchBizId: row.productLaunchBizId,
status: type
}).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess(`${type == 'SJ' ? '上架' : '下架'}成功`)
getTableList()
} else {
proxy.$modal.msgError(response.msg)
}
})
})
.catch(() => {})
}
}
const handleQuery = () => {
let obj = {
pageNo: 1,
pageSize: 10
}
allQueryParams.value = { ...allQueryParams.value, ...obj }
saleQueryParams.value = { ...saleQueryParams.value, ...obj }
delistQueryParams.value = { ...delistQueryParams.value, ...obj }
if (activeName.value == 'all') {
queryParams.value = allQueryParams.value
} else if (activeName.value == 'sale') {
queryParams.value = saleQueryParams.value
} else if (activeName.value == 'delist') {
queryParams.value = delistQueryParams.value
}
getTableList()
}
const resetQuery = () => {
let obj = {
pageNo: 1,
pageSize: 10,
title: null
}
allQueryParams.value = { ...allQueryParams.value, ...obj }
saleQueryParams.value = { ...saleQueryParams.value, ...obj }
delistQueryParams.value = { ...delistQueryParams.value, ...obj }
if (activeName.value == 'all') {
queryParams.value = allQueryParams.value
} else if (activeName.value == 'sale') {
queryParams.value = saleQueryParams.value
} else if (activeName.value == 'delist') {
queryParams.value = delistQueryParams.value
}
getTableList()
}
const getTableList = () => {
loading.value = true
goodsList(queryParams.value).then(response => {
if (response.code === 200) {
tableList.value = response.data.records
total.value = response.data.total
loading.value = false
tableList.value.forEach(item => {
if (item.mainUrls) {
item.mainUrls = item.mainUrls.split(';')[0]
}
})
} else {
proxy.$modal.msgError(response.msg)
}
})
}
watch(
() => activeName.value,
newVal => {
if (newVal == 'all') {
queryParams.value = allQueryParams.value
} else if (newVal == 'sale') {
queryParams.value = saleQueryParams.value
} else if (newVal == 'delist') {
queryParams.value = delistQueryParams.value
}
getTableList()
}
)
queryParams.value = allQueryParams.value
getTableList()
</script>
<style lang="scss" scoped>
.app-container {
width: 100%;
box-sizing: border-box;
}
.logo-image {
width: 70px;
height: 70px;
border-radius: 4px;
object-fit: cover;
}
.btnCon {
display: flex;
align-items: center;
justify-content: center;
}
</style>
src/views/merchandise/putOnSale.vue 0 → 100644
<template>
<div class="app-container">
<el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
<el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
<ProductBaseInfo
:activeName="activeName"
v-if="tab.name === 'baseInfo'"
:detailInfo="productBaseInfo"
@handleSuccess="handleSuccess"
/>
<div v-if="tab.name === 'comeCommission'">
<ComeInfo :activeName="activeName"></ComeInfo>
</div>
<div v-if="tab.name === 'sendCommission'">
<SendInfo :activeName="activeName"></SendInfo>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="InsuranceProduct">
import { getProductDetail } from '@/api/product/index'
import { ref } from 'vue'
import ProductBaseInfo from './components/productBaseInfo.vue'
import SendInfo from './components/sendInfo.vue'
import ComeInfo from './components/comeInfo.vue'
const route = useRoute()
const { proxy } = getCurrentInstance()
const activeName = ref('baseInfo')
const productBaseInfo = ref({}) //产品基本信息
const tabsList = ref([
{
label: '基础信息',
name: 'baseInfo',
key: 'baseInfo',
id: 1
},
{
label: '来佣管理',
name: 'comeCommission',
id: 2,
key: 'comeCommission'
},
{
label: '发佣管理',
name: 'sendCommission',
id: 3,
key: 'sendCommission'
}
])
const handleSuccess = (source, id) => {
if (source === 'baseInfo') {
getProductInfo('comeCommission', id)
}
}
// Tab切换前的验证
const beforeTabLeave = (activeTabName, oldTabName) => {
if (activeTabName !== 'baseInfo' && productBaseInfo.value.apiSpeciesPriceDtoList.length == 0) {
proxy.$modal.msgError('请先提交产品相关信息，再进行下一步操作！')
return false
}
return true
}
/** 获取产品详情 */
function getProductInfo(tabName, id) {
let productLaunchBizId = ''
if (route.query.source && route.query.source == 'copy') {
productLaunchBizId = id
} else {
productLaunchBizId = route.query.productLaunchBizId
}
getProductDetail(productLaunchBizId).then(response => {
if (response.code === 200) {
productBaseInfo.value = response.data
activeName.value = tabName
} else {
proxy.$modal.msgError(response.msg)
}
})
}
if (route.query.source && route.query.source == 'copy') {
getProductInfo('baseInfo', route.query.productLaunchBizId)
} else {
getProductInfo('baseInfo')
}
</script>
<style lang="scss" scoped>
.app-container {
width: 100%;
height: 89.8vh !important;
box-sizing: border-box;
/* background-color: rgb(247 247 247) !important; */
/* padding: 0 !important; */
/* height: 500px !important;
overflow: hidden;
overflow-y: scroll; */
}
</style>
src/views/workbench/components/AppCard.vue
......@@ -28,7 +28,10 @@ const appName = computed(() => props.project.projectName)
const handleClick = () => {
console.log('点击了应用卡片', props.project)
getVisitPermission(props.project.projectBizId, userStore.currentTenant.apiLoginTenantInfoResponse.tenantBizId).then(response => {
getVisitPermission(
props.project.projectBizId,
userStore.currentTenant.apiLoginTenantInfoResponse.tenantBizId
).then(response => {
if (response.code === 200) {
// 有权限访问项目，进行跳转
// 记录最近使用的应用
......
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 to comment