bd-contest/src/components/manager/unbind.vue

<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>