update API模块添加ERP系统的Token配置

src/views/api/erpConfig/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='p-2'>
     <transition :enter-active-class='proxy?.animate.searchAnimate.enter'
-                :leave-active-class='proxy?.animate.searchAnimate.leave'>
+      :leave-active-class='proxy?.animate.searchAnimate.leave'>
       <div v-show='showSearch' class='mb-[10px]'>
         <el-card shadow='hover'>
           <el-form ref='queryFormRef' :model='queryParams' :inline='true' label-width='90px'>
@@ -36,12 +36,12 @@
           </el-col>
           <el-col :span='1.5'>
             <el-button type='success' plain icon='Edit' :disabled='single' @click='handleUpdate()'
-                       v-hasPermi="['api:erpConfig:edit']">修改
+              v-hasPermi="['api:erpConfig:edit']">修改
             </el-button>
           </el-col>
           <el-col :span='1.5'>
             <el-button type='danger' plain icon='Delete' :disabled='multiple' @click='handleDelete()'
-                       v-hasPermi="['api:erpConfig:remove']">删除
+              v-hasPermi="['api:erpConfig:remove']">删除
             </el-button>
           </el-col>
           <el-col :span='1.5'>
@@ -50,7 +50,7 @@
             </el-button>
           </el-col>
           <right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
-                         @queryTable='getList'></right-toolbar>
+            @queryTable='getList'></right-toolbar>
         </el-row>
       </template>
 
@@ -64,15 +64,15 @@
         </el-table-column>
         <el-table-column label='配置名称' align='center' prop='configName' v-if='columns[3].visible' />
         <el-table-column label='服务器地址' align='center' prop='serverUrl' v-if='columns[4].visible'
-                         :show-overflow-tooltip='true' />
+          :show-overflow-tooltip='true' />
         <el-table-column label='应用密钥' align='center' prop='appKey' v-if='columns[5].visible'
-                         :show-overflow-tooltip='true' />
+          :show-overflow-tooltip='true' />
         <el-table-column label='应用密码' align='center' prop='appSecret' v-if='columns[6].visible'
-                         :show-overflow-tooltip='true' />
+          :show-overflow-tooltip='true' />
         <el-table-column label='token地址' align='center' prop='tokenUrl' v-if='columns[7].visible'
-                         :show-overflow-tooltip='true' />
+          :show-overflow-tooltip='true' />
         <el-table-column label='token过期时间(秒)' align='center' prop='tokenExpireTime' width='150'
-                         v-if='columns[8].visible' />
+          v-if='columns[8].visible' />
         <el-table-column label='激活标识' align='center' prop='activeFlag' v-if='columns[9].visible'>
           <template #default='scope'>
             <dict-tag :options='active_flag' :value='scope.row.activeFlag' />
@@ -89,24 +89,22 @@
             <!--              <el-button link type='primary' icon='Delete' @click='handleDelete(scope.row)'-->
             <!--                         v-hasPermi="['api:erpConfig:remove']"></el-button>-->
             <!--            </el-tooltip>-->
+            <el-button link type='primary' @click='handleUpdateToken(scope.row)'
+              v-hasPermi="['api:erpToken:edit']">Token配置 </el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <pagination v-show='total > 0' :total='total' v-model:page='queryParams.pageNum'
-                  v-model:limit='queryParams.pageSize' @pagination='getList' />
+        v-model:limit='queryParams.pageSize' @pagination='getList' />
     </el-card>
     <!-- 添加或修改ERP系统配置对话框 -->
     <el-dialog :title='dialog.title' v-model='dialog.visible' width='550px' append-to-body>
       <el-form ref='erpConfigFormRef' :model='form' :rules='rules' label-width='130px'>
         <el-form-item label='ERP类型' prop='erpType'>
           <el-select v-model='form.erpType' placeholder='请选择ERP类型'>
-            <el-option
+            <el-option v-for='dict in sys_erp_config' :key='dict.value' :label='dict.label'
-              v-for='dict in sys_erp_config'
+              :value='dict.value'></el-option>
-              :key='dict.value'
-              :label='dict.label'
-              :value='dict.value'
-            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label='配置名称' prop='configName'>
@@ -124,16 +122,12 @@
         <el-form-item label='token地址' prop='tokenUrl'>
           <el-input v-model='form.tokenUrl' placeholder='请输入token地址' />
         </el-form-item>
-        <el-form-item label='token过期时间(秒)' prop='tokenExpireTime'>
+        <!-- <el-form-item label='token过期时间(秒)' prop='tokenExpireTime'>
           <el-input-number v-model='form.tokenExpireTime' placeholder='请输入token过期时间(秒)' style='width: 250px;' />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label='激活标识' prop='activeFlag'>
           <el-radio-group v-model='form.activeFlag'>
