feat(client/index.vue): 客户端TypeScript类型完善和保存表单添加

src/views/system/client/index.vue

@@ -1,63 +1,77 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form
-        ref="queryForm"
-        :model="queryParams"
-        :inline="true"
-    >
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon='Delete' :disabled="multiple" @click="handleDelete">删除</el-button>
+        <el-button type="success" :icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button
+          type="danger"
+          :icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
       </el-form-item>
 
       <el-form-item prop="clientId">
         <el-input
-            v-model="queryParams.clientId"
-            placeholder="输入客户端ID"
-            clearable
-            style="width: 240px"
-            @keyup.enter.native="handleQuery"
+          v-model="queryParams.clientId"
+          placeholder="输入客户端ID"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" :icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 数据表格 -->
     <el-table
-        v-loading="loading"
-        :data="pageList"
-        border
-        @selection-change="handleSelectionChange"
+      v-loading="loading"
+      :data="clientList"
+      border
+      @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="序号" type="index" width="55" align="center"/>
-      <el-table-column label="客户端ID" prop="clientId" width="200"/>
-      <el-table-column label="客户端密钥" prop="clientSecret" width="100"/>
-      <el-table-column label="域" width="100" prop="scope"/>
-      <el-table-column label="自动放行" prop="autoapprove" width="100"/>
-      <el-table-column label="授权方式" prop="authorizedGrantTypes"/>
-      <el-table-column label="认证令牌时效(单位：秒)" width="200" prop="accessTokenValidity"/>
-      <el-table-column label="刷新令牌时效(单位：秒)" width="200" prop="refreshTokenValidity"/>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" type="index" width="55" align="center" />
+      <el-table-column label="客户端ID" prop="clientId" width="200" />
+      <el-table-column label="客户端密钥" prop="clientSecret" width="100" />
+      <el-table-column label="域" width="100" prop="scope" />
+      <el-table-column label="自动放行" prop="autoapprove" width="100" />
+      <el-table-column label="授权方式" prop="authorizedGrantTypes" />
+      <el-table-column
+        label="认证令牌时效(单位：秒)"
+        width="200"
+        prop="accessTokenValidity"
+      />
+      <el-table-column
+        label="刷新令牌时效(单位：秒)"
+        width="200"
+        prop="refreshTokenValidity"
+      />
       <el-table-column label="操作" align="center" width="120">
         <template #default="scope">
           <el-button
-              type="primary"
-              :icon="Edit"
-              circle
-              plain
-              @click.stop="handleUpdate(scope.row)"
+            type="primary"
+            :icon="Edit"
+            circle
+            plain
+            @click.stop="handleUpdate(scope.row)"
           />
           <el-button
-              type="danger"
-              :icon="Delete"
-              circle
-              plain
-              @click.stop="handleDelete(scope.row)"
+            type="danger"
+            :icon="Delete"
+            circle
+            plain
+            @click.stop="handleDelete(scope.row)"
           />
         </template>
       </el-table-column>
@@ -65,41 +79,123 @@
 
     <!-- 分页工具条 -->
     <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="handleQuery"
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="handleQuery"
     />
 
     <!-- 表单弹窗 -->
-    <el-dialog
-        :title="dialog.title"
-        v-model="dialog.visible"
-        width="700px"
-    >
-      <el-form ref="dataForm"
-               :model="formData"
-               :rules="rules"
-               label-width="100px"
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
       >
-        <el-form-item label="客户端ID" prop="clientId">
-          <el-input v-model="formData.clientId" placeholder="请输入客户端ID"/>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="客户端ID" prop="clientId">
+              <el-input
+                v-model="formData.clientId"
+                placeholder="请输入客户端ID"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="客户端密钥" prop="clientSecret">
+              <el-input
+                v-model="formData.clientSecret"
+                placeholder="请输入客户端密钥"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="域" prop="scope">
+              <el-input v-model="formData.scope" placeholder="请输入域" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="自动放行" prop="autoapprove">
+              <el-radio-group v-model="formData.autoapprove">
+                <el-radio label="true">是</el-radio>
+                <el-radio label="false">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="授权方式" prop="authorizedGrantTypes">
+          <el-checkbox-group v-model="checkedAuthorizedGrantTypes">
+            <el-checkbox
+              v-for="item in authorizedGrantTypesOptions"
+              :key="item.value"
+              :label="item.value"
+              >{{ item.label }}
+            </el-checkbox>
+          </el-checkbox-group>
         </el-form-item>
 
