dev2 #1
@ -32,6 +32,14 @@
|
||||
批量编辑
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="handleAdd"
|
||||
style="margin-bottom: 10px;"
|
||||
>
|
||||
新增图库
|
||||
</el-button>
|
||||
<div class="list">
|
||||
<el-table
|
||||
ref="imgTable"
|
||||
@ -148,6 +156,7 @@
|
||||
</div>
|
||||
<batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
|
||||
<img-edit ref="imgEditRef" @success="handleEditSuccess" />
|
||||
<img-add ref="imgAddRef" @callback_fun_add="handleEditSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -155,11 +164,13 @@
|
||||
import GoodsToolApi from '@/api/goodsTool'
|
||||
import batchEditBarcode from './batchEditBarcode.vue'
|
||||
import imgEdit from './imgEdit.vue'
|
||||
import imgAdd from './imgAdd.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
batchEditBarcode,
|
||||
imgEdit
|
||||
imgEdit,
|
||||
imgAdd,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -315,6 +326,10 @@ export default {
|
||||
handleEdit(row) {
|
||||
this.$refs.imgEditRef?.open(row);
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
this.$refs.imgAddRef.init();
|
||||
},
|
||||
},
|
||||
}
|
||||
</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