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

qill-editor富文本编辑

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

src/assets/css/globel.css

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

src/components/goods/edit.vue

@@ -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{
+  .el-checkbox{
-  margin: 0 5px 0 0;
+    margin: 0 5px 0 0;
-}
+  }
   .preview-pic{
     width: 100%;
   }
+
+  .add-goods{
+    margin-top: 10px;
+  }
+
 </style>

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

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"