-        <el-form-item label="客户端密钥" prop="clientSecret">
-          <el-input v-model="formData.clientSecret" placeholder="请输入客户端密钥"/>
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="认证令牌时效" prop="accessTokenValidity">
+              <el-input
+                v-model="formData.accessTokenValidity"
+                placeholder="请输入认证令牌时效"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="刷新令牌时效" prop="refreshTokenValidity">
+              <el-input
+                v-model="formData.refreshTokenValidity"
+                placeholder="请输入刷新令牌时效"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="回调地址" prop="webServerRedirectUri">
+              <el-input
+                v-model="formData.webServerRedirectUri"
+                placeholder="请输入回调地址"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="权限" prop="authorities">
+              <el-input
+                v-model="formData.authorities"
+                placeholder="请输入权限"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="扩展信息" prop="additionalInformation">
+              <el-input
+                v-model="formData.additionalInformation"
+                type="textarea"
+                placeholder="JSON格式"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">
-            确定
-          </el-button>
-          <el-button @click="cancel">
-            取消
-          </el-button>
+          <el-button type="primary" @click="submitForm"> 确定 </el-button>
+          <el-button @click="cancel"> 取消 </el-button>
         </div>
       </template>
     </el-dialog>
@@ -107,12 +203,21 @@
 </template>
 
 <script setup lang="ts">
-import {listClientsWithPage, detail, update, add, del} from '@/api/system/client'
-import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
-import {onMounted, reactive, getCurrentInstance, ref, unref, toRefs} from 'vue'
-import {ElForm, ElMessage, ElMessageBox} from "element-plus"
+import {
+  listClientPages,
+  getClientFormDetial,
+  addClient,
+  updateClient,
+  deleteClients,
+} from "@/api/system/client";
+import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
+import { onMounted, reactive, getCurrentInstance, ref, toRefs } from "vue";
+import { ElForm, ElMessage, ElMessageBox } from "element-plus";
+import { ClientFormData, ClientItem, ClientQueryParam, Option } from "@/types";
+const { proxy }: any = getCurrentInstance();
 
-const dataForm = ref(ElForm)
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
 const state = reactive({
   loading: true,
   // 选中ID数组
@@ -124,145 +229,140 @@ const state = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    clientId: undefined
-  },
-  pageList: [],
+  } as ClientQueryParam,
+  clientList: [] as ClientItem[],
   total: 0,
   dialog: {
-    title: '',
+    title: "",
     visible: false,
-    type: 'create'
-  },
-  formData: {
-    authorizedGrantTypes: [],
-    clientSecret: undefined,
-    clientId: undefined,
-    accessTokenValidity: undefined,
-    refreshTokenValidity: undefined,
-    webServerRedirectUri: undefined,
-    authorities: undefined,
-    additionalInformation: undefined,
-    autoapprove: 'false'
+    type: "create",
   },
+  formData: {} as ClientFormData,
   rules: {
     clientId: [
-      {required: true, message: '客户端ID不能为空', trigger: 'blur'}
-    ]
-  }
-})
+      { required: true, message: "客户端ID不能为空", trigger: "blur" },
+    ],
+  },
+  authorizedGrantTypesOptions: [] as Option[],
+  checkedAuthorizedGrantTypes: [] as string[],
+});
 
-const {loading, ids, single, multiple, queryParams, pageList, total, dialog, formData, rules} = toRefs(state)
+const {
+  loading,
+  ids,
+  single,
+  multiple,
+  queryParams,
+  clientList,
+  total,
+  dialog,
+  formData,
+  rules,
+  authorizedGrantTypesOptions,
+  checkedAuthorizedGrantTypes,
+} = toRefs(state);
 
 function handleQuery() {
-  listClientsWithPage(state.queryParams).then(response => {
-    const {data, total} = response as any
-    state.pageList = data
-    state.total = total
-    state.loading = false
-  })
+  listClientPages(state.queryParams).then(({ data }) => {
+    state.clientList = data.list;
+    state.total = data.total;
+    state.loading = false;
+  });
 }
 
 function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    clientId: undefined
