a

src/views/recruit/recruitstudentsignup/showMap.vue

@@ -3,11 +3,10 @@
     title="家庭地址地图选点"
     append-to-body
     :close-on-click-modal="false"
-    :visible.sync="visible"
-    width="90%" heigth="90%"
-  >
+    v-model="visible"
+    width="90%">
     <div style="height: 100%;width:100%">
-      <el-form :model="form" :rules="rules" ref="form" label-width="120px"
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
                class="demo-ruleForm">
 
         <el-form-item label="家庭地址" prop="homeAddressDetail">
@@ -17,125 +16,93 @@
       </el-form>
       <div id="container2"></div>
     </div>
-<!--    <span slot="footer" class="dialog-footer">-->
-<!--        <el-button type="primary" @click="dataFormSubmit">确定</el-button>-->
-<!--        <el-button @click="visible = false">取消</el-button>-->
-<!--      </span>-->
   </el-dialog>
 </template>
-<script>
-import {BMPGL, changeMajor} from "@/api/recruit/recruitstudentsignup";
-import {putItemObj} from "@/api/admin/dict";
-import {getTypeValue} from "@/api/admin/dict";
 
-export default {
-  data() {
-    return {
-      ak: "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7", // 百度的地图密钥
-      visible: false,
-      canSubmit: false,
-      circleShow: false,
-      circle: "",
-      // 地址信息
-      address: null,
-      center: {lng: 0, lat: 0},
-      form: {
-        id: "",
-        homeAddressDetail: "",
-      },
-      dictId: "",
-      rules: {
-        homeAddressDetail: [
-          {required: true, message: '家庭地址不能为空', trigger: ["blur", "change"]}
-        ],
-      },
-      circleArr: [],
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { BMPGL } from "@/api/recruit/recruitstudentsignup"
+import { getTypeValue } from "@/api/admin/dict"
 
-    };
-  },
-  watch: {},
-  methods: {
-    init(row) {
-      let _this = this;
-      this.visible = true;
-      this.canSubmit = true;
-      this.circleShow = true;
-      this.form.id = row.id;
-      this.form.homeAddressDetail = row.homeAddressDetail;
-      this.$nextTick(() => {
-        getTypeValue("dorm_jw").then(data => {
-          let arr = data.data;
-          arr.forEach(e => {
-            if (e.label == 'bj') {
-              _this.form.raidus = e.value;
-              _this.dictId = e.id;
-            } else if (e.label == 'lng') {
-              _this.center.lng = e.value;
-            } else if (e.label == 'lat') {
-              _this.center.lat = e.value;
-            }
-          });
-          BMPGL(_this.ak).then((BMapGL) => {
-            // 创建地图实例
-            let map = new BMapGL.Map("container2");
-            // 创建点坐标 axios => res 获取的初始化定位坐标
-            let point = new BMapGL.Point(_this.center.lng, _this.center.lat)
-            // 初始化地图，设置中心点坐标和地图级别
-            map.centerAndZoom(point, 13)
-            //开启鼠标滚轮缩放
-            map.enableScrollWheelZoom(true)
-            //创建地址解析器实例
-            var myGeo = new BMapGL.Geocoder();
-            myGeo.getPoint(_this.form.homeAddressDetail, function(point){
-              if(point){
-                map.centerAndZoom(point, 16);
-                map.addOverlay(new BMapGL.Marker(point, {title: _this.form.homeAddressDetail}))
-              }else{
-                alert('您选择的地址没有解析到结果！');
-              }
-            }, '北京市')
+// 表单引用
+const formRef = ref()
 
-          })
-        })
+// 响应式数据
+const ak = "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7" // 百度的地图密钥
+const visible = ref(false)
+const canSubmit = ref(false)
+const circleShow = ref(false)
+const circle = ref<any>(null)
 
+// 地址信息
+const address = ref(null)
+const center = reactive({ lng: 0, lat: 0 })
+const dictId = ref("")
+const circleArr = ref<any[]>([])
 
-      });
+const form = reactive({
+  id: "",
+  homeAddressDetail: "",
+  raidus: 0
+})
 
+const rules = {
+  homeAddressDetail: [
+    { required: true, message: '家庭地址不能为空', trigger: ["blur", "change"] }
+  ],
+}
 
-    },
-    // 表单提交
-    dataFormSubmit() {
-      let _this = this;
-      this.$confirm("是否确认保存住宿半径", '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        _this.$refs['form'].validate((valid) => {
-          if (valid) {
-            _this.canSubmit = false;
-            putItemObj({id: _this.dictId, value: _this.form.raidus}).then(() => {
-              _this.$message({
-                showClose: true,
-                message: '修改成功',
-                type: 'success'
-              })
-              _this.visible = false
-              _this.canSubmit = true;
-            })
-
-          }
-        })
-      }).then(data => {
-
-      }).catch(function (err) {
+// 初始化
+const init = (row: any) => {
+  visible.value = true
+  canSubmit.value = true
+  circleShow.value = true
+  form.id = row.id
+  form.homeAddressDetail = row.homeAddressDetail
+  nextTick(() => {
+    getTypeValue("dorm_jw").then((data: any) => {
+      const arr = data.data
+      arr.forEach((e: any) => {
+        if (e.label == 'bj') {
+          form.raidus = e.value
+          dictId.value = e.id
+        } else if (e.label == 'lng') {
+          center.lng = e.value
+        } else if (e.label == 'lat') {
+          center.lat = e.value
+        }
       })
-    }
-  },
-};
-</script>
-<style scoped>
+      BMPGL(ak).then((BMapGL: any) => {
+        // 创建地图实例
+        const map = new BMapGL.Map("container2")
+        // 创建点坐标
+        const point = new BMapGL.Point(center.lng, center.lat)
+        // 初始化地图，设置中心点坐标和地图级别
+        map.centerAndZoom(point, 13)
+        // 开启鼠标滚轮缩放
+        map.enableScrollWheelZoom(true)
+        // 创建地址解析器实例
+        const myGeo = new BMapGL.Geocoder()
+        myGeo.getPoint(form.homeAddressDetail, function (point: any) {
+          if (point) {
+            map.centerAndZoom(point, 16)
+            map.addOverlay(new BMapGL.Marker(point, { title: form.homeAddressDetail }))
+          } else {
+            alert('您选择的地址没有解析到结果！')
+          }
+        }, '北京市')
+      })
+    })
+  })
+}
 
+// 暴露方法给父组件
+defineExpose({
+  init
+})
+</script>
+
+<style scoped>
 #container2 {
   overflow: hidden;
   width: 100%;
@@ -147,5 +114,4 @@ export default {
 ul li {
   list-style: none;
 }
-
 </style>