Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/components/GeoComponent/index.vue

@@ -1,3 +1,4 @@
+<!-- 坐标点拾取组件 -->
 <template>
     <div class="page-container">
         <a-input allowClear v-model:value="inputPoint">
@@ -23,6 +24,7 @@
                     @click="clickMap"
                 >
                     <el-amap-search-box visible @select="selectPoi" />
+                    <el-amap-marker :position="position" />
                 </el-amap>
                 {{ mapPoint }}
             </div>
@@ -49,7 +51,7 @@ const props = defineProps({
 });
 const emit = defineEmits<EmitProps>();
 
-// 手动输入的坐标点
+// 手动输入的坐标点(经纬度字符串)
 const inputPoint = computed({
     get: () => {
         return props.point;
@@ -67,13 +69,15 @@ const handleModalSubmit = () => {
     modalVis.value = false;
 };
 
-// 地图拾取的坐标点
+// 地图拾取的坐标点(经纬度字符串)
 const mapPoint = ref('');
 
 const zoom = ref(12);
 const center = ref([106.55, 29.56]);
 let map: any = null;
-let marker: any = null;
+
+// 地图经纬度
+const position = ref<number[] | string[]>([]);
 
 /**
  * 地图初始化
@@ -83,11 +87,7 @@ const initMap = (e: any) => {
     map = e;
 
     const pointStr = mapPoint.value as string;
-    if (marker) map.remove(marker);
+    position.value = pointStr ? pointStr.split(',') : center.value;
-    marker = new AMap.Marker({
-        position: pointStr ? pointStr.split(',') : center.value,
-    });
-    map.add(marker);
 };
 
 /**
@@ -96,13 +96,7 @@ const initMap = (e: any) => {
  */
 const clickMap = (e: any) => {
     mapPoint.value = `${e.lnglat.lng},${e.lnglat.lat}`;
-
+    position.value = [e.lnglat.lng, e.lnglat.lat];
-    if (marker) map.remove(marker);
-
-    marker = new AMap.Marker({
-        position: [e.lnglat.lng, e.lnglat.lat],
-    });
-    map.add(marker);
 };
 
 /**

src/components/ValueItem/index.vue

@@ -1,14 +1,15 @@
+<!-- 参数类型输入组件 -->
 <template>
     <div class="wrapper">
         <a-select
-            v-if="componentsType === 'select'"
+            v-if="typeMap.get(itemType) === 'select'"
             v-model:value="myValue"
             :options="options"
             allowClear
             style="width: 100%"
         />
         <a-date-picker
-            v-else-if="componentsType === 'date'"
+            v-else-if="typeMap.get(itemType) === 'date'"
             v-model:value="myValue"
             allowClear
             showTime
@@ -17,14 +18,14 @@
             style="width: 100%"
         />
         <a-input-number
-            v-else-if="componentsType === 'inputNumber'"
+            v-else-if="typeMap.get(itemType) === 'inputNumber'"
             v-model:value="myValue"
             allowClear
             style="width: 100%"
         />
         <a-input
             allowClear
-            v-else-if="componentsType === 'object'"
+            v-else-if="typeMap.get(itemType) === 'object'"
             v-model:value="myValue"
         >
             <template #addonAfter>
@@ -32,11 +33,11 @@
             </template>
         </a-input>
         <GeoComponent
-            v-else-if="componentsType === 'geoPoint'"
+            v-else-if="typeMap.get(itemType) === 'geoPoint'"
             v-model:point="myValue"
         />
         <a-input
-            v-else-if="componentsType === 'file'"
+            v-else-if="typeMap.get(itemType) === 'file'"
             v-model:value="myValue"
             placeholder="请输入图片链接"
             allowClear
@@ -79,12 +80,15 @@
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue';
 import { FormOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
 import { UploadChangeParam, UploadFile } from 'ant-design-vue';
+import { DefaultOptionType } from 'ant-design-vue/lib/select';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import GeoComponent from '@/components/GeoComponent/index.vue';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
+import { ItemData, ITypes } from './types';
 
 type Emits = {
     (e: 'update:modelValue', data: string | number | boolean): void;
@@ -93,13 +97,24 @@ const emit = defineEmits<Emits>();
 
 const props = defineProps({
     itemData: {
-        type: Object,
+        type: Object as PropType<ItemData>,
-        default: () => ({ type: 'object' }),
+        default: () => ({}),
     },
+    // 组件双向绑定的值
     modelValue: {
         type: [Number, String],
         default: '',
     },
+    // 组件类型
+    itemType: {
+        type: String,
+        default: () => 'geoPoint',
+    },
+    // 下拉选择框下拉数据
+    options: {
+        type: Array as PropType<DefaultOptionType[]>,
+        default: () => [],
+    },
 });
 // type Props = {
 //     itemData?: Object;
@@ -110,59 +125,23 @@ const props = defineProps({
 //     modelValue: '',
 // });
 
-const componentsType = computed(() => {
+const componentsType = ref<ITypes>({
-    switch (props.itemData.type) {
+    int: 'inputNumber',
-        case 'int':
+    long: 'inputNumber',
-            return 'inputNumber';
+    float: 'inputNumber',
-        case 'long':
+    double: 'inputNumber',
-            return 'inputNumber';
+    string: 'input',
-        case 'float':
+    array: 'input',
-            return 'inputNumber';
+    password: 'input',
-        case 'double':
+    enum: 'select',
-            return 'inputNumber';
+    boolean: 'select',
-        case 'string':
+    date: 'date',
-            return 'input';
+    object: 'object',
-        case 'array':
+    geoPoint: 'geoPoint',
-            return 'input';
+    file: 'file',
-        case 'password':
-            return 'input';
-        case 'enum':
-            return 'select';
-        case 'boolean':
-            return 'select';
-        case 'date':
-            return 'date';
-        case 'object':
-            return 'object';
-        case 'geoPoint':
-            return 'geoPoint';
-        case 'file':
-            return 'file';
-        default:
-            return 'input';
-    }
 });
+const typeMap = new Map(Object.entries(componentsType.value));
 
-const options = computed(() => {
-    if (props.itemData.type === 'boolean') {
-        return [
-            {
-                label: 'true',
-                value: true,
-            },
-            {
-                label: 'false',
-                value: false,
-            },
-        ];
-    }
-    return props.itemData.options
-        ? props.itemData.options.map((m: any) => ({
-              label: m.text,
-              value: m.value,
-          }))
-        : [];
-});
 const myValue = computed({
     get: () => {
         return props.modelValue;
@@ -173,10 +152,6 @@ const myValue = computed({
     },
 });
 
-const handleValueData = (value: any) => {
-    emit('update:modelValue', value);
-};
-
 // 代码编辑器弹窗
 const modalVis = ref<boolean>(false);
 const objectValue = ref<string>('');
@@ -192,7 +167,7 @@ const handleFileChange = (info: UploadChangeParam<UploadFile<any>>) => {
     if (info.file.status === 'done') {
         const url = info.file.response?.result;
         myValue.value = url;
-        handleValueData(url);
+        emit('update:modelValue', url);
     }
 };
 </script>

src/components/ValueItem/types.d.ts

@@ -0,0 +1,19 @@
+export type ItemData = {
+    type: string
+}
+
+export type ITypes = {
+    int: string
+    long: string
+    float: string
+    double: string
+    string: string
+    array: string
+    password: string
+    enum: string
+    boolean: string
+    date: string
+    object: string
+    geoPoint: string
+    file: string
+}