241101

src/api/think/thinkSite/model/index.ts

@@ -16,6 +16,8 @@ export interface ThinkSite {
   businessTime?: string;
   // 场馆地址
   address?: string;
+  lat?: string;
+  lng?: string;
   // 场馆介绍
   info?: string;
   // 场馆电话

src/main.ts

@@ -5,6 +5,8 @@ import router from './router';
 import permission from './utils/permission';
 import i18n from './i18n';
 import './styles/index.less';
+import VueTianditu from "vue-tianditu"
+import "vue-tianditu/lib/style.css";
 
 const app = createApp(App);
 
@@ -12,5 +14,9 @@ app.use(store);
 app.use(router);
 app.use(permission);
 app.use(i18n);
+app.use(VueTianditu, {
+  v: "4.0", //目前只支持4.0版本
+  tk: "bfbc6bd9e85fcda67b62788705aa6427"
+});
 
 app.mount('#app');

src/views/booking/bookingSite/components/bookingSiteEdit.vue

@@ -350,6 +350,7 @@
               status: 'done'
             });
           }
+          console.log(images.value)
           if (props.data.files) {
             const arr = JSON.parse(props.data.files);
             arr.map((item) => {

src/views/think/thinkSite/components/search.vue

@@ -1,7 +1,7 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" :disabled="true" @click="add">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
       <template #icon>
         <PlusOutlined />
       </template>

src/views/think/thinkSite/components/thinkSiteEdit.vue

@@ -28,7 +28,7 @@
       </a-form-item>
       <a-form-item label="封面图" name="thumb">
         <a-avatar
-          :src="`https://gxtyzx.gxsportscenter.com/uploads/images/${form.thumb}`"
+          :src="form.thumb"
           size="120"
           shape="square"
         />
@@ -70,6 +70,16 @@
           v-model:value="form.address"
         />
       </a-form-item>
+      <a-form-item label="场馆定位" name="address">
+        <p>已选经纬度:{{ form.lng }}. {{ form.lat }}</p>
+        <tdt-map :center="mapState.center" :zoom="mapState.zoom" style="width: 100%; height: 700px" :controls="['Zoom']"
+                 @click.native="clickMap">
+          <tdt-marker :position="[form.lng, form.lat]" :draggable="false" />
+          <tdt-control>
+            <tdt-search @poi-click="poiClick" />
+          </tdt-control>
+        </tdt-map>
+      </a-form-item>
       <a-form-item label="场馆介绍" name="info">
         <!-- 编辑器 -->
         <tinymce-editor
@@ -131,245 +141,270 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
-  import { addThinkSite, updateThinkSite } from '@/api/think/thinkSite';
-  import { ThinkSite } from '@/api/think/thinkSite/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-  import TinymceEditor from '@/components/TinymceEditor/index.vue';
-  import { uploadOss } from '@/api/system/file';
+import { ref, reactive, watch } from "vue";
+import { Form, message } from "ant-design-vue";
+import { assignObject, uuid } from "ele-admin-pro";
+import { addThinkSite, updateThinkSite } from "@/api/think/thinkSite";
+import { ThinkSite } from "@/api/think/thinkSite/model";
+import { useThemeStore } from "@/store/modules/theme";
+import { storeToRefs } from "pinia";
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+import { FormInstance } from "ant-design-vue/es/form";
+import { FileRecord } from "@/api/system/file/model";
+import TinymceEditor from "@/components/TinymceEditor/index.vue";
+import { uploadOss } from "@/api/system/file";
+import { TdtMap } from "vue-tianditu";
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);
+const disabled = ref(false);
 
-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-  const disabled = ref(false);
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: ThinkSite | null;
+}>();
 
-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 修改回显的数据
-    data?: ThinkSite | null;
-  }>();
+const emit = defineEmits<{
+  (e: "done"): void;
+  (e: "update:visible", visible: boolean): void;
+}>();
 
-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+const files = ref<ItemType[]>([]);
+// 编辑器内容，双向绑定
+const content = ref<any>("");
 
