系统配置页面提交

src/api/externalAuth.ts

@@ -36,6 +36,12 @@ export function deleteExternalAuthorisationApi(ids: string) {
     `factory/baseExternalAccount/delete?ids=${ids}`,
   )
 }
+export function baseExternalAccountLogsApi(params: { ids: string }) {
+  return axios.get<never, BaseRespData<never>>(
+    `factory/baseExternalAccount/logs`,
+    { params },
+  )
+}
 export function addExternalAuthorisationApi(
   url: string,
   data: ExternalAuthListData,

src/main.ts

@@ -8,15 +8,12 @@ import './styles/index.scss'
 import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import { isPermissionBtn } from '@/utils/index'
-import { createPinia } from 'pinia'
-const pinia = createPinia()
+
 // 确保在渲染用户提供的HTML内容时，不会执行任何潜在的恶意脚本，从而提高应用的安全性
 import vueDomPurifyHTMLPlugin from 'vue-dompurify-html'
 
 const app = createApp(App)
 
-app.use(pinia)
-
 app
   .use(vueDomPurifyHTMLPlugin)
   .use(router)

src/views/setting/settingIndex.vue

@@ -6,13 +6,13 @@
     <div class="card-header">
       <span>系统配置</span>
     </div>
-    <div class="cardBox" shadow="never">
+    <div class="cardBox">
       <div v-for="(item, index) in formList" style="width: 600px" :key="index">
         <el-form
           v-if="item.type === 'RIIN'"
           class="form"
           ref="formRef"
-          label-width="auto"
+          label-width="120"
           :model="item"
         >
           <div class="formBox">
@@ -50,20 +50,19 @@
               /></el-form-item>
             </div>
           </div>
-          <el-form-item style="margin-bottom: 20px">
-            <ElButton
-              class="btn"
-              color="#42b983"
-              @click="saveConfiguration(item, index)"
-              >保存配置</ElButton
-            >
-          </el-form-item>
+
+          <ElButton
+            class="btn"
+            color="#42b983"
+            @click="saveConfiguration(item, index)"
+            >保存配置</ElButton
+          >
         </el-form>
         <el-form
           v-if="item.type === 'TRACK'"
           class="form"
           ref="formRef"
-          label-width="auto"
+          label-width="120"
           :model="item"
         >
           <div class="formBox">
@@ -89,7 +88,7 @@
               /></el-form-item>
               <el-form-item
                 label="账号Token"
-                prop="appSecret"
+                prop="token"
                 :rules="[{ required: true, message: '请输入账号Token' }]"
               >
                 <ElInput
@@ -101,17 +100,20 @@
               /></el-form-item>
             </div>
           </div>
-          <el-form-item>
-            <ElButton
-              class="btn"
-              color="#42b983"
-              @click="saveConfiguration(item, index)"
-              >保存配置</ElButton
-            >
-          </el-form-item>
+
+          <ElButton
+            class="btn"
+            color="#42b983"
+            @click="saveConfiguration(item, index)"
+            >保存配置</ElButton
+          >
         </el-form>
       </div>
     </div>
+    <div class="logBox">
+      <div>操作日志</div>
+      <LogList :log-list="logList" style="font-size: 14px; height: 100%" />
+    </div>
   </div>
 </template>
 
@@ -119,6 +121,7 @@
 import {
   addExternalAuthorisationApi,
   getExternalAuthorisationListApi,
+  baseExternalAccountLogsApi,
 } from '@/api/externalAuth'
 import { ExternalAuthListData } from '@/types/api/externalAuth'
 
@@ -132,6 +135,7 @@ interface formType {
 
 const formRef = ref()
 
+const logList = ref([])
 async function saveConfiguration(item: formType, index: number) {
   let loading
   try {
@@ -154,7 +158,8 @@ async function saveConfiguration(item: formType, index: number) {
       showCancelButton: false,
       type: 'success',
     })
-    getDetail()
+    await getDetail()
+    handleClick()
   } catch (error) {
     console.log(error)
   } finally {
@@ -164,24 +169,63 @@ async function saveConfiguration(item: formType, index: number) {
 
 const formList = ref<ExternalAuthListData[]>([])
 async function getDetail() {
-  const res = await getExternalAuthorisationListApi({}, 1, 100)
-  const newArr = [...res.data.records.filter((el) => el.type)]
-  const boolRIIN = newArr.every((el) => el.type == 'RIIN')
-  const boolTRACK = newArr.every((el) => el.type == 'TRACK')
-  if (!newArr.length) {
-    formList.value = [{ type: 'RIIN' }, { type: 'TRACK' }]
-  } else if (!boolRIIN) {
-    formList.value = [...newArr, { type: 'RIIN' }]
-  } else if (!boolTRACK) {
-    formList.value = [...newArr, { type: 'TRACK' }]
-  } else {
-    formList.value = [...newArr]
+  let loading
+
+  try {
+    loading = ElLoading.service({
+      fullscreen: true,
+      text: '操作中...',
+      background: 'rgba(0, 0, 0, 0.3)',
+    })
+    const res = await getExternalAuthorisationListApi({}, 1, 100)
+    const records = res.data.records || []
+
+    const newArr = records.filter((el) => el.type)
+    const typeSet = new Set(newArr.map((el) => el.type))
+    const hasRIIN = typeSet.has('RIIN')
+    const hasTRACK = typeSet.has('TRACK')
+    if (newArr.length === 0) {
+      formList.value = [{ type: 'RIIN' }, { type: 'TRACK' }]
+    } else {
+      const result = [...newArr]
+      if (!hasRIIN) result.push({ type: 'RIIN' })
+      if (!hasTRACK) result.push({ type: 'TRACK' })
+
+      formList.value = result
+    }
+
+    console.log('Form list:', formList.value)
+  } catch (error) {
+    console.error('Failed to get external authorizations:', error)
+  } finally {
+    loading?.close()
+  }
+}
+
+async function handleClick() {
+  try {
+    let ids = ''
+    const idList = formList.value.map((el) => el.id).filter((el) => el)
+    console.log(222, idList)
+
+    if (idList.length) {
+      ids = idList.join(',')
+    }
+    console.log(205, ids)
+
+    const res = await baseExternalAccountLogsApi({
+      ids,
+    })
+    logList.value = res.data
+    console.log(res)
+  } catch (error) {
+    console.log(error)
   }
-  console.log(152, formList.value)
 }
 
-onMounted(() => {
-  getDetail()
+onMounted(async () => {
+  await getDetail()
+  handleClick()
 })
 </script>
 
@@ -192,15 +236,20 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 :deep() {
+  .demo-tabs {
+    height: calc(100% - 60px);
+  }
   .cardBox {
+    flex: 3;
     overflow-y: scroll;
+    height: 100%;
     .el-card__footer {
       border: none !important;
     }
 
     .formBox {
       width: 100%;
-      margin-bottom: 20px;
+      margin-bottom: 15px;
       padding: 20px;
       border: 1px solid #ebebeb;
       border-radius: 8px;
@@ -220,5 +269,13 @@ onMounted(() => {
       color: #fff;
     }
   }
+  .logBox {
+    border-top: 1px solid #ebebeb;
+    padding-top: 10px;
+    height: 150px;
+  }
+  .form {
+    margin-bottom: 15px;
+  }
 }
 </style>