✨ Introducing new features. 增加秘钥管理

src/api/app/appsocial.ts

@@ -0,0 +1,39 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+  return request({
+    url: '/admin/appsocial/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj?: Object) {
+  return request({
+    url: '/admin/appsocial',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id?: string) {
+  return request({
+    url: '/admin/appsocial/' + id,
+    method: 'get'
+  })
+}
+
+export function delObj(id?: string) {
+  return request({
+    url: '/admin/appsocial/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj?: Object) {
+  return request({
+    url: '/admin/appsocial',
+    method: 'put',
+    data: obj
+  })
+}

src/views/app/appsocial/form.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-dialog v-model="visible" :close-on-click-modal="false"
+             :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
+      <el-row :gutter="24">
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('appsocial.type')" prop="type">
+            <el-select v-model="form.type" :placeholder="t('appsocial.inputTypeTip')">
+              <el-option v-for="(item, index) in app_social_type" :key="index" :label="item.label"
+                         :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('appsocial.remark')" prop="remark">
+            <el-input v-model="form.remark" :placeholder="t('appsocial.inputRemarkTip')"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('appsocial.appId')" prop="appId">
+            <el-input v-model="form.appId" :placeholder="t('appsocial.inputAppIdTip')"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('appsocial.appSecret')" prop="appSecret">
+            <el-input v-model="form.appSecret" :placeholder="t('appsocial.inputAppSecretTip')"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item :label="t('appsocial.redirectUrl')" prop="redirectUrl">
+            <el-input v-model="form.redirectUrl" :placeholder="t('appsocial.inputRedirectUrlTip')" type="textarea"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item :label="t('appsocial.ext')" prop="ext">
+            <el-input v-model="form.ext" :placeholder="t('appsocial.inputExtTip')" type="textarea"/>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
+          <el-button formDialogRef type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" name="AppSocialDetailsDialog" setup>
+// 定义子组件向父组件传值/事件
+import {useDict} from '/@/hooks/dict';
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj} from '/@/api/app/appsocial'
+import {useI18n} from "vue-i18n"
+
+const emit = defineEmits(['refresh']);
+
+const {t} = useI18n();
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+// 定义字典
+const {app_social_type} = useDict('app_social_type')
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  type: '',
+  remark: '',
+  appId: '',
+  appSecret: '',
+  redirectUrl: '',
+  ext: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+  type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
+  appId: [{required: true, message: 'appId不能为空', trigger: 'blur'}],
+  appSecret: [{required: true, message: 'appSecret不能为空', trigger: 'blur'}],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields()
+  }
+
+  // 获取appSocialDetails信息
+  if (id) {
+    form.id = id
+    getappSocialDetailsData(id)
+  }
+};
+
+// 提交
+const onSubmit = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+
+    // 更新
+    if (form.id) {
+      putObj(form).then(() => {
+        useMessage().success(t('common.editSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    } else {
+      addObj(form).then(() => {
+        useMessage().success(t('common.addSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    }
+  })
+}
+
+// 初始化表单数据
+const getappSocialDetailsData = (id: string) => {
+  // 获取数据
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>

src/views/app/appsocial/i18n/en.ts

@@ -0,0 +1,32 @@
+export default {
+   appsocial: {
+        index: 'index',
+        importappSocialDetailsTip: 'import AppSocialDetails',
+        id: 'id',
+        type: 'type',
+        remark: 'remark',
+        appId: 'appId',
+        appSecret: 'appSecret',
+        redirectUrl: 'redirectUrl',
+        ext: 'ext',
+        createBy: 'createBy',
+        updateBy: 'updateBy',
+        createTime: 'createTime',
+        updateTime: 'updateTime',
+        delFlag: 'delFlag',
+        tenantId: 'tenantId',
+        inputIdTip: 'input id',
+        inputTypeTip: 'input type',
+        inputRemarkTip: 'input remark',
+        inputAppIdTip: 'input appId',
+        inputAppSecretTip: 'input appSecret',
+        inputRedirectUrlTip: 'input redirectUrl',
+        inputExtTip: 'input ext',
+        inputCreateByTip: 'input createBy',
+        inputUpdateByTip: 'input updateBy',
+        inputCreateTimeTip: 'input createTime',
+        inputUpdateTimeTip: 'input updateTime',
+        inputDelFlagTip: 'input delFlag',
+        inputTenantIdTip: 'input tenantId',
+    }
+}

src/views/app/appsocial/i18n/zh-cn.ts

@@ -0,0 +1,32 @@
+export default {
+   appsocial: {
+        index: '序号',
+        importappSocialDetailsTip: '导入系统社交登录账号表',
+        id: '主鍵',
+        type: '类型',
+        remark: '描述',
+        appId: 'appId',
+        appSecret: 'appSecret',
+        redirectUrl: '回调地址',
+        ext: '拓展字段',
+        createBy: '创建人',
+        updateBy: '修改人',
+        createTime: '创建时间',
+        updateTime: '更新时间',
+        delFlag: '${field.fieldComment}',
+        tenantId: '所属租户',
+	    inputIdTip: '请输入主鍵',
+	    inputTypeTip: '请输入类型',
+	    inputRemarkTip: '请输入描述',
+	    inputAppIdTip: '请输入appId',
+	    inputAppSecretTip: '请输入appSecret',
+	    inputRedirectUrlTip: '请输入回调地址',
+	    inputExtTip: '请输入拓展字段',
+	    inputCreateByTip: '请输入创建人',
+	    inputUpdateByTip: '请输入修改人',
+	    inputCreateTimeTip: '请输入创建时间',
+	    inputUpdateTimeTip: '请输入更新时间',
+	    inputDelFlagTip: '请输入${field.fieldComment}',
+	    inputTenantIdTip: '请输入所属租户',
+    }
+}

src/views/app/appsocial/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="layout-padding">
+    <el-card class="layout-padding-auto">
+      <el-row v-show="showSearch" class="mb8">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true">
+        <el-form-item :label="t('appsocial.type')" prop="type" class="ml2">
+              <el-select v-model="state.queryForm.type" :placeholder="t('appsocial.inputTypeTip')">
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in app_social_type" :key="index"></el-option>
+              </el-select>
+        </el-form-item>
+          <el-form-item class="ml2">
+            <el-button formDialogRef icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button formDialogRef icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'app_social_details_add'">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <el-button formDialogRef icon="Download" type="primary" class="ml10" @click="exportExcel">
+            {{ $t('common.exportBtn') }}
+          </el-button>
+          <el-button formDialogRef :disabled="multiple" icon="Delete" type="primary" class="ml10"
+            v-auth="'app_social_details_del'" @click="handleDelete(undefined)">
+            {{ $t('common.delBtn') }}
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
+            @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%"
+        @selection-change="handleSelectionChange" @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column type="index" :label="t('appsocial.index')" width="80" />
+          <el-table-column prop="type" :label="t('appsocial.type')" show-overflow-tooltip>
+			<template #default="scope">
+                <dict-tag :options="app_social_type" :value="scope.row.type"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" :label="t('appsocial.remark')"  show-overflow-tooltip/>
+          <el-table-column prop="appId" :label="t('appsocial.appId')"  show-overflow-tooltip/>
+          <el-table-column prop="appSecret" :label="t('appsocial.appSecret')"  show-overflow-tooltip/>
+          <el-table-column prop="createTime" :label="t('appsocial.createTime')"  show-overflow-tooltip/>
+        <el-table-column :label="$t('common.action')" width="150">
+          <template #default="scope">
+            <el-button text type="primary" v-auth="'app_social_details_edit'"
+              @click="formDialogRef.openDialog(scope.row.id)">{{ $t('common.editBtn') }}</el-button>
+            <el-button text type="primary" v-auth="'app_social_details_del'" @click="handleDelete(scope.row)">{{
+              $t('common.delBtn')
+            }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-card>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList()" />
+  </div>
+</template>
+
+<script setup lang="ts" name="systemAppSocialDetails">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/app/appsocial";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import { useI18n } from "vue-i18n";
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const { t } = useI18n()
+// 定义查询字典
+
+const { app_social_type } = useDict('app_social_type')
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([])
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    type:''
+  },
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile
+} = useTable(state)
+
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 多选事件
+const handleSelectionChange = (val: any) => {
+  selectObjs.value = val
+  multiple.value = !val.length
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/app/appsocial/export', state.queryForm, 'appsocial.xlsx')
+}
+
+// 删除操作
+const handleDelete = (row: any) => {
+  if (!row) {
+    selectObjs.value.forEach((val: any) => {
+      handleDelete(val)
+    });
+    return
+  }
+
+  useMessageBox().confirm(t('common.delConfirmText') + row.id)
+    .then(() => {
+      delObj(row.id).then(() => {
+        getDataList();
+        useMessage().success(t('common.delSuccessText'));
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    })
+};
+</script>