项目结构优化

Author: vincentzyc

src/components/page-config.vue

@@ -2,7 +2,7 @@
   <div class="form-config-container">
     <el-form label-position="top">
       <el-collapse v-model="activeName" accordion>
-        <el-collapse-item title="基础设置" name="collapse1">
+        <el-collapse-item title="基础设置" name="base">
           <el-form-item label="页面标题">
             <el-input v-model="pageData.config.title"></el-input>
           </el-form-item>
@@ -18,7 +18,7 @@
             </el-radio-group>
           </el-form-item>
         </el-collapse-item>
-        <el-collapse-item title="主题设置" name="collapse2" v-if="pageData.config.theme">
+        <el-collapse-item title="主题设置" name="theme" v-if="pageData.config.theme">
           <el-form-item label="图片上传">
             <ImgUpload :value.sync="pageData.config.theme.banner"/>
           </el-form-item>
@@ -45,7 +45,7 @@ import pageConfigData from '@/assets/json/page-config.json'
 export default {
   data() {
     return {
-      activeName: 'collapse1',
+      activeName: 'base',
       themes: pageConfigData.themes,
     }
   },

src/components/widget-config/base-config.vue

@@ -6,7 +6,7 @@
       </el-select>
     </el-form-item>
     <el-form-item label="是否显示标签" v-if="selectWg.hasOwnProperty('showLabel')">
-      <el-switch v-model="selectWg.showLabel" @change="selectWg.showLabel?$store.commit('setActiveCollapse', 'tag'):''"></el-switch>
+      <el-switch v-model="selectWg.showLabel" @change="selectWg.showLabel?$store.commit('setWgCollapse', 'tag'):''"></el-switch>
     </el-form-item>
     <el-form-item label="是否发送验证码" v-if="selectWg.hasOwnProperty('showCode')">
       <el-switch v-model="selectWg.showCode"></el-switch>

src/components/widget-config/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="selectWg && Object.keys(selectWg).length > 0">
     <el-form label-position="top">
-      <el-collapse v-model="activeCollapse" accordion>
+      <el-collapse v-model="wgCollapse" accordion>
         <el-collapse-item title="基础设置" name="base">
           <BaseConfig :selectWg="selectWg"/>
         </el-collapse-item>
@@ -31,12 +31,12 @@ export default {
     StyleConfig
   },
   computed: {
-    activeCollapse: {
+    wgCollapse: {
       get() {
-        return this.$store.state.common.activeCollapse
+        return this.$store.state.common.wgCollapse
       },
       set(val) {
-        this.$store.commit('setActiveCollapse', val)
+        this.$store.commit('setWgCollapse', val)
       }
     },
     ...mapState({

src/store/modules/common.js

@@ -6,7 +6,7 @@ const state = {
   },
   selectWg: [],
   configTab: 'page',
-  activeCollapse: "base",
+  wgCollapse: "base",
   selectTheme: ""
 }
 
@@ -28,8 +28,8 @@ const mutations = {
   setConfigTab(state, payload) {
     state.configTab = payload;
   },
-  setActiveCollapse(state, payload) {
-    state.activeCollapse = payload;
+  setWgCollapse(state, payload) {
+    state.wgCollapse = payload;
   },
   setSelectTheme(state, payload) {
     state.selectTheme = payload;