perf: 新增ChartScreen作为图表Demo

Author: BoBoooooo

src/component/form-designer/src/GenerateFormItem.vue

@@ -425,14 +425,6 @@ export default class GenerateFormItem extends Vue {
   })
   readOnly!: boolean;
 
-  // 子表单单个组件value
-  @Prop()
-  value: any;
-
-  // 子表单单个组件初始值model
-  @Prop()
-  model: any;
-
   // 组件校验规则
   @Prop()
   rules: any;
@@ -448,32 +440,45 @@ export default class GenerateFormItem extends Vue {
   normalizer: any;
 
   initData() {
-    // 如果是子表单
-    if (this.model) {
-      if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
-        this.dataModel = typeof this.model === 'string' ? this.model.split(',') : this.model;
-      } else {
-        this.dataModel = this.model;
-      }
-      return;
-    }
+    const { type, model } = this.widget;
+    // if (this.model) {
+    //   // 多选组件需要初始化值为数组
+    //   if (this.widget.options.multiple || 'cascader,checkbox'.includes(type)) {
+    //     this.dataModel = typeof this.model === 'string' ? this.model.split(',') : this.model;
+    //   } else {
+    //     this.dataModel = this.model;
+    //   }
+    //   return;
+    // }
     let normalizer;
-    if (this.widget.type === 'treeselect') {
+    // tree-select组件初始化
+    if (type === 'treeselect') {
       const { value, label } = this.widget.options.props;
       normalizer = (node) => {
         // 去掉children=null的属性
         if (node.children === null || node.children === 'null') {
           delete node.children;
         }
-        // 此处暂时写反了...暂时不做修改
         return {
           id: node[value],
           label: node[label],
         };
       };
+    } else if (type.includes('chart-')) { // 图表预设option
+      // 如果是通用图表则传入的值为option
+      if (type === 'chart-common') {
+        if (this.models[model]) {
+          this.widget.options.option = this.models[model];
+        }
+      } else { // 指定图表默认转入data
+        // eslint-disable-next-line no-lonely-if
+        if (this.models[model]) {
+          this.widget.options.data = this.models[model];
+        }
+      }
     }
     this.normalizer = normalizer;
-    this.dataModel = this.models[this.widget.model];
+    this.dataModel = this.models[model];
   }
 
   created() {

src/component/form-designer/src/components/Charts/Echarts.vue

@@ -88,9 +88,9 @@ export default {
       this.initEvent();
       // 运行配置参数
       this.setOption();
-      if (this.loop) {
-        this.initLoopFn();
-      }
+      // if (this.loop) {
+      //   this.initLoopFn();
+      // }
     },
     initLoopFn() {
       const timer = setInterval(() => {

src/demo/App.vue

@@ -41,7 +41,7 @@
 
       <el-main class="content">
         <el-container class="container">
-          <el-header>表格设计器(TableDesigner)</el-header>
+          <el-header><el-tag>表格设计器(TableDesigner)</el-tag></el-header>
           <el-main>
             <TableDesigner :dictList="dictList"
                            :formList="formList"
@@ -50,7 +50,7 @@
         </el-container>
 
         <el-container class="container">
-          <el-header>表单设计器(FormDesigner)</el-header>
+          <el-header><el-tag>表单设计器(FormDesigner)</el-tag></el-header>
           <el-main>
             <FormDesigner ref="formDesigner"
                           :getFormKey="getTableFields">
@@ -65,7 +65,7 @@
           </el-main>
         </el-container>
           <el-container class="container">
-          <el-header>ProTable组件 (基于El-Table二次封装,托管分页，查询，表格。仅包含数据表格及搜索功能，增删改查封装见CrudTable)
+          <el-header><el-tag>ProTable组件</el-tag> (基于El-Table二次封装,托管分页，查询，表格。仅包含数据表格及搜索功能，增删改查封装见CrudTable)
             <el-button  @click="handleGenerateJson" icon="el-icon-tickets" type="warning" size="small">
               当前表格json
             </el-button>
@@ -145,7 +145,7 @@
           </el-main>
         </el-container>
         <el-container class="container">
-          <el-header>CrudTable组件 基于ProTable + GenerateForm + El-Dialog 二次封装 （有批量操作按钮时会默认开启多选模式）
+          <el-header><el-tag>CrudTable</el-tag> 基于ProTable + GenerateForm + El-Dialog 二次封装 （有批量操作按钮时会默认开启多选模式）
             <el-button  @click="handleGenerateJson" icon="el-icon-tickets" type="warning" size="small">
               当前表格json
             </el-button>
@@ -274,6 +274,22 @@
               </el-col>
             </el-row>
           </el-main>
+        </el-container>
+
+           <el-container class="container">
+          <el-header>
+            <el-tag>GenerateForm渲染图表示例</el-tag>
+            <el-button  @click="handleGenerateJson('chart')" icon="el-icon-tickets" type="warning" size="small">
+              当前表单JSON
+            </el-button>
+          </el-header>
+          <el-main class="demo-actions">
+            <el-row :gutter="10">
+              <el-col :span="24">
+                <ChartScreen></ChartScreen>
+              </el-col>
+            </el-row>
+          </el-main>
         </el-container>
       </el-main>
       <el-footer height="80px"
@@ -295,17 +311,22 @@ import {
 import CusDialog from '@/component/common/CusDialog.vue';
 import PersonCrudTable from './component/PersonCrudTable.vue';
 import PersonProTable from './component/PersonProTable.vue';
-
+import ChartScreen from './component/ChartScreen.vue';
+import chartData from './component/data';
 
 export default {
   name: 'app',
   methods: {
     getRowData(row) {
       this.$alert(JSON.stringify(row));
     },
-    handleGenerateJson() {
+    handleGenerateJson(type) {
       this.jsonVisible = true;
-      this.jsonTemplate = JSON.stringify(this.columns, null, 2);
+      if (type === 'chart') {
+        this.jsonTemplate = JSON.stringify(this.chartData, null, 2);
+      } else {
+        this.jsonTemplate = JSON.stringify(this.columns, null, 2);
+      }
 
       this.$nextTick(() => {
         const editor = ace.edit('jsoneditor');
@@ -354,6 +375,7 @@ export default {
   },
   data() {
     return {
+      chartData,
       jsonVisible: false,
       jsonTemplate: '',
       dictList: [],
@@ -395,6 +417,7 @@ export default {
     CusDialog,
     PersonCrudTable,
     PersonProTable,
+    ChartScreen,
   },
 };
 </script>

src/demo/component/ChartScreen.vue

@@ -0,0 +1,42 @@
+<!--
+ * @file: 图表展示
+ * @author: BoBo
+ * @copyright: BoBo
+ * @Date: 2020年12月18日16:54:49
+-->
+
+<template>
+  <div class="page-container">
+    <GenerateForm :data="data" :value="value"></GenerateForm>
+  </div>
+</template>
+
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import data from './data';
+
+@Component({
+  name: 'ChartScreen',
+})
+export default class ChartScreen extends Vue {
+  data = data
+
+  value = {
+    chart2: {
+      xAxis: {
+        type: 'category',
+        data: ['1', '2', '3', '4', '5', '6', '7'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [150, 230, 224, 218, 135, 147, 260],
+          type: 'line',
+        },
+      ],
+    },
+  }
+}
+</script>