| @@ -0,0 +1,52 @@ | |||
| import request from "@/utils/request.js"; | |||
| /** | |||
| * @description 获取合作商列表 | |||
| * @param {*} (pageNum,pageSize) | |||
| * @returns data | |||
| */ | |||
| export function businessListApi(pageNum, pageSize) { | |||
| return request({ | |||
| url: `/serviceInfo/page?pageNum=${pageNum}&pageSize=${pageSize}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 通过id获取合作商 | |||
| * @param {*} id | |||
| * @returns data | |||
| */ | |||
| export function getBusinessByIdApi(id) { | |||
| return request({ | |||
| url: `/serviceInfo/get?id=${id}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 新增合作商 | |||
| * @param {*} data | |||
| * @returns data | |||
| */ | |||
| export function addBusinessApi(data) { | |||
| return request({ | |||
| url: `/serviceInfo/save`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| /** | |||
| * @description 修改合作商 | |||
| * @param {*} data | |||
| * @returns data | |||
| */ | |||
| export function updateBusinessApi(data) { | |||
| return request({ | |||
| url: `/serviceInfo/update`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| @@ -222,6 +222,19 @@ export default { | |||
| businessMangage: { | |||
| title: "Business", | |||
| name: "Owner", | |||
| address: "Address", | |||
| status: "Status", | |||
| code: "Code", | |||
| addNew: "Add new business", | |||
| createTime: "CreateTime", | |||
| cancel: "Cancel", | |||
| confirm: "Confirm", | |||
| nameInputText: "Please type owner", | |||
| addressInputText: "Please type address", | |||
| codeInputText: "Please type code and make sure it's only", | |||
| accessMethod: "Access Method", | |||
| typeInputText: "Please select your access method", | |||
| }, | |||
| keyMangage: { | |||
| @@ -221,6 +221,19 @@ export default { | |||
| businessMangage: { | |||
| title: "商务管理", | |||
| name: "所属人", | |||
| address: "地址", | |||
| status: "状态", | |||
| code: "凭证", | |||
| addNew: "新增合作商", | |||
| createTime: "创建时间", | |||
| cancel: "取消", | |||
| confirm: "确认", | |||
| nameInputText: "请输入所属人名称", | |||
| addressInputText: "请输入地址", | |||
| codeInputText: "请输入凭证并确保此字段是唯一值", | |||
| accessMethod: "接入方式", | |||
| typeInputText: "请选择接入方式", | |||
| }, | |||
| keyMangage: { | |||
| @@ -40,7 +40,7 @@ | |||
| </div> | |||
| </div> | |||
| <div class="myRouter-item" @click="router.push('/model')"> | |||
| <div class="myRouter-item" @click="router.push('/businessList')"> | |||
| <div class="icon"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| {{ $t("businessMangage.title") }} | |||
| @@ -287,9 +287,11 @@ const showChildrenRouter = ref(""); | |||
| } | |||
| .childrenRouter { | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| } | |||
| .childrenRouter:hover { | |||
| background-color: #304156; | |||
| color: #ffffff; | |||
| background-color: #000000; | |||
| } | |||
| &:hover { | |||
| // background: rgba(255, 255, 255, 0.2); | |||
| @@ -45,7 +45,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
| children: [ | |||
| { | |||
| path: "keyList", | |||
| component: () => import("@/views/mangage/keyList.vue"), | |||
| component: () => import("@/views/keys/keyList.vue"), | |||
| name: "keyList", | |||
| meta: { | |||
| title: "keyList", | |||
| @@ -63,7 +63,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
| children: [ | |||
| { | |||
| path: "keyCheck", | |||
| component: () => import("@/views/mangage/keyCheck.vue"), | |||
| component: () => import("@/views/keys/keyCheck.vue"), | |||
| name: "keyCheck", | |||
| meta: { | |||
| title: "keyCheck", | |||
| @@ -74,6 +74,42 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
| }, | |||
| ], | |||
| }, | |||
| { | |||
| path: "/", | |||
| component: Layout, | |||
| redirect: "/businessList", | |||
| children: [ | |||
| { | |||
| path: "businessList", | |||
| component: () => import("@/views/business/businessList.vue"), | |||
| name: "businessList", | |||
| meta: { | |||
| title: "businessList", | |||
| icon: "homepage", | |||
| affix: true, | |||
| name: "keyMangage.list", | |||
| }, | |||
| }, | |||
| ], | |||
| }, | |||
| { | |||
| path: "/", | |||
| component: Layout, | |||
| redirect: "/businessCheck", | |||
| children: [ | |||
| { | |||
| path: "businessCheck", | |||
| component: () => import("@/views/business/businessCheck.vue"), | |||
| name: "businessCheck", | |||
| meta: { | |||
| title: "businessCheck", | |||
| icon: "homepage", | |||
| affix: true, | |||
| name: "keyMangage.title", | |||
| }, | |||
| }, | |||
| ], | |||
| }, | |||
| // 系统设置路由 | |||
| { | |||
| path: "/", | |||
| @@ -2,6 +2,7 @@ | |||
| export {} | |||
| declare global { | |||
| const EffectScope: typeof import('vue')['EffectScope'] | |||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | |||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | |||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | |||
| @@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||
| declare module 'vue' { | |||
| interface ComponentCustomProperties { | |||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | |||
| readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||
| readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | |||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
| @@ -14,26 +14,37 @@ declare module '@vue/runtime-core' { | |||
| EditPosition: typeof import('./../components/EditPosition.vue')['default'] | |||
| 'EditPosition copy': typeof import('./../components/EditPosition copy.vue')['default'] | |||
| ElButton: typeof import('element-plus/es')['ElButton'] | |||
| ElCard: typeof import('element-plus/es')['ElCard'] | |||
| ElDialog: typeof import('element-plus/es')['ElDialog'] | |||
| ElDropdown: typeof import('element-plus/es')['ElDropdown'] | |||
| ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | |||
| ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | |||
| ElForm: typeof import('element-plus/es')['ElForm'] | |||
| ElFormItem: typeof import('element-plus/es')['ElFormItem'] | |||
| ElIcon: typeof import('element-plus/es')['ElIcon'] | |||
| ElInput: typeof import('element-plus/es')['ElInput'] | |||
| ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | |||
| ElOption: typeof import('element-plus/es')['ElOption'] | |||
| ElPagination: typeof import('element-plus/es')['ElPagination'] | |||
| ElRadio: typeof import('element-plus/es')['ElRadio'] | |||
| ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] | |||
| ElSelect: typeof import('element-plus/es')['ElSelect'] | |||
| ElSwitch: typeof import('element-plus/es')['ElSwitch'] | |||
| ElTable: typeof import('element-plus/es')['ElTable'] | |||
| ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] | |||
| ElTag: typeof import('element-plus/es')['ElTag'] | |||
| ElTooltip: typeof import('element-plus/es')['ElTooltip'] | |||
| ElUpload: typeof import('element-plus/es')['ElUpload'] | |||
| GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | |||
| Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | |||
| IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | |||
| IEpCollection: typeof import('~icons/ep/collection')['default'] | |||
| IEpDelete: typeof import('~icons/ep/delete')['default'] | |||
| IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | |||
| IEpEdit: typeof import('~icons/ep/edit')['default'] | |||
| IEpPlus: typeof import('~icons/ep/plus')['default'] | |||
| IEpRefresh: typeof import('~icons/ep/refresh')['default'] | |||
| IEpSearch: typeof import('~icons/ep/search')['default'] | |||
| LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | |||
| MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | |||
| MyLoading: typeof import('./../components/myLoading.vue')['default'] | |||
| @@ -49,5 +60,6 @@ declare module '@vue/runtime-core' { | |||
| } | |||
| export interface ComponentCustomProperties { | |||
| vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | |||
| vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | |||
| } | |||
| } | |||
| @@ -0,0 +1,351 @@ | |||
| <template> | |||
| <div class="page justify-around"> | |||
| <div class="addbtn"> | |||
| <el-button type="primary" @click="dialogVisible = true">新增</el-button> | |||
| </div> | |||
| <el-table | |||
| :data="tableData" | |||
| style="width: 100%; height: 90%" | |||
| size="large" | |||
| align="center" | |||
| > | |||
| <el-table-column | |||
| prop="name" | |||
| :label="$t('businessMangage.name')" | |||
| width="200" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="address" | |||
| :label="$t('businessMangage.address')" | |||
| width="200" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="status" | |||
| :label="$t('businessMangage.status')" | |||
| width="200" | |||
| align="center" | |||
| > | |||
| <template #default="scope"> | |||
| <span | |||
| :style="1 * scope.row.status ? 'color: #ff0000' : 'color: #36db43'" | |||
| >{{ getStatus(scope.row.status) }}</span | |||
| > | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="code" | |||
| :label="$t('businessMangage.code')" | |||
| width="200" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="createTime" | |||
| :label="$t('businessMangage.createTime')" | |||
| width="200" | |||
| align="center" | |||
| > | |||
| <template #default="scope"> | |||
| {{ getDate(scope.row.createTime) }} | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| fixed="right" | |||
| :label="$t('keyMangage.operations')" | |||
| width="200" | |||
| align="center" | |||
| > | |||
| <template #default="scope"> | |||
| <el-button | |||
| link | |||
| type="primary" | |||
| size="small" | |||
| @click="showDetail(scope.row.id)" | |||
| >{{ $t("keyMangage.check") }}</el-button | |||
| > | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <el-dialog | |||
| v-model="dialogVisible" | |||
| :title="$t('businessMangage.addNew')" | |||
| width="35%" | |||
| :before-close="handleClose" | |||
| > | |||
| <div class="formData"> | |||
| <el-form | |||
| ref="ruleForm" | |||
| label-position="left" | |||
| label-width="120px" | |||
| :model="formData" | |||
| :rules="rules" | |||
| > | |||
| <el-form-item :label="$t('businessMangage.name') + ':'" prop="name"> | |||
| <el-input | |||
| v-model="formData.name" | |||
| :placeholder="$t('businessMangage.nameInputText')" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item | |||
| :label="$t('businessMangage.address') + ':'" | |||
| prop="address" | |||
| > | |||
| <el-input | |||
| v-model="formData.address" | |||
| :placeholder="$t('businessMangage.addressInputText')" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item :label="$t('businessMangage.code') + ':'" prop="code"> | |||
| <el-input | |||
| v-model="formData.code" | |||
| :placeholder="$t('businessMangage.codeInputText')" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item | |||
| :label="$t('businessMangage.accessMethod') + ':'" | |||
| prop="type" | |||
| > | |||
| <el-select | |||
| v-model="formData.type" | |||
| :placeholder="$t('businessMangage.typeInputText')" | |||
| clearable | |||
| > | |||
| <el-option | |||
| v-for="(item, index) in accessMethods" | |||
| :key="index" | |||
| :label="item.label" | |||
| :value="item.value" | |||
| /> | |||
| </el-select> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| <template #footer> | |||
| <span class="dialog-footer"> | |||
| <el-button @click="dialogVisible = false">{{ | |||
| $t("businessMangage.cancel") | |||
| }}</el-button> | |||
| <el-button type="primary" @click="addNew(ruleForm)"> | |||
| {{ $t("businessMangage.confirm") }} | |||
| </el-button> | |||
| </span> | |||
| </template> | |||
| </el-dialog> | |||
| <div class="pagination"> | |||
| <el-pagination | |||
| v-model:current-page="pageNum" | |||
| v-model:page-size="pageSize" | |||
| :page-sizes="[10, 50, 100]" | |||
| :small="false" | |||
| :disabled="false" | |||
| :background="true" | |||
| layout="total, sizes, prev, pager, next, jumper" | |||
| :total="total" | |||
| @size-change="handleSizeChange" | |||
| @current-change="handleCurrentChange" | |||
| /> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <!-- videoType==1为竖,==2为横 --> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { linkEmits } from "element-plus"; | |||
| import { getCurrentInstance } from "vue"; | |||
| import { businessListApi, addBusinessApi } from "@/api_mangage/business.js"; | |||
| import { useI18n } from "vue-i18n"; | |||
| import dayjs from "dayjs"; | |||
| import { useRoute, useRouter } from "vue-router"; | |||
| const route = useRoute(); | |||
| const router = useRouter(); | |||
| const { locale } = useI18n(); | |||
| const lanChange = ref(locale); | |||
| const tableData = ref([]); | |||
| const dialogVisible = ref(false); | |||
| const showDetail = (id) => { | |||
| router.push({ | |||
| path: "/businessCheck", | |||
| query: { | |||
| id, | |||
| }, | |||
| }); | |||
| }; | |||
| const pageNum = ref(1); | |||
| const pageSize = ref(10); | |||
| const total = ref(0); | |||
| const getStatus = (val) => { | |||
| return val * 1 ? "锁定" : "正常"; | |||
| }; | |||
| const getDate = (val) => { | |||
| return dayjs(val).format("YYYY-MM-DD"); | |||
| }; | |||
| const handleSizeChange = (val) => { | |||
| pageSize.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| }; | |||
| const handleCurrentChange = (val) => { | |||
| pageNum.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| }; | |||
| const getBusinessListFunc = async (PageNum, PageSize) => { | |||
| try { | |||
| const res = await businessListApi(PageNum, PageSize); | |||
| console.log(res, "res"); | |||
| tableData.value = res.data.list; | |||
| total.value = res.data.total * 1; | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| }; | |||
| const formData = ref({ | |||
| name: "", | |||
| address: "", | |||
| code: "", | |||
| type: "", | |||
| }); | |||
| const rules = { | |||
| name: [ | |||
| { | |||
| required: true, | |||
| message: "Please input name", | |||
| trigger: "blur", | |||
| }, | |||
| ], | |||
| address: [ | |||
| { | |||
| required: true, | |||
| message: "Please input address", | |||
| trigger: "blur", | |||
| }, | |||
| ], | |||
| code: [ | |||
| { | |||
| required: true, | |||
| message: "Please input code", | |||
| trigger: "blur", | |||
| }, | |||
| ], | |||
| type: [ | |||
| { | |||
| required: true, | |||
| message: "Please select access methods", | |||
| trigger: "blur", | |||
| }, | |||
| ], | |||
| }; | |||
| const accessMethods = ref([ | |||
| { | |||
| label: "api接入", | |||
| value: 1, | |||
| }, | |||
| { | |||
| label: "私有化接入", | |||
| value: 2, | |||
| }, | |||
| ]); | |||
| const handleClose = () => { | |||
| dialogVisible.value = false; | |||
| setTimeout(() => { | |||
| formData.value = { | |||
| name: "", | |||
| address: "", | |||
| code: "", | |||
| type: "", | |||
| }; | |||
| }, 500); | |||
| }; | |||
| const ruleForm = ref(); | |||
| const addNew = async (refForm) => { | |||
| if (!refForm) return; | |||
| await refForm.validate(async (valid, fields) => { | |||
| if (valid) { | |||
| const data = formData.value; | |||
| try { | |||
| const res = await addBusinessApi(data); | |||
| console.log(res, "res"); | |||
| if (res.code == 200) { | |||
| ElMessage.success("添加成功!"); | |||
| dialogVisible.value = false; | |||
| } | |||
| getBusinessListFunc(1, 10); | |||
| pageNum.value = 1; | |||
| pageSize.value = 10; | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| ElMessage.error(error.message); | |||
| } | |||
| } else { | |||
| ElMessage.error("请完善信息!"); | |||
| } | |||
| }); | |||
| }; | |||
| onMounted(() => { | |||
| getBusinessListFunc(1, 10); | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: calc(100vh - 80px); | |||
| // height: calc(100vh - 80px); | |||
| background-color: #ffffff; | |||
| border-radius: 30px 0 0 0; | |||
| overflow: hidden; | |||
| padding: 10vh; | |||
| .addbtn { | |||
| margin-bottom: 2vh; | |||
| } | |||
| .formData { | |||
| padding: 5vh 3vh; | |||
| } | |||
| .pagination { | |||
| position: fixed; | |||
| left: 55%; | |||
| bottom: 8vh; | |||
| transform: translateX(-50%); | |||
| border-radius: 5px; | |||
| padding: 10px 20px; | |||
| z-index: 99; | |||
| transition: all 0.3s; | |||
| cursor: pointer; | |||
| &:hover { | |||
| background-color: #b8b8b873; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,301 @@ | |||
| <template> | |||
| <div class="page flex justify-around"> | |||
| <div class="card"> | |||
| <div class="title">密钥详情</div> | |||
| <div class="key"> | |||
| <span class="text">{{ $t("keyMangage.name") }}:{{ name }}</span> | |||
| </div> | |||
| <!-- appId --> | |||
| <div class="key"> | |||
| <span class="text">appId:{{ showCode }}</span> | |||
| <span class="showOrHide" @click="showHideCode">{{ showText }}</span> | |||
| <span v-if="showText == '隐藏'" class="copy" @click="copyKey(showCode)" | |||
| >复制</span | |||
| > | |||
| </div> | |||
| <!-- appKey --> | |||
| <div class="key"> | |||
| <span class="text">appKey:{{ showCodeII }}</span> | |||
| <span class="showOrHide" @click="showHideCodeII">{{ showTextII }}</span> | |||
| <span | |||
| v-if="showTextII == '隐藏'" | |||
| class="copy" | |||
| @click="copyKey(showCodeII)" | |||
| >复制</span | |||
| > | |||
| </div> | |||
| <!-- signKey --> | |||
| <div class="key"> | |||
| <span class="text">signKey:{{ showCodeIII }}</span> | |||
| <span class="showOrHide" @click="showHideCodeIII(showCodeIII)">{{ | |||
| showTextIII | |||
| }}</span> | |||
| <span v-if="showTextIII == '隐藏'" class="copy" @click="copyKey" | |||
| >复制</span | |||
| > | |||
| </div> | |||
| <div class="keyStatus"> | |||
| <span class="text" | |||
| >密钥状态: | |||
| <span v-if="!keyStatus" style="color: #36db43">正常</span> | |||
| <span v-else style="color: #ff0000">失效</span> | |||
| </span> | |||
| <span v-if="keyStatus" class="fail" @click="changeStatus(0)">恢复</span> | |||
| <span v-if="!keyStatus" class="success" @click="changeStatus(1)" | |||
| >作废</span | |||
| > | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <!-- videoType==1为竖,==2为横 --> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { linkEmits } from "element-plus"; | |||
| import { getCurrentInstance } from "vue"; | |||
| import { useI18n } from "vue-i18n"; | |||
| import { useRoute, useRouter } from "vue-router"; | |||
| import { getKeyByIdApi, updateKeyStatusApi } from "@/api_mangage/key"; | |||
| const route = useRoute(); | |||
| const router = useRouter(); | |||
| const { locale } = useI18n(); | |||
| const lanChange = ref(locale); | |||
| const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | |||
| const keyId = ref(""); | |||
| const name = ref(""); | |||
| const appId = ref(""); | |||
| const hideCode = ref(""); | |||
| const showCode = ref(""); | |||
| const showText = ref("查看"); | |||
| const showHideCode = () => { | |||
| if (showText.value == "查看") { | |||
| showText.value = "隐藏"; | |||
| showCode.value = appId.value; | |||
| } else { | |||
| showText.value = "查看"; | |||
| showCode.value = hideCode.value; | |||
| } | |||
| }; | |||
| const appKey = ref(""); | |||
| const hideCodeII = ref(""); | |||
| const showCodeII = ref(""); | |||
| const showTextII = ref("查看"); | |||
| const showHideCodeII = () => { | |||
| if (showTextII.value == "查看") { | |||
| showTextII.value = "隐藏"; | |||
| showCodeII.value = appKey.value; | |||
| } else { | |||
| showTextII.value = "查看"; | |||
| showCodeII.value = hideCodeII.value; | |||
| } | |||
| }; | |||
| const signKey = ref(""); | |||
| const hideCodeIII = ref(""); | |||
| const showCodeIII = ref(""); | |||
| const showTextIII = ref("查看"); | |||
| const showHideCodeIII = () => { | |||
| if (showTextIII.value == "查看") { | |||
| showTextIII.value = "隐藏"; | |||
| showCodeIII.value = signKey.value; | |||
| } else { | |||
| showTextIII.value = "查看"; | |||
| showCodeIII.value = hideCodeIII.value; | |||
| } | |||
| }; | |||
| const getKeyFunc = async () => { | |||
| const id = keyId.value; | |||
| try { | |||
| const res = await getKeyByIdApi(id); | |||
| console.log(res, "res"); | |||
| appId.value = res.data.appId; | |||
| appKey.value = res.data.appKey; | |||
| signKey.value = res.data.signKey; | |||
| keyStatus.value = res.data.status; | |||
| name.value = res.data.name; | |||
| const len = appId.value.length; | |||
| const lenII = appKey.value.length; | |||
| const lenIII = signKey.value.length; | |||
| let code = ""; | |||
| let codeII = ""; | |||
| let codeIII = ""; | |||
| for (let index = 0; index < len; index++) { | |||
| code += "*"; | |||
| } | |||
| for (let index = 0; index < lenII; index++) { | |||
| codeII += "*"; | |||
| } | |||
| for (let index = 0; index < lenIII; index++) { | |||
| codeIII += "*"; | |||
| } | |||
| hideCode.value = code; | |||
| showCode.value = code; | |||
| hideCodeII.value = codeII; | |||
| showCodeII.value = codeII; | |||
| hideCodeIII.value = codeIII; | |||
| showCodeIII.value = codeIII; | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| }; | |||
| const copyKey = (text) => { | |||
| navigator.clipboard | |||
| .writeText(text) | |||
| .then(() => { | |||
| ElMessage.success("复制成功!"); | |||
| }) | |||
| .catch(() => { | |||
| ElMessage.error("复制失败!"); | |||
| }); | |||
| }; | |||
| const keyStatus = ref(""); | |||
| const changeStatus = async (status) => { | |||
| const id = keyId.value; | |||
| if (status) { | |||
| ElMessageBox.confirm("此操作将作废密钥,确定?", "Warning", { | |||
| confirmButtonText: "确定", | |||
| cancelButtonText: "取消", | |||
| type: "warning", | |||
| }) | |||
| .then(async () => { | |||
| try { | |||
| const res = await updateKeyStatusApi(id, status); | |||
| if (res.code == 200) { | |||
| ElMessage({ | |||
| type: "success", | |||
| message: "作废成功!", | |||
| }); | |||
| getKeyFunc(); | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| }) | |||
| .catch(() => {}); | |||
| } else { | |||
| try { | |||
| const res = await updateKeyStatusApi(id, status); | |||
| if (res.code == 200) { | |||
| ElMessage({ | |||
| type: "success", | |||
| message: "恢复成功!", | |||
| }); | |||
| getKeyFunc(); | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| } | |||
| }; | |||
| onMounted(() => { | |||
| keyId.value = route.query.id; | |||
| getKeyFunc(); | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: calc(100vh - 80px); | |||
| // height: calc(100vh - 80px); | |||
| background-color: #ffffff; | |||
| border-radius: 30px 0 0 0; | |||
| overflow: hidden; | |||
| .card { | |||
| width: 80%; | |||
| height: 70%; | |||
| background-color: #fafafa; | |||
| margin-top: 10vh; | |||
| border-radius: 5vh; | |||
| box-shadow: #0000002e 1px 1px 1px 1px; | |||
| .title { | |||
| text-align: center; | |||
| font-size: 3vh; | |||
| padding: 4vh; | |||
| } | |||
| .key { | |||
| text-align: center; | |||
| font-size: 2.5vh; | |||
| padding: 5vh; | |||
| padding-bottom: 0.5vh; | |||
| text-align: left; | |||
| .copy { | |||
| color: #ffffff; | |||
| margin-left: 2vh; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| background-color: #3a57b6; | |||
| padding: 0.7vh; | |||
| border-radius: 15px; | |||
| &:hover { | |||
| background-color: #1ceedc; | |||
| } | |||
| } | |||
| .showOrHide { | |||
| color: #20b4a8; | |||
| margin-left: 2vh; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #476ad9; | |||
| } | |||
| } | |||
| } | |||
| .keyStatus { | |||
| text-align: center; | |||
| font-size: 2.9vh; | |||
| padding: 4vh; | |||
| margin-top: 1vh; | |||
| .success { | |||
| color: #ffffff; | |||
| background-color: #ff0000; | |||
| margin-left: 2vh; | |||
| padding: 0.7vh; | |||
| border-radius: 15px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| background-color: #36db43; | |||
| } | |||
| } | |||
| .fail { | |||
| color: #ffffff; | |||
| background-color: #36db43; | |||
| margin-left: 2vh; | |||
| padding: 0.7vh; | |||
| border-radius: 15px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| background-color: #ff0000; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -112,6 +112,7 @@ const getKeyListFunc = async (PageNum, PageSize) => { | |||
| const res = await keyListApi(PageNum, PageSize); | |||
| console.log(res, "res"); | |||
| tableData.value = res.data.list; | |||
| total.value = res.data.total * 1; | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||