update: 新增商品图片新增图库功能
This commit is contained in:
parent
ff1596bb92
commit
2a825e765f
@ -32,6 +32,14 @@
|
|||||||
批量编辑
|
批量编辑
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click.stop="handleAdd"
|
||||||
|
style="margin-bottom: 10px;"
|
||||||
|
>
|
||||||
|
新增图库
|
||||||
|
</el-button>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<el-table
|
<el-table
|
||||||
ref="imgTable"
|
ref="imgTable"
|
||||||
@ -148,6 +156,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
|
<batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
|
||||||
<img-edit ref="imgEditRef" @success="handleEditSuccess" />
|
<img-edit ref="imgEditRef" @success="handleEditSuccess" />
|
||||||
|
<img-add ref="imgAddRef" @callback_fun_add="handleEditSuccess" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -155,11 +164,13 @@
|
|||||||
import GoodsToolApi from '@/api/goodsTool'
|
import GoodsToolApi from '@/api/goodsTool'
|
||||||
import batchEditBarcode from './batchEditBarcode.vue'
|
import batchEditBarcode from './batchEditBarcode.vue'
|
||||||
import imgEdit from './imgEdit.vue'
|
import imgEdit from './imgEdit.vue'
|
||||||
|
import imgAdd from './imgAdd.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
batchEditBarcode,
|
batchEditBarcode,
|
||||||
imgEdit
|
imgEdit,
|
||||||
|
imgAdd,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -315,6 +326,10 @@ export default {
|
|||||||
handleEdit(row) {
|
handleEdit(row) {
|
||||||
this.$refs.imgEditRef?.open(row);
|
this.$refs.imgEditRef?.open(row);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleAdd() {
|
||||||
|
this.$refs.imgAddRef.init();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
193
src/views/product/goodsImg/imgAdd.vue
Normal file
193
src/views/product/goodsImg/imgAdd.vue
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog :title="title" :visible.sync="dialogVisible" @open="openDialog" :modal-append-to-body="false"
|
||||||
|
:append-to-body="true" :close-on-click-modal="false" width="70%">
|
||||||
|
<avue-form ref="formref" style="max-height: 700px; overflow-y: auto; margin-bottom: 50px" :key="formkey"
|
||||||
|
:option="option" v-model="form" @submit="handleSubmit" @error="handleSubmitError"></avue-form>
|
||||||
|
|
||||||
|
<span class="avue-dialog__footer avue-dialog__footer--right" v-if="['add', 'edit'].includes(ntype)">
|
||||||
|
<el-button icon="el-icon-upload" type="primary" :loading="btnLoading"
|
||||||
|
@click="submitBtnSave">保存</el-button>
|
||||||
|
<el-button icon="el-icon-circle-close" @click="dialogVisible = false">取消</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { saveBatchBarcode } from "@/api/goodsTool";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '新增',
|
||||||
|
dialogVisible: false,
|
||||||
|
ntype: 'add',
|
||||||
|
formkey: 1,
|
||||||
|
obj_detail: {},
|
||||||
|
btnLoading: false,
|
||||||
|
|
||||||
|
form: {},
|
||||||
|
option: {
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '添加图库',
|
||||||
|
prop: 'imgs',
|
||||||
|
type: 'dynamic',
|
||||||
|
span: 24,
|
||||||
|
children: {
|
||||||
|
align: 'center',
|
||||||
|
headerAlign: 'center',
|
||||||
|
rowAdd: (done) => {
|
||||||
|
if (this.form.imgs.length >= 5) {
|
||||||
|
this.$message.error('批次每次最多五条');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '商品名称',
|
||||||
|
prop: "name",
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '商品名称必须填写',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '条形码',
|
||||||
|
prop: "barcode",
|
||||||
|
tip: '如有条形码请记得添加',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品主图',
|
||||||
|
width: 200,
|
||||||
|
type: 'upload',
|
||||||
|
listType: 'picture-img',
|
||||||
|
propsHttp: {
|
||||||
|
res: 'data',
|
||||||
|
url: 'media_url',
|
||||||
|
},
|
||||||
|
action: 'https://mall.gpxscs.cn/api/admin/oss/upload',
|
||||||
|
tip: '只能上传jpg/png',
|
||||||
|
data: {
|
||||||
|
authorization: this.$store.state.user.token,
|
||||||
|
},
|
||||||
|
prop: 'thumb',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '商品主图必须有',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品附图',
|
||||||
|
type: 'upload',
|
||||||
|
width: 150,
|
||||||
|
listType: 'picture',
|
||||||
|
propsHttp: {
|
||||||
|
res: 'data',
|
||||||
|
url: 'media_url',
|
||||||
|
},
|
||||||
|
action: 'https://mall.gpxscs.cn/api/admin/oss/upload',
|
||||||
|
tip: '只能上传jpg/png',
|
||||||
|
data: {
|
||||||
|
authorization: this.$store.state.user.token,
|
||||||
|
},
|
||||||
|
prop: 'product_image_list',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品简称',
|
||||||
|
prop: "sname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品标题',
|
||||||
|
prop: "title",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '一级分类',
|
||||||
|
prop: "category_1st",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '二级分类',
|
||||||
|
prop: "category_2nd",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
labelPosition: 'right',
|
||||||
|
labelSuffix: '：',
|
||||||
|
labelWidth: 140,
|
||||||
|
gutter: 0,
|
||||||
|
menuBtn: false,
|
||||||
|
detail: false,
|
||||||
|
submitBtn: false,
|
||||||
|
submitText: '提交',
|
||||||
|
emptyBtn: false,
|
||||||
|
emptyText: '清空',
|
||||||
|
menuPosition: 'center',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.form = {}
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.formkey++
|
||||||
|
},
|
||||||
|
openDialog() {
|
||||||
|
this.title = '新增'
|
||||||
|
this.option.detail = false
|
||||||
|
},
|
||||||
|
submitBtnSave() {
|
||||||
|
this.btnLoading = true
|
||||||
|
this.$refs.formref.submit()
|
||||||
|
},
|
||||||
|
handleSubmitError() {
|
||||||
|
this.btnLoading = false
|
||||||
|
},
|
||||||
|
handleSubmit(form, done) {
|
||||||
|
done()
|
||||||
|
let putData = []
|
||||||
|
form.imgs.forEach((item) => {
|
||||||
|
let imageList = []
|
||||||
|
item.product_image_list.forEach((item) => {
|
||||||
|
let putObj = {
|
||||||
|
imageUrl: item,
|
||||||
|
}
|
||||||
|
imageList.push(putObj)
|
||||||
|
})
|
||||||
|
putData.push(
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
product_image_list: imageList,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
this.saveSet(saveBatchBarcode, putData)
|
||||||
|
},
|
||||||
|
saveSet(Interface, params) {
|
||||||
|
Interface(params).then(
|
||||||
|
(res) => {
|
||||||
|
this.$emit('callback_fun_add')
|
||||||
|
console.log(res)
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: res.msg,
|
||||||
|
})
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.btnLoading = false
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
this.btnLoading = false
|
||||||
|
window.console.log(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user