修复已知bug

src/views/system/access-key/components/accesskey-edit.vue

@@ -4,33 +4,39 @@
     width="400px"
     :visible="visible"
     :confirm-loading="loading"
-    :title="'手机验证'"
+    :title="'创建 API key'"
     :body-style="{ paddingBottom: '8px' }"
     @update:visible="updateVisible"
     :maskClosable="false"
+    :cancelText="cancelText"
+    :okText="okText"
+    @close="updateVisible"
     @ok="save"
   >
-    <a-form class="login-form">
-      <a-form-item label="绑定的手机号码" name="phone">
-        {{ getMobile(form.phone) }}
-      </a-form-item>
-      <a-form-item label="校验码" name="code">
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      class="login-form">
+      <a-form-item name="accessKey">
         <div class="login-input-group">
           <a-input
+            v-if="form.accessSecret"
             allow-clear
             type="text"
-            :maxlength="6"
-            v-model:value="form.code"
+            placeholder="请输入API Keys名称"
+            v-model:value="form.accessSecret"
           >
           </a-input>
-          <a-button
-            class="login-captcha"
-            :disabled="!!countdownTime"
-            @click="openImgCodeModal"
+          <a-input
+            v-else
+            allow-clear
+            type="text"
+            placeholder="请输入API Keys名称"
+            :maxlength="6"
+            v-model:value="form.accessKey"
           >
-            <span v-if="!countdownTime">发送验证码</span>
-            <span v-else>已发送 {{ countdownTime }} s</span>
-          </a-button>
+          </a-input>
         </div>
       </a-form-item>
     </a-form>
@@ -38,69 +44,35 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch, computed, onBeforeUnmount } from "vue";
-import { Form, message, Modal, SelectProps } from "ant-design-vue";
-import { useUserStore } from "@/store/modules/user";
-import type { AccessKey } from "@/api/system/access-key/model";
-import { addAccessKey, updateAccessKey } from "@/api/system/access-key";
-import { FILE_SERVER } from "@/config/setting";
-import { uploadFile } from "@/api/system/file";
-import { RuleObject } from "ant-design-vue/es/form";
-import { isImage } from "@/utils/common";
-import { listUsers } from '@/api/system/user';
-import { getMobile } from '@/utils/common';
-import { sendSmsCaptcha } from '@/api/passport/login';
+import {ref, reactive} from "vue";
+import {message} from "ant-design-vue";
+import type {AccessKey} from "@/api/system/access-key/model";
+import {assignObject} from 'ele-admin-pro';
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import {addAccessKey} from "@/api/system/access-key";
+import {copyText} from "@/utils/common";
 
-const useForm = Form.useForm;
-const props = defineProps<{
+defineProps<{
   // 弹窗是否打开
   visible: boolean;
   // 修改回显的数据
   data?: AccessKey | null;
 }>();
 
-const userStore = useUserStore();
-// 当前登录用户信息
-const loginUser = computed(() => userStore.info ?? {});
-// 是否是修改
-const isUpdate = ref(false);
-const disabled = ref(false);
-// 选项卡位置
-const activeKey = ref("1");
-const promoter = ref<any>(undefined);
-const commander = ref(undefined);
-const appid = ref(undefined);
-
-/* 打开选择弹窗 */
-const content = ref("");
-// 图形验证码地址
-const captcha = ref("");
-// 验证码倒计时定时器
-let countdownTimer: number | null = null;
-// 验证码倒计时时间
-const countdownTime = ref(0);
-// 图形验证码
-const imgCode = ref("");
-// 发送验证码按钮loading
-const codeLoading = ref(false);
-
-
 const emit = defineEmits<{
   (e: "done", form: AccessKey): void;
   (e: "update:visible", value: boolean): void;
 }>();
-// 已上传数据, 可赋初始值用于回显
-const avatar = ref(<any>[]);
 // 提交状态
 const loading = ref(false);
+const cancelText = ref<string>("取消");
+const okText = ref<string>("创建");
 // 用户信息
 const form = reactive<AccessKey>({
   id: 0,
-  phone: "",
-  accessKey: "",
-  accessSecret: "",
-  code: undefined,
-  createTime: ""
+  accessKey: undefined,
+  accessSecret: undefined,
+  createTime: undefined
 });
 
 /* 更新visible */
@@ -109,125 +81,50 @@ const updateVisible = (value: boolean) => {
 };
 
 // 表单验证规则
-const rules = reactive({
-  name: [
+const rules = reactive<Record<string, Rule[]>>({
+  accessKey: [
     {
       required: true,
       type: "string",
-      message: "请输入工单名称",
+      message: "请输入API Key 名称",
       trigger: "blur"
     }
-  ],
-  taskType: [
-    {
-      required: true,
-      type: "string",
-      message: "请选择工单类型",
-      trigger: "blur"
-    }
-  ],
-  content: [
-    {
-      required: true,
-      type: "string",
-      message: "请输入工单内容",
-      trigger: "blur",
-      validator: async (_rule: RuleObject, value: string) => {
-        if (content.value == "") {
-          return Promise.reject("请输入文字内容");
-        }
-        return Promise.resolve();
-      }
-    }
   ]
 });
 
-/* 显示发送短信验证码弹窗 */
-const openImgCodeModal = () => {
-  if (!form.phone) {
-    message.error("手机号码有误");
-    return;
-  }
-  // imgCode.value = "";
-  sendCode();
-  // visible.value = true;
-};
-
-/* 发送短信验证码 */
-const sendCode = () => {
-  codeLoading.value = true;
-  sendSmsCaptcha({ phone: form.phone }).then((res) => {
-    console.log(res);
-    message.success("短信验证码发送成功, 请注意查收!");
-    codeLoading.value = false;
-    countdownTime.value = 30;
-    // 开始对按钮进行倒计时
-    countdownTimer = window.setInterval(() => {
-      if (countdownTime.value <= 1) {
-        countdownTimer && clearInterval(countdownTimer);
-        countdownTimer = null;
-      }
-      countdownTime.value--;
-    }, 1000);
-  });
-};
-
-onBeforeUnmount(() => {
-  countdownTimer && clearInterval(countdownTimer);
-});
-
-const { validate, validateInfos } = useForm(form, rules);
+const formRef = ref<FormInstance | null>(null);
 
 /* 保存编辑 */
 const save = () => {
-  validate()
+  if(form.accessSecret){
+    copyText(form.accessSecret)
+    return false;
+  }
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
     .then(() => {
-      updateVisible(false);
-      const { code,phone } = form;
-      emit("done", { code,phone });
+      loading.value = true;
+      addAccessKey(form)
+        .then((data) => {
+          console.log(data,'addData')
+          if(data){
+            assignObject(form, data);
+            cancelText.value = "关闭";
+            okText.value = "复制";
+          }
+          loading.value = false;
+          message.success('创建成功');
+          emit("done", {});
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
     })
     .catch(() => {
     });
 };
-
-const query = () => {
-  listUsers({username: 'admin'}).then(res => {
-    form.phone = res[0].phone;
-  })
-}
-query();
 </script>
-
-<style lang="less" scoped>
-.login-form{
-  padding: 0 20px;
-}
-.login-form-right .login-form {
-  margin: 0 15% 0 auto;
-}
-
-.login-form-left .login-form {
-  margin: 0 auto 0 15%;
-}
-
-/* 验证码 */
-.login-input-group {
-  display: flex;
-  align-items: center;
-
-  :deep(.ant-input-affix-wrapper) {
-    flex: 1;
-  }
-
-  .login-captcha {
-    margin-left: 10px;
-    padding: 0 10px;
-
-    & > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-</style>