fix(datasource): data type icon invisible #312 (#332)

* fix(datasource): data type icon invisible

* fix(common): #325 reduce unnecessary network requests.

* style(datasource): remove unnecessary comment

---------

Co-authored-by: zeyong.cai <zeyong.cai@xquant.com>

packages/common/component/MetaBindVariable.vue

@@ -6,6 +6,7 @@
   </slot>
 
   <tiny-dialog-box
+    v-if="dialogShouldInitialize"
     :visible="state.isVisible"
     title="变量绑定"
     width="48%"
@@ -181,6 +182,10 @@ export default {
     modelValue: {
       type: [String, Number, Boolean, Array, Object, Date],
       default: ''
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, { emit }) {
@@ -442,7 +447,9 @@ export default {
       return ''
     }
 
+    const dialogShouldInitialize = ref(!props.lazyLoad)
     const open = () => {
+      dialogShouldInitialize.value = true
       state.isVisible = true
       state.variableName = bindKey.value
       state.variable = getInitVariable()
@@ -527,6 +534,7 @@ export default {
       remove,
       cancel,
       confirm,
+      dialogShouldInitialize,
       open,
       selectItem,
       state,

packages/plugins/datasource/src/DataSourceFieldType.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="field-content type-list">
       <a v-for="fieldType in state.fieldTypes" :key="fieldType.name" class="type-item" @click="selectType(fieldType)">
-        <component :is="fieldType.icon" class="type-icon"></component>
+        <svg-icon :name="fieldType.icon" class="type-icon" />
         <span>{{ fieldType.name }}</span>
       </a>
     </div>
@@ -25,7 +25,7 @@
 <script>
 import { reactive, ref } from 'vue'
 import { iconArrowDown } from '@opentiny/vue-icon'
-import { Button, Input, FormItem, Tooltip } from '@opentiny/vue'
+import { Button } from '@opentiny/vue'
 import fieldTypes from './config'
 
 let isOpen = ref(false)
@@ -41,10 +41,7 @@ export const close = () => {
 export default {
   components: {
     TinyButton: Button,
-    TinyInput: Input,
-    TinyFormItem: FormItem,
-    iconArrowDown: iconArrowDown(),
-    TinyTooltip: Tooltip
+    iconArrowDown: iconArrowDown()
   },
   emits: ['cancel', 'select'],
   setup(props, { emit }) {

packages/plugins/datasource/src/config.js

@@ -13,37 +13,37 @@
 export default [
   {
     name: '字符串',
-    icon: 'icon-text',
+    icon: 'text',
     type: 'string',
     value: ''
   },
   {
     name: '日期',
-    icon: 'icon-calendar',
+    icon: 'datepick',
     type: 'date',
     value: ''
   },
   {
     name: '计数器',
-    icon: 'icon-export',
+    icon: 'numeric',
     type: 'number',
     value: ''
   },
   {
     name: '文字链接',
-    icon: 'icon-link',
+    icon: 'link',
     type: 'link',
     value: ''
   },
   {
     name: '开关',
-    icon: 'icon-text',
+    icon: 'switch',
     type: 'switch',
     value: ''
   },
   {
     name: '滑块',
-    icon: 'icon-text',
+    icon: 'dragger',
     type: 'slider',
     value: ''
   }