xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

商品添加 tab切换，上传图片

Browse Source 
qill-editor富文本编辑
This commit is contained in:
xing 2020-06-30 10:32:58 +08:00
parent 084b60b15d
commit c8b4193b18
5 changed files with 115 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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"
},

3
src/assets/css/globel.css
View File

@ -25,4 +25,7 @@ html,body,#app{
}
.el-step__title{
font-size: 13px;
}
.quill-editor .ql-container {
min-height: 300px;;
}

65
src/components/goods/edit.vue
View File

@ -47,7 +47,7 @@
<el-tab-pane label="商品参数" name="1">
<el-form-item :key="item.attr_id" v-for="item in many" :label="item.attr_name">
<el-checkbox-group @change="change" v-model="item.attr_vals">
<el-checkbox-group v-model="item.attr_vals">
<el-checkbox border v-for="(v,i) in item.attr_vals" :key="i" :label="v"></el-checkbox>
</el-checkbox-group>
</el-form-item>
@ -73,7 +73,16 @@
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-tab-pane>
<el-tab-pane name="4" label="商品内容">商品内容</el-tab-pane>
<el-tab-pane name="4" label="商品内容">
<quill-editor
ref="myQuillEditor"
v-model="form.goods_introduce"
:options="editorOption"
/>
<el-button @click="sub" type="primary" class="add-goods">添加商品</el-button>
</el-tab-pane>
</el-tabs>
</el-form>
</el-card>
@ -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 {
</script>
<style lang="less" scoped>
.el-checkbox{
margin: 0 5px 0 0;
}
.el-checkbox{
margin: 0 5px 0 0;
}
.preview-pic{
width: 100%;
}
.add-goods{
margin-top: 10px;
}
</style>

6
src/main.js
View File

@ -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

48
yarn.lock
View File

@ -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"