-  // 提交状态
-  const loading = ref(false);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
-  const files = ref<ItemType[]>([]);
-  // 编辑器内容，双向绑定
-  const content = ref<any>('');
+// 用户信息
+const form = reactive<ThinkSite>({
+  id: undefined,
+  name: undefined,
+  thumb: undefined,
+  price: undefined,
+  businessTime: undefined,
+  address: undefined,
+  lat: undefined,
+  lng: undefined,
+  info: undefined,
+  tel: undefined,
+  sortNumber: undefined,
+  type: undefined,
+  num: undefined,
+  proportion: undefined,
+  moneyJson: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  weekendOpen: undefined
+});
 
-  // 用户信息
-  const form = reactive<ThinkSite>({
-    id: undefined,
-    name: undefined,
-    thumb: undefined,
-    price: undefined,
-    businessTime: undefined,
-    address: undefined,
-    info: undefined,
-    tel: undefined,
-    sortNumber: undefined,
-    type: undefined,
-    num: undefined,
-    proportion: undefined,
-    moneyJson: undefined,
-    createTime: undefined,
-    updateTime: undefined,
-    weekendOpen: undefined
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit("update:visible", value);
+};
+
+// 表单验证规则
+const rules = reactive({
+  thinkSiteName: [
+    {
+      required: true,
+      type: "string",
+      message: "请填写名称",
+      trigger: "blur"
+    }
+  ]
+});
+
+const chooseImage = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: "done"
   });
+  form.thumb = data.path;
+};
 
-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
-
-  // 表单验证规则
-  const rules = reactive({
-    thinkSiteName: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写名称',
-        trigger: 'blur'
-      }
-    ]
+const chooseFiles = (data: FileRecord) => {
+  files.value.push({
+    uid: data.id,
+    url: data.path,
+    status: "done"
   });
+};
 
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-    form.thumb = data.path;
-  };
+const onDeleteFiles = (index: number) => {
+  files.value.splice(index, 1);
+};
 
-  const chooseFiles = (data: FileRecord) => {
-    files.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-  };
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+  form.thumb = "";
+};
 
-  const onDeleteFiles = (index: number) => {
-    files.value.splice(index, 1);
-  };
+const map = ref();
+const mapState = {
+  center: [108.358150, 22.826820],
+  zoom: 12
+};
+const poiClick = ({ lonlat }) => {
+  const [lng, lat] = lonlat.split(",");
+  form.lng = parseFloat(lng);
+  form.lat = parseFloat(lat);
+  mapState.center = [form.lng, form.lat];
+  message.success("已选择");
+};
 
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-    form.thumb = '';
-  };
+const clickMap = (({ type, lnglat }) => {
+  if (type === "click") {
+    form.lng = lnglat.lng;
+    form.lat = lnglat.lat;
+    message.success("已选择");
+  }
+});
 