-            <el-radio
+            <el-radio v-for='dict in active_flag' :key='dict.value' :value='dict.value'>{{ dict.label }}
-              v-for='dict in active_flag'
-              :key='dict.value'
-              :value='dict.value'
-            >{{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
@@ -148,15 +142,46 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 修改Token对话框 -->
+    <el-dialog :title="tokenDialog.title" v-model="tokenDialog.visible" width="500px" append-to-body>
+      <el-form ref="tokenFormRef" :model="tokenForm" :rules="tokenRules" label-width="100px">
+        <el-form-item label="访问令牌" prop="accessToken">
+          <el-input v-model="tokenForm.accessToken" placeholder="请输入访问令牌" />
+        </el-form-item>
+        <!-- <el-form-item label="刷新令牌" prop="refreshToken">
+          <el-input v-model="tokenForm.refreshToken" placeholder="请输入刷新令牌" disabled/>
+        </el-form-item> -->
+        <el-form-item label="令牌类型" prop="tokenType">
+          <el-select v-model="tokenForm.tokenType" placeholder="请选择令牌类型">
+            <el-option v-for="dict in sys_erp_token" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="过期时间(秒)" prop="expiresIn">
+          <el-input-number v-model="tokenForm.expiresIn" placeholder="请输入过期时间(秒)" />
+        </el-form-item>
+        <el-form-item label="过期时间点" prop="expireTime">
+          <el-date-picker v-model="tokenForm.expireTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择过期时间点" disabled />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="tokenButtonLoading" type="primary" @click="submitTokenForm">确 定</el-button>
+          <el-button @click="cancelToken">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name='ErpConfig' lang='ts'>
 import { listErpConfig, getErpConfig, delErpConfig, addErpConfig, updateErpConfig } from '@/api/api/erpConfig';
 import { ErpConfigVO, ErpConfigQuery, ErpConfigForm } from '@/api/api/erpConfig/types';
+import { addErpToken, listErpToken, updateErpToken } from '@/api/api/erpToken';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { active_flag, sys_erp_config } = toRefs<any>(proxy?.useDict('active_flag', 'sys_erp_config'));
+const { active_flag, sys_erp_config, sys_erp_token } = toRefs<any>(proxy?.useDict('active_flag', 'sys_erp_config', 'sys_erp_token'));
 
 const erpConfigList = ref<ErpConfigVO[]>([]);
 const buttonLoading = ref(false);
@@ -175,6 +200,36 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+// Token相关数据
+const tokenDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const tokenButtonLoading = ref(false);
+const tokenFormRef = ref<ElFormInstance>();
+
+const initTokenForm = {
+  tokenId: undefined,
+  configId: undefined,
+  accessToken: undefined,
+  refreshToken: undefined,
+  tokenType: undefined,
+  expiresIn: 7200,
+  expireTime: undefined
+};
+
+const tokenForm = ref(initTokenForm);
+
+const tokenRules = {
+  accessToken: [
+    { required: true, message: "访问令牌不能为空", trigger: "blur" }
+  ],
+  tokenType: [
+    { required: true, message: "令牌类型不能为空", trigger: "change" }
+  ]
+};
+
 // 列显隐信息
 const columns = ref<FieldOption[]>([
   { key: 0, label: `配置ID`, visible: false },
@@ -328,6 +383,50 @@ const handleExport = () => {
   }, `erpConfig_${new Date().getTime()}.xlsx`);
 };
 
+/** 修改Token按钮操作 */
+const handleUpdateToken = async (row: ErpConfigVO) => {
+  const _configId = row.configId
+  const res = await listErpToken({
+    configId: _configId,
+    pageNum: 1,
+    pageSize: 10,
+  });
+  if (res.rows.length > 0) {
+    tokenForm.value = { ...res.rows[0] };
+  } else {
+    tokenForm.value.configId = row.configId;
+  }
+  tokenDialog.visible = true;
+  tokenDialog.title = "Token配置";
+};
+
+/** 取消Token按钮 */
+const cancelToken = () => {
+  tokenForm.value = { ...initTokenForm };
+  tokenFormRef.value?.resetFields();
+  tokenDialog.visible = false;
+};
+
+/** 提交Token表单 */
+const submitTokenForm = () => {
+  tokenFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      tokenButtonLoading.value = true;
+      try {
+        if (tokenForm.value.tokenId) {
+          await updateErpToken(tokenForm.value);
+        } else {
+          await addErpToken(tokenForm.value);
+        }
+        proxy?.$modal.msgSuccess("操作成功");
+        tokenDialog.visible = false;
+      } finally {
+        tokenButtonLoading.value = false;
+      }
+    }
+  });
+};
+
 onMounted(() => {
   getList();
 });