jcloud/dashboard/src2/components/JsiteDomainModifyDNSServerDialog.vue

<template>
  <Dialog :options="{ title: '修改DNS服务器', size: 'lg' }" v-model="show">
    <template #body-content>
      <div class="p-4 sm:p-6">
        <div class="space-y-4">
          <!-- DNS1 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS1（主DNS服务器）<span class="text-red-500">*</span>
            </label>
            <input
              v-model="dnsServers.dns1"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              :class="{ 'border-red-300': errors.dns1 }"
            />
            <p v-if="errors.dns1" class="mt-1 text-sm text-red-600">{{ errors.dns1 }}</p>
          </div>

          <!-- DNS2 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS2（辅DNS服务器）<span class="text-red-500">*</span>
            </label>
            <input
              v-model="dnsServers.dns2"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              :class="{ 'border-red-300': errors.dns2 }"
            />
            <p v-if="errors.dns2" class="mt-1 text-sm text-red-600">{{ errors.dns2 }}</p>
          </div>

          <!-- DNS3 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS3（可选）
            </label>
            <input
              v-model="dnsServers.dns3"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <!-- DNS4 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS4（可选）
            </label>
            <input
              v-model="dnsServers.dns4"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <!-- DNS5 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS5（可选）
            </label>
            <input
              v-model="dnsServers.dns5"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <!-- DNS6 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              DNS6（可选）
            </label>
            <input
              v-model="dnsServers.dns6"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
        </div>
        <div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
          {{ error }}
        </div>
      </div>
    </template>

    <template #actions>
      <div class="w-full flex justify-end space-x-3">
        <button
          type="button"
          class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none"
          @click="cancel"
        >
          取消
        </button>
        <button
          type="button"
          class="px-4 py-2 bg-black border border-transparent rounded-md text-sm font-medium text-white hover:bg-gray-800 focus:outline-none disabled:bg-gray-300 disabled:cursor-not-allowed"
          @click="modifyDNSServer"
          :disabled="isLoading || !isValid"
        >
          {{ isLoading ? '修改中...' : '确定' }}
        </button>
      </div>
    </template>
  </Dialog>
</template>

<script>
import { toast } from 'vue-sonner';
import { Dialog } from 'jingrow-ui';
import { DashboardError } from '../utils/error';

export default {
  name: 'JsiteDomainModifyDNSServerDialog',
  components: {
    Dialog
  },
  props: {
    domain: {
      type: String,
      required: true
    },
    domainDoc: {
      type: Object,
      default: null
    }
  },
  emits: ['success'],
  data() {
    return {
      show: true,
      dnsServers: {
        dns1: '',
        dns2: '',
        dns3: '',
        dns4: '',
        dns5: '',
        dns6: ''
      },
      errors: {},
      error: null
    };
  },
  computed: {
    isLoading() {
      return this.$resources.modifyDNSServer.loading;
    },
    isValid() {
      return this.dnsServers.dns1 && this.dnsServers.dns2 && !this.hasErrors;
    },
    hasErrors() {
      return Object.keys(this.errors).length > 0;
    }
  },
  resources: {
    modifyDNSServer() {
      return {
        url: 'jcloud.api.domain_west.west_domain_modify_dns_server',
        validate() {
          this.errors = {};
          
          if (!this.dnsServers.dns1) {
            this.errors.dns1 = '主DNS服务器不能为空';
          } else if (!this.isValidDNSFormat(this.dnsServers.dns1)) {
            this.errors.dns1 = '主DNS服务器格式不正确';
          }
          
          if (!this.dnsServers.dns2) {
            this.errors.dns2 = '辅DNS服务器不能为空';
          } else if (!this.isValidDNSFormat(this.dnsServers.dns2)) {
            this.errors.dns2 = '辅DNS服务器格式不正确';
          }
          
          // 验证可选的DNS服务器格式
          if (this.dnsServers.dns3 && !this.isValidDNSFormat(this.dnsServers.dns3)) {
            this.errors.dns3 = '第三个DNS服务器格式不正确';
          }
          if (this.dnsServers.dns4 && !this.isValidDNSFormat(this.dnsServers.dns4)) {
            this.errors.dns4 = '第四个DNS服务器格式不正确';
          }
          if (this.dnsServers.dns5 && !this.isValidDNSFormat(this.dnsServers.dns5)) {
            this.errors.dns5 = '第五个DNS服务器格式不正确';
          }
          if (this.dnsServers.dns6 && !this.isValidDNSFormat(this.dnsServers.dns6)) {
            this.errors.dns6 = '第六个DNS服务器格式不正确';
          }
          
          if (Object.keys(this.errors).length > 0) {
            throw new DashboardError('请检查DNS服务器格式');
          }
        },
        onSuccess(data) {
          if (data.status === 'success') {
            toast.success('DNS服务器修改成功！');
            this.$emit('success', {
              domain: this.domainDoc?.domain,
              dnsServers: this.dnsServers,
              message: data.message
            });
            this.show = false;
          } else {
            this.error = data.message || '修改DNS服务器失败';
          }
        },
        onError(error) {
          this.error = error.message || '修改DNS服务器失败';
        }
      };
    }
  },
  mounted() {
  },
  methods: {
    cancel() {
      this.show = false;
    },
    modifyDNSServer() {
      this.error = null;
      this.$resources.modifyDNSServer.submit({
        domain: this.domainDoc?.domain,
        dns1: this.dnsServers.dns1,
        dns2: this.dnsServers.dns2,
        dns3: this.dnsServers.dns3 || undefined,
        dns4: this.dnsServers.dns4 || undefined,
        dns5: this.dnsServers.dns5 || undefined,
        dns6: this.dnsServers.dns6 || undefined
      });
    },
    isValidDNSFormat(dns) {
      if (!dns) return false;
      
      // 简单的DNS格式验证
      const dnsRegex = /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/;
      return dnsRegex.test(dns) && dns.length >= 3 && dns.length <= 253;
    }
  }
};
</script>