-  }
-  handleQuery()
+  queryFormRef.value.resetFields();
+  handleQuery();
 }
 
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.clientId)
-  state.single = selection.length !== 1
-  state.multiple = !selection.length
+  state.ids = selection.map((item: any) => item.clientId);
+  state.single = selection.length !== 1;
+  state.multiple = !selection.length;
 }
 
 function handleAdd() {
-  resetForm()
+  proxy.$listDictsByCode("grant_type").then((response: any) => {
+    state.authorizedGrantTypesOptions = response.data;
+  });
+
   state.dialog = {
-    title: '添加客户端',
+    title: "添加客户端",
     visible: true,
-    type: 'create'
-  }
+    type: "create",
+  };
 }
 
 function handleUpdate(row: any) {
-  resetForm()
   state.dialog = {
-    title: '修改客户端',
+    title: "修改客户端",
     visible: true,
-    type: 'edit'
-  }
-  const clientId = row.clientId || ids
-  detail(clientId).then(response => {
-    state.formData = response.data
-  })
+    type: "edit",
+  };
+  const clientId = row.clientId || ids;
+
+  proxy.$listDictsByCode("grant_type").then((res: any) => {
+    state.authorizedGrantTypesOptions = res.data;
+
+    getClientFormDetial(clientId).then(({ data }) => {
+      state.formData = data;
+      state.checkedAuthorizedGrantTypes = data.authorizedGrantTypes?.split(",");
+    });
+  });
 }
 
-
 function submitForm() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
-    if (valid) {
-      if (state.dialog.type == 'edit') {
-        update(state.formData.clientId as any, formData).then(response => {
-          ElMessage.success('修改成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
+  dataFormRef.value.validate((isvalid: boolean) => {
+    if (isvalid) {
+      state.formData.authorizedGrantTypes =
+        state.checkedAuthorizedGrantTypes.join(",");
+      if (state.dialog.type == "edit") {
+        updateClient(state.formData.clientId, state.formData).then(
+          (response) => {
+            ElMessage.success("修改成功");
+            state.dialog.visible = false;
+            cancel();
+            handleQuery();
+          }
+        );
       } else {
-        add(formData).then(response => {
-          ElMessage.success('新增成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
+        addClient(state.formData).then((response) => {
+          ElMessage.success("新增成功");
+          cancel();
+          handleQuery();
+        });
       }
     }
-  })
+  });
 }
 
 function resetForm() {
-  state.formData = {
-    authorizedGrantTypes: [],
-    clientSecret: undefined,
-    clientId: undefined,
-    accessTokenValidity: undefined,
-    refreshTokenValidity: undefined,
-    webServerRedirectUri: undefined,
-    authorities: undefined,
-    additionalInformation: undefined,
-    autoapprove: 'false'
-  }
+  dataFormRef.value.resetFields();
+  state.checkedAuthorizedGrantTypes = [];
 }
 
 function cancel() {
-  resetForm()
-  state.dialog.visible = false
+  resetForm();
+  state.dialog.visible = false;
 }
 
 function handleDelete(row: any) {
-  const clientIds = [row.clientId || ids].join(',')
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    del(clientIds).then(() => {
-      ElMessage.success('删除成功')
-      handleQuery()
+  const clientIds = [row.clientId || ids].join(",");
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      deleteClients(clientIds).then(() => {
+        ElMessage.success("删除成功");
+        handleQuery();
+      });
     })
-  }).catch(() =>
-      ElMessage.info('已取消删除')
-  )
+    .catch(() => ElMessage.info("已取消删除"));
 }
 
 onMounted(() => {
-  handleQuery()
-  // 全局字典调用
-  const {proxy}: any = getCurrentInstance();
-  proxy.$listDictsByCode('gender').then((response: any) => {
-    console.log('性别字典数据', response.data)
-  })
-})
-
+  handleQuery();
+});
 </script>