refactor(tenant): 优化租户表单及列表

src/apis/tenant/type.ts

@@ -14,6 +14,7 @@ export interface TenantResp {
   updateTime: string
   createUserString: string
   updateUserString: string
+  adminUsername: string
   packageName: string
 }
 export interface TenantQuery {

src/views/system/config/client/ClientAddModal.vue

@@ -67,8 +67,8 @@ const columns: ColumnItem[] = reactive([
   {
     label: () => (
       <a-tooltip content="-1 代表不限制，永不冻结">
-        Token 最低活跃频率
+        Token 最低活跃频率&nbsp;
-        <icon-info-circle-fill />
+        <icon-question-circle />
       </a-tooltip>
     ),
     field: 'activeTimeout',
@@ -87,8 +87,8 @@ const columns: ColumnItem[] = reactive([
   {
     label: () => (
       <a-tooltip content="-1 代表永不过期">
-        Token 有效期
+        Token 有效期&nbsp;
-        <icon-info-circle-fill />
+        <icon-question-circle />
       </a-tooltip>
     ),
     field: 'timeout',

src/views/tenant/management/AddModal.vue

@@ -13,7 +13,7 @@
   </a-modal>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { Message } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
 import { addTenant, getTenant, updateTenant } from '@/apis/tenant/management'
@@ -43,7 +43,6 @@ const getPackageList = async () => {
 }
 
 const [form, resetForm] = useResetReactive({
-  isolationLevel: 1,
   status: 1,
 })
 
@@ -59,16 +58,22 @@ const columns: ColumnItem[] = reactive([
     },
   },
   {
-    label: '套餐',
+    label: () => (
-    field: 'packageId',
+      <a-tooltip content="例如：example.com">
-    type: 'select',
+        域名&nbsp;
+        <icon-question-circle />
+      </a-tooltip>
+    ),
+    field: 'domain',
+    type: 'input',
     span: 24,
-    required: true,
+    slots: {
-    hide: () => {
+      prepend: () => (
-      return isUpdate.value
+        <span style={{ textAlign: 'center' }}>http(s)://</span>
+      ),
     },
     props: {
-      options: packageList,
+      placeholder: '请输入域名',
     },
   },
   {
@@ -81,18 +86,18 @@ const columns: ColumnItem[] = reactive([
     },
   },
   {
-    label: '域名',
+    label: () => (
-    field: 'domain',
+      <a-tooltip content="自动初始化管理员用户">
-    type: 'input',
+        管理员用户&nbsp;
-    span: 24,
+        <icon-question-circle />
-  },
+      </a-tooltip>
-  {
+    ),
-    label: '管理员用户',
+    field: 'adminUsername',
-    field: 'username',
     type: 'input',
     span: 24,
     required: true,
     props: {
+      placeholder: '请输入管理员用户',
       maxLength: 64,
     },
     hide: () => {
@@ -101,7 +106,7 @@ const columns: ColumnItem[] = reactive([
   },
   {
     label: '管理员密码',
-    field: 'password',
+    field: 'adminPassword',
     type: 'input-password',
     span: 24,
     required: true,
@@ -112,6 +117,19 @@ const columns: ColumnItem[] = reactive([
       return isUpdate.value
     },
   },
+  {
+    label: '套餐',
+    field: 'packageId',
+    type: 'select',
+    span: 24,
+    required: true,
+    hide: () => {
+      return isUpdate.value
+    },
+    props: {
+      options: packageList,
+    },
+  },
   {
     label: '描述',
     field: 'description',
@@ -151,7 +169,7 @@ const save = async () => {
     } else {
       await addTenant({
         ...form,
-        password: encryptByRsa(form.password),
+        adminPassword: encryptByRsa(form.adminPassword),
       })
       Message.success('新增成功')
     }

src/views/tenant/management/DetailDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible" title="租户详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
     <a-descriptions :column="2" size="large" class="general-description">
-      <a-descriptions-item label="ID" :span="2">
+      <a-descriptions-item label="ID">
         <a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
       </a-descriptions-item>
       <a-descriptions-item label="编码">
@@ -9,9 +9,9 @@
       </a-descriptions-item>
       <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
       <a-descriptions-item label="套餐">{{ dataDetail?.packageName }}</a-descriptions-item>
-      <a-descriptions-item label="状态">
+      <a-descriptions-item label="域名">
-        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))">{{ dataDetail?.domain }}</a>
-        <a-tag v-else color="red">禁用</a-tag>
+        <span v-else style="color: red" class="text-red-4">未设置</span>
       </a-descriptions-item>
       <a-descriptions-item label="过期时间">
         <span v-if="!dataDetail?.expireTime">
@@ -19,9 +19,10 @@
         </span>
         <span v-else>{{ dataDetail?.expireTime }}</span>
       </a-descriptions-item>
-      <a-descriptions-item label="域名">
+      <a-descriptions-item label="管理员用户">{{ dataDetail?.adminUsername }}</a-descriptions-item>
-        <a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))">{{ dataDetail?.domain }}</a>
+      <a-descriptions-item label="状态">
-        <span v-else style="color: red" class="text-red-4">未设置</span>
+        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a-tag v-else color="red">禁用</a-tag>
       </a-descriptions-item>
       <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>

src/views/tenant/management/index.vue

@@ -120,9 +120,10 @@ const columns: TableInstance['columns'] = [
   { title: '编码', dataIndex: 'code', slotName: 'code', width: 150 },
   { title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
   { title: '套餐', dataIndex: 'packageName', slotName: 'packageName' },
-  { title: '状态', dataIndex: 'status', slotName: 'status' },
-  { title: '过期时间', dataIndex: 'expireTime', slotName: 'expireTime', width: 180 },
   { title: '域名', dataIndex: 'domain', slotName: 'domain', ellipsis: true, tooltip: true },
+  { title: '过期时间', dataIndex: 'expireTime', slotName: 'expireTime', width: 180 },
+  { title: '管理员用户', dataIndex: 'adminUsername', slotName: 'adminUsername', ellipsis: true, tooltip: true },
+  { title: '状态', dataIndex: 'status', slotName: 'status' },
   { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
   { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
   { title: '创建时间', dataIndex: 'createTime', width: 180 },