组件化

src/components/fastposter/aside/extend/FpAsideComponent.vue

@@ -1,24 +1,51 @@
 <template>
   <div class="panel">
-    <div class="title">
-      <h3>组件</h3>
-    </div>
     <div class="list-wrapper">
       <div class="list">
+        <el-collapse>
+          <el-collapse-item title="酒款信息组件" name="1">
             <fp-aside-panel-component-item
-            v-for="item in items"
+                v-for="item in jkxxItems"
                 @click="addItemToEditor(item)"
-            :key="item.t"
+                :key="item.key"
                 :icon="item.t"
                 :title="item.name"
                 desc="点击创建"/>
+          </el-collapse-item>
+          <el-collapse-item title="厂牌信息组件" name="2">
+            <fp-aside-panel-component-item
+                v-for="item in cpxxItems"
+                @click="addItemToEditor(item)"
+                :key="item.key"
+                :icon="item.t"
+                :title="item.name"
+                desc="点击创建"/>
+          </el-collapse-item>
+          <el-collapse-item title="市售规格组件" name="3">
+            <fp-aside-panel-component-item
+                v-for="item in ssggItems"
+                @click="addItemToEditor(item)"
+                :key="item.key"
+                :icon="item.t"
+                :title="item.name"
+                desc="点击创建"/>
+          </el-collapse-item>
+          <el-collapse-item title="其它常用组件" name="4">
+            <fp-aside-panel-component-item
+                v-for="item in qtcyItems"
+                @click="addItemToEditor(item)"
+                :key="item.key"
+                :icon="item.t"
+                :title="item.name"
+                desc="点击创建"/>
+          </el-collapse-item>
+        </el-collapse>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { uniqueId } from '@/store/modules/fastposter/poster'
 import { mapMutations } from "vuex"
 import FpAsidePanelComponentItem from "./FpAsideComponentItem"
 export default {
@@ -26,20 +53,45 @@ export default {
   components: {FpAsidePanelComponentItem},
   data() {
     return {
-      items: [
+      // 酒款信息组件
-        {t: 'text', name: '文字', v: '请输入文字', w: 220, h: 42, s: 42},
+      jkxxItems: [
-        {t: 'image', name: '图片', v: 'https://fastposter.net/dassets/default.png', w: 200},
+        {t: 'text', name: '酒款名称', key: 'jkxx_jkmc', v: '请输入酒款名称', w: 300, h: 42, s: 42},
-        {t: 'avatar', name: '头像', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
+        {t: 'text', name: '酒款英语名称', key: 'jkxx_jkywmc', v: '请输入酒款英语名称', w: 400, h: 42, s: 42},
-        {
+        {t: 'image', name: '酒款图片', key: 'jkxx_jktp', v: 'https://fastposter.net/dassets/default.png', w: 200},
-          t: 'qrcode',
+        {t: 'image', name: '鱼眼标', key: 'jkxx_yyb', v: 'https://fastposter.net/dassets/default.png', w: 200},
-          name: '二维码',
+        {t: 'text', name: '酒款系列', key: 'jkxx_jkxl', v: '请输入酒款系列', w: 300, h: 42, s: 42},
-          v: 'https://fastposter.net/doc/',
+        {t: 'text', name: '啤酒风格', key: 'jkxx_pjfg', v: '请输入啤酒风格', w: 300, h: 42, s: 42},
-          w: 120,
+        {t: 'text', name: '啤酒风格英语', key: 'jkxx_pjfgyw', v: '请输入啤酒风格英语', w: 400, h: 42, s: 42},
-          h: 120,
+        {t: 'text', name: '酒精度数', key: 'jkxx_jjds', v: '请输入酒精度数', w: 300, h: 42, s: 42},
-          p: 0,
+        {t: 'text', name: '苦度值', key: 'jkxx_kdz', v: '请输入苦度值', w: 300, h: 42, s: 42},
-          c: '#000000',
+        {t: 'text', name: '原麦汁', key: 'jkxx_ymz', v: '请输入原麦汁', w: 300, h: 42, s: 42},
-          bgc: '#ffffff'
+        {t: 'text', name: '产品介绍', key: 'jkxx_cpjs', v: '请输入产品介绍', w: 300, h: 42, s: 42},
-        },
+        {t: 'text', name: '星球评分', key: 'jkxx_xqpf', v: '请输入星球评分', w: 300, h: 42, s: 42},
+      ],
+
+      // 厂牌信息组件
+      cpxxItems: [
+        {t: 'text', name: '品牌名称', key: 'cpxx_ppmc', v: '请输入品牌名称', w: 300, h: 42, s: 42},
+        {t: 'text', name: '品牌英语名称', key: 'cpxx_ppywmc', v: '请输入品牌英语名称', w: 400, h: 42, s: 42},
+        {t: 'text', name: '品牌所在地', key: 'cpxx_ppszd', v: '请输入品牌所在地', w: 400, h: 42, s: 42},
+        {t: 'avatar', name: '品牌LOGO', key: 'cpxx_pplogo', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
+      ],
+
+      // 市售规格组件
+      ssggItems: [
+        {t: 'text', name: '酒枪编号', key: 'ssgg_jjbh', v: '请输入酒枪编号', w: 300, h: 42, s: 42},
+        {t: 'text', name: '规格1', key: 'cpxx_gg1', v: '请输入规格1', w: 220, h: 42, s: 42},
+        {t: 'text', name: '价格1', key: 'cpxx_jg1', v: '请输入规格1的价格', w: 450, h: 42, s: 42},
+        {t: 'text', name: '规格2', key: 'cpxx_gg2', v: '请输入规格2', w: 220, h: 42, s: 42},
+        {t: 'text', name: '价格2', key: 'cpxx_jg2', v: '请输入规格2的价格', w: 220, h: 42, s: 42},
+      ],
+
+      // 其它常用组件
+      qtcyItems: [
+        {t: 'text', name: '文字', key: 'qtcy_text', v: '请输入文字', w: 220, h: 42, s: 42},
+        {t: 'image', name: '图片', key: 'qtcy_image', v: 'https://fastposter.net/dassets/default.png', w: 200},
+        {t: 'avatar', name: '头像', key: 'qtcy_avatar', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
+        {t: 'qrcode', name: '二维码', key: 'qtcy_qrcode', v: 'https://fastposter.net/doc/', w: 120, h: 120, p: 0, c: '#000000', bgc: '#ffffff'},
       ]
     }
   },
@@ -49,7 +101,7 @@ export default {
       'record': 'snapshots/record',
     }),
     addItemToEditor(item) {
-      this.addItem({...item,vd:item.name+uniqueId(6)})
+      this.addItem({...item, vd:item.key})
       this.record(`新增组件: ${item.name}`)
       document.getElementById('key-down').focus()
     },
@@ -58,12 +110,6 @@ export default {
 </script>
 
 <style scoped>
-.title {
-  padding: 17px 24px;
-  height: 56px;
-  box-sizing: border-box;
-}
-
 .title h3 {
   font-size: 16px;
   line-height: 22px;