0309
This commit is contained in:
@fawn-nine
@@ -1,287 +1,328 @@
|
||||
<template>
|
||||
<el-dialog class="productsDialog" center :title="!dataForm.productId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
|
||||
@close="handlereset" lock-scroll>
|
||||
<el-steps :active="steps" simple style="margin-bottom: 15px;">
|
||||
<el-step title="基本信息" icon="el-icon-edit"></el-step>
|
||||
<el-step title="商品详情" icon="el-icon-upload"></el-step>
|
||||
</el-steps>
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm"
|
||||
label-width="100px">
|
||||
<div class="steps1" v-if="steps == 1">
|
||||
<el-form-item label="所属分类" prop="poids">
|
||||
<el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型" prop="goodsType">
|
||||
<el-select v-model="dataForm.goodsType" placeholder="请选择">
|
||||
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-dialog :title="!dataForm.productId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
|
||||
@close="handlereset" lock-scroll width="750px">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
|
||||
<el-form-item label="所属分类" prop="poids">
|
||||
<el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型" prop="goodsType">
|
||||
<el-select v-model="dataForm.goodsType" placeholder="请选择">
|
||||
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input v-model="dataForm.productName" placeholder="商品名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input v-model="dataForm.productName" placeholder="商品名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图" prop="productImages">
|
||||
<el-upload :limit="dataForm.limitCountImg" class="el-uploadfeng "
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview" :file-list="fileList" :on-success="handlePicSuccess"
|
||||
accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.productImages" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品轮播图" prop="productImageList">
|
||||
<el-upload :limit="5" class="el-uploadfeng noneBtnImg"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview" :file-list="swiperfileList" :on-success="bannerHandlePicSuccess"
|
||||
accept=".jpeg,.jpg,.gif,.png" :on-remove="bannerHandleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<el-form-item label="商品图" prop="productImages">
|
||||
<el-upload :limit="dataForm.limitCountImg" class="el-uploadfeng "
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
|
||||
:file-list="fileList" :on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.productImages" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品轮播图" prop="productImageList">
|
||||
<el-upload :limit="5" class="el-uploadfeng noneBtnImg"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
|
||||
:file-list="swiperfileList" :on-success="bannerHandlePicSuccess" accept=".jpeg,.jpg,.gif,.png"
|
||||
:on-remove="bannerHandleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.productImageList" alt="">
|
||||
</el-dialog> -->
|
||||
<span>图片尺寸：600*600px，支持图片类型：.jpeg,.jpg,.gif,.png， 最多上传5张图片</span>
|
||||
<span>图片尺寸：600*600px，支持图片类型：.jpeg,.jpg,.gif,.png， 最多上传5张图片</span>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="活动价" prop="price" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.price" placeholder="活动价"></el-input>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="活动价" prop="price" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.price" placeholder="活动价"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格" prop="hDprice" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.hDprice" placeholder="商品价格"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品重量" prop="weight" style="width: 50%; float: right;">
|
||||
<el-input style="width: 80%;" v-model="dataForm.weight" placeholder="商品重量"></el-input><span
|
||||
style="display: inline-block; float: right; width: 10%;">克</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品库存" prop="productStock" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.productStock" placeholder="商品库存"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="上架状态" prop="publishStatus">
|
||||
<el-form-item label="商品价格" prop="hDprice" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.hDprice" placeholder="商品价格"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品重量" prop="weight" style="width: 50%; float: right;">
|
||||
<el-input style="width: 80%;" v-model="dataForm.weight" placeholder="商品重量"></el-input><span
|
||||
style="display: inline-block; float: right; width: 10%;">克</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品库存" prop="productStock" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.productStock" placeholder="商品库存"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="上架状态" prop="publishStatus">
|
||||
<el-input v-model="dataForm.publishStatus" placeholder="上架状态"></el-input>
|
||||
</el-form-item> -->
|
||||
<div>
|
||||
<el-form-item label="出版社" prop="publisher" style="width: 50%; float: left;">
|
||||
<el-input placeholder="出版社" v-model="dataForm.publisher"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author" style="width: 50%; float: right;">
|
||||
<el-input placeholder="作者" v-model="dataForm.author"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="出版时间" prop="pubDate" style="width: 50%; float: left;">
|
||||
<el-date-picker @change="changed" format="yyyy 年 MM 月 dd 日" v-model="dataForm.pubDate" type="date" placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<!-- <el-input placeholder="出版时间" v-model=""></el-input> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="页数" prop="pageNum" style="width: 50%; float: right;">
|
||||
<el-input placeholder="页数" v-model="dataForm.pageNum"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="内文用纸材质" prop="quality" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.quality" placeholder="内文用纸材质"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开本" prop="format" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.format" placeholder="16开或其他规格"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="clear: both;">
|
||||
<el-form-item label="是否包邮" prop="isFreeMail">
|
||||
<div>
|
||||
<el-form-item label="出版社" prop="publisher" style="width: 50%; float: left;">
|
||||
<el-input placeholder="出版社" v-model="dataForm.publisher"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author" style="width: 50%; float: right;">
|
||||
<el-input placeholder="作者" v-model="dataForm.author"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="出版时间" prop="pubDate" style="width: 50%; float: left;">
|
||||
<el-date-picker @change="changeTime" format="yyyy 年 MM 月 dd 日" v-model="dataForm.pubDate" type="date"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<!-- <el-input placeholder="出版时间" v-model=""></el-input> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="页数" prop="pageNum" style="width: 50%; float: right;">
|
||||
<el-input placeholder="页数" v-model="dataForm.pageNum"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="内文用纸材质" prop="quality" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.quality" placeholder="内文用纸材质"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开本" prop="format" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.format" placeholder="16开或其他规格"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="clear: both;">
|
||||
<el-form-item label="是否包邮" prop="isFreeMail">
|
||||
<el-radio-group v-model="dataForm.isFreeMail">
|
||||
<el-radio :label="0">是</el-radio>
|
||||
<el-radio :label="1">否</el-radio>
|
||||
<el-radio :label="'0'">是</el-radio>
|
||||
<el-radio :label="'1'">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="商品详情" prop="productDetails">
|
||||
<quill-editor v-model="dataForm.productDetails" ref="myQuillEditor" :options="editorOption"
|
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
|
||||
@ready="onEditorReady($event)" class="shangpin_editor">
|
||||
</quill-editor>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="排序" prop="sort">
|
||||
<!-- <el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="dataForm.sort" placeholder="排序"></el-input>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="steps2" v-if="steps == 2">
|
||||
<div style="margin-bottom: 15px;"><b>商品详情</b></div>
|
||||
<quill-editor v-model="dataForm.productDetails" ref="myQuillEditor" height:400px :options="editorOption"
|
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
|
||||
@ready="onEditorReady($event)">
|
||||
</quill-editor>
|
||||
</div>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="handlereset">取消</el-button> -->
|
||||
<el-button type="warning" @click="steps = 1" plain size="mini">添加基本信息</el-button>
|
||||
<el-button type="success" @click="steps = 2" plain size="mini">添加商品详情</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()" plain size="mini">确 定</el-button>
|
||||
<el-button type="default" @click="handlereset" plain size="mini">关 闭</el-button>
|
||||
<el-button @click="handlereset">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
import global from '../../common/common.vue' //引入共用组间
|
||||
import {
|
||||
quillEditor
|
||||
} from 'vue-quill-editor'
|
||||
import global from '../../common/common.vue' //引入共用组间
|
||||
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl:global.baseUrl,
|
||||
goodsTypeList: [],
|
||||
steps: 1,
|
||||
visible: false,
|
||||
categorys: [],
|
||||
fileList: [], // 封面图
|
||||
swiperfileList: [],
|
||||
dialogVisible: false,
|
||||
props: {
|
||||
value: "catId",
|
||||
label: "name",
|
||||
children: "children",
|
||||
checkStrictly: true
|
||||
},
|
||||
dataForm: {
|
||||
hDprice:null, // 活动价
|
||||
productId: 0,
|
||||
limitCountImg: 1, // 图片数量
|
||||
productImageList: '', // 轮播图
|
||||
showBtnDealImg: true,
|
||||
noneBtnImg: false,
|
||||
productName: '',
|
||||
productStock:null, // 商品库存
|
||||
price: '',
|
||||
author: '',
|
||||
publisher: '',
|
||||
weight: '',
|
||||
pubDate: '',
|
||||
format: '', // 开本
|
||||
isFreeMail:'', // 是否包邮
|
||||
pageNum: '',
|
||||
quality: '', // 内文用纸
|
||||
sumSales: null, // 总销量
|
||||
publishStatus: '',
|
||||
productPid: '',
|
||||
productImages: '',
|
||||
createTime: '',
|
||||
updateTime: '',
|
||||
delFlag: '',
|
||||
sort: '',
|
||||
goodsType: '', // 商品类型
|
||||
poids: []
|
||||
},
|
||||
dataRule: {
|
||||
productName: [
|
||||
{ required: true, message: '商品名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '商品价格不能为空', trigger: 'blur' }
|
||||
],
|
||||
weight: [
|
||||
{ required: true, message: '商品重量不能为空', trigger: 'blur' }
|
||||
],
|
||||
goodsType: [
|
||||
{ required: true, message: '商品类型不能为空', trigger: 'blur' }
|
||||
],
|
||||
poids: [
|
||||
{ required: true, message: '商品父id不能为空', trigger: 'blur' }
|
||||
],
|
||||
productImages: [
|
||||
{ required: true, message: '商品图不能为空', trigger: 'blur' }
|
||||
],
|
||||
productDetails: [
|
||||
{ required: true, message: '商品详情不能为空', trigger: 'blur' }
|
||||
],
|
||||
productStock: [
|
||||
{ required: true, message: '商品库存不能为空', trigger: 'blur' }
|
||||
],
|
||||
// updateTime: [
|
||||
// { required: true, message: '更新时间不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// delFlag: [
|
||||
// { required: true, message: '删除标记不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// sort: [
|
||||
// { required: true, message: '排序不能为空', trigger: 'blur' }
|
||||
// ]
|
||||
},
|
||||
// 富文本编辑器配置
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
[{ header: 1 }, { header: 2 }], // 1、2 级标题
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
|
||||
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||
[{ direction: 'rtl' }], // 文本方向
|
||||
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
// [{ font: ['songti'] }], // 字体种类
|
||||
[{ align: [] }], // 对齐方式
|
||||
['clean'], // 清除文本格式
|
||||
['image', 'video'] // 链接、图片、视频
|
||||
]
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pointMemery:[], // 花生币操作记录
|
||||
baseUrl: global.baseUrl,
|
||||
goodsTypeList: [],
|
||||
visible: false,
|
||||
categorys: [],
|
||||
fileList: [], // 封面图
|
||||
swiperfileList: [],
|
||||
dialogVisible: false,
|
||||
props: {
|
||||
value: "catId",
|
||||
label: "name",
|
||||
children: "children",
|
||||
checkStrictly: true
|
||||
},
|
||||
placeholder: '请输入正文'
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeList()
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.productId = id || 0
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.productId) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/info/${this.dataForm.productId}`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataForm.productName = data.shopProduct.productName
|
||||
this.dataForm.price = data.shopProduct.price
|
||||
this.dataForm.goodsType = data.shopProduct.goodsType
|
||||
this.dataForm.weight = data.shopProduct.weight
|
||||
this.dataForm.publishStatus = data.shopProduct.publishStatus
|
||||
this.dataForm.productPid = data.shopProduct.productPid
|
||||
this.dataForm.productImages = data.shopProduct.productImages
|
||||
this.dataForm.createTime = data.shopProduct.createTime
|
||||
this.dataForm.updateTime = data.shopProduct.updateTime
|
||||
this.dataForm.delFlag = data.shopProduct.delFlag
|
||||
this.dataForm.sort = data.shopProduct.sort
|
||||
this.dataForm.publisher= data.shopProduct.publisher
|
||||
this.dataForm.author = data.shopProduct.author
|
||||
this.dataForm.pubDate = data.shopProduct.pubDate
|
||||
this.dataForm.pageNum = data.shopProduct.pageNum
|
||||
this.dataForm.quality = data.shopProduct.quality
|
||||
this.dataForm.format = data.shopProduct.format
|
||||
this.dataForm.isFreeMail = data.shopProduct.isFreeMail
|
||||
this.dataForm.productDetails = data.shopProduct.productDetails
|
||||
this.dataForm.poids = data.shopProduct.poids
|
||||
this.dataForm.productStock = data.shopProduct.productStock
|
||||
this.dataForm.hDprice = data.shopProduct.activityPrice
|
||||
if (data.shopProduct.productImages != "") {
|
||||
var img = { name: '', url: data.shopProduct.productImages }
|
||||
var attr = []
|
||||
attr.push(img)
|
||||
this.fileList = attr
|
||||
}
|
||||
if (data.shopProduct.productImageList == null || data.shopProduct.productImageList[0] == '' || data.shopProduct.productImageList == "") {
|
||||
return this.swiperfileList = []
|
||||
}else{
|
||||
// 有轮播图
|
||||
dataForm: {
|
||||
hDprice: null, // 活动价
|
||||
productId: 0,
|
||||
limitCountImg: 1, // 图片数量
|
||||
productImageList: '', // 轮播图
|
||||
showBtnDealImg: true,
|
||||
noneBtnImg: false,
|
||||
productName: '',
|
||||
productStock: null, // 商品库存
|
||||
price: '',
|
||||
author: '',
|
||||
publisher: '',
|
||||
weight: '',
|
||||
pubDate: '',
|
||||
format: '', // 开本
|
||||
isFreeMail: '', // 是否包邮
|
||||
pageNum: '',
|
||||
quality: '', // 内文用纸
|
||||
sumSales: null, // 总销量
|
||||
publishStatus: '',
|
||||
productPid: '',
|
||||
productImages: '',
|
||||
createTime: '',
|
||||
updateTime: '',
|
||||
delFlag: '',
|
||||
sort: '',
|
||||
goodsType: '', // 商品类型
|
||||
poids: []
|
||||
},
|
||||
dataRule: {
|
||||
productName: [{
|
||||
required: true,
|
||||
message: '商品名称不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
price: [{
|
||||
required: true,
|
||||
message: '商品价格不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
weight: [{
|
||||
required: true,
|
||||
message: '商品重量不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
goodsType: [{
|
||||
required: true,
|
||||
message: '商品类型不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
poids: [{
|
||||
required: true,
|
||||
message: '商品父id不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
productImages: [{
|
||||
required: true,
|
||||
message: '商品图不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
// productDetails: [{
|
||||
// required: true,
|
||||
// message: '商品详情不能为空',
|
||||
// trigger: 'blur'
|
||||
// }],
|
||||
productStock: [{
|
||||
required: true,
|
||||
message: '商品库存不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
// updateTime: [
|
||||
// { required: true, message: '更新时间不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// delFlag: [
|
||||
// { required: true, message: '删除标记不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// sort: [
|
||||
// { required: true, message: '排序不能为空', trigger: 'blur' }
|
||||
// ]
|
||||
},
|
||||
// 富文本编辑器配置
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
[{
|
||||
header: 1
|
||||
}, {
|
||||
header: 2
|
||||
}], // 1、2 级标题
|
||||
[{
|
||||
list: 'ordered'
|
||||
}, {
|
||||
list: 'bullet'
|
||||
}], // 有序、无序列表
|
||||
[{
|
||||
script: 'sub'
|
||||
}, {
|
||||
script: 'super'
|
||||
}], // 上标/下标
|
||||
[{
|
||||
indent: '-1'
|
||||
}, {
|
||||
indent: '+1'
|
||||
}], // 缩进
|
||||
[{
|
||||
direction: 'rtl'
|
||||
}], // 文本方向
|
||||
[{
|
||||
size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
|
||||
}], // 字体大小
|
||||
[{
|
||||
header: [1, 2, 3, 4, 5, 6]
|
||||
}], // 标题
|
||||
[{
|
||||
color: []
|
||||
}, {
|
||||
background: []
|
||||
}], // 字体颜色、字体背景颜色
|
||||
// [{ font: ['songti'] }], // 字体种类
|
||||
[{
|
||||
align: []
|
||||
}], // 对齐方式
|
||||
['clean'], // 清除文本格式
|
||||
['image', 'video'] // 链接、图片、视频
|
||||
]
|
||||
},
|
||||
placeholder: '请输入正文'
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeList()
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.productId = id || 0
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.productId) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/info/${this.dataForm.productId}`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataForm.productName = data.shopProduct.productName
|
||||
this.dataForm.price = data.shopProduct.price
|
||||
this.dataForm.goodsType = data.shopProduct.goodsType
|
||||
this.dataForm.weight = data.shopProduct.weight
|
||||
this.dataForm.publishStatus = data.shopProduct.publishStatus
|
||||
this.dataForm.productPid = data.shopProduct.productPid
|
||||
this.dataForm.productImages = data.shopProduct.productImages
|
||||
this.dataForm.createTime = data.shopProduct.createTime
|
||||
this.dataForm.updateTime = data.shopProduct.updateTime
|
||||
this.dataForm.delFlag = data.shopProduct.delFlag
|
||||
this.dataForm.sort = data.shopProduct.sort
|
||||
this.dataForm.publisher = data.shopProduct.publisher
|
||||
this.dataForm.author = data.shopProduct.author
|
||||
this.dataForm.pubDate = data.shopProduct.pubDate
|
||||
this.dataForm.pageNum = data.shopProduct.pageNum
|
||||
this.dataForm.quality = data.shopProduct.quality
|
||||
this.dataForm.format = data.shopProduct.format
|
||||
this.dataForm.isFreeMail = data.shopProduct.isFreeMail
|
||||
this.dataForm.productDetails = data.shopProduct.productDetails
|
||||
this.dataForm.poids = data.shopProduct.poids
|
||||
this.dataForm.productStock = data.shopProduct.productStock
|
||||
this.dataForm.hDprice = data.shopProduct.activityPrice
|
||||
if (data.shopProduct.productImages != "") {
|
||||
var img = {
|
||||
name: '',
|
||||
url: data.shopProduct.productImages
|
||||
}
|
||||
var attr = []
|
||||
attr.push(img)
|
||||
this.fileList = attr
|
||||
}
|
||||
if (data.shopProduct.productImageList == null || data.shopProduct.productImageList[0] == '' ||
|
||||
data.shopProduct.productImageList == "") {
|
||||
return this.swiperfileList = []
|
||||
}
|
||||
} else {
|
||||
// 有轮播图
|
||||
console.log(data.shopProduct.productImageList)
|
||||
let arr = []
|
||||
let arr1 = []
|
||||
@@ -289,203 +330,221 @@ export default {
|
||||
arr = data.shopProduct.productImageList.split(',');
|
||||
console.log(arr)
|
||||
arr.forEach((item, index) => {
|
||||
arr1.push({ name: index, url: item })
|
||||
arr1.push({
|
||||
name: index,
|
||||
url: item
|
||||
})
|
||||
});
|
||||
this.swiperfileList = arr1
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/sysdictdata/selectByType/goodsType'),
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList
|
||||
})
|
||||
},
|
||||
dealImgChange(file, fileList) {
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
this.dataForm.productImageList = this.getStringImgUrl()
|
||||
// console.log(this.dataForm.productImageList)
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/${!this.dataForm.productId ? 'save' : 'update'}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
'productId': this.dataForm.productId || undefined,
|
||||
'productName': this.dataForm.productName,
|
||||
'price': this.dataForm.price,
|
||||
'weight': this.dataForm.weight,
|
||||
'publishStatus': this.dataForm.publishStatus,
|
||||
'productPid': this.dataForm.poids[this.dataForm.poids.length - 1],
|
||||
'productImages': this.dataForm.productImages,
|
||||
'productImageList': this.dataForm.productImageList,
|
||||
'createTime': this.dataForm.createTime,
|
||||
'updateTime': this.dataForm.updateTime,
|
||||
'delFlag': this.dataForm.delFlag,
|
||||
'sort': this.dataForm.sort,
|
||||
'goodsType': this.dataForm.goodsType,
|
||||
'productDetails': this.dataForm.productDetails,
|
||||
'author': this.dataForm.author,
|
||||
'publisher': this.dataForm.publisher,
|
||||
'pubDate': this.dataForm.pubDate,
|
||||
'format': this.dataForm.format, // 开本
|
||||
'isFreeMail' : this.dataForm.isFreeMail,
|
||||
'pageNum': this.dataForm.pageNum,
|
||||
'quality': this.dataForm.quality, // 内文用纸
|
||||
'productStock' : this.dataForm.productStock , // 库存
|
||||
'activityPrice' : this.dataForm.hDprice
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.$refs['dataForm'].reset()
|
||||
this.$emit('refreshDataList')
|
||||
this.steps = 1
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/sysdictdata/selectByType/goodsType'),
|
||||
method: 'get',
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList
|
||||
})
|
||||
},
|
||||
dealImgChange(file, fileList) {
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
this.dataForm.productImageList = this.getStringImgUrl()
|
||||
// console.log(this.dataForm.productImageList)
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/${!this.dataForm.productId ? 'save' : 'update'}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
'productId': this.dataForm.productId || undefined,
|
||||
'productName': this.dataForm.productName,
|
||||
'price': this.dataForm.price,
|
||||
'weight': this.dataForm.weight,
|
||||
'publishStatus': this.dataForm.publishStatus,
|
||||
'productPid': this.dataForm.poids[this.dataForm.poids.length - 1],
|
||||
'productImages': this.dataForm.productImages,
|
||||
'productImageList': this.dataForm.productImageList,
|
||||
'createTime': this.dataForm.createTime,
|
||||
'updateTime': this.dataForm.updateTime,
|
||||
'delFlag': this.dataForm.delFlag,
|
||||
'sort': this.dataForm.sort,
|
||||
'goodsType': this.dataForm.goodsType,
|
||||
'productDetails': this.dataForm.productDetails,
|
||||
'author': this.dataForm.author,
|
||||
'publisher': this.dataForm.publisher,
|
||||
'pubDate': this.dataForm.pubDate,
|
||||
'format': this.dataForm.format, // 开本
|
||||
'isFreeMail': this.dataForm.isFreeMail,
|
||||
'pageNum': this.dataForm.pageNum,
|
||||
'quality': this.dataForm.quality, // 内文用纸
|
||||
'productStock': this.dataForm.productStock, // 库存
|
||||
'activityPrice': this.dataForm.hDprice
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$refs['dataForm'].resetFields()
|
||||
// this.$refs['dataForm'].reset()
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTime(e) {
|
||||
console.log(e)
|
||||
},
|
||||
getTreeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopcategory/listTree`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
this.categorys = data.data;
|
||||
})
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.productImages = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
bannerHandlePicSuccess(res, file) {
|
||||
// 轮播图上传成功
|
||||
if (res.msg == "success") {
|
||||
this.swiperfileList.push({
|
||||
name: file.name,
|
||||
url: res.url
|
||||
})
|
||||
console.log(this.swiperfileList)
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
})
|
||||
},
|
||||
changed(e){
|
||||
console.log(e)
|
||||
},
|
||||
getTreeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopcategory/listTree`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
this.categorys = data.data;
|
||||
})
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.productImages = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
bannerHandlePicSuccess(res, file) {
|
||||
// 轮播图上传成功
|
||||
if (res.msg == "success") {
|
||||
this.swiperfileList.push({ name: file.name, url: res.url })
|
||||
console.log(this.swiperfileList)
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
// 字符串图片地址
|
||||
getStringImgUrl() {
|
||||
let arr = this.swiperfileList.map(item => item.url)
|
||||
if(arr.length <= 0){
|
||||
return null
|
||||
}else{
|
||||
return arr.toString()
|
||||
}
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.productImages = res.url;
|
||||
this.fileList.push({ name: file.name, url: res.url })
|
||||
// console.log(this.dataForm.productImages,'productImages')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
bannerHandleRemove(file, fileList) {
|
||||
// 轮播图删除操作
|
||||
this.swiperfileList = fileList
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.productImages = '';
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlereset() {
|
||||
this.fileList = [],
|
||||
this.visible = false
|
||||
},
|
||||
// 字符串图片地址
|
||||
getStringImgUrl() {
|
||||
let arr = this.swiperfileList.map(item => item.url)
|
||||
if (arr.length <= 0) {
|
||||
return null
|
||||
} else {
|
||||
return arr.toString()
|
||||
}
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.productImages = res.url;
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
url: res.url
|
||||
})
|
||||
// console.log(this.dataForm.productImages,'productImages')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
bannerHandleRemove(file, fileList) {
|
||||
// 轮播图删除操作
|
||||
this.swiperfileList = fileList
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.productImages = '';
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlereset() {
|
||||
this.fileList = [],
|
||||
this.visible = false
|
||||
this.swiperfileList = []
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.$refs['dataForm'].reset()
|
||||
},
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
console.log('editor ready!', quill)
|
||||
},
|
||||
// 内容改变事件
|
||||
onEditorChange({ quill, html, text }) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.content = html
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val, oldVal) {
|
||||
this.getGoodsTypeList()
|
||||
},
|
||||
deep: true
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
//console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
// console.log('editor ready!', quill)
|
||||
},
|
||||
// 内容改变事件
|
||||
onEditorChange({
|
||||
quill,
|
||||
html,
|
||||
text
|
||||
}) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.content = html
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val, oldVal) {
|
||||
this.getGoodsTypeList()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
// .disUoloadSty {
|
||||
// .el-upload--picture-card {
|
||||
// display: none;
|
||||
// /* 上传按钮隐藏 */
|
||||
// }
|
||||
// }
|
||||
|
||||
.productsDialog{height: 800px; overflow-y: scroll;}
|
||||
.disUoloadSty {
|
||||
.el-upload--picture-card {
|
||||
display: none;
|
||||
/* 上传按钮隐藏 */
|
||||
}
|
||||
}
|
||||
// .el-form-item {
|
||||
// /deep/ .el-form-item__label {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-form-item {
|
||||
/deep/ .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.el-uploadfeng {
|
||||
.el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
.el-upload--picture-card {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
|
||||
.shangpin_editor .ql-editor {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
491
src/views/modules/shop/shopproduct-add-or-update11.vue
Normal file
491
src/views/modules/shop/shopproduct-add-or-update11.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<el-dialog class="productsDialog" center :title="!dataForm.productId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
|
||||
@close="handlereset" lock-scroll>
|
||||
<el-steps :active="steps" simple style="margin-bottom: 15px;">
|
||||
<el-step title="基本信息" icon="el-icon-edit"></el-step>
|
||||
<el-step title="商品详情" icon="el-icon-upload"></el-step>
|
||||
</el-steps>
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm"
|
||||
label-width="100px">
|
||||
<div class="steps1" v-if="steps == 1">
|
||||
<el-form-item label="所属分类" prop="poids">
|
||||
<el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型" prop="goodsType">
|
||||
<el-select v-model="dataForm.goodsType" placeholder="请选择">
|
||||
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input v-model="dataForm.productName" placeholder="商品名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图" prop="productImages">
|
||||
<el-upload :limit="dataForm.limitCountImg" class="el-uploadfeng "
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview" :file-list="fileList" :on-success="handlePicSuccess"
|
||||
accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.productImages" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品轮播图" prop="productImageList">
|
||||
<el-upload :limit="5" class="el-uploadfeng noneBtnImg"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview" :file-list="swiperfileList" :on-success="bannerHandlePicSuccess"
|
||||
accept=".jpeg,.jpg,.gif,.png" :on-remove="bannerHandleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.productImageList" alt="">
|
||||
</el-dialog> -->
|
||||
<span>图片尺寸：600*600px，支持图片类型：.jpeg,.jpg,.gif,.png， 最多上传5张图片</span>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="活动价" prop="price" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.price" placeholder="活动价"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格" prop="hDprice" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.hDprice" placeholder="商品价格"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品重量" prop="weight" style="width: 50%; float: right;">
|
||||
<el-input style="width: 80%;" v-model="dataForm.weight" placeholder="商品重量"></el-input><span
|
||||
style="display: inline-block; float: right; width: 10%;">克</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品库存" prop="productStock" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.productStock" placeholder="商品库存"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="上架状态" prop="publishStatus">
|
||||
<el-input v-model="dataForm.publishStatus" placeholder="上架状态"></el-input>
|
||||
</el-form-item> -->
|
||||
<div>
|
||||
<el-form-item label="出版社" prop="publisher" style="width: 50%; float: left;">
|
||||
<el-input placeholder="出版社" v-model="dataForm.publisher"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author" style="width: 50%; float: right;">
|
||||
<el-input placeholder="作者" v-model="dataForm.author"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="出版时间" prop="pubDate" style="width: 50%; float: left;">
|
||||
<el-date-picker @change="changed" format="yyyy 年 MM 月 dd 日" v-model="dataForm.pubDate" type="date" placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<!-- <el-input placeholder="出版时间" v-model=""></el-input> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="页数" prop="pageNum" style="width: 50%; float: right;">
|
||||
<el-input placeholder="页数" v-model="dataForm.pageNum"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="内文用纸材质" prop="quality" style="width: 50%; float: left;">
|
||||
<el-input v-model="dataForm.quality" placeholder="内文用纸材质"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开本" prop="format" style="width: 50%; float: right;">
|
||||
<el-input v-model="dataForm.format" placeholder="16开或其他规格"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="clear: both;">
|
||||
<el-form-item label="是否包邮" prop="isFreeMail">
|
||||
<el-radio-group v-model="dataForm.isFreeMail">
|
||||
<el-radio :label="'0'">是</el-radio>
|
||||
<el-radio :label="'1'">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="dataForm.sort" placeholder="排序"></el-input>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="steps2" v-if="steps == 2">
|
||||
<div style="margin-bottom: 15px;"><b>商品详情</b></div>
|
||||
<quill-editor v-model="dataForm.productDetails" ref="myQuillEditor" height:400px :options="editorOption"
|
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
|
||||
@ready="onEditorReady($event)">
|
||||
</quill-editor>
|
||||
</div>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="handlereset">取消</el-button> -->
|
||||
<el-button type="warning" @click="steps = 1" plain size="mini">添加基本信息</el-button>
|
||||
<el-button type="success" @click="steps = 2" plain size="mini">添加商品详情</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()" plain size="mini">确 定</el-button>
|
||||
<el-button type="default" @click="handlereset" plain size="mini">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
import global from '../../common/common.vue' //引入共用组间
|
||||
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl:global.baseUrl,
|
||||
goodsTypeList: [],
|
||||
steps: 1,
|
||||
visible: false,
|
||||
categorys: [],
|
||||
fileList: [], // 封面图
|
||||
swiperfileList: [],
|
||||
dialogVisible: false,
|
||||
props: {
|
||||
value: "catId",
|
||||
label: "name",
|
||||
children: "children",
|
||||
checkStrictly: true
|
||||
},
|
||||
dataForm: {
|
||||
hDprice:null, // 活动价
|
||||
productId: 0,
|
||||
limitCountImg: 1, // 图片数量
|
||||
productImageList: '', // 轮播图
|
||||
showBtnDealImg: true,
|
||||
noneBtnImg: false,
|
||||
productName: '',
|
||||
productStock:null, // 商品库存
|
||||
price: '',
|
||||
author: '',
|
||||
publisher: '',
|
||||
weight: '',
|
||||
pubDate: '',
|
||||
format: '', // 开本
|
||||
isFreeMail:'', // 是否包邮
|
||||
pageNum: '',
|
||||
quality: '', // 内文用纸
|
||||
sumSales: null, // 总销量
|
||||
publishStatus: '',
|
||||
productPid: '',
|
||||
productImages: '',
|
||||
createTime: '',
|
||||
updateTime: '',
|
||||
delFlag: '',
|
||||
sort: '',
|
||||
goodsType: '', // 商品类型
|
||||
poids: []
|
||||
},
|
||||
dataRule: {
|
||||
productName: [
|
||||
{ required: true, message: '商品名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '商品价格不能为空', trigger: 'blur' }
|
||||
],
|
||||
weight: [
|
||||
{ required: true, message: '商品重量不能为空', trigger: 'blur' }
|
||||
],
|
||||
goodsType: [
|
||||
{ required: true, message: '商品类型不能为空', trigger: 'blur' }
|
||||
],
|
||||
poids: [
|
||||
{ required: true, message: '商品父id不能为空', trigger: 'blur' }
|
||||
],
|
||||
productImages: [
|
||||
{ required: true, message: '商品图不能为空', trigger: 'blur' }
|
||||
],
|
||||
productDetails: [
|
||||
{ required: true, message: '商品详情不能为空', trigger: 'blur' }
|
||||
],
|
||||
productStock: [
|
||||
{ required: true, message: '商品库存不能为空', trigger: 'blur' }
|
||||
],
|
||||
// updateTime: [
|
||||
// { required: true, message: '更新时间不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// delFlag: [
|
||||
// { required: true, message: '删除标记不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// sort: [
|
||||
// { required: true, message: '排序不能为空', trigger: 'blur' }
|
||||
// ]
|
||||
},
|
||||
// 富文本编辑器配置
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
[{ header: 1 }, { header: 2 }], // 1、2 级标题
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
|
||||
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||
[{ direction: 'rtl' }], // 文本方向
|
||||
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
// [{ font: ['songti'] }], // 字体种类
|
||||
[{ align: [] }], // 对齐方式
|
||||
['clean'], // 清除文本格式
|
||||
['image', 'video'] // 链接、图片、视频
|
||||
]
|
||||
},
|
||||
placeholder: '请输入正文'
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeList()
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.productId = id || 0
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.productId) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/info/${this.dataForm.productId}`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataForm.productName = data.shopProduct.productName
|
||||
this.dataForm.price = data.shopProduct.price
|
||||
this.dataForm.goodsType = data.shopProduct.goodsType
|
||||
this.dataForm.weight = data.shopProduct.weight
|
||||
this.dataForm.publishStatus = data.shopProduct.publishStatus
|
||||
this.dataForm.productPid = data.shopProduct.productPid
|
||||
this.dataForm.productImages = data.shopProduct.productImages
|
||||
this.dataForm.createTime = data.shopProduct.createTime
|
||||
this.dataForm.updateTime = data.shopProduct.updateTime
|
||||
this.dataForm.delFlag = data.shopProduct.delFlag
|
||||
this.dataForm.sort = data.shopProduct.sort
|
||||
this.dataForm.publisher= data.shopProduct.publisher
|
||||
this.dataForm.author = data.shopProduct.author
|
||||
this.dataForm.pubDate = data.shopProduct.pubDate
|
||||
this.dataForm.pageNum = data.shopProduct.pageNum
|
||||
this.dataForm.quality = data.shopProduct.quality
|
||||
this.dataForm.format = data.shopProduct.format
|
||||
this.dataForm.isFreeMail = data.shopProduct.isFreeMail
|
||||
this.dataForm.productDetails = data.shopProduct.productDetails
|
||||
this.dataForm.poids = data.shopProduct.poids
|
||||
this.dataForm.productStock = data.shopProduct.productStock
|
||||
this.dataForm.hDprice = data.shopProduct.activityPrice
|
||||
if (data.shopProduct.productImages != "") {
|
||||
var img = { name: '', url: data.shopProduct.productImages }
|
||||
var attr = []
|
||||
attr.push(img)
|
||||
this.fileList = attr
|
||||
}
|
||||
if (data.shopProduct.productImageList == null || data.shopProduct.productImageList[0] == '' || data.shopProduct.productImageList == "") {
|
||||
return this.swiperfileList = []
|
||||
}else{
|
||||
// 有轮播图
|
||||
console.log(data.shopProduct.productImageList)
|
||||
let arr = []
|
||||
let arr1 = []
|
||||
|
||||
arr = data.shopProduct.productImageList.split(',');
|
||||
console.log(arr)
|
||||
arr.forEach((item, index) => {
|
||||
arr1.push({ name: index, url: item })
|
||||
});
|
||||
this.swiperfileList = arr1
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/sysdictdata/selectByType/goodsType'),
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList
|
||||
})
|
||||
},
|
||||
dealImgChange(file, fileList) {
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
this.dataForm.productImageList = this.getStringImgUrl()
|
||||
// console.log(this.dataForm.productImageList)
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopproduct/${!this.dataForm.productId ? 'save' : 'update'}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
'productId': this.dataForm.productId || undefined,
|
||||
'productName': this.dataForm.productName,
|
||||
'price': this.dataForm.price,
|
||||
'weight': this.dataForm.weight,
|
||||
'publishStatus': this.dataForm.publishStatus,
|
||||
'productPid': this.dataForm.poids[this.dataForm.poids.length - 1],
|
||||
'productImages': this.dataForm.productImages,
|
||||
'productImageList': this.dataForm.productImageList,
|
||||
'createTime': this.dataForm.createTime,
|
||||
'updateTime': this.dataForm.updateTime,
|
||||
'delFlag': this.dataForm.delFlag,
|
||||
'sort': this.dataForm.sort,
|
||||
'goodsType': this.dataForm.goodsType,
|
||||
'productDetails': this.dataForm.productDetails,
|
||||
'author': this.dataForm.author,
|
||||
'publisher': this.dataForm.publisher,
|
||||
'pubDate': this.dataForm.pubDate,
|
||||
'format': this.dataForm.format, // 开本
|
||||
'isFreeMail' : this.dataForm.isFreeMail,
|
||||
'pageNum': this.dataForm.pageNum,
|
||||
'quality': this.dataForm.quality, // 内文用纸
|
||||
'productStock' : this.dataForm.productStock , // 库存
|
||||
'activityPrice' : this.dataForm.hDprice
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.$refs['dataForm'].reset()
|
||||
this.$emit('refreshDataList')
|
||||
this.steps = 1
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changed(e){
|
||||
console.log(e)
|
||||
},
|
||||
getTreeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopcategory/listTree`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
this.categorys = data.data;
|
||||
})
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.productImages = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
bannerHandlePicSuccess(res, file) {
|
||||
// 轮播图上传成功
|
||||
if (res.msg == "success") {
|
||||
this.swiperfileList.push({ name: file.name, url: res.url })
|
||||
console.log(this.swiperfileList)
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
// 字符串图片地址
|
||||
getStringImgUrl() {
|
||||
let arr = this.swiperfileList.map(item => item.url)
|
||||
if(arr.length <= 0){
|
||||
return null
|
||||
}else{
|
||||
return arr.toString()
|
||||
}
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.productImages = res.url;
|
||||
this.fileList.push({ name: file.name, url: res.url })
|
||||
// console.log(this.dataForm.productImages,'productImages')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
bannerHandleRemove(file, fileList) {
|
||||
// 轮播图删除操作
|
||||
this.swiperfileList = fileList
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.productImages = '';
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlereset() {
|
||||
this.fileList = [],
|
||||
this.visible = false
|
||||
this.swiperfileList = []
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.$refs['dataForm'].reset()
|
||||
},
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
console.log('editor ready!', quill)
|
||||
},
|
||||
// 内容改变事件
|
||||
onEditorChange({ quill, html, text }) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.content = html
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val, oldVal) {
|
||||
this.getGoodsTypeList()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.productsDialog{height: 800px; overflow-y: scroll;}
|
||||
.disUoloadSty {
|
||||
.el-upload--picture-card {
|
||||
display: none;
|
||||
/* 上传按钮隐藏 */
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
/deep/ .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user