Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
a701d021
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a701d021
编写于
3月 05, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(goods): 商品一些问题修复
上级
e5433b71
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
90 addition
and
125 deletion
+90
-125
src/components/WangEditor/index.vue
src/components/WangEditor/index.vue
+28
-84
src/views/pms/goods/components/GoodsInfo.vue
src/views/pms/goods/components/GoodsInfo.vue
+27
-15
src/views/pms/goods/components/GoodsStock.vue
src/views/pms/goods/components/GoodsStock.vue
+22
-21
src/views/pms/goods/index.vue
src/views/pms/goods/index.vue
+13
-5
未找到文件。
src/components/WangEditor/index.vue
浏览文件 @
a701d021
...
...
@@ -4,109 +4,53 @@
<Toolbar
:editorId=
"editorId"
:defaultConfig=
"toolbarConfig"
:mode=
"mode"
style=
"border-bottom: 1px solid #ccc"
/>
<Editor
:editorId=
"editorId"
:defaultConfig=
"editorConfig"
:mode=
"mode"
style=
"height: 500px"
@
onCreated=
"handleCreated"
@
onChange=
"handleChange"
@
onDestroyed=
"handleDestroyed"
@
onFocus=
"handleFocus"
@
onBlur=
"handleBlur"
@
customAlert=
"customAlert"
@
customPaste=
"customPaste"
/>
</div>
<p
v-else
>
loading
</p>
</div>
</
template
>
<
script
>
import
{
computed
,
onBeforeUnmount
,
ref
}
from
'
vue
'
<
script
setup
>
import
{
onBeforeUnmount
,
reactive
,
ref
,
toRefs
}
from
'
vue
'
import
{
Editor
,
Toolbar
,
getEditor
,
removeEditor
}
from
'
@wangeditor/editor-for-vue
'
import
{
uploadFile
}
from
"
@/api/system/file
"
;
export
default
{
components
:
{
Editor
,
Toolbar
},
setup
()
{
const
editorId
=
`w-e-
${
Math
.
random
().
toString
().
slice
(
-
5
)}
`
//【注意】编辑器 id ,要全局唯一
const
toolbarConfig
=
{}
const
isEditorShow
=
ref
(
true
)
const
editorConfig
=
{
placeholder
:
'
请输入内容...
'
,
MENU_CONF
:
{
uploadImage
:
{
// 自定义图片上传
// @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
async
customUpload
(
file
,
insertFn
)
{
uploadFile
(
file
).
then
(
response
=>
{
const
url
=
response
.
data
insertFn
(
url
)
})
}
const
state
=
reactive
({
editorId
:
`w-e-
${
Math
.
random
().
toString
().
slice
(
-
5
)}
`
,
//【注意】编辑器 id ,要全局唯一
toolbarConfig
:
{},
isEditorShow
:
true
,
editorConfig
:
{
placeholder
:
'
请输入内容...
'
,
MENU_CONF
:
{
uploadImage
:
{
// 自定义图片上传
// @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
async
customUpload
(
file
,
insertFn
)
{
uploadFile
(
file
).
then
(
response
=>
{
const
url
=
response
.
data
insertFn
(
url
)
})
}
}
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount
(()
=>
{
const
editor
=
getEditor
(
editorId
)
if
(
editor
==
null
)
return
editor
.
destroy
()
removeEditor
(
editorId
)
})
// 编辑器回调函数
const
handleCreated
=
(
editor
)
=>
{
console
.
log
(
'
created
'
,
editor
);
}
const
handleChange
=
(
editor
)
=>
{
console
.
log
(
'
change:
'
,
editor
.
children
);
}
const
handleDestroyed
=
(
editor
)
=>
{
console
.
log
(
'
destroyed
'
,
editor
)
}
const
handleFocus
=
(
editor
)
=>
{
console
.
log
(
'
focus
'
,
editor
)
}
const
handleBlur
=
(
editor
)
=>
{
console
.
log
(
'
blur
'
,
editor
)
}
const
customAlert
=
(
info
,
type
)
=>
{
alert
(
`【自定义提示】
${
type
}
-
${
info
}
`
)
}
const
customPaste
=
(
editor
,
event
,
callback
)
=>
{
console
.
log
(
'
ClipboardEvent 粘贴事件对象
'
,
event
)
// 自定义插入内容
editor
.
insertText
(
'
xxx
'
)
// 返回值(注意,vue 事件的返回值,不能用 return)
callback
(
false
)
// 返回 false ,阻止默认粘贴行为
// callback(true) // 返回 true ,继续默认的粘贴行为
}
const
insertText
=
()
=>
{
const
editor
=
getEditor
(
editorId
)
if
(
editor
==
null
)
return
editor
.
insertText
(
'
hello world
'
)
}
return
{
editorId
,
mode
:
'
default
'
,
toolbarConfig
,
editorConfig
,
isEditorShow
,
handleCreated
,
handleChange
,
handleDestroyed
,
handleFocus
,
handleBlur
,
customAlert
,
customPaste
,
insertText
};
}
}
})
const
{
isEditorShow
,
editorId
,
toolbarConfig
,
editorConfig
}
=
toRefs
(
state
)
onBeforeUnmount
(()
=>
{
const
editor
=
getEditor
(
state
.
editorId
)
if
(
editor
==
null
)
return
editor
.
destroy
()
removeEditor
(
state
.
editorId
)
})
</
script
>
<
style
src=
"@wangeditor/editor/dist/css/style.css"
></
style
>
\ No newline at end of file
src/views/pms/goods/components/GoodsInfo.vue
浏览文件 @
a701d021
...
...
@@ -2,7 +2,7 @@
<div
class=
"component-container"
>
<div
class=
"component-container__main"
>
<el-form
ref=
"dataForm"
ref=
"dataForm
Ref
"
:rules=
"rules"
:model=
"modelValue"
label-width=
"120px"
...
...
@@ -35,11 +35,12 @@
</el-form-item>
<el-form-item
label=
"商品简介"
>
<el-input
type=
"textarea"
v-model=
"modelValue.description"
/>
<el-input
type=
"textarea"
:autosize=
"
{ minRows: 2, maxRows: 6 }"
v-model="modelValue.description"/>
</el-form-item>
<el-form-item
label=
"商品相册"
>
<el-card
v-for=
"(item,index) in pictures"
style=
"width: 170px;display: inline-block;margin-left: 10px"
:body-style=
"
{ padding: '10px' }">
<el-card
v-for=
"(item,index) in pictures"
style=
"width: 170px;display: inline-block;margin-left: 10px"
:body-style=
"
{ padding: '10px' }">
<single-upload
v-model=
"item.url"
/>
...
...
@@ -69,14 +70,19 @@
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
listBrands
}
from
"
@/api/pms/brand
"
import
SingleUpload
from
'
@/components/Upload/SingleUpload.vue
'
import
{
onMounted
,
reactive
,
ref
,
toRefs
,
unref
}
from
"
vue
"
import
{
ElForm
}
from
"
element-plus
"
// API 依赖
import
{
listBrands
}
from
"
@/api/pms/brand
"
// 自定义组件依赖
import
SingleUpload
from
'
@/components/Upload/SingleUpload.vue
'
import
Editor
from
'
@/components/WangEditor/index.vue
'
const
emit
=
defineEmits
([
'
prev
'
,
'
next
'
])
const
dataForm
=
ref
(
ElForm
)
const
dataForm
Ref
=
ref
(
ElForm
)
const
props
=
defineProps
({
modelValue
:
{
...
...
@@ -88,7 +94,13 @@ const props = defineProps({
const
state
=
reactive
({
brandOptions
:
[]
as
Array
<
any
>
,
// 商品图册
pictures
:
[]
as
Array
<
any
>
,
pictures
:
[
{
url
:
undefined
,
main
:
true
},
// main = true 代表主图,可切换
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
}
]
as
Array
<
any
>
,
rules
:
{
name
:
[{
required
:
true
,
message
:
'
请填写商品名称
'
,
trigger
:
'
blur
'
}],
originPrice
:
[{
required
:
true
,
message
:
'
请填写原价
'
,
trigger
:
'
blur
'
}],
...
...
@@ -103,13 +115,15 @@ function loadData() {
listBrands
({}).
then
(
response
=>
{
state
.
brandOptions
=
response
.
data
})
const
goodsId
=
props
.
modelValue
.
id
const
goodsInfo
=
props
.
modelValue
console
.
log
(
'
商品信息
'
,
goodsInfo
)
const
goodsId
=
goodsInfo
.
id
if
(
goodsId
)
{
const
mainPicUrl
=
props
.
modelValue
.
picUrl
const
mainPicUrl
=
goodsInfo
.
picUrl
if
(
mainPicUrl
)
{
state
.
pictures
.
filter
(
item
=>
item
.
main
)[
0
].
url
=
mainPicUrl
}
const
subPicUrls
=
props
.
modelValue
.
subPicUrls
const
subPicUrls
=
goodsInfo
.
subPicUrls
if
(
subPicUrls
&&
subPicUrls
.
length
>
0
)
{
for
(
let
i
=
1
;
i
<=
subPicUrls
.
length
;
i
++
)
{
state
.
pictures
[
i
].
url
=
subPicUrls
[
i
-
1
]
...
...
@@ -120,11 +134,11 @@ function loadData() {
function
resetForm
()
{
state
.
pictures
=
[
{
url
:
undefined
,
main
:
true
},
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
true
},
// main 代表主图,可以切换
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
},
{
url
:
undefined
,
main
:
false
}
]
}
...
...
@@ -148,8 +162,7 @@ function handlePrev() {
}
function
handleNext
()
{
const
form
=
unref
(
dataForm
)
form
.
validate
((
valid
:
any
)
=>
{
dataFormRef
.
value
.
validate
((
valid
:
any
)
=>
{
if
(
valid
)
{
// 商品图片
const
mainPicUrl
=
state
.
pictures
.
filter
(
item
=>
item
.
main
==
true
&&
item
.
url
).
map
(
item
=>
item
.
url
)
...
...
@@ -167,7 +180,6 @@ function handleNext() {
onMounted
(()
=>
{
loadData
()
resetForm
()
})
</
script
>
...
...
src/views/pms/goods/components/GoodsStock.vue
浏览文件 @
a701d021
...
...
@@ -137,8 +137,8 @@
align=
"center"
>
<
template
#default=
"scope"
>
<el-form-item
:prop=
"'skuList['+scope.$index+'].s
n'"
:rules=
"rules.sku.s
n"
>
<el-input
v-model=
"scope.row.sn"
/>
<el-form-item
:prop=
"'skuList['+scope.$index+'].s
kuSn'"
:rules=
"rules.sku.skuS
n"
>
<el-input
v-model=
"scope.row.s
kuS
n"
/>
</el-form-item>
</
template
>
</el-table-column>
...
...
@@ -153,8 +153,8 @@
<el-table-column
label=
"库存"
align=
"center"
>
<
template
#default=
"scope"
>
<el-form-item
:prop=
"'skuList['+scope.$index+'].stock
'"
:rules=
"rules.sku.stock
"
>
<el-input
v-model=
"scope.row.stock"
/>
<el-form-item
:prop=
"'skuList['+scope.$index+'].stock
Num'"
:rules=
"rules.sku.stockNum
"
>
<el-input
v-model=
"scope.row.stock
Num
"
/>
</el-form-item>
</
template
>
</el-table-column>
...
...
@@ -174,16 +174,21 @@
</template>
<
script
setup
>
import
{
listAttributes
}
from
"
@/api/pms/attribute
"
;
import
SingleUpload
from
'
@/components/Upload/SingleUpload.vue
'
// import Sortable from 'sortablejs'
import
{
addGoods
,
updateGoods
}
from
"
@/api/pms/goods
"
;
import
{
computed
,
getCurrentInstance
,
nextTick
,
onMounted
,
reactive
,
ref
,
toRefs
,
unref
,
watch
}
from
"
vue
"
;
import
{
ElNotification
,
ElMessage
,
ElTable
,
ElForm
}
from
"
element-plus
"
import
{
useRouter
}
from
"
vue-router
"
;
import
{
Plus
,
Minus
}
from
'
@element-plus/icons-vue
'
import
{
ElNotification
,
ElMessage
,
ElTable
,
ElForm
}
from
"
element-plus
"
// API 引用
import
{
listAttributes
}
from
"
@/api/pms/attribute
"
;
import
{
addGoods
,
updateGoods
}
from
"
@/api/pms/goods
"
;
// 自定义组件引用
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
import
{
useRouter
}
from
"
vue-router
"
;
import
SingleUpload
from
'
@/components/Upload/SingleUpload.vue
'
// import Sortable from 'sortablejs'
const
categoryId
=
computed
(()
=>
props
.
modelValue
.
categoryId
);
const
emit
=
defineEmits
([
'
prev
'
,
'
next
'
])
const
proxy
=
getCurrentInstance
()
...
...
@@ -200,7 +205,6 @@ const props = defineProps({
}
})
const
categoryId
=
computed
(()
=>
props
.
modelValue
.
categoryId
);
const
state
=
reactive
({
specForm
:
{
...
...
@@ -217,9 +221,9 @@ const state = reactive({
value
:
[{
required
:
true
,
message
:
'
请输入规格值
'
,
trigger
:
'
blur
'
}]
},
sku
:
{
sn
:
[{
required
:
true
,
message
:
'
请输入商品编号
'
,
trigger
:
'
blur
'
}],
s
kuS
n
:
[{
required
:
true
,
message
:
'
请输入商品编号
'
,
trigger
:
'
blur
'
}],
price
:
[{
required
:
true
,
message
:
'
请输入商品价格
'
,
trigger
:
'
blur
'
}],
stock
:
[{
required
:
true
,
message
:
'
请输入商品库存
'
,
trigger
:
'
blur
'
}],
stock
Num
:
[{
required
:
true
,
message
:
'
请输入商品库存
'
,
trigger
:
'
blur
'
}],
}
},
colors
:
[
''
,
'
success
'
,
'
warning
'
,
'
danger
'
],
...
...
@@ -367,7 +371,7 @@ function generateSkuList() {
skuList
.
forEach
((
item
)
=>
{
item
.
specIds
=
item
.
specIds
.
substring
(
0
,
item
.
specIds
.
length
-
1
)
item
.
name
=
item
.
specValues
.
substring
(
0
,
item
.
spec
Id
s
.
length
-
1
).
replaceAll
(
'
_
'
,
'
'
)
item
.
name
=
item
.
specValues
.
substring
(
0
,
item
.
spec
Value
s
.
length
-
1
).
replaceAll
(
'
_
'
,
'
'
)
const
specIdArr
=
item
.
specIds
.
split
(
'
|
'
)
const
skus
=
props
.
modelValue
.
skuList
.
filter
((
sku
)
=>
sku
.
specIdArr
.
length
===
specIdArr
.
length
&&
...
...
@@ -378,9 +382,9 @@ function generateSkuList() {
if
(
skus
&&
skus
.
length
>
0
)
{
const
sku
=
skus
[
0
]
item
.
id
=
sku
.
id
item
.
s
n
=
sku
.
s
n
item
.
s
kuSn
=
sku
.
skuS
n
item
.
price
=
sku
.
price
/
100
item
.
stock
=
sku
.
stock
item
.
stock
Num
=
sku
.
stockNum
}
const
specValueArr
=
item
.
specValues
.
substring
(
0
,
item
.
specValues
.
length
-
1
).
split
(
'
_
'
)
// ['黑','6+128G','官方标配']
specValueArr
.
forEach
((
v
,
i
)
=>
{
...
...
@@ -527,12 +531,9 @@ function submitForm() {
ElMessage
.
warning
(
"
未添加商品库存
"
)
return
false
;
}
const
specForm
=
unref
(
specFormRef
)
specForm
.
validate
((
specValid
)
=>
{
specFormRef
.
value
.
validate
((
specValid
)
=>
{
if
(
specValid
)
{
const
skuForm
=
unref
(
skuFormRef
)
skuForm
.
validate
((
skuValid
)
=>
{
skuFormRef
.
value
.
validate
((
skuValid
)
=>
{
if
(
skuValid
)
{
// openFullScreen()
...
...
src/views/pms/goods/index.vue
浏览文件 @
a701d021
...
...
@@ -43,7 +43,7 @@
<el-table
:data=
"props.row.skuList"
border
>
<el-table-column
align=
"center"
label=
"商品编码"
prop=
"sn"
/>
<el-table-column
align=
"center"
label=
"商品编码"
prop=
"s
kuS
n"
/>
<el-table-column
align=
"center"
label=
"商品规格"
prop=
"name"
/>
<el-table-column
label=
"图片"
prop=
"picUrl"
>
<template
#default
="
scope
"
>
...
...
@@ -53,21 +53,29 @@
<el-table-column
align=
"center"
label=
"现价"
prop=
"price"
>
<
template
#default=
"scope"
>
{{
moneyFormatter
(
scope
.
row
.
price
)
}}
</
template
>
</el-table-column>
<el-table-column
align=
"center"
label=
"库存"
prop=
"stock"
/>
<el-table-column
align=
"center"
label=
"库存"
prop=
"stock
Num
"
/>
</el-table>
</template>
</el-table-column>
<el-table-column
label=
"商品名称"
prop=
"name"
min-width=
"140"
/>
<el-table-column
label=
"商品图片"
>
<
template
#default=
"row"
>
<img
:src=
"row.picUrl"
width=
"40"
>
<
template
#default=
"scope"
>
<el-popover
placement=
"right"
:width=
"400"
trigger=
"hover"
>
<img
:src=
"scope.row.picUrl"
width=
"400"
height=
"400"
/>
<template
#reference
>
<img
:src=
"scope.row.picUrl"
style=
"max-height: 60px;max-width: 60px"
/>
</
template
>
</el-popover>
</template>
</el-table-column>
<el-table-column
label=
"商品类目"
prop=
"categoryName"
min-width=
"100"
/>
<el-table-column
label=
"商品品牌"
prop=
"brandName"
min-width=
"100"
/>
<el-table-column
align=
"center"
label=
"零售价"
prop=
"originalPrice"
>
<
template
#default=
"scope"
>
{{
moneyFormatter
(
scope
.
row
.
p
rice
)
}}
</
template
>
<
template
#default=
"scope"
>
{{
moneyFormatter
(
scope
.
row
.
originP
rice
)
}}
</
template
>
</el-table-column>
<el-table-column
align=
"center"
label=
"促销价"
prop=
"price"
>
<
template
#default=
"scope"
>
{{
moneyFormatter
(
scope
.
row
.
price
)
}}
</
template
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录