a

src/views/recruit/recruitstudentsignup/dormFW.vue

@@ -3,143 +3,141 @@
     title="请设置住宿范围"
     append-to-body
     :close-on-click-modal="false"
-    :visible.sync="visible"
-    width="90%" heigth="90%"
-  >
-  <div style="height: 100%;width:100%">
-    <el-form :model="form" :rules="rules" ref="form" label-width="120px"
-             class="demo-ruleForm">
+    v-model="visible"
+    width="90%">
+    <div style="height: 100%;width:100%">
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
+               class="demo-ruleForm">
 
-      <el-form-item label="住宿半径(米)" prop="raidus">
-        <el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
-      </el-form-item>
+        <el-form-item label="住宿半径(米)" prop="raidus">
+          <el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
+        </el-form-item>
 
-    </el-form>
-    <div id="container"></div>
-  </div>
-    <span slot="footer" class="dialog-footer">
+      </el-form>
+      <div id="container"></div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
         <el-button type="primary" @click="dataFormSubmit">确定</el-button>
         <el-button @click="visible = false">取消</el-button>
-      </span>
+      </div>
+    </template>
   </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:{
-        raidus:0,
-      },
-      dictId:"",
-      rules: {
-        raidus: [
-          {required: true, message: '住宿半径不能为空', trigger: ["blur", "change"]}
-        ],
-      },
-      circleArr : [],
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick } from 'vue'
+import { useMessage, useMessageBox } from '/@/hooks/message'
+import { BMPGL } from "@/api/recruit/recruitstudentsignup"
+import { putItemObj } from "@/api/admin/dict"
+import { getTypeValue } from "@/api/admin/dict"
 
-    };
-  },
-  watch: {
-    'form.raidus': {
-      handler(newVal) {
-        if(newVal !='' && newVal !=undefined){
-          this.circle.setRadius(newVal); //设置圆形覆盖物的半径
+// 消息提示 hooks
+const message = useMessage()
+const messageBox = useMessageBox()
+
+// 表单引用
+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({
+  raidus: 0,
+})
+
+const rules = {
+  raidus: [
+    { required: true, message: '住宿半径不能为空', trigger: ["blur", "change"] }
+  ],
+}
+
+// 监听半径变化
+watch(() => form.raidus, (newVal) => {
+  if (newVal != '' && newVal != undefined && circle.value) {
+    circle.value.setRadius(newVal) // 设置圆形覆盖物的半径
+  }
+})
+
+// 初始化
+const init = () => {
+  visible.value = true
+  canSubmit.value = true
+  circleShow.value = true
+  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
         }
-      }
-    }
-  },
-  methods: {
-    init(){
-      let _this = this;
-      this.visible = true;
-      this.canSubmit = true;
-      this.circleShow = true;
-      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("container");
-              // 创建点坐标 axios => res 获取的初始化定位坐标
-              let point = new BMapGL.Point(_this.center.lng, _this.center.lat)
-              // 初始化地图，设置中心点坐标和地图级别
-              map.centerAndZoom(point, 13)
-              //开启鼠标滚轮缩放
-              map.enableScrollWheelZoom(true)
+      })
+      BMPGL(ak).then((BMapGL: any) => {
+        // 创建地图实例
+        const map = new BMapGL.Map("container")
+        // 创建点坐标
+        const point = new BMapGL.Point(center.lng, center.lat)
+        // 初始化地图，设置中心点坐标和地图级别
+        map.centerAndZoom(point, 13)
+        // 开启鼠标滚轮缩放
+        map.enableScrollWheelZoom(true)
 
-              // 绘制圆
-              this.circle = new BMapGL.Circle(new BMapGL.Point(_this.center.lng, _this.center.lat), this.form.raidus, {
-                strokeColor: 'blue',
-                strokeWeight: 2,
-                strokeOpacity: 0.5,
-                enableEditing:false
-              });
-              map.addOverlay(this.circle);
-
-            })
-          })
-
-
-
-      });
-
-
-    },
-    // 表单提交
-    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;
-            })
-
-          }
+        // 绘制圆
+        circle.value = new BMapGL.Circle(new BMapGL.Point(center.lng, center.lat), form.raidus, {
+          strokeColor: 'blue',
+          strokeWeight: 2,
+          strokeOpacity: 0.5,
+          enableEditing: false
         })
-      }).then(data => {
+        map.addOverlay(circle.value)
+      })
+    })
+  })
+}
 
-      }).catch(function(err) { })
-    }
-  },
-};
+// 表单提交
+const dataFormSubmit = async () => {
+  try {
+    await messageBox.confirm('是否确认保存住宿半径')
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        canSubmit.value = false
+        putItemObj({ id: dictId.value, value: form.raidus }).then(() => {
+          message.success('修改成功')
+          visible.value = false
+          canSubmit.value = true
+        }).catch(() => {
+          canSubmit.value = true
+        })
+      }
+    })
+  } catch {
+    // 用户取消
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  init
+})
 </script>
-<style scoped>
 
+<style scoped>
 #container {
   overflow: hidden;
   width: 100%;
@@ -147,8 +145,12 @@ export default {
   margin: 0;
   font-family: "微软雅黑";
 }
+
 ul li {
   list-style: none;
 }
 
+.dialog-footer {
+  text-align: right;
+}
 </style>