perf: 优化树形下拉框预览效果

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

@@ -517,6 +517,8 @@ export default class GenerateFormItem extends Vue {
         }
         this.copyOption = this.widget.options.remoteOptions;
       });
+    } else if (this.widget.options.remote === 'custom') {
+      this.visible = true;
     }
   }
 

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

@@ -189,15 +189,12 @@
                    :style="{width: element.options.width}"
                    :options="element.options.remoteOptions">
       </el-cascader>
-    </template>
-      <template v-if="element.type ==='comment'">
-       <h4 style="text-align:center;margin:0">意见框</h4>
     </template>
      <template v-if="element.type ==='table'">
        <h4 style="text-align:center;margin:0">表格({{element.model}})</h4>
     </template>
     <template v-if="element.type === 'treeselect'">
-       <h4 style="text-align:center;margin:0">树形下拉框({{element.model}})</h4>
+      <TreeSelect v-model="element.options.defaultValue"  :options="[]" />
     </template>
     <template v-if="element.type === 'richtext'">
       <Tinymce :height="400"
@@ -249,6 +246,7 @@
 </template>
 
 <script>
+import TreeSelect from '@riophae/vue-treeselect';
 import Tinymce from './components/Tinymce'; // 富文本编辑器
 import lineChart from './components/Charts/lineChart.vue';
 import pieChart from './components/Charts/pieChart.vue';
@@ -285,6 +283,7 @@ export default {
     lineChart,
     Echarts,
     AvatarUpload,
+    TreeSelect,
   },
   data() {
     return {

src/component/form-designer/src/componentsConfig.ts

@@ -427,6 +427,7 @@ export const advanceComponents = [
       remoteFunc: '',
       placeholder: '',
       width: '100%',
+      defaultValue: null,
       maxHeight: 300,
       multiple: false,
       remote: 'custom',
@@ -447,7 +448,23 @@ export const advanceComponents = [
       disabled: false,
       showCount: false,
       disableBranchNodes: true,
-      remoteOptions: [],
+      remoteOptions: [{
+        value: '测试数据A',
+        label: '测试数据A',
+        children: [{
+          value: '测试数据AA',
+          label: '测试数据AA',
+        }, {
+          value: '测试数据AB',
+          label: '测试数据AB',
+        }],
+      }, {
+        value: '测试数据B',
+        label: '测试数据B',
+      }, {
+        value: '测试数据C',
+        label: '测试数据C',
+      }],
       hiddenLabel: false,
     },
   },

src/component/form-designer/src/styles/index.scss

@@ -653,5 +653,5 @@ $primary-background-color: #ecf5ff;
   top: 200px;
   left: 50%;
   margin-left: -150px;
-  color: #ccc;
+  color: #aaa;
 }