-  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
-  const config = ref({
-    height: 450,
-    images_upload_handler: (blobInfo, success, error) => {
-      const file = blobInfo.blob();
-      const formData = new FormData();
-      formData.append('file', file, file.name);
-      uploadOss(file)
-        .then((res) => {
-          success(res.path);
-        })
-        .catch((msg) => {
-          error(msg);
-        });
-    },
-    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
-    file_picker_callback: (callback: any, _value: any, meta: any) => {
-      const input = document.createElement('input');
-      input.setAttribute('type', 'file');
-      // 设定文件可选类型
-      if (meta.filetype === 'image') {
-        input.setAttribute('accept', 'image/*');
-      } else if (meta.filetype === 'media') {
-        input.setAttribute('accept', 'video/*,.pdf');
+const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const config = ref({
+  height: 450,
+  images_upload_handler: (blobInfo, success, error) => {
+    const file = blobInfo.blob();
+    const formData = new FormData();
+    formData.append("file", file, file.name);
+    uploadOss(file)
+      .then((res) => {
+        success(res.path);
+      })
+      .catch((msg) => {
+        error(msg);
+      });
+  },
+  // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+  file_picker_callback: (callback: any, _value: any, meta: any) => {
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    // 设定文件可选类型
+    if (meta.filetype === "image") {
+      input.setAttribute("accept", "image/*");
+    } else if (meta.filetype === "media") {
+      input.setAttribute("accept", "video/*,.pdf");
+    }
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
       }
-      input.onchange = () => {
-        const file = input.files?.[0];
-        if (!file) {
+      if (meta.filetype === "media") {
+        if (file.size / 1024 / 1024 > 200) {
+          editorRef.value?.alert({ content: "大小不能超过 200MB" });
           return;
         }
-        if (meta.filetype === 'media') {
-          if (file.size / 1024 / 1024 > 200) {
-            editorRef.value?.alert({ content: '大小不能超过 200MB' });
-            return;
-          }
-          if (file.type.startsWith('application/pdf')) {
-            uploadOss(file).then((res) => {
-              const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
-              content.value = content.value + addPath;
-            });
-            return;
-          }
-          if (!file.type.startsWith('video/')) {
-            editorRef.value?.alert({ content: '只能选择视频文件' });
-            return;
-          }
+        if (file.type.startsWith("application/pdf")) {
           uploadOss(file).then((res) => {
-            callback(res.path);
+            const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+            content.value = content.value + addPath;
+          });
+          return;
+        }
+        if (!file.type.startsWith("video/")) {
+          editorRef.value?.alert({ content: "只能选择视频文件" });
+          return;
+        }
+        uploadOss(file).then((res) => {
+          callback(res.path);
+        });
+      }
+      // const reader = new FileReader();
+      // reader.onload = (e) => {
+      //   if (e.target?.result != null) {
+      //     const blob = new Blob([e.target.result], { type: file.type });
+      //     callback(URL.createObjectURL(blob));
+      //   }
+      // };
+      // reader.readAsArrayBuffer(file);
+    };
+    input.click();
+  }
+});
+
+const { resetFields } = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form,
+        info: content.value,
+        files: JSON.stringify(files.value)
+      };
+      const saveOrUpdate = isUpdate.value ? updateThinkSite : addThinkSite;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit("done");
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      images.value = [];
+      files.value = [];
+      content.value = "";
+      if (props.data) {
+        assignObject(form, props.data);
+        if (form.info) {
+          content.value = form.info;
+        }
+        if (props.data.thumb) {
+          images.value.push({
+            uid: uuid(),
+            url: props.data.thumb,
+            status: "done"
           });
         }
-        // const reader = new FileReader();
-        // reader.onload = (e) => {
-        //   if (e.target?.result != null) {
-        //     const blob = new Blob([e.target.result], { type: file.type });
-        //     callback(URL.createObjectURL(blob));
-        //   }
-        // };
-        // reader.readAsArrayBuffer(file);
-      };
-      input.click();
-    }
-  });
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
-    }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form,
-          info: content.value,
-          files: JSON.stringify(files.value)
-        };
-        // const saveOrUpdate = isUpdate.value ? updateThinkSite : addThinkSite;
-        // saveOrUpdate(formData)
-        //   .then((msg) => {
-        //     loading.value = false;
-        //     message.success(msg);
-        //     updateVisible(false);
-        //     emit('done');
-        //   })
-        //   .catch((e) => {
-        //     loading.value = false;
-        //     message.error(e.message);
-        //   });
-      })
-      .catch(() => {});
-  };
-
-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        images.value = [];
-        files.value = [];
-        content.value = '';
-        if (props.data) {
-          assignObject(form, props.data);
-          if (form.info) {
-            content.value = form.info;
-          }
-          if (props.data.thumb) {
-            images.value.push({
+        console.log(images.value);
+        if (props.data.files) {
+          const arr = JSON.parse(props.data.files);
+          arr.map((item) => {
+            files.value.push({
               uid: uuid(),
-              url: props.data.thumb,
-              status: 'done'
+              url: item.url,
+              status: "done"
             });
-          }
-          if (props.data.files) {
-            const arr = JSON.parse(props.data.files);
-            arr.map((item) => {
-              files.value.push({
-                uid: uuid(),
-                url: item.url,
-                status: 'done'
-              });
-            });
-          }
-          isUpdate.value = true;
-        } else {
-          isUpdate.value = false;
+          });
         }
+        isUpdate.value = true;
       } else {
-        resetFields();
+        isUpdate.value = false;
       }
-    },
-    { immediate: true }
-  );
+    } else {
+      resetFields();
+    }
+  },
+  { immediate: true }
+);
 </script>

src/views/think/thinkSite/index.vue

@@ -37,7 +37,7 @@
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a-button :disabled="true" @click="openEdit(record)"
+                <a-button @click="openEdit(record)"
                   >修改</a-button
                 >
                 <a-divider type="vertical" />