|
|
@@ -1,48 +1,17 @@
|
|
|
<template>
|
|
|
<div class="m-container">
|
|
|
<h2>
|
|
|
- <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + '商品'"></el-page-header>
|
|
|
+ <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + typeChange(type)"></el-page-header>
|
|
|
</h2>
|
|
|
|
|
|
<div class="m-core">
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 500px">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 100%">
|
|
|
<el-form-item label="品牌" prop="brand">
|
|
|
<el-input v-model="form.brand"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品名称" prop="name">
|
|
|
<el-input v-model="form.name"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品类型" prop="type">
|
|
|
- <el-select v-model="form.type">
|
|
|
- <el-option label="乐器" value="INSTRUMENT"></el-option>
|
|
|
- <el-option label="辅件" value="ACCESSORIES"></el-option>
|
|
|
- <el-option label="教材" value="TEACHING"></el-option>
|
|
|
- <el-option label="教谱" value="STAFF"></el-option>
|
|
|
- <el-option label="其它" value="OTHER"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品分类" prop="goodsCategoryId">
|
|
|
- <el-select v-model="form.goodsCategoryId">
|
|
|
- <el-option
|
|
|
- v-for="item in categoryList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品型号" prop="specification">
|
|
|
- <el-input v-model="form.specification" ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品价格" prop="marketPrice">
|
|
|
- <el-input type="number" v-model="form.marketPrice" ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品团购价" prop="groupPurchasePrice">
|
|
|
- <el-input type="number" v-model="form.groupPurchasePrice" ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品采购价" prop="discountPrice">
|
|
|
- <el-input type="number" v-model="form.discountPrice" ></el-input>
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="商品图片" prop="image">
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
@@ -55,8 +24,10 @@
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品描述" prop="desc">
|
|
|
- <el-input type="textarea" v-model="form.desc" ></el-input>
|
|
|
+ <el-form-item label="商品描述" prop="desc" >
|
|
|
+ <div id="wangeditor">
|
|
|
+ <div ref="editorElem" style="text-align:left;"></div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
@@ -70,37 +41,19 @@
|
|
|
import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
|
|
|
import store from '@/store'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
-let validPrice = (rule, value,callback)=>{
|
|
|
- if (!value){
|
|
|
- callback(new Error('请输入金额'))
|
|
|
- }else if (value < 0){
|
|
|
- callback(new Error('输入金额必须大于0'))
|
|
|
- }else if(value >= 100000) {
|
|
|
- callback(new Error('输入金额必须小于100000'))
|
|
|
- }else {
|
|
|
- callback()
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+import E from 'wangeditor'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
categoryList: [],
|
|
|
- pageType: this.$route.query.type,
|
|
|
+ type: this.$route.query.type,
|
|
|
+ pageType: this.$route.query.pageType,
|
|
|
organId: store.getters.organ,
|
|
|
headers: {
|
|
|
Authorization: getToken()
|
|
|
},
|
|
|
form: {
|
|
|
- // brand: 'xxxl',
|
|
|
- // name: '长号',
|
|
|
- // type: 'INSTRUMENT',
|
|
|
- // goodsCategoryId: 7,
|
|
|
- // specification: 'xxxeed',
|
|
|
- // marketPrice: 10000,
|
|
|
- // groupPurchasePrice: 9000,
|
|
|
- // discountPrice: 8000,
|
|
|
- // image: null,
|
|
|
- // desc: 'C调、法式键、曲列、E键、白铜按键、台湾镍白'
|
|
|
brand: null,
|
|
|
name: null,
|
|
|
type: null,
|
|
|
@@ -114,49 +67,64 @@ export default {
|
|
|
},
|
|
|
rules: {
|
|
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
|
|
|
- { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
|
|
|
- name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
|
|
- { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
|
|
|
- type: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
|
|
|
- goodsCategoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
|
|
|
- specification: [{ required: true, message: '请输入商品型号', trigger: 'blur' },
|
|
|
- { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
|
|
|
- marketPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
|
|
|
- groupPurchasePrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
|
|
|
- discountPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
|
|
|
- // marketPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
|
|
|
- // groupPurchasePrice: [{ required: true, message: '请输入商品团购价', trigger: 'blur' }],
|
|
|
- // discountPrice: [{ required: true, message: '请输入商品采购价', trigger: 'blur' }],
|
|
|
- image: [{ required: true, message: '请选择图片', trigger: 'blur' }],
|
|
|
- desc: [{ required: true, message: '请输入商品描述', trigger: 'blur' }]
|
|
|
+ { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getList()
|
|
|
- this.getCatagory()
|
|
|
+ // this.getList()
|
|
|
+ this.editor = new E(this.$refs.editorElem)
|
|
|
+ // 编辑器的事件，每次改变会获取其html内容
|
|
|
+ this.editor.customConfig.onchange = html => {
|
|
|
+ this.editorContent = html;
|
|
|
+ // this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
|
|
|
+ };
|
|
|
+ this.editor.customConfig.menus = [
|
|
|
+ // 菜单配置
|
|
|
+ 'head', // 标题
|
|
|
+ 'bold', // 粗体
|
|
|
+ 'fontSize', // 字号
|
|
|
+ 'fontName', // 字体
|
|
|
+ 'italic', // 斜体
|
|
|
+ 'underline', // 下划线
|
|
|
+ 'strikeThrough', // 删除线
|
|
|
+ 'foreColor', // 文字颜色
|
|
|
+ 'backColor', // 背景颜色
|
|
|
+ 'link', // 插入链接
|
|
|
+ 'list', // 列表
|
|
|
+ 'justify', // 对齐方式
|
|
|
+ 'quote', // 引用
|
|
|
+ 'emoticon', // 表情
|
|
|
+ 'image', // 插入图片
|
|
|
+ 'table', // 表格
|
|
|
+ 'code', // 插入代码
|
|
|
+ 'undo', // 撤销
|
|
|
+ 'redo' // 重复
|
|
|
+ ]
|
|
|
+ this.editor.create() // 创建富文本实例
|
|
|
},
|
|
|
methods: {
|
|
|
onSubmit(formName) {
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.pageType == 'create') {
|
|
|
- if(this.form.id) { // 判断有没有Id，如果有则删除
|
|
|
- delete this.form.id
|
|
|
- }
|
|
|
- this.form.status = 'YES' // 默认上架
|
|
|
- goodsAdd(this.form).then(res => {
|
|
|
- this.messageTips('添加', res)
|
|
|
- })
|
|
|
- } else if (this.pageType == 'update') {
|
|
|
- goodsUpdate(this.form).then(res => {
|
|
|
- this.messageTips('修改', res)
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
+ console.log(this.editorContent)
|
|
|
+ // this.$refs[formName].validate((valid) => {
|
|
|
+ // if (valid) {
|
|
|
+ // if (this.pageType == 'create') {
|
|
|
+ // if(this.form.id) { // 判断有没有Id，如果有则删除
|
|
|
+ // delete this.form.id
|
|
|
+ // }
|
|
|
+ // this.form.status = 'YES' // 默认上架
|
|
|
+ // goodsAdd(this.form).then(res => {
|
|
|
+ // this.messageTips('添加', res)
|
|
|
+ // })
|
|
|
+ // } else if (this.pageType == 'update') {
|
|
|
+ // goodsUpdate(this.form).then(res => {
|
|
|
+ // this.messageTips('修改', res)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // })
|
|
|
},
|
|
|
messageTips(title, res) {
|
|
|
if(res.code == 200) {
|
|
|
@@ -164,13 +132,23 @@ export default {
|
|
|
message: title + '成功',
|
|
|
type: 'success'
|
|
|
})
|
|
|
- this.$router.push('/shopManager/shopManager')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/contentManager/contentManager',
|
|
|
+ query: {
|
|
|
+ type: this.typeIndex(this.type)
|
|
|
+ }
|
|
|
+ })
|
|
|
} else {
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
},
|
|
|
onCancel() {
|
|
|
- this.$router.push('/shopManager/shopManager')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/contentManager/contentManager',
|
|
|
+ query: {
|
|
|
+ type: this.typeIndex(this.type)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
onReSet(formName) {
|
|
|
this.$refs[formName].resetFields()
|
|
|
@@ -178,10 +156,8 @@ export default {
|
|
|
getList() {
|
|
|
if(this.pageType == 'create') return false
|
|
|
goodsSingleQuery(this.$route.query.id).then(res => {
|
|
|
- console.log(res)
|
|
|
if(res.code == 200) {
|
|
|
let result = res.data
|
|
|
- console.log(result)
|
|
|
this.form = {
|
|
|
id: result.id,
|
|
|
brand: result.brand,
|
|
|
@@ -198,27 +174,8 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- getCatagory() {
|
|
|
- categoryListTree({
|
|
|
- delFlag: 0,
|
|
|
- rows: 9999
|
|
|
- }).then(res => {
|
|
|
- let result = res.data
|
|
|
- if(res.code == 200) {
|
|
|
- let tempArray = []
|
|
|
- result.rows.forEach(row => {
|
|
|
- tempArray.push({
|
|
|
- label: row.name,
|
|
|
- value: row.id
|
|
|
- })
|
|
|
- })
|
|
|
- this.categoryList = tempArray
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
this.form.image = res.data.url
|
|
|
-
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
const imageType = {
|
|
|
@@ -236,10 +193,32 @@ export default {
|
|
|
}
|
|
|
return isImage && isLt2M;
|
|
|
},
|
|
|
+ typeChange(type) {
|
|
|
+ let tempTitle = {
|
|
|
+ 1: "精彩活动",
|
|
|
+ 2: "热门资讯",
|
|
|
+ 3: "活动列表"
|
|
|
+ }
|
|
|
+ return tempTitle[type]
|
|
|
+ },
|
|
|
+ typeIndex(type) {
|
|
|
+ let tempTitle = {
|
|
|
+ 3: 0,
|
|
|
+ 1: 1,
|
|
|
+ 2: 2
|
|
|
+ }
|
|
|
+ return tempTitle[type]
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.m-container {
|
|
|
+ min-width: 100%;
|
|
|
+}
|
|
|
+.el-input {
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
.el-button--primary {
|
|
|
background: #14928a;
|
|
|
border-color: #14928a;
|
lex