商品中心模块开发（新增商品，商品列表），上传图片组件，上传视频组件
This commit is contained in:
2090205686@qq.com
parent
941041ab29
commit
085070f331
@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
|
||||
VITE_APP_BASE_API = 'http://192.168.18.151:8080'
|
||||
VITE_APP_PLATFORM = 'http://localhost:9000/platform'
|
||||
@ -5,7 +5,7 @@ VITE_APP_TITLE = 运营云后台管理系统
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
# 生产环境
|
||||
VITE_APP_BASE_API = 'http://47.109.205.240:8080/'
|
||||
VITE_APP_BASE_API = 'http://47.109.205.240:8080'
|
||||
VITE_APP_PLATFORM = 'http://47.109.205.240/platform'
|
||||
|
||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
"vue": "3.4.31",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-router": "4.4.0",
|
||||
"vuedraggable": "4.1.0"
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "5.0.5",
|
||||
|
||||
@ -2,14 +2,23 @@ import request from '@/utils/request'
|
||||
|
||||
// 获取商品管理列表
|
||||
export function getGoodManageInfo(query) {
|
||||
console.log(query)
|
||||
return request({
|
||||
url: '/goodInfoManage/getGoodManage',
|
||||
url: '/goods/goodInfoManage/getGoodManage',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取商品分类列表
|
||||
export function getGoodType(query) {
|
||||
console.log(query)
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -174,24 +174,30 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
// 表格中文本的颜色
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.color-orange {
|
||||
color: orange;
|
||||
}
|
||||
.color-green {
|
||||
color: green;
|
||||
}
|
||||
.color-red {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
font-size: 12px !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
// 表格中文本的颜色
|
||||
.color-blue {
|
||||
color: #3685fe;
|
||||
}
|
||||
.color-black {
|
||||
color: #000000;
|
||||
}
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.color-orange {
|
||||
color: #ffb345;
|
||||
}
|
||||
.color-green {
|
||||
color: #25bf82;
|
||||
}
|
||||
.color-red {
|
||||
color: #ff4348;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
font-size: 12px !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
// 页面添加的自定义容器，上下撑满
|
||||
.customer-control {
|
||||
@ -217,12 +223,53 @@
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
display: flex; /* 使用 Flex 布局居中 */
|
||||
display: flex; /* 使用 Flex 布局居中 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.table-cell-img {
|
||||
min-width: 100%; /* 至少撑满宽度 */
|
||||
min-width: 100%; /* 至少撑满宽度 */
|
||||
min-height: 100%; /* 至少撑满高度 */
|
||||
object-fit: cover; /* 保持比例并覆盖容器 */
|
||||
}
|
||||
}
|
||||
|
||||
// 新增商品页面-开始
|
||||
.customer-box {
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
padding: 20px 16px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
.my-el-select {
|
||||
width: 200px;
|
||||
}
|
||||
.el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
// 商品属性
|
||||
.attr-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
.attr-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.attr-input {
|
||||
width: 120px;
|
||||
}
|
||||
.attr-box {
|
||||
padding: 16px 16px 6px 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
// 新增商品页面-结束
|
||||
|
||||
387
src/components/myUploadImage.vue
Normal file
387
src/components/myUploadImage.vue
Normal file
@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<div class="upload-tip">图片比例1:1，建议尺寸为800 * 800px，支持png、jpg、gif等格式，大小2MB以内</div>
|
||||
<el-upload multiple :disabled="disabled" :action="uploadImgUrl" list-type="picture-card"
|
||||
:on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :data="data" :limit="limit"
|
||||
:on-error="handleUploadError" :on-exceed="handleExceed" ref="imageUpload" :before-remove="handleDelete"
|
||||
:show-file-list="true" :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview"
|
||||
:class="{ hide: fileList.length >= limit }">
|
||||
<el-icon size="30px" color="red">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">上传图片</div>
|
||||
|
||||
|
||||
<!-- 自定义文件列表项 -->
|
||||
<template #file="{ file }">
|
||||
<div class="custom-upload-item">
|
||||
<img :src="file.url" class="el-upload-list__item-thumbnail" />
|
||||
|
||||
<!-- 主图角标（只在第一张图片显示） -->
|
||||
<div v-if="isShowSubscript">
|
||||
<span v-if="fileList[0]?.uid === file.uid" class="main-image-badge">主图</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 自定义删除按钮（带文字） -->
|
||||
<span class="custom-delete-btn" @click.stop="handleDelete(file)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span>删除</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<div class="upload-hint">至多可上传{{ limit }}张图片</div>
|
||||
<!-- 上传提示 -->
|
||||
<!-- <div class="el-upload__tip" v-if="showTip && !disabled">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getToken } from "@/utils/auth"
|
||||
import { isExternal } from "@/utils/validate"
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
// 上传接口地址
|
||||
action: {
|
||||
type: String,
|
||||
default: "/uploadApis/file/upload"
|
||||
},
|
||||
// 上传携带的参数
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
isShowSubscript: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"]
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 禁用组件（仅查看图片）
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 拖动排序
|
||||
drag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits()
|
||||
const number = ref(0)
|
||||
const uploadList = ref([])
|
||||
const dialogImageUrl = ref("")
|
||||
const dialogVisible = ref(false)
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const uploadImgUrl = 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)
|
||||
)
|
||||
|
||||
watch(() => props.modelValue, val => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.modelValue.split(",")
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
|
||||
item = { name: baseUrl + item, url: baseUrl + item }
|
||||
} else {
|
||||
item = { name: item, url: item }
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
fileList.value = []
|
||||
return []
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
// 上传前loading加载
|
||||
function handleBeforeUpload(file) {
|
||||
let isImg = 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
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true
|
||||
return false
|
||||
})
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1
|
||||
}
|
||||
if (!isImg) {
|
||||
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
|
||||
}
|
||||
}
|
||||
proxy.$modal.loading("正在上传图片，请稍候...")
|
||||
number.value++
|
||||
}
|
||||
|
||||
// 文件个数超出
|
||||
function handleExceed() {
|
||||
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
|
||||
}
|
||||
|
||||
// 上传成功回调
|
||||
function handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.name, url: res.data.url })
|
||||
uploadList.value.forEach(item => {
|
||||
item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
|
||||
})
|
||||
uploadedSuccessfully()
|
||||
} else {
|
||||
number.value--
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError(res.msg)
|
||||
proxy.$refs.imageUpload.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))
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 上传结束处理
|
||||
function uploadedSuccessfully() {
|
||||
if (number.value > 0 && uploadList.value.length > 0) {
|
||||
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
|
||||
uploadList.value = []
|
||||
number.value = 0
|
||||
emit("update:modelValue", listToString(fileList.value))
|
||||
proxy.$modal.closeLoading()
|
||||
}
|
||||
}
|
||||
|
||||
// 上传失败
|
||||
function handleUploadError() {
|
||||
proxy.$modal.msgError("上传图片失败")
|
||||
proxy.$modal.closeLoading()
|
||||
}
|
||||
|
||||
// 预览
|
||||
function handlePictureCardPreview(file) {
|
||||
dialogImageUrl.value = file.url
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 对象转成指定字符串分隔
|
||||
function listToString(list, separator) {
|
||||
let strs = ""
|
||||
separator = separator || ","
|
||||
for (let i in list) {
|
||||
if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
|
||||
strs += list[i].url.replace(baseUrl, "") + separator
|
||||
}
|
||||
}
|
||||
return strs != "" ? strs.substr(0, strs.length - 1) : ""
|
||||
}
|
||||
|
||||
// 初始化拖拽排序
|
||||
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))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// .el-upload--picture-card 控制加号部分
|
||||
:deep(.hide .el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 上传图标加号颜色
|
||||
.el-upload--picture-card>i {
|
||||
// color: #25BF82;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
|
||||
.el-upload--picture-card:hover,
|
||||
.el-upload--picture-card:focus {
|
||||
border-color: #cdd0d6 !important;
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-upload.el-upload--picture-card.is-disabled) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 上传图片样式-开始
|
||||
.upload-tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.el-upload-dragger) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 完全隐藏上传按钮区域 */
|
||||
.hide-upload :deep(.el-upload--picture-card) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏默认的查看按钮 */
|
||||
:deep(.el-upload-list__item-actions .el-upload-list__item-preview) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 自定义删除按钮（带文字） */
|
||||
.custom-delete-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-delete-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.custom-delete-btn .el-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 调整上传卡片样式 */
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item),
|
||||
:deep(.el-upload-list--picture-card .el-upload-list__item) {
|
||||
width: 120px !important;
|
||||
height: 120px !important;
|
||||
}
|
||||
|
||||
/* 主图角标样式 */
|
||||
.main-image-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #25BF82;
|
||||
color: white;
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
border-radius: 0 4px 0 8px;
|
||||
/* 右上和左下圆角 */
|
||||
z-index: 2;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
286
src/components/myUploadVideo.vue
Normal file
286
src/components/myUploadVideo.vue
Normal file
@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
|
||||
<div class="upload-tip">建议比例1:1，不超过60s，视频200MB以内</div>
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
:data="data"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
class="upload-file-uploader"
|
||||
list-type="picture-card"
|
||||
ref="fileUpload"
|
||||
v-if="!disabled"
|
||||
>
|
||||
<!-- 上传按钮 -->
|
||||
<el-icon size="30px" color="red">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">上传视频</div>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<!-- <div class="el-upload__tip" v-if="showTip && !disabled">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div> -->
|
||||
<!-- 文件列表 -->
|
||||
<transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
||||
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
|
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||
</el-link>
|
||||
<div class="ele-upload-list__item-content-action">
|
||||
<el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled"> 删除</el-link>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getToken } from "@/utils/auth"
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
// 上传接口地址
|
||||
action: {
|
||||
type: String,
|
||||
default: "/uploadApis/file/upload"
|
||||
},
|
||||
// 上传携带的参数
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
// 数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
// 文件类型
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["mp4", "mov", "avi", "wmv", "flv", "mkv", "webm"]
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 禁用组件（仅查看文件）
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 拖动排序
|
||||
drag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits()
|
||||
const number = ref(0)
|
||||
const uploadList = ref([])
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const uploadFileUrl = 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)
|
||||
)
|
||||
|
||||
watch(() => props.modelValue, val => {
|
||||
if (val) {
|
||||
let temp = 1
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.modelValue.split(',')
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
item = { name: item, url: item }
|
||||
}
|
||||
item.uid = item.uid || new Date().getTime() + temp++
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
fileList.value = []
|
||||
return []
|
||||
}
|
||||
},{ deep: true, immediate: true })
|
||||
|
||||
// 上传前校检格式和大小
|
||||
function handleBeforeUpload(file) {
|
||||
// 校检文件类型
|
||||
if (props.fileType.length) {
|
||||
const fileName = file.name.split('.')
|
||||
const fileExt = fileName[fileName.length - 1]
|
||||
const isTypeOk = props.fileType.indexOf(fileExt) >= 0
|
||||
if (!isTypeOk) {
|
||||
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
|
||||
}
|
||||
}
|
||||
proxy.$modal.loading("正在上传文件，请稍候...")
|
||||
number.value++
|
||||
return true
|
||||
}
|
||||
|
||||
// 文件个数超出
|
||||
function handleExceed() {
|
||||
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
|
||||
}
|
||||
|
||||
// 上传失败
|
||||
function handleUploadError(err) {
|
||||
proxy.$modal.msgError("上传文件失败")
|
||||
proxy.$modal.closeLoading()
|
||||
}
|
||||
|
||||
// 上传成功回调
|
||||
function handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.name, url: res.data.url })
|
||||
uploadList.value.forEach(item => {
|
||||
item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
|
||||
})
|
||||
uploadedSuccessfully()
|
||||
} else {
|
||||
number.value--
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError(res.msg)
|
||||
proxy.$refs.fileUpload.handleRemove(file)
|
||||
uploadedSuccessfully()
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
function handleDelete(index) {
|
||||
fileList.value.splice(index, 1)
|
||||
emit("update:modelValue", listToString(fileList.value))
|
||||
}
|
||||
|
||||
// 上传结束处理
|
||||
function uploadedSuccessfully() {
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
|
||||
uploadList.value = []
|
||||
number.value = 0
|
||||
emit("update:modelValue", listToString(fileList.value))
|
||||
proxy.$modal.closeLoading()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取文件名称
|
||||
function getFileName(name) {
|
||||
// 如果是url那么取最后的名字 如果不是直接返回
|
||||
if (name.lastIndexOf("/") > -1) {
|
||||
return name.slice(name.lastIndexOf("/") + 1)
|
||||
} else {
|
||||
return name
|
||||
}
|
||||
}
|
||||
|
||||
// 对象转成指定字符串分隔
|
||||
function listToString(list, separator) {
|
||||
let strs = ""
|
||||
separator = separator || ","
|
||||
for (let i in list) {
|
||||
if (list[i].url) {
|
||||
strs += list[i].url + separator
|
||||
}
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : ''
|
||||
}
|
||||
|
||||
// 初始化拖拽排序
|
||||
onMounted(() => {
|
||||
if (props.drag && !props.disabled) {
|
||||
nextTick(() => {
|
||||
const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
|
||||
Sortable.create(element, {
|
||||
ghostClass: 'file-upload-darg',
|
||||
onEnd: (evt) => {
|
||||
const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
|
||||
fileList.value.splice(evt.newIndex, 0, movedItem)
|
||||
emit('update:modelValue', listToString(fileList.value))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.file-upload-darg {
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
}
|
||||
.upload-file-uploader {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.upload-file-list .el-upload-list__item {
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
transition: none !important;
|
||||
}
|
||||
.upload-file-list .ele-upload-list__item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
.ele-upload-list__item-content-action .el-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
// 上传提示文字
|
||||
.upload-tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-upload__text {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -39,6 +39,11 @@
|
||||
width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="序号" width="60" v-if="showSort">
|
||||
<template #default="{ $index }">
|
||||
{{ (currentPage - 1) * pageSize + $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<template v-for="column in columns" :key="column.prop">
|
||||
<el-table-column
|
||||
@ -144,6 +149,11 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否展示序号
|
||||
showSort: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 每页显示条数选项
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
|
||||
@ -5,195 +5,105 @@
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input
|
||||
v-model="formInline.nickname"
|
||||
placeholder="用户昵称"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.nickname" placeholder="用户昵称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="ID" prop="id">
|
||||
<el-input
|
||||
v-model="formInline.id"
|
||||
placeholder="用户ID"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.id" placeholder="用户ID" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="formInline.userName"
|
||||
placeholder="用户姓名"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.userName" placeholder="用户姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号" prop="accountNumber">
|
||||
<el-input
|
||||
v-model="formInline.accountNumber"
|
||||
placeholder="用户账号"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.accountNumber" placeholder="用户账号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="formInline.phoneNumber"
|
||||
placeholder="用户手机号"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="formInline.phoneNumber" placeholder="用户手机号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select
|
||||
v-model="formInline.sex"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="formInline.sex" placeholder="请选择" clearable>
|
||||
<el-option label="男" value="1" />
|
||||
<el-option label="女" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" prop="userStatus">
|
||||
<el-select
|
||||
v-model="formInline.userStatus"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
|
||||
<el-option label="异常" value="0" />
|
||||
<el-option label="正常" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户分类" prop="userCategory">
|
||||
<el-select
|
||||
v-model="formInline.userCategory"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="formInline.userCategory" placeholder="请选择" clearable>
|
||||
<el-option label="活跃/低消费" value="1" />
|
||||
<el-option label="活跃/中消费" value="2" />
|
||||
<el-option label="活跃/高消费" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客单价" prop="unitPrice">
|
||||
<el-select
|
||||
v-model="formInline.unitPrice"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="formInline.unitPrice" placeholder="请选择" clearable>
|
||||
<el-option label="≤500" value="1" />
|
||||
<el-option label="≤1000" value="2" />
|
||||
<el-option label="≤1500" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单数目" prop="ordersNums">
|
||||
<el-select
|
||||
v-model="formInline.ordersNums"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="formInline.ordersNums" placeholder="请选择" clearable>
|
||||
<el-option label="≤500" value="1" />
|
||||
<el-option label="≤1000" value="2" />
|
||||
<el-option label="≤1500" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="申请日期"
|
||||
prop="startDate"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formInline.startDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span
|
||||
style="width: 30px; text-align: center; display: inline-block"
|
||||
>
|
||||
<el-form-item label="申请日期" prop="startDate" style="margin-right: 0">
|
||||
<el-date-picker v-model="formInline.startDate" type="date" value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期" clearable :disabled-date="disableStartDate" style="width: 160px" />
|
||||
<span style="width: 30px; text-align: center; display: inline-block">
|
||||
-
|
||||
</span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<el-date-picker v-model="formInline.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择截止日期"
|
||||
clearable :disabled-date="disableEndDate" style="width: 160px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="false"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
|
||||
>
|
||||
<tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="false"
|
||||
:header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange"
|
||||
@selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
|
||||
:page-size="formInline.size">
|
||||
<!-- 自定义-状态 -->
|
||||
<template #userStatus="slotProps">
|
||||
<span v-if="slotProps.row.userStatus == 1" class="color-green"
|
||||
>正常</span
|
||||
>
|
||||
<span v-else-if="slotProps.row.userStatus == 0" class="color-red"
|
||||
>异常</span
|
||||
>
|
||||
<span v-if="slotProps.row.userStatus == 1" class="color-green">正常</span>
|
||||
<span v-else-if="slotProps.row.userStatus == 0" class="color-red">异常</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon><More /></el-icon>
|
||||
<el-icon>
|
||||
<More />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
@ -330,12 +240,22 @@ const generateMockData = () => {
|
||||
}).list;
|
||||
};
|
||||
// 加载数据
|
||||
const loadData = () => {
|
||||
const loadData = async () => {
|
||||
// 模拟API请求延迟
|
||||
setTimeout(() => {
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
}, 500);
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(formInline);
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data.records;
|
||||
// tableTotal.value = response.data.total;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
};
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
const getHeaderClass = ({ column }) => {
|
||||
|
||||
@ -1,145 +1,539 @@
|
||||
<template>
|
||||
<div class="app-container customer-control">
|
||||
<div class="customer-box">
|
||||
<el-form ref="searchForm" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||||
<!-- 商品名称 -->
|
||||
<el-form-item label="商品名称" prop="goodName">
|
||||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 商品分类 -->
|
||||
<el-form-item label="商品分类" required>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId">
|
||||
<el-select v-model="formInline.categoryId" placeholder="请选择" class="my-el-select">
|
||||
<el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="categoryId1">
|
||||
<el-select v-model="formInline.categoryId1" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory1($event)">
|
||||
<el-option v-for="item in categoryList1" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId2">
|
||||
<el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select">
|
||||
<el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory2($event)">
|
||||
<el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId3">
|
||||
<el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select">
|
||||
<el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory3($event)">
|
||||
<el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 公共品牌 -->
|
||||
<el-form-item label="公共品牌" prop="brandId" v-show="formInline.goodCategorySelectType == 1">
|
||||
<el-input v-model="formInline.brandId" clearable placeholder="请输入公共品牌" style="width: 800px" />
|
||||
</el-form-item>
|
||||
<!-- 溯源编码 -->
|
||||
<el-form-item label="溯源编码" prop="traceCode" v-show="formInline.goodCategorySelectType == 1">
|
||||
<el-input v-model="formInline.traceCode" clearable placeholder="请输入溯源编码" style="width: 800px" />
|
||||
</el-form-item>
|
||||
<!-- 商品图片 -->
|
||||
<el-form-item label="商品图片" prop="goodUrl" required>
|
||||
<div>
|
||||
<myUploadImage v-model="formInline.goodUrl"></myUploadImage>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 规格样式 -->
|
||||
<el-form-item label="规格样式" prop="specStyle" required>
|
||||
<el-radio-group v-model="formInline.specStyle" style="margin-top: -3px;">
|
||||
<el-radio value="1" size="large">单规格</el-radio>
|
||||
<el-radio value="2" size="large">多规格</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="formInline.specStyle == 1">
|
||||
<!-- 销售价格 -->
|
||||
<el-form-item label="销售价格" prop="salePrice" required>
|
||||
<el-input-number v-model="formInline.salePrice" :min="0" :precision="2" :controls="false" />
|
||||
<span class="unit">元</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 库存数量 -->
|
||||
<el-form-item label="库存数量" prop="stock" required>
|
||||
<el-input-number v-model="formInline.stock" :min="0" :controls="false" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 净含量 -->
|
||||
<el-form-item label="净含量" prop="netContent" required>
|
||||
<el-input-number v-model="formInline.netContent" :min="0" :controls="false" />
|
||||
<el-select v-model="formInline.netContentUnit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 多规格 -->
|
||||
<div v-else>
|
||||
多规格
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 商品属性 -->
|
||||
<el-form-item label="商品属性" prop="attribute" required>
|
||||
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-item">
|
||||
<el-input v-model="item.name" :value="item.name" class="attr-input" placeholder="请输入属性名称" />
|
||||
<el-icon size="20px" v-if="index !== 0" @click="deleteAttr(index)" style="cursor: pointer;">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-button icon="plus" type="primary" plain style="margin: 0" @click="addAttr">添加属性</el-button>
|
||||
</el-form-item>
|
||||
<!-- 属性内容 -->
|
||||
<el-form-item label="属性内容" prop="attribute" required>
|
||||
<div class="attr-box">
|
||||
<div class="attr-row">
|
||||
<div class="attr-input color-gray">属性名称</div>
|
||||
<div class="attr-input color-gray">属性内容</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
|
||||
<div class="attr-input">{{ item.name }}</div>
|
||||
<el-input v-model="item.value" class="attr-input" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 发货地址 -->
|
||||
<el-form-item label="发货地址" required>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<!-- 省市区级联选择器 -->
|
||||
<el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
|
||||
placeholder="请选择省市区" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<!-- 详细地址输入框 -->
|
||||
<el-input v-model="formInline.detailAddress" placeholder="详细地址（如街道、门牌号等）" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 保障服务 -->
|
||||
<el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 2px;">
|
||||
<el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">{{ item.text }}
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- 优惠折扣 -->
|
||||
<el-form-item label="优惠折扣" style="margin-bottom: 10px;">
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 商品详情 -->
|
||||
<el-form-item label="商品详情" prop="detailUrl">
|
||||
<div>
|
||||
<myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 商品视频 -->
|
||||
<el-form-item label="商品视频" prop="videoUrl">
|
||||
<div>
|
||||
<myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-button type="primary" @click="onSave" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import myUploadImage from "@/components/myUploadImage.vue";
|
||||
import myUploadVideo from "@/components/myUploadVideo.vue";
|
||||
import { getGoodType } from "@/api/goods/info";
|
||||
|
||||
const formRef = ref(null)
|
||||
const formInline = reactive({
|
||||
goodName: "高质量水稻",
|
||||
categoryId: "", //一级
|
||||
categoryId: "", //一级,
|
||||
categoryId1: "", //一级,
|
||||
categoryId2: "", //二级
|
||||
categoryId3: "", //三级
|
||||
goodUrl:
|
||||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||||
netWeight: { "100元": "1kg", "200元": "10kg", "300元": "100kg" },
|
||||
stock: 6500,
|
||||
attribute: {
|
||||
品牌: "童涵春堂",
|
||||
型号: "种子种苗",
|
||||
储存条件: "15~25℃(避免高温或冷冻)",
|
||||
系列: "农用百货",
|
||||
产地: "耿马县",
|
||||
},
|
||||
sendAddress: "云南省昆明市",
|
||||
safeguard: "七天无理由退货",
|
||||
detailUrl:
|
||||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||||
goodUrl: "", //逗号分割的多个图片地址字符串
|
||||
goodCategorySelectType: 2, // 商品分类一级选项
|
||||
brandId: "", //品牌
|
||||
traceCode: "", //溯源码
|
||||
|
||||
specStyle: "1",//规格样式
|
||||
salePrice: 0,//销售价格-单规格
|
||||
stock: 6500,//库存数量-单规格
|
||||
netContent: 0,//净含量-单规格
|
||||
netContentUnit: "kg",//净含量单位
|
||||
netWeight: [
|
||||
{
|
||||
"goodSpecs": "含氮20%",
|
||||
"goodPrice": 135,
|
||||
"goodStock": 10000,
|
||||
"netContent": "50",
|
||||
"unit": "kg"
|
||||
}
|
||||
], //规格，格式建议数组
|
||||
attribute: [
|
||||
{
|
||||
name: '品牌', //属性
|
||||
value: '童涵春堂', //内容
|
||||
},
|
||||
{
|
||||
name: '型号', //属性
|
||||
value: '种子种苗', //内容
|
||||
},
|
||||
],
|
||||
selectedAddress: [], //选中的省市区编码数组
|
||||
areaAddress: '云南省,昆明市,五华区', //区域地址
|
||||
detailAddress: "", //详细地址
|
||||
sendAddress: "云南省昆明市", //提交的组合地址
|
||||
isCheckbox: true,
|
||||
safeguard: {
|
||||
isSelected: 1, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '该商品，支持【七天无理由退货】服务' },
|
||||
]
|
||||
}, //保障服务
|
||||
discountSettings: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '支持【满100减10元】优惠活动' },
|
||||
{ text: '支持【满200减20元】优惠活动' },
|
||||
]
|
||||
}, //优惠设置
|
||||
discountRebate: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '支持【满两件-打8折】优惠活动' },
|
||||
{ text: '支持【单件-打905折】优惠活动' },
|
||||
]
|
||||
}, //优惠折扣
|
||||
detailUrl: "",
|
||||
brandId: "44552",
|
||||
traceCode: "45788",
|
||||
videoUrl: "",
|
||||
describe:
|
||||
"在实际应用中，你可能需要根据具体的业务需求来调整视频字段的表示方式。例如，在数据库设计中，你可能需要为每个字段定义更详细的数据类型、约束条件和索引策略；在API接口定义中，你可能需要为每个字段定义请求和响应的格式、错误码和文档说明等。",
|
||||
});
|
||||
const rules = reactive({
|
||||
goodName: [
|
||||
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
message: '请输入商品名称',
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
categoryId1: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
categoryId2: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
categoryId3: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
goodUrl: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "" || value.trim() === "") {
|
||||
callback(new Error('请至少上传一张商品图片'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
location: [
|
||||
specStyle: [
|
||||
{ required: true, message: '请选择规格样式', trigger: 'change' }
|
||||
],
|
||||
salePrice: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入销售价格'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
stock: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入库存数量'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netContent: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入净含量'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
attribute: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
if (!value || value.length === 0) {
|
||||
return callback(new Error('至少需要添加一个属性'))
|
||||
}
|
||||
|
||||
// 检查每个属性名称是否已填写
|
||||
const emptyNames = value.filter(item => !item.name?.trim())
|
||||
if (emptyNames.length > 0) {
|
||||
return callback(new Error('请填写所有属性名称和内容'))
|
||||
}
|
||||
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
selectedAddress: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a location',
|
||||
trigger: 'change',
|
||||
},
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||||
detailAddress: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
||||
],
|
||||
})
|
||||
const categoryList = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
console.log(formInline);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.customer-box {
|
||||
border-radius: 16px;
|
||||
padding: 20px 16px;
|
||||
background-color: #fff;
|
||||
|
||||
const addAttr = () => {
|
||||
formInline.attribute.push({
|
||||
name: '',
|
||||
value: '',
|
||||
})
|
||||
}
|
||||
const deleteAttr = (index) => {
|
||||
formInline.attribute.splice(index, 1)
|
||||
}
|
||||
|
||||
.my-el-select {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
|
||||
const selectedAddress = ref([]);
|
||||
const detailAddress = ref('');
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
value: 'name', // 选项值字段名
|
||||
label: 'name', // 选项标签字段名
|
||||
children: 'children' // 子选项字段名
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
const addressOptions = ref([
|
||||
{
|
||||
name: '云南省',
|
||||
children: [
|
||||
{
|
||||
name: '昆明市',
|
||||
children: [
|
||||
{ name: '五华区' },
|
||||
{ name: '盘龙区' },
|
||||
{ name: '呈贡区' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '曲靖市',
|
||||
children: [
|
||||
{ name: '麒麟区' },
|
||||
{ name: '沾益区' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
children: [
|
||||
{
|
||||
name: '广州市',
|
||||
children: [
|
||||
{ name: '天河区' },
|
||||
{ name: '越秀区' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 其他省份数据...
|
||||
]);
|
||||
|
||||
// 保障服务
|
||||
const isSafeguardSelected = computed({
|
||||
get: () => formInline.safeguard.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.safeguard.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
// 优惠设置
|
||||
const isDiscountSettings = computed({
|
||||
get: () => formInline.discountSettings.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.discountSettings.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
// 优惠折扣
|
||||
const isDiscountRebate = computed({
|
||||
get: () => formInline.discountRebate.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.discountRebate.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 文件上传前的校验
|
||||
// const beforeUpload = (file) => {
|
||||
// const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
|
||||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
// if (!isImage) {
|
||||
// ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
|
||||
// return false
|
||||
// }
|
||||
// if (!isLt2M) {
|
||||
// ElMessage.error('图片大小不能超过2MB!')
|
||||
// return false
|
||||
// }
|
||||
// return true
|
||||
// }
|
||||
// 文件变化时触发验证
|
||||
// const handleChange = () => {
|
||||
// console.log('文件变化时触发验证')
|
||||
// nextTick(() => {
|
||||
// console.log(formInline.images)
|
||||
// formRef.value.validateField('images')
|
||||
// })
|
||||
// }
|
||||
// 移除文件时触发验证
|
||||
// const handleRemove = (file) => {
|
||||
// console.log('移除文件时触发验证')
|
||||
// console.log(file)
|
||||
// console.log(formInline.images)
|
||||
// formInline.images = formInline.images.filter(item => item.uid !== file.uid)
|
||||
// formRef.value.validateField('images')
|
||||
// }
|
||||
// 超出限制提示
|
||||
// const handleExceed = () => {
|
||||
// ElMessage.warning('最多只能上传5张图片!')
|
||||
// }
|
||||
|
||||
const categoryList1 = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
categoryList1.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const changeCategory1 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId1 = id;
|
||||
formInline.categoryId2 = "";
|
||||
categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
categoryList3.value = [];
|
||||
if (id == 70) {
|
||||
// 选择产出品
|
||||
formInline.goodCategorySelectType = 1;
|
||||
} else {
|
||||
// 选择投入品
|
||||
formInline.goodCategorySelectType = 2;
|
||||
}
|
||||
};
|
||||
const changeCategory2 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId2 = id;
|
||||
categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
};
|
||||
const changeCategory3 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId3 = id;
|
||||
formInline.categoryId = id;
|
||||
};
|
||||
|
||||
const onSave = async () => {
|
||||
console.log(formInline);
|
||||
// formRef.validate(valid => {
|
||||
// if (!valid) return
|
||||
// console.log('验证通过!', formRef.value)
|
||||
// })
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
console.log('验证通过!', formRef.value)
|
||||
// 整理提交的参数
|
||||
|
||||
// 调用接口提交
|
||||
|
||||
} catch (error) {
|
||||
console.log('验证失败', error)
|
||||
}
|
||||
};
|
||||
|
||||
const getGoodTypeList2 = async () => {
|
||||
const res = await getGoodType({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
goodTypeList.value = res.data.list;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getGoodTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -106,6 +106,7 @@
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:showSort="true"
|
||||
>
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
|
||||
@ -7,118 +7,63 @@
|
||||
<div class="search-bar-left">
|
||||
<div class="order-tab" style="margin-top: -10px">
|
||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
||||
<el-tab-pane
|
||||
v-for="t in bottomList"
|
||||
:key="t.id"
|
||||
:label="t.title + '(' + t.value + ')'"
|
||||
:name="t.id"
|
||||
>
|
||||
<el-tab-pane v-for="t in bottomList" :key="t.id" :label="t.title + '(' + t.value + ')'" :name="t.id">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="goodsName">
|
||||
<el-input
|
||||
v-model="formInline.goodsName"
|
||||
placeholder="请输入商品名称"
|
||||
clearable
|
||||
/>
|
||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="商品名称" prop="goodName">
|
||||
<el-input v-model="formInline.goodName" placeholder="请输入商品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="goodsCategoryId">
|
||||
<el-select
|
||||
v-model="formInline.goodsCategoryId"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in goodsCategoryList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
<el-form-item label="商品分类" prop="goodCategoryId">
|
||||
<el-select v-model="formInline.goodCategoryId" placeholder="请选择" clearable>
|
||||
<el-option v-for="item in goodsCategoryList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌" prop="goodsBrandId">
|
||||
<el-select
|
||||
v-model="formInline.goodsBrandId"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in goodsBrandList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
<el-form-item label="商品品牌" prop="storeId">
|
||||
<el-select v-model="formInline.storeId" placeholder="请选择" clearable>
|
||||
<el-option v-for="item in goodsBrandList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 10px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-button icon="delete" @click="batchDelete" :disabled="btnStatus"
|
||||
style="margin-right: 10px">批量删除</el-button>
|
||||
<router-link to="/goods/addGoods">
|
||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
||||
>新增商品</el-button
|
||||
>
|
||||
<el-button type="primary" icon="plus" @click="onSubmit">新增商品</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
>
|
||||
<tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange" :loading="tableLoading"
|
||||
@selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
|
||||
:page-size="formInline.size" :showSort="true">
|
||||
<!-- 自定义-图片 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
<template #goodUrl="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img
|
||||
:src="slotProps.row.goodsUrl"
|
||||
class="table-cell-img"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="slotProps.row.goodUrl" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 自定义 - 序号 -->
|
||||
<template #sort="slotProps">
|
||||
<span v-if="slotProps.row.goodPrice">￥{{ slotProps.row.goodPrice }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsStatus="slotProps">
|
||||
<span v-if="slotProps.row.goodsStatus == '上架'" class="color-green"
|
||||
>上架</span
|
||||
>
|
||||
<span v-else class="color-red">下架</span>
|
||||
<template #isListed="slotProps">
|
||||
<span v-if="slotProps.row.isListed == 0" class="color-blue">待上架</span>
|
||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black">已上架</span>
|
||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green">上架</span>
|
||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red">下架</span>
|
||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange">审核中</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
@ -126,34 +71,19 @@
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toUpload(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="toUpload(slotProps.row)">
|
||||
<Upload />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toDownload(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="toDownload(slotProps.row)">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -175,14 +105,14 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodManageInfo } from "@/api/goods/info";
|
||||
import { getGoodManageInfo, getGoodType } from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
|
||||
const formInline = reactive({
|
||||
goodsName: "",
|
||||
goodsCategoryId: "",
|
||||
goodsBrandId: "",
|
||||
serachType: "1",
|
||||
goodName: "",
|
||||
goodCategoryId: "",
|
||||
storeId: "",
|
||||
type: "1",
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
@ -218,13 +148,13 @@ const tabChange = (Event) => {
|
||||
console.log(Event.index);
|
||||
if (Event.index == "0") {
|
||||
// 请求全部
|
||||
formInline.serachType = "1";
|
||||
formInline.type = "1";
|
||||
} else if (Event.index == "1") {
|
||||
// 请求已上架
|
||||
formInline.serachType = "2";
|
||||
} else {
|
||||
formInline.type = "2";
|
||||
} else if (Event.index == "2"){
|
||||
// 请求已下架
|
||||
formInline.serachType = "3";
|
||||
formInline.type = "3";
|
||||
}
|
||||
loadData();
|
||||
};
|
||||
@ -241,16 +171,15 @@ let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
{ prop: "sort", label: "排序" },
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "goodsUrl", label: "商品图片", slotName: "goodsUrl" },
|
||||
{ prop: "goodsName", label: "商品名称", width: "120" },
|
||||
{ prop: "goodId", label: "ID", width: "150" },
|
||||
{ prop: "goodUrl", label: "商品图片", slotName: "goodUrl" },
|
||||
{ prop: "goodName", label: "商品名称", width: "120" },
|
||||
{ prop: "categoryName", label: "分类名称" },
|
||||
{ prop: "goodsPrice", label: "商品售价" },
|
||||
{ prop: "goodPrice", label: "商品售价" },
|
||||
{ prop: "salesVolume", label: "销量" },
|
||||
{ prop: "pageView", label: "浏览量" },
|
||||
{ prop: "inventory", label: "库存" },
|
||||
{ prop: "goodsStatus", label: "状态", slotName: "goodsStatus" },
|
||||
{ prop: "stock", label: "库存" },
|
||||
{ prop: "isListed", label: "状态", slotName: "isListed" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
|
||||
@ -282,16 +211,16 @@ const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
"goodId|+1": 10000,
|
||||
"sort|+1": 1,
|
||||
goodsUrl: " @image", //商品图片
|
||||
goodsName: () => generateFoodNickname(), //商品名称
|
||||
goodUrl: " @image", //商品图片
|
||||
goodName: () => generateFoodNickname(), //商品名称
|
||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
||||
goodsPrice: "@float(10, 200, 2, 2)", //商品售价
|
||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
||||
salesVolume: "@integer(1000, 20000)", //销量
|
||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
||||
inventory: "@integer(5000, 90000)", //库存
|
||||
goodsStatus: '@pick(["上架", "下架"])', //状态
|
||||
stock: "@integer(5000, 90000)", //库存
|
||||
isListed: '@pick(["上架", "下架"])', //状态
|
||||
ordersNums: "@integer(10, 200)",
|
||||
},
|
||||
],
|
||||
@ -300,18 +229,18 @@ const generateMockData = () => {
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(formInline);
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data.records;
|
||||
// tableTotal.value = response.data.total;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
// tableData.value = generateMockData();
|
||||
// tableTotal.value = tableData.value.length;
|
||||
try {
|
||||
let response = await getGoodManageInfo(formInline);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
tableLoading.value = false;
|
||||
};
|
||||
|
||||
@ -339,10 +268,10 @@ const seeDetails = (row) => {
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
const toUpload = () => {
|
||||
console.log("向上移动:");
|
||||
console.log("上架:");
|
||||
};
|
||||
const toDownload = () => {
|
||||
console.log("向下移动:");
|
||||
console.log("下架:");
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
|
||||
@ -46,10 +46,10 @@ export default defineConfig(({ mode, command }) => {
|
||||
open: true,
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/api': {
|
||||
'/apis': {
|
||||
target: VITE_APP_BASE_API,
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/api/, '')
|
||||
rewrite: (p) => p.replace(/^\/apis/, '')
|
||||
},
|
||||
// springdoc proxy
|
||||
'^/v3/api-docs/(.*)': {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user