修复已知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>

src/views/system/access-key/index.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <a-page-header :ghost="false" title="秘钥管理">
       <div class="ele-text-secondary">
-        AccessKey ID 和 AccessKey Secret 是您访WebSoft-API
+        API key 是您访WebSoft-API
         的密钥，具有该账户完全的权限，请您妥善保管。
       </div>
     </a-page-header>
@@ -11,7 +11,7 @@
         <!-- 表格 -->
         <ele-pro-table
           ref="tableRef"
-          row-key="logId"
+          row-key="id"
           :columns="columns"
           :datasource="datasource"
           :where="defaultWhere"
@@ -19,27 +19,26 @@
         >
           <template #toolbar>
             <a-space>
-              <a-button type="primary" class="ele-btn-icon" @click="add">
-                <template #icon>
-                  <plus-outlined />
-                </template>
-                <span>创建 AccessKey</span>
+              <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+                <span>创建 API key</span>
               </a-button>
-              <a-button @click="reset">刷新</a-button>
             </a-space>
           </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'accessSecret'">
-              <span v-if="record.accessSecret">
-                {{ record.accessSecret }}
+              <span>
+                sk-******************
               </span>
-              <a @click="openEdit(record)" v-else>查看 Secret</a>
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a @click="openEdit(record)">查看 Secret</a>
-                <!--                <a-divider type="vertical" />-->
-                <!--                <a @click="resetPsw(record)">禁用</a>-->
+                <a-popconfirm
+                  placement="topRight"
+                  title="确定要删除此用户吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
               </a-space>
             </template>
           </template>
@@ -47,102 +46,110 @@
       </a-card>
     </div>
     <!-- 编辑弹窗 -->
-    <AccessKeyEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <AccessKeyEdit v-model:visible="showEdit" :data="current" @done="reload"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { message } from 'ant-design-vue/es';
-  import type { EleProTable } from 'ele-admin-pro/es';
-  import type {
-    DatasourceFunction,
-    ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import AccessKeyEdit from './components/accesskey-edit.vue';
-  import { toDateString } from 'ele-admin-pro/es';
-  import { addAccessKey, pageAccessKey } from '@/api/system/access-key';
-  import { AccessKey, AccessKeyParam } from '@/api/system/access-key/model';
+import {ref, reactive} from 'vue';
+import {message} from 'ant-design-vue/es';
+import type {EleProTable} from 'ele-admin-pro/es';
+import type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import AccessKeyEdit from './components/accesskey-edit.vue';
+import {toDateString} from 'ele-admin-pro/es';
+import {pageAccessKey, removeAccessKey} from '@/api/system/access-key';
+import {AccessKey, AccessKeyParam} from '@/api/system/access-key/model';
+import {messageLoading} from 'ele-admin-pro/es';
 
-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
-    {
-      title: 'AccessKey ID',
-      key: 'accessKey',
-      dataIndex: 'accessKey',
-      showSorterTooltip: false
-    },
-    {
-      title: 'AccessSecret',
-      key: 'accessSecret',
-      dataIndex: 'accessSecret',
-      showSorterTooltip: false
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      customRender: ({ text }) => toDateString(text)
-    }
-  ]);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: '名称',
+    key: 'accessKey',
+    dataIndex: 'accessKey',
+    showSorterTooltip: false
+  },
+  {
+    title: 'Key',
+    key: 'accessSecret',
+    dataIndex: 'accessSecret',
+    showSorterTooltip: false
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    align: 'center',
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd'),
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    fixed: 'right',
+    align: 'center'
+  }
+]);
 
-  // 表格选中数据
-  const selection = ref<AccessKey[]>([]);
-  const searchText = ref('');
-  const userId = ref<number>(0);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 当前编辑数据
-  const current = ref<any>(null);
+// 表格选中数据
+const selection = ref<AccessKey[]>([]);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 当前编辑数据
+const current = ref<any>(null);
 
-  // 默认搜索条件
-  const defaultWhere = reactive({
-    code: '',
-    phone: '',
-    username: '',
-    nickname: '',
-    userId: undefined
-  });
+// 默认搜索条件
+const defaultWhere = reactive({
+  code: '',
+  phone: '',
+  username: '',
+  nickname: '',
+  userId: undefined
+});
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
-    return pageAccessKey({ ...where, ...orders, page, limit }).catch((e) => {
+
+// 表格数据源
+const datasource: DatasourceFunction = ({where}) => {
+  return pageAccessKey({...where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: any) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+
+/* 删除单个 */
+const remove = (row: AccessKey) => {
+  const hide = messageLoading('请求中..', 0);
+  removeAccessKey(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
       message.error(e.message);
     });
-  };
+};
 
-  const reset = () => {
-    userId.value = 0;
-    searchText.value = '';
-    reload();
-  };
+/* 搜索 */
+const reload = (where?: AccessKeyParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({page: 1, where});
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: any) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
-
-  /* 搜索 */
-  const reload = (where?: AccessKeyParam) => {
-    selection.value = [];
-    tableRef?.value?.reload({ page: 1, where });
-  };
-
-  const add = () => {
-    addAccessKey({})
-      .then((res) => {
-        reload();
-      })
-      .catch((err) => {
-        message.error(err.message);
-      });
-  };
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'AccessKeyIndex'
-  };
+export default {
+  name: 'AccessKeyIndex'
+};
 </script>

src/views/system/developer/components/info.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+          <div class="flex">
+            <span class="w-32">{{ record.name }}</span>
+            <span class="w-32">{{ record.value }}</span>
+          </div>
+      </template>
+      <template v-if="column.key === 'action'">
+        <template v-if="record.key === '2'">
+          <a-button>重置</a-button>
+        </template>
+      </template>
+    </template>
+  </a-table>
+</template>
+<script>
+export default {
+  setup() {
+    return {
+      columns: [
+        {
+          title: '开发者ID',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          align: 'center',
+          width: 240,
+        },
+      ],
+      dataSource: [
+        {
+          key: '1',
+          name: '租户ID',
+          value: '10550'
+        },
+        {
+          key: '2',
+          name: 'AppSecret',
+          value: 'sdfsdfsdfsdfs'
+        },
+      ],
+    };
+  },
+};
+</script>

src/views/system/developer/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <a-card title="开发者ID" style="margin-bottom: 20px">
+      <Info/>
+    </a-card>
+    <a-card title="服务器域名" style="margin-bottom: 20px">
+      <template #extra>
+        <a-button type="primary" @click="push(`/system/role`)">添加</a-button>
+      </template>
+      <Info/>
+    </a-card>
+    <a-card title="业务域名" style="margin-bottom: 20px">
+      <template #extra>
+        <a-button type="primary" @click="push(`/system/role`)">添加</a-button>
+      </template>
+      <Info/>
+    </a-card>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+import {getPageTitle, push} from "@/utils/common";
+import Info from './components/info.vue'
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SystemDeveloper'
+};
+</script>