北斗导航定位通信综合实践赛服务系统

2026-03-27 17:36:15 +08:00
commit 7b9028e883
59 changed files with 11761 additions and 0 deletions
--- a/src/components/manager/unbind.vue
+++ b/src/components/manager/unbind.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="handleClose"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        解绑
+      </div>
+      <div
+        @click="close"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <el-form
+      ref="ruleFormRef"
+      style="max-width: 600px"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="auto"
+      size="default"
+      status-icon
+      class="mx-auto"
+    >
+      <el-form-item class="mx-1 font-bold" label="IMSI 号" prop="card_imsi">
+        <el-input
+          minlength="18"
+          maxlength="18"
+          clearable
+          placeholder="请输入 IMSI 号"
+          v-model="ruleForm.card_imsi"
+          @input="filter(ruleForm.card_imsi, 'card_imsi')"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="unbind(ruleFormRef)">
+          解绑
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const dialogVisible = ref(false);
+const ruleFormRef = ref(null);
+const formElClone = ref(null);
+
+const ruleForm = reactive({
+  card_imsi: "",
+});
+
+const rules = reactive({
+  card_imsi: [
+    { required: true, message: "请输入 IMSI 号", trigger: "blur" },
+    { min: 18, max: 18, message: "输入长度应当为 18 位", trigger: "change" },
+  ],
+});
+
+const emit = defineEmits(["unBindCard", "disconnect"]);
+
+const props = defineProps({
+  card_id: String,
+});
+
+const filter = (value, label) => {
+  let filterValue = value.replace(/\D/g, "");
+  if (label == "card_imsi") {
+    ruleForm.card_imsi = filterValue;
+  }
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+  if (!ruleFormRef) return;
+  formElClone.value = ruleFormRef.value;
+  formElClone.value.resetFields();
+};
+
+const resetForm = (formEl) => {
+  dialogVisible.value = false;
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const unbind = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      dialogVisible.value = false;
+      const data = {
+        card_id: props.card_id,
+        card_imsi: ruleForm.card_imsi,
+      };
+      $http.post($url.unBindCard, data).then((res) => {
+        if (res.data.code === 200) {
+          ElMessage({
+            message: "解绑成功！",
+            type: "success",
+          });
+          emit("unBindCard");
+          ruleForm.card_imsi = "";
+          emit("disconnect");
+          window.location.reload();
+        } else {
+          ElMessage.error("解绑失败！");
+        }
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+
+watch(dialogVisible, (value) => {
+  if (!value) {
+    resetForm(ruleFormRef.value);
+  }
+});
+</script>
+
+<style scoped></style>