feat: 表单设计器新增饼图/柱状图/折线图组件(cdn) @0.8.4

BoBoooooo · Jan 26, 2021 · de17722 · de17722
1 parent 0417a39
commit de17722
Show file tree

Hide file tree

Showing 14 changed files with 1,013 additions and 428 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,9 +1,6 @@
 module.exports = {
   presets: [['@vue/app', { useBuiltIns: 'entry' }]],
-
-
   plugins: [
-    '@babel/plugin-transform-modules-umd',
     [
       'component',
       {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.3-53",
+  "version": "0.8.4",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",
@@ -116,6 +116,7 @@
     "last 2 versions"
   ],
   "dependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1"
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "echarts": "^4.8.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -18,6 +18,7 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
     <script src="https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
     <script src="<%= BASE_URL %>js/tinymce4.7.5/tinymce.min.js"></script>
   </body>
 </html>
diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -84,9 +84,7 @@
 </template>
 
 <script lang="ts">
-import {
-  Component, Vue, Emit, Prop, Watch,
-} from 'vue-property-decorator';
+import Vue from 'vue';
 import _cloneDeep from 'lodash/cloneDeep';
 import {
   columns, DataSource, DML, Params,

diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -51,7 +51,7 @@
               </a>
             </li>
           </Draggable>
-          <div class="widget-cate">图表示例</div>
+          <div class="widget-cate">基础图表</div>
           <Draggable tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" @end="handleMoveEnd" @start="handleMoveStart" :move="handleMove">
             <li
               class="form-edit-widget-label"
@@ -169,7 +169,6 @@
 
 <script>
 import SvgIcon from '@/icons/SvgIcon.vue';
-import { DML } from '@/types/common';
 import Draggable from 'vuedraggable';
 import Icon from 'vue-awesome/components/Icon.vue';
 import Clipboard from 'clipboard';
@@ -182,32 +181,8 @@ import {
   basicComponents, layoutComponents, advanceComponents, chartComponents,
 } from './componentsConfig';
 import WidgetForm from './WidgetForm.vue';
-import 'vue-awesome/icons/regular/keyboard';
-import 'vue-awesome/icons/sign';
-import 'vue-awesome/icons/regular/trash-alt';
-import 'vue-awesome/icons/regular/clone';
-import 'vue-awesome/icons/regular/dot-circle';
-import 'vue-awesome/icons/regular/check-square';
-import 'vue-awesome/icons/bars';
-import 'vue-awesome/icons/clock';
-import 'vue-awesome/icons/regular/calendar-alt';
-import 'vue-awesome/icons/regular/clock';
-import 'vue-awesome/icons/th';
-import 'vue-awesome/icons/sort-numeric-up';
-import 'vue-awesome/icons/regular/star';
-import 'vue-awesome/icons/palette';
-import 'vue-awesome/icons/regular/caret-square-down';
-import 'vue-awesome/icons/toggle-off';
-import 'vue-awesome/icons/sliders-h';
-import 'vue-awesome/icons/regular/image';
-import 'vue-awesome/icons/chalkboard';
-import 'vue-awesome/icons/upload';
-import 'vue-awesome/icons/comment';
-import 'vue-awesome/icons/tree';
-import 'vue-awesome/icons/random';
-import 'vue-awesome/icons/text-width';
-import 'vue-awesome/icons/mouse-pointer';
-import 'vue-awesome/icons/file-word';
+// 导入左侧组件面板图标
+import './icon';
 import generateCode from './generateCode.js';
 
 const STATUS = {

diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -66,6 +66,7 @@
                                   :widget="citem"
                                   :readOnly="readOnly"
                                   @btnOnClick="btnOnClick"
+                                  @chartOnClick="chartOnClick"
                                   v-show="!citem.hidden"
                                   :formTableConfig="formTableConfig">
                   <template slot="tree-select-value-label"
@@ -118,6 +119,7 @@
                             :widget="item"
                             :rules="rules[item.model]"
                             :readOnly="readOnly"
+                            @chartOnClick="chartOnClick"
                             @btnOnClick="btnOnClick"
                             v-show="!item.hidden"
                             :formTableConfig="formTableConfig">
@@ -376,6 +378,14 @@ export default class GenerateForm extends Vue {
     });
   }
 
+  // 图表点击
+  chartOnClick(chart) {
+    this.$emit('chartOnClick', {
+      chart,
+      model: this.models,
+    });
+  }
+
   // 表单默认值回填单独拉出来封装
   setDefaultValue(config) {
     // 如果时间选择器需要默认值,默认回填当前日期

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -319,6 +319,34 @@
     <template v-if="widget.type === 'form'">
       <GenerateSubForm :widget="widget"></GenerateSubForm>
     </template>
+    <!-- 饼图组件 -->
+    <template v-if="widget.type === 'chart-pie'">
+       <pieChart
+          @click="chartOnClick"
+          :data="widget.options.data"
+          :style="{
+            height: widget.options.height
+          }"
+          :title="widget.name"
+          :hollow="widget.options.hollow"
+        />
+    </template>
+    <!-- 柱状图组件 -->
+    <template v-if="widget.type === 'chart-line'">
+      <lineChart
+       :style="{
+            height: widget.options.height
+          }"
+        @click="chartOnClick"
+        :data="widget.options.data"
+        :title="widget.name"
+        :rotate="widget.options.rotate"
+        :type="widget.options.type"
+        :yAxisMax="widget.options.yAxisMax"
+        :xUnit="widget.options.xUnit"
+        :yUnit="widget.options.yUnit"
+    />
+    </template>
   </el-form-item>
 </template>
 
@@ -335,6 +363,8 @@ import FileUpload from './components/FileUpload/FileUpload.vue';
 import GenerateSubForm from './components/SubForm/GenerateSubForm.vue';
 // 高级查询单个查询内容
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+import lineChart from './components/Charts/lineChart.vue';
+import pieChart from './components/Charts/pieChart.vue';
 
 
 @Component({
@@ -343,6 +373,8 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css';
     Tinymce,
     FileUpload,
     GenerateSubForm,
+    pieChart,
+    lineChart,
     CrudTable: () => import('@/component/crud-table/src/CrudTable.vue'),
   },
   model: {
@@ -648,6 +680,11 @@ export default class GenerateFormItem extends Vue {
     this.$emit('btnOnClick', widget.options.eventName);
   }
 
+  // 图表点击
+  chartOnClick(chartObj) {
+    this.$emit('chartOnClick', chartObj);
+  }
+
   getTableSelection(selection) {
     this.$emit('selection-change', selection);
   }