自定义列表组件

src/api/index.js

@@ -84,6 +84,10 @@ console.log(process.env,'-----------------config------')
     getVehicleNumber(number) {
         return requestGET(`${process.env.OLSHOP_URL}/user/generatorUniqueCodeByCarDynamic?numberPlate=${encodeURIComponent(number)}`)
     },
+    // 获取数据源
+    outDataSourceData(data) {
+        return requestPOST(`${process.env.OLSHOP_URL}/outDataSource/api`,data)
+    },
 
  }
  
\ No newline at end of file

src/components/custom-list/index.vue

 <template>
   <!-- 自定义列表 -->
-  <div class="customList" :style="{'padding':padding+'px','margin': margin+'px','border-radius': borderRadius + 'px','background':backgroundColor}">
-    <div v-for="(item,index) in 4" :key="index" @click="itemClick(item,index)">
-      <rich-text :nodes="comStr"></rich-text>
+  <div class="customList" v-if="loaded && comDataList.length>0" :style="{'padding':padding+'px','margin': margin+'px','border-radius': borderRadius + 'px','background':backgroundColor}">
+    <div v-for="(item,index) in comDataList" :key="index" @click="itemClick(item,index)">
+      <rich-text :nodes="item.comStr"></rich-text>
     </div>
   </div>
 </template>
@@ -20,6 +20,7 @@ function compiler(str, data) {
   return str;
 }
 import Vue from "vue";
+import index from "@/api/index";
 export default {
   name: "custom-list",
   props: {
@@ -35,7 +36,9 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      loaded: false,
+    };
   },
   computed:{
     comStr(){
@@ -53,13 +56,50 @@ export default {
     backgroundColor() {
       return this.datas.componentData.backgroundColor;
     },
+    showCont() {
+      return this.datas.componentData.showCont;
+    },
+    dataSourceObj() {
+      return this.datas.componentData.dataSourceObj;
+    },
+    comDataList: {
+      get() {
+        return this.datas.componentData.comDataList || [];
+      },
+      set(newValue) {
+        this.datas.componentData.comDataList = newValue;
+      },
+    },
+  },
+  created() {
+    this.getList();
   },
-  created() {},
   mounted() {},
   methods:{
     itemClick(item,index){
       eval(this.datas.componentData.comMethods)
-    }
+    },
+    getList(){
+      let query = {
+        ...this.dataSourceObj,
+        current: 1,
+        size: this.showCont,
+      }
+      index.outDataSourceData(query).then(res=>{
+        if(res.data.code == 200){
+          this.comDataList = res.data.data.records || [];
+          if(this.comDataList && this.comDataList.length>0){
+            this.comDataList.forEach((item,index)=>{
+              item.comStr = compiler(this.datas.componentData.comStr,item);
+            })
+          }
+        }
+        this.loaded = true;
+      })
+    },
+    getComStr(item){
+      compiler(this.datas.componentData.comStr,item);
+    },
   },
   components: {},
 };

src/pages/home/index.vue

@@ -93,9 +93,9 @@
           <div v-if="item.componentCode == 'wo-timeout' && item.componentInfo.visible == 1">
 			      <wo-timeout :datas="item"></wo-timeout>
           </div>
-          <!-- <div v-if="item.componentCode == 'custom-list' && item.componentInfo.visible == 1">
+          <div v-if="item.componentCode == 'custom-list' && item.componentInfo.visible == 1">
 			      <custom-list :datas="item"></custom-list>
-          </div> -->
+          </div>
 
         </div>
         <bottomCont></bottomCont>