go_gameshield/web/src/pages/menu/components/crud-table-modal.vue

<script setup>
import { cloneDeep } from 'lodash'
import { addApi, updateApi } from '~@/api/list/gateway-list'
import { nextTick } from 'vue'

const emit = defineEmits(['cancel', 'ok'])
const message = useMessage()
const isUpdate = ref(false)
const visible = ref(false)
const loading = ref(false)
const continueToAdd = ref(false)

const title = computed(() => {
  return isUpdate.value ? '编辑' : '新增'
})
const formRef = ref()
const originalRecord = ref(null)

const defaultFormData = {
  id: 0,
  name: '',
  hostId: 0,
  ruleId: 0,
  comment: '',
  operator: 1,
  banUdp: 0,
  banOverseas: 0,
}
const formData = ref(cloneDeep(defaultFormData))

const { t } = useI18n()
const labelCol = { style: { width: '100px' } }
const wrapperCol = { span: 24 }

function open(record) {
  visible.value = true
  isUpdate.value = !!record?.id
  originalRecord.value = record ? cloneDeep(record) : null
  formData.value = record ? cloneDeep(record) : cloneDeep(defaultFormData)
  continueToAdd.value = false
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

function handleReset() {
  if (isUpdate.value)
    formData.value = cloneDeep(originalRecord.value)

  else
    formData.value = cloneDeep(defaultFormData)

  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

async function handleOk() {
  try {
    await formRef.value?.validate()
    loading.value = true
    const api = isUpdate.value ? updateApi : addApi
    await api(formData.value)
    message.success(isUpdate.value ? '修改成功' : '新增成功')
    emit('ok')
    if (!isUpdate.value && continueToAdd.value) {
      handleReset()
    }
    else {
      visible.value = false
    }
  }
  catch (errorInfo) {
    console.log('Form Validate Failed:', errorInfo)
  }
  finally {
    loading.value = false
  }
}

function handleCancel() {
  visible.value = false
  emit('cancel')
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal v-model:open="visible" :title="title" :confirm-loading="loading" @cancel="handleCancel">
    <a-form ref="formRef" :model="formData" class="w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item :label="t('gateway.group.name')" name="name" :rules="[{ required: true, message: '请输入网关组名称' }]">
        <a-input v-model:value="formData.name" :maxlength="50" placeholder="请输入网关组名称" />
      </a-form-item>
      <a-form-item :label="t('gateway.group.hostId')" name="hostId" :rules="[{ required: true, message: '请输入订单ID' }]">
        <a-input v-model:value="formData.hostId" :maxlength="50" placeholder="请输入订单ID" />
      </a-form-item>
      <a-form-item :label="t('gateway.group.ruleId')" name="ruleId" :rules="[{ required: true, message: '请输入规则ID' }]">
        <a-input v-model:value="formData.ruleId" :maxlength="50" placeholder="请输入规则ID" />
      </a-form-item>
      <a-form-item :label="t('gateway.group.comment')" name="comment">
        <a-textarea v-model:value="formData.comment" show-count :maxlength="200" placeholder="请输入备注" />
      </a-form-item>
      <a-form-item :label="t('gateway.group.banUdp')" name="banUdp">
        <a-radio-group v-model:value="formData.banUdp">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="t('gateway.group.operator')" name="operator">
        <a-radio-group v-model:value="formData.operator">
          <a-radio :value="1">
            {{ t('gateway.group.telecommunications') }}
          </a-radio>
          <a-radio :value="2">
            {{ t('gateway.group.BGP') }}
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="t('gateway.group.banOverseas')" name="banOverseas">
        <a-radio-group v-model:value="formData.banOverseas">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-checkbox v-if="!isUpdate" v-model:checked="continueToAdd" style="float: left; line-height: 32px;">
        继续添加
      </a-checkbox>
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button key="reset" @click="handleReset">
        重置
      </a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
        确定
      </a-button>
    </template>
  </a-modal>
</template>