|
|
@@ -25,9 +25,14 @@
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品描述" prop="desc" >
|
|
|
- <div id="wangeditor">
|
|
|
- <div ref="editorElem" style="text-align:left;"></div>
|
|
|
- </div>
|
|
|
+ <!-- bidirectional data binding（双向数据绑定） -->
|
|
|
+ <quill-editor v-model="content"
|
|
|
+ ref="myQuillEditor"
|
|
|
+ :options="editorOption"
|
|
|
+ @blur="onEditorBlur($event)"
|
|
|
+ @focus="onEditorFocus($event)"
|
|
|
+ @ready="onEditorReady($event)">
|
|
|
+ </quill-editor>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
@@ -41,175 +46,204 @@
|
|
|
import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
|
|
|
import store from '@/store'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
+// import E from 'wangeditor'
|
|
|
+// require styles
|
|
|
+import 'quill/dist/quill.core.css'
|
|
|
+import 'quill/dist/quill.snow.css'
|
|
|
+import 'quill/dist/quill.bubble.css'
|
|
|
|
|
|
-import E from 'wangeditor'
|
|
|
+import { quillEditor } from 'vue-quill-editor'
|
|
|
export default {
|
|
|
- data () {
|
|
|
- return {
|
|
|
- categoryList: [],
|
|
|
- type: this.$route.query.type,
|
|
|
- pageType: this.$route.query.pageType,
|
|
|
- organId: store.getters.organ,
|
|
|
- headers: {
|
|
|
- Authorization: getToken()
|
|
|
- },
|
|
|
- form: {
|
|
|
- brand: null,
|
|
|
- name: null,
|
|
|
- type: null,
|
|
|
- goodsCategoryId: null,
|
|
|
- specification: null,
|
|
|
- marketPrice: null,
|
|
|
- groupPurchasePrice: null,
|
|
|
- discountPrice: null,
|
|
|
- image: null,
|
|
|
- desc: null
|
|
|
- },
|
|
|
- rules: {
|
|
|
- brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
|
|
|
- { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 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) {
|
|
|
- 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) {
|
|
|
- this.$message({
|
|
|
- message: title + '成功',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.$router.push({
|
|
|
- path: '/contentManager/contentManager',
|
|
|
- query: {
|
|
|
- type: this.typeIndex(this.type)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg)
|
|
|
- }
|
|
|
+ components: {
|
|
|
+ quillEditor
|
|
|
},
|
|
|
- onCancel() {
|
|
|
- this.$router.push({
|
|
|
- path: '/contentManager/contentManager',
|
|
|
- query: {
|
|
|
- type: this.typeIndex(this.type)
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ categoryList: [],
|
|
|
+ type: this.$route.query.type,
|
|
|
+ pageType: this.$route.query.pageType,
|
|
|
+ organId: store.getters.organ,
|
|
|
+ headers: {
|
|
|
+ Authorization: getToken()
|
|
|
+ },
|
|
|
+ content: '<h2>I am Example</h2>',
|
|
|
+ editorOption: {
|
|
|
+ // some quill options
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ brand: null,
|
|
|
+ name: null,
|
|
|
+ type: null,
|
|
|
+ goodsCategoryId: null,
|
|
|
+ specification: null,
|
|
|
+ marketPrice: null,
|
|
|
+ groupPurchasePrice: null,
|
|
|
+ discountPrice: null,
|
|
|
+ image: null,
|
|
|
+ desc: null
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
|
|
|
+ { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
},
|
|
|
- onReSet(formName) {
|
|
|
- this.$refs[formName].resetFields()
|
|
|
+ mounted() {
|
|
|
+ // this.getList()
|
|
|
+ // this.editor = new E(this.$refs.editorElem)
|
|
|
+ // this.editor.customConfig.onchange = html => {
|
|
|
+ // this.editorContent = html
|
|
|
+ // };
|
|
|
+ // 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() // 创建富文本实例
|
|
|
+ console.log('this is current quill instance object', this.editor)
|
|
|
},
|
|
|
- getList() {
|
|
|
- if(this.pageType == 'create') return false
|
|
|
- goodsSingleQuery(this.$route.query.id).then(res => {
|
|
|
+ methods: {
|
|
|
+ onSubmit(formName) {
|
|
|
+ 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) {
|
|
|
- let result = res.data
|
|
|
- this.form = {
|
|
|
- id: result.id,
|
|
|
- brand: result.brand,
|
|
|
- name: result.name,
|
|
|
- type: result.type,
|
|
|
- goodsCategoryId: result.goodsCategoryId,
|
|
|
- specification: result.specification,
|
|
|
- marketPrice: result.marketPrice,
|
|
|
- groupPurchasePrice: result.groupPurchasePrice,
|
|
|
- discountPrice: result.discountPrice,
|
|
|
- image: result.image,
|
|
|
- desc: result.desc
|
|
|
- }
|
|
|
+ this.$message({
|
|
|
+ message: title + '成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.$router.push({
|
|
|
+ path: '/contentManager/contentManager',
|
|
|
+ query: {
|
|
|
+ type: this.typeIndex(this.type)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.form.image = res.data.url
|
|
|
- },
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const imageType = {
|
|
|
- 'image/png': true,
|
|
|
- 'image/jpeg': true
|
|
|
- }
|
|
|
- const isImage = imageType[file.type]
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/contentManager/contentManager',
|
|
|
+ query: {
|
|
|
+ type: this.typeIndex(this.type)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onReSet(formName) {
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ if(this.pageType == 'create') return false
|
|
|
+ goodsSingleQuery(this.$route.query.id).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ let result = res.data
|
|
|
+ this.form = {
|
|
|
+ id: result.id,
|
|
|
+ brand: result.brand,
|
|
|
+ name: result.name,
|
|
|
+ type: result.type,
|
|
|
+ goodsCategoryId: result.goodsCategoryId,
|
|
|
+ specification: result.specification,
|
|
|
+ marketPrice: result.marketPrice,
|
|
|
+ groupPurchasePrice: result.groupPurchasePrice,
|
|
|
+ discountPrice: result.discountPrice,
|
|
|
+ image: result.image,
|
|
|
+ desc: result.desc
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.form.image = res.data.url
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const imageType = {
|
|
|
+ 'image/png': true,
|
|
|
+ 'image/jpeg': true
|
|
|
+ }
|
|
|
+ const isImage = imageType[file.type]
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
|
|
- if (!isImage) {
|
|
|
- this.$message.error('只能上传图片格式!')
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
- }
|
|
|
- return isImage && isLt2M;
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error('只能上传图片格式!')
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
+ }
|
|
|
+ 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]
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
},
|
|
|
- typeChange(type) {
|
|
|
- let tempTitle = {
|
|
|
- 1: "精彩活动",
|
|
|
- 2: "热门资讯",
|
|
|
- 3: "活动列表"
|
|
|
+ computed: {
|
|
|
+ editor() {
|
|
|
+ return this.$refs.myQuillEditor.quill
|
|
|
}
|
|
|
- return tempTitle[type]
|
|
|
},
|
|
|
- typeIndex(type) {
|
|
|
- let tempTitle = {
|
|
|
- 3: 0,
|
|
|
- 1: 1,
|
|
|
- 2: 2
|
|
|
- }
|
|
|
- return tempTitle[type]
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
