feat: 新增参数类型输入组件

components.d.ts

@@ -36,7 +36,11 @@ declare module '@vue/runtime-core' {
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
+    GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
+    MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
   }
 }

package.json

@@ -11,12 +11,14 @@
     "prettier": "prettier --write"
   },
   "dependencies": {
+    "@vuemap/vue-amap": "^1.1.20",
     "ant-design-vue": "^3.2.15",
     "axios": "^1.2.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
+    "monaco-editor": "^0.24.0",
     "pinia": "^2.0.28",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.12",

src/components/GeoComponent/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="page-container">
+        <a-input allowClear v-model:value="inputPoint">
+            <template #addonAfter>
+                <environment-outlined @click="modalVis = true" />
+            </template>
+        </a-input>
+        <a-modal
+            title="地理位置"
+            ok-text="确认"
+            cancel-text="取消"
+            v-model:visible="modalVis"
+            width="700px"
+            @cancel="modalVis = false"
+            @ok="handleModalSubmit"
+            destroyOnClose
+        >
+            <div style="width: 100%; height: 400px">
+                <el-amap
+                    :center="center"
+                    :zoom="zoom"
+                    @init="initMap"
+                    @click="clickMap"
+                >
+                    <el-amap-search-box visible @select="selectPoi" />
+                </el-amap>
+                {{ mapPoint }}
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EnvironmentOutlined } from '@ant-design/icons-vue';
+
+interface EmitProps {
+    (e: 'update:point', data: string): void;
+}
+const props = defineProps({
+    point: { type: [Number, String], default: '' },
+});
+const emit = defineEmits<EmitProps>();
+
+// 手动输入的坐标点
+const inputPoint = computed({
+    get: () => {
+        return props.point;
+    },
+    set: (val: any) => {
+        mapPoint.value = val;
+        emit('update:point', val);
+    },
+});
+
+// 地图弹窗
+const modalVis = ref<boolean>(false);
+const handleModalSubmit = () => {
+    inputPoint.value = mapPoint.value;
+    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;
+
+/**
+ * 地图初始化
+ * @param e
+ */
+const initMap = (e: any) => {
+    map = e;
+
+    const pointStr = mapPoint.value as string;
+    if (marker) map.remove(marker);
+    marker = new AMap.Marker({
+        position: pointStr ? pointStr.split(',') : center.value,
+    });
+    map.add(marker);
+};
+
+/**
+ * 地图点击
+ * @param e
+ */
+const clickMap = (e: any) => {
+    mapPoint.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);
+};
+
+/**
+ * 选择搜索结果
+ * @param e
+ */
+const selectPoi = (e: any) => {
+    const selectPoint = [e.poi.location.lng, e.poi.location.lat];
+    mapPoint.value = selectPoint.join(',');
+    map.setCenter(selectPoint);
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/MonacoEditor/index.vue

@@ -0,0 +1,65 @@
+<!-- 代码编辑器 -->
+<template>
+    <div class="editor" ref="dom"></div>
+</template>
+
+<script setup>
+import * as monaco from 'monaco-editor';
+
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+    getWorker(workerId, label) {
+        if (label === 'json') {
+            return new jsonWorker();
+        }
+        if (label === 'css') {
+            return new cssWorker();
+        }
+        if (label === 'html') {
+            return new htmlWorker();
+        }
+        if (label === 'ts') {
+            return new tsWorker();
+        }
+        return new editorWorker();
+    },
+};
+
+const props = defineProps({
+    modelValue: [String, Number],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dom = ref();
+
+let instance;
+
+onMounted(() => {
+    const jsonModel = monaco.editor.createModel(props.modelValue, 'json');
+
+    instance = monaco.editor.create(dom.value, {
+        model: jsonModel,
+        tabSize: 2,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        theme: 'vs-dark', // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
+    });
+
+    instance.onDidChangeModelContent(() => {
+        const value = instance.getValue();
+        emit('update:modelValue', value);
+    });
+});
+</script>
+
+<style lang="less" scoped>
+.editor {
+    height: 100%;
+}
+</style>

src/components/ValueItem/index.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="wrapper">
+        <a-select
+            v-if="componentsType === 'select'"
+            v-model:value="myValue"
+            :options="options"
+            allowClear
+            style="width: 100%"
+        />
+        <a-date-picker
+            v-else-if="componentsType === 'date'"
+            v-model:value="myValue"
+            allowClear
+            showTime
+            lang="cn"
+            format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+        />
+        <a-input-number
+            v-else-if="componentsType === 'inputNumber'"
+            v-model:value="myValue"
+            allowClear
+            style="width: 100%"
+        />
+        <a-input
+            allowClear
+            v-else-if="componentsType === 'object'"
+            v-model:value="myValue"
+        >
+            <template #addonAfter>
+                <form-outlined @click="modalVis = true" />
+            </template>
+        </a-input>
+        <GeoComponent
+            v-else-if="componentsType === 'geoPoint'"
+            v-model:point="myValue"
+        />
+        <a-input
+            v-else-if="componentsType === 'file'"
+            v-model:value="myValue"
+            placeholder="请输入图片链接"
+            allowClear
+        >
+            <template #addonAfter>
+                <a-upload
+                    name="file"
+                    :action="action"
+                    :headers="headers"
+                    :showUploadList="false"
+                    @change="handleFileChange"
+                >
+                    <cloud-upload-outlined />
+                </a-upload>
+            </template>
+        </a-input>
+        <a-input
+            v-else
+            allowClear
+            type="text"
+            v-model:value="myValue"
+            style="width: 100%"
+        />
+
+        <!-- 代码编辑器弹窗 -->
+        <a-modal
+            title="编辑"
+            ok-text="确认"
+            cancel-text="取消"
+            v-model:visible="modalVis"
+            width="700px"
+            @cancel="modalVis = false"
+            @ok="handleItemModalSubmit"
+        >
+            <div style="width: 100%; height: 400px">
+                <MonacoEditor v-model:modelValue="objectValue" />
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { FormOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
+import { UploadChangeParam, UploadFile } from 'ant-design-vue';
+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';
+
+type valueType = string | number | boolean | undefined;
+
+interface Prop {
+    itemData?: any;
+    modelValue?: valueType;
+}
+
+interface EmitProps {
+    (e: 'update:modelValue', data: valueType): void;
+}
+
+const props = defineProps({
+    itemData: {
+        type: Object,
+        default: () => ({ type: 'object' }),
+    },
+    modelValue: {
+        type: [Number, String],
+        default: '',
+    },
+});
+const emit = defineEmits<EmitProps>();
+
+const componentsType = computed(() => {
+    switch (props.itemData.type) {
+        case 'int':
+            return 'inputNumber';
+        case 'long':
+            return 'inputNumber';
+        case 'float':
+            return 'inputNumber';
+        case 'double':
+            return 'inputNumber';
+        case 'string':
+            return 'input';
+        case 'array':
+            return 'input';
+        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 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;
+    },
+    set: (val: any) => {
+        emit('update:modelValue', val);
+    },
+});
+
+const handleValueData = (value: any) => {
+    emit('update:modelValue', value);
+};
+
+// 代码编辑器弹窗
+const modalVis = ref<boolean>(false);
+const objectValue = ref<string>('');
+const handleItemModalSubmit = () => {
+    myValue.value = objectValue.value.replace(/[\r\n]\s*/g, '');
+    modalVis.value = false;
+};
+
+// 文件上传
+const action = ref<string>(`${BASE_API_PATH}/file/static`);
+const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
+const handleFileChange = (info: UploadChangeParam<UploadFile<any>>) => {
+    if (info.file.status === 'done') {
+        const url = info.file.response?.result;
+        myValue.value = url;
+        handleValueData(url);
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

src/main.ts

@@ -7,11 +7,21 @@ import './style.css'
 import 'ant-design-vue/es/notification/style/css';
 import Antd from 'ant-design-vue/es'
 
+// 地图
+import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap';
+import '@vuemap/vue-amap/dist/style.css'
+initAMapApiLoader({
+  // key: '95fa72137f4263f8e64ae01f766ad09c',
+  key: 'a0415acfc35af15f10221bfa5a6850b4',
+  securityJsCode: 'cae6108ec3dd222f946d1a7237c78be0'
+})
+
 const app = createApp(App)
 
 app.use(store)
 app.use(router)
 app.use(components)
 app.use(Antd)
+app.use(VueAMap)
 
 app.mount('#app')

src/router/index.ts

@@ -10,6 +10,7 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
     const token = LocalStore.get(TOKEN_KEY)
+    next()
     if (token) {
         next()
     } else {

src/router/menu.ts

@@ -1,21 +1,26 @@
 export const LoginPath = '/login'
 
 export default [
-    // {
+  // {
-    //     path: '/',
+  //     path: '/',
-    //     redirect: LoginPath
+  //     redirect: LoginPath
-    // },
+  // },
-    // {
+  // {
-    //     path: '/init',
+  //     path: '/init',
-    //     component: () => import('@/view/InitPage.vue')
+  //     component: () => import('@/view/InitPage.vue')
-    // },
+  // },
-    // {
+  // {
-    //     path: LoginPath,
+  //     path: LoginPath,
-    //     name: 'login',
+  //     name: 'login',
-    //     component: () => import('@/view/Login/index.vue')
+  //     component: () => import('@/view/Login/index.vue')
-    // },
+  // },
-    // {
+  // {
-    //   path: '/initsetting',
+  //   path: '/initsetting',
-    //   component: () => import('@/view/Login/initSet.vue')
+  //   component: () => import('@/view/Login/initSet.vue')
-    // }
+  // }
+
+  {
+    path: '/demo',
+    component: () => import('@/views/demo/index.vue')
+  }
 ]

src/views/demo/index.vue

@@ -0,0 +1,15 @@
+<!-- test demo -->
+<template>
+    <div class="page-container">
+        父级: {{ testValue }}
+        <ViewItem v-model="testValue" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import ViewItem from '@/components/ValueItem/index.vue';
+
+const testValue = ref('');
+</script>
+
+<style lang="less" scoped></style>