From c8b4193b182d8362c4a7f3b7097b4bebbfba8bc4 Mon Sep 17 00:00:00 2001 From: xing Date: Tue, 30 Jun 2020 10:32:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E6=B7=BB=E5=8A=A0=20tab?= =?UTF-8?q?=E5=88=87=E6=8D=A2=EF=BC=8C=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=20qill-editor=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/assets/css/globel.css | 3 ++ src/components/goods/edit.vue | 65 +++++++++++++++++++++++++++++++---- src/main.js | 6 ++++ yarn.lock | 48 ++++++++++++++++++++++++-- 5 files changed, 115 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index dd0850b..694772d 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "axios": "^0.19.2", "core-js": "^3.6.5", "element-ui": "^2.13.2", + "lodash": "^4.17.15", "vue": "^2.6.11", + "vue-quill-editor": "^3.0.6", "vue-router": "^3.2.0", "vue-table-with-tree-grid": "^0.2.4" }, diff --git a/src/assets/css/globel.css b/src/assets/css/globel.css index 5ebaad7..52d387a 100644 --- a/src/assets/css/globel.css +++ b/src/assets/css/globel.css @@ -25,4 +25,7 @@ html,body,#app{ } .el-step__title{ font-size: 13px; +} +.quill-editor .ql-container { + min-height: 300px;; } \ No newline at end of file diff --git a/src/components/goods/edit.vue b/src/components/goods/edit.vue index 4329ea1..465928d 100644 --- a/src/components/goods/edit.vue +++ b/src/components/goods/edit.vue @@ -47,7 +47,7 @@ - + @@ -73,7 +73,16 @@
只能上传jpg/png文件，且不超过500kb
 - 商品内容 + + + + 添加商品 + + @@ -100,7 +109,9 @@ export default { goods_weight: 0, goods_number: 0, goods_cat: '', - pics: [] + pics: [], + goods_introduce: '', + attrs: [] }, selectedOptions: { label: 'cat_name', @@ -114,13 +125,16 @@ export default { headers: { Authorization: window.sessionStorage.getItem('token') }, + editorOption: { + // Some Quill options... + }, selectKey: [], category: [], imageUrl: '', picVisible: false, rules: { goods_name: [ - { required: true, message: '请输入名称', trigger: 'blur' } + { required: true, message: '请输入商品名称', trigger: 'blur' } ], goods_price: [ { required: true, message: '请输入价格', trigger: 'blur' } @@ -140,6 +154,38 @@ export default { } }, methods: { + + async post () { + this.many.forEach(value => { + this.form.attrs.push({ + attr_id: value.attr_id, + attr_vals: value.attr_vals.join(' ') + }) + }) + this.only.forEach(value => { + this.form.attrs.push({ + attr_id: value.attr_id, + attr_vals: value.attr_vals.join(' ') + }) + }) + + const { data: res } = await this.$http.post('goods', this.form) + + if ([200, 201].indexOf(res.meta.status) < 0) { + return this.$message.error(res.meta.msg) + } + this.$message.success(res.meta.msg) + await this.$router.push('/goods') + }, + sub () { + this.$refs.form.validate((valid, obj) => { + if (!valid) { + const key = Object.keys(obj)[0] + return this.$message.error(obj[key][0].message) + } + this.post() + }) + }, uploadSuccess (response) { if (response.meta.status !== 200) { return this.$message.error(response.meta.msg) @@ -201,10 +247,15 @@ export default { diff --git a/src/main.js b/src/main.js index c23fb8b..a8bf053 100644 --- a/src/main.js +++ b/src/main.js @@ -7,7 +7,13 @@ import './assets/fonts/iconfont.css' import './assets/css/globel.css' import tableTree from 'vue-table-with-tree-grid' import axios from 'axios' +import vueQuillEditor from 'vue-quill-editor' +import 'quill/dist/quill.core.css' // import styles +import 'quill/dist/quill.snow.css' // for snow theme +import 'quill/dist/quill.bubble.css' // for bubble theme + +Vue.use(vueQuillEditor) Vue.component('table-tree', tableTree) axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 为每个请求头挂一个 token diff --git a/yarn.lock b/yarn.lock index 5780b34..4a0e745 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2300,7 +2300,7 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -clone@^2.1.2: +clone@^2.1.1, clone@^2.1.2: version "2.1.2" resolved "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclone%2Fdownload%2Fclone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= @@ -3505,6 +3505,11 @@ event-pubsub@4.3.0: resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e" integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ== +eventemitter3@^2.0.3: + version "2.0.3" + resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba" + integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo= + eventemitter3@^4.0.0: version "4.0.4" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384" @@ -3636,7 +3641,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2: assign-symbols "^1.0.0" is-extendable "^1.0.1" -extend@~3.0.2: +extend@^3.0.2, extend@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== @@ -3679,6 +3684,11 @@ fast-deep-equal@^3.1.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== +fast-diff@1.1.2: + version "1.1.2" + resolved "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154" + integrity sha1-S2LEK44D3j+EhGC2OQeZIGldAVQ= + fast-glob@^2.2.6: version "2.2.7" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d" @@ -6010,6 +6020,11 @@ param-case@2.1.x: dependencies: no-case "^2.2.0" +parchment@^1.1.4: + version "1.1.4" + resolved "https://registry.npm.taobao.org/parchment/download/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5" + integrity sha1-rt7Xq5OP6SHUw0vDOc4RaLwv/eU= + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -6754,6 +6769,27 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e" integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA== +quill-delta@^3.6.2: + version "3.6.3" + resolved "https://registry.npm.taobao.org/quill-delta/download/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032" + integrity sha1-sZ/SuJQSMBxg4f8hPY2GDqwPEDI= + dependencies: + deep-equal "^1.0.1" + extend "^3.0.2" + fast-diff "1.1.2" + +quill@^1.3.4: + version "1.3.7" + resolved "https://registry.npm.taobao.org/quill/download/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8" + integrity sha1-2lsvOixHDpMjQM2/NmjJ8h+Shug= + dependencies: + clone "^2.1.1" + deep-equal "^1.0.1" + eventemitter3 "^2.0.3" + extend "^3.0.2" + parchment "^1.1.4" + quill-delta "^3.6.2" + randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -8296,6 +8332,14 @@ vue-loader@^15.9.2: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" +vue-quill-editor@^3.0.6: + version "3.0.6" + resolved "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz#1f85646211d68a31a80a72cb7f45bb2f119bc8fb" + integrity sha1-H4VkYhHWijGoCnLLf0W7LxGbyPs= + dependencies: + object-assign "^4.1.1" + quill "^1.3.4" + vue-router@^3.2.0: version "3.3.4" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b"