dms-web/src/views/v1/customer/account/addBan.vue

<template>
  <component
    is="a-modal"
    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
    v-model:visible="visible"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close"
    @before-ok="submit"
  >
    <!-- 表单信息 start -->
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :auto-label-width="true"
    >
      <a-form-item label="操作" field="action">
        <a-radio-group v-model="formData.action">
          <a-radio value="1">封禁</a-radio>
          <a-radio value="2">解除封禁</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="类型" field="type">
        <a-radio-group v-model="formData.type">
          <a-radio value="1">UID</a-radio>
          <a-radio value="2">IP</a-radio>
          <a-radio value="3">设备</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="值" field="value">
        <a-textarea v-model="formData.value" placeholder="请输入值" :rows="3">
        </a-textarea>
        <template #extra> 多个请用英文逗号,隔开 </template>
      </a-form-item>
      <a-form-item label="理由" field="reason">
        <a-textarea v-model="formData.reason" placeholder="请输入理由" />
      </a-form-item>
    </a-form>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import tool from "@/utils/tool";
import { Message, Modal } from "@arco-design/web-vue";
import api from "../../api/customer/account";

const emit = defineEmits(["success"]);
// 引用定义
const visible = ref(false);
const loading = ref(false);
const formRef = ref();

let title = computed(() => {
  return "封禁｜解除封禁";
});

// 表单初始值
const initialFormData = {
  action: "",
  type: "",
  value: "",
  reason: "",
};

// 表单信息
const formData = reactive({ ...initialFormData });

// 验证规则
const rules = {
  action: [{ required: true, message: "操作必需填写" }],
  type: [{ required: true, message: "类型必需填写" }],
  value: [{ required: true, message: "值必需填写" }],
  reason: [{ required: true, message: "理由必需填写" }],
};

// 打开弹框
const open = async () => {
  formRef.value.clearValidate();
  formRef.value.resetFields();
  visible.value = true;
  await initPage();
};

// 初始化页面数据
const initPage = async () => {};

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    let data = { ...formData };
    let result = await api.saveBanApi(data);

    if (result.code === 200) {
      Message.success("操作成功");
      emit("success");
      done(true);
    }
    // 防止连续点击提交
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  done(false);
};

// 关闭弹窗
const close = () => (visible.value = false);

defineExpose({ open });
</script>