From 81bb305102890384d3e911da653ff6253d640b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?= <i@ikxin.com>
Date: Wed, 19 Jul 2023 16:29:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E7=BB=93=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/items/check.ts |  6 ---
 src/views/detection.vue   | 81 +++++++++++++++++++++------------------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/assets/items/check.ts b/src/assets/items/check.ts
index 69334250..05a379c2 100644
--- a/src/assets/items/check.ts
+++ b/src/assets/items/check.ts
@@ -202,9 +202,3 @@ export const appItems = {
   '201': 'Office Visio Standard 2019',
   '202': 'Office Word 2019'
 }
-
-export const protocolItems = {
-  '4': 'V4 protocol',
-  '5': 'V5 protocol',
-  '6': 'V6 protocol'
-}
diff --git a/src/views/detection.vue b/src/views/detection.vue
index 717c0ffa..a0585cc3 100644
--- a/src/views/detection.vue
+++ b/src/views/detection.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { FieldRule } from '@arco-design/web-vue'
-import { appItems, protocolItems } from '@/assets/items/check'
+import { appItems } from '@/assets/items/check'
 import { useAxios } from '@vueuse/integrations/useAxios'
 
 const { t } = useI18n()
 
-const formData = reactive({
-  host: 'kms.ikxin.com',
+const formData = ref({
+  domain: 'kms.ikxin.com',
   port: '1688',
-  app: '1',
-  protocol: '6'
+  protocol: '6',
+  software: '1'
 })
 
 const formRules = computed((): Record<string, FieldRule | FieldRule[]> => {
   return {
-    host: {
+    domain: {
       required: true,
       message: t('check.form.host.placeholder')
     },
@@ -22,69 +22,74 @@ const formRules = computed((): Record<string, FieldRule | FieldRule[]> => {
       required: true,
       message: t('check.form.port.placeholder')
     },
-    app: {
-      required: true,
-      message: t('check.form.app.placeholder')
-    },
     protocol: {
       required: true,
       message: t('check.form.protocol.placeholder')
+    },
+    software: {
+      required: true,
+      message: t('check.form.app.placeholder')
     }
   }
 })
 
-const visible = ref(false)
-const loading = ref(false)
-
-const alertInfo = reactive<{
+const resultInfo = reactive<{
+  loading: boolean
+  message: string
   type: 'normal' | 'error' | 'success' | 'warning' | 'info'
-  meaasge: string
+  visible: boolean
 }>({
+  loading: false,
+  message: '',
   type: 'normal',
-  meaasge: ''
+  visible: false
 })
 
 const handleSubmit = async data => {
   if (data.errors === undefined) {
-    loading.value = true
-    const { data } = await useAxios('/api/kms-check', { method: 'get', params: formData })
-    alertInfo.meaasge = data.value.stdout
-    alertInfo.type = data.value.result
-    visible.value = true
-    loading.value = false
+    resultInfo.loading = true
+    const { data } = await useAxios('/api/kms/detection', {
+      method: 'post',
+      data: formData.value,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    Object.assign(resultInfo, data.value)
+    resultInfo.visible = true
+    resultInfo.loading = false
   }
 }
 </script>
 
 <template>
   <ACard :title="t('check.title')" class="h-full">
-    <ASpin :loading="loading" dot class="w-full">
-      <AForm :model="formData" :rules="formRules" auto-label-width>
-        <AFormItem :label="t('check.form.host.label')" field="host">
-          <AInput v-model="formData.host"></AInput>
+    <ASpin :loading="resultInfo.loading" dot class="w-full">
+      <AForm :model="formData" :rules="formRules" @submit="handleSubmit" auto-label-width>
+        <AFormItem :label="t('check.form.host.label')" field="domain">
+          <AInput v-model="formData.domain"></AInput>
         </AFormItem>
         <AFormItem :label="t('check.form.port.label')" field="port">
           <AInput v-model="formData.port"></AInput>
         </AFormItem>
-        <AFormItem :label="t('check.form.app.label')" field="app">
-          <ASelect v-model="formData.app">
-            <AOption v-for="(value, key) in appItems" :key="key" :value="key">{{ value }}</AOption>
-          </ASelect>
-        </AFormItem>
         <AFormItem :label="t('check.form.protocol.label')" field="protocol">
           <ASelect v-model="formData.protocol">
-            <AOption v-for="(value, key) in protocolItems" :key="key" :value="key">{{ value }}</AOption>
+            <AOption value="6">V6 Protocol</AOption>
+            <AOption value="5">V5 Protocol</AOption>
+            <AOption value="4">V4 Protocol</AOption>
+          </ASelect>
+        </AFormItem>
+        <AFormItem :label="t('check.form.app.label')" field="software">
+          <ASelect v-model="formData.software">
+            <AOption v-for="(value, key) in appItems" :key="key" :value="key">{{ value }}</AOption>
           </ASelect>
         </AFormItem>
         <AFormItem>
-          <ASpace>
-            <AButton type="primary" @click="handleSubmit">提交</AButton>
-          </ASpace>
+          <AButton html-type="submit" type="primary">提交</AButton>
         </AFormItem>
       </AForm>
-      <AAlert v-show="visible" :type="alertInfo.type">
-        <template #title> {{ alertInfo.type }} </template>
-        {{ alertInfo.meaasge }}
+      <AAlert v-show="resultInfo.visible" :type="resultInfo.type" :title="resultInfo.type" class="whitespace-pre">
+        {{ resultInfo.message }}
       </AAlert>
     </ASpin>
   </ACard>