|
@@ -1,43 +1,60 @@
|
|
<script setup>
|
|
<script setup>
|
|
import { cloneDeep } from 'lodash'
|
|
import { cloneDeep } from 'lodash'
|
|
import { addApi, updateApi } from '~@/api/list/gateway-list'
|
|
import { addApi, updateApi } from '~@/api/list/gateway-list'
|
|
|
|
+import { nextTick } from 'vue'
|
|
|
|
|
|
const emit = defineEmits(['cancel', 'ok'])
|
|
const emit = defineEmits(['cancel', 'ok'])
|
|
const message = useMessage()
|
|
const message = useMessage()
|
|
const isUpdate = ref(false)
|
|
const isUpdate = ref(false)
|
|
const visible = ref(false)
|
|
const visible = ref(false)
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
|
|
+const continueToAdd = ref(false)
|
|
|
|
+
|
|
const title = computed(() => {
|
|
const title = computed(() => {
|
|
return isUpdate.value ? '编辑' : '新增'
|
|
return isUpdate.value ? '编辑' : '新增'
|
|
})
|
|
})
|
|
const formRef = ref()
|
|
const formRef = ref()
|
|
-const formData = ref({
|
|
|
|
|
|
+const originalRecord = ref(null)
|
|
|
|
+
|
|
|
|
+const defaultFormData = {
|
|
id: 0,
|
|
id: 0,
|
|
name: '',
|
|
name: '',
|
|
hostId: 0,
|
|
hostId: 0,
|
|
- ruleId : 0,
|
|
|
|
|
|
+ ruleId: 0,
|
|
comment: '',
|
|
comment: '',
|
|
- operator: 0,
|
|
|
|
|
|
+ operator: 1,
|
|
banUdp: 0,
|
|
banUdp: 0,
|
|
banOverseas: 0,
|
|
banOverseas: 0,
|
|
-})
|
|
|
|
|
|
+}
|
|
|
|
+const formData = ref(cloneDeep(defaultFormData))
|
|
|
|
+
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
const labelCol = { style: { width: '100px' } }
|
|
const labelCol = { style: { width: '100px' } }
|
|
const wrapperCol = { span: 24 }
|
|
const wrapperCol = { span: 24 }
|
|
|
|
+
|
|
function open(record) {
|
|
function open(record) {
|
|
visible.value = true
|
|
visible.value = true
|
|
isUpdate.value = !!record?.id
|
|
isUpdate.value = !!record?.id
|
|
- formData.value = cloneDeep(record) ?? {
|
|
|
|
- id: 0,
|
|
|
|
- name: '',
|
|
|
|
- hostId: 0,
|
|
|
|
- ruleId : 0,
|
|
|
|
- comment: '',
|
|
|
|
- operator: 1,
|
|
|
|
- banUdp: 0,
|
|
|
|
- banOverseas: 0,
|
|
|
|
- }
|
|
|
|
|
|
+ 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() {
|
|
async function handleOk() {
|
|
try {
|
|
try {
|
|
await formRef.value?.validate()
|
|
await formRef.value?.validate()
|
|
@@ -46,7 +63,12 @@ async function handleOk() {
|
|
await api(formData.value)
|
|
await api(formData.value)
|
|
message.success(isUpdate.value ? '修改成功' : '新增成功')
|
|
message.success(isUpdate.value ? '修改成功' : '新增成功')
|
|
emit('ok')
|
|
emit('ok')
|
|
- visible.value = false
|
|
|
|
|
|
+ if (!isUpdate.value && continueToAdd.value) {
|
|
|
|
+ handleReset()
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ visible.value = false
|
|
|
|
+ }
|
|
}
|
|
}
|
|
catch (errorInfo) {
|
|
catch (errorInfo) {
|
|
console.log('Form Validate Failed:', errorInfo)
|
|
console.log('Form Validate Failed:', errorInfo)
|
|
@@ -55,42 +77,44 @@ async function handleOk() {
|
|
loading.value = false
|
|
loading.value = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
function handleCancel() {
|
|
function handleCancel() {
|
|
- formRef.value?.resetFields()
|
|
|
|
|
|
+ visible.value = false
|
|
emit('cancel')
|
|
emit('cancel')
|
|
}
|
|
}
|
|
|
|
+
|
|
defineExpose({
|
|
defineExpose({
|
|
open,
|
|
open,
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <a-modal v-model:open="visible" :title="title" :confirm-loading="loading" @ok="handleOk" @cancel="handleCancel">
|
|
|
|
|
|
+ <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 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-form-item :label="t('gateway.group.name')" name="name" :rules="[{ required: true, message: '请输入网关组名称' }]">
|
|
<a-input v-model:value="formData.name" :maxlength="50" placeholder="请输入网关组名称" />
|
|
<a-input v-model:value="formData.name" :maxlength="50" placeholder="请输入网关组名称" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item :label="t('gateway.group.hostId')" name="hostId" :rules="[{ required: true, message: '请输入订单ID' }]">
|
|
|
|
|
|
+ <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-input v-model:value="formData.hostId" :maxlength="50" placeholder="请输入订单ID" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item :label="t('gateway.group.ruleId')" name="ruleId" :rules="[{ required: true, message: '请输入规则ID' }]">
|
|
|
|
|
|
+ <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-input v-model:value="formData.ruleId" :maxlength="50" placeholder="请输入规则ID" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item :label="t('gateway.group.comment')" name="comment">
|
|
<a-form-item :label="t('gateway.group.comment')" name="comment">
|
|
<a-textarea v-model:value="formData.comment" show-count :maxlength="200" placeholder="请输入备注" />
|
|
<a-textarea v-model:value="formData.comment" show-count :maxlength="200" placeholder="请输入备注" />
|
|
</a-form-item>
|
|
</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 :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>
|
|
- <a-form-item :label="t('gateway.group.operator')" name="operator">
|
|
|
|
- <a-radio-group v-model:value="formData.operator">
|
|
|
|
|
|
+ <a-form-item :label="t('gateway.group.operator')" name="operator">
|
|
|
|
+ <a-radio-group v-model:value="formData.operator">
|
|
<a-radio :value="1">
|
|
<a-radio :value="1">
|
|
{{ t('gateway.group.telecommunications') }}
|
|
{{ t('gateway.group.telecommunications') }}
|
|
</a-radio>
|
|
</a-radio>
|
|
@@ -99,8 +123,8 @@ defineExpose({
|
|
</a-radio>
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item :label="t('gateway.group.banOverseas')" name="banOverseas">
|
|
|
|
- <a-radio-group v-model:value="formData.banOverseas">
|
|
|
|
|
|
+ <a-form-item :label="t('gateway.group.banOverseas')" name="banOverseas">
|
|
|
|
+ <a-radio-group v-model:value="formData.banOverseas">
|
|
<a-radio :value="1">
|
|
<a-radio :value="1">
|
|
是
|
|
是
|
|
</a-radio>
|
|
</a-radio>
|
|
@@ -110,5 +134,19 @@ defineExpose({
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-form>
|
|
</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>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|