@@ -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: { | businessMangage: { | ||||
title: "Business", | 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: { | keyMangage: { | ||||
@@ -221,6 +221,19 @@ export default { | |||||
businessMangage: { | businessMangage: { | ||||
title: "商务管理", | title: "商务管理", | ||||
name: "所属人", | |||||
address: "地址", | |||||
status: "状态", | |||||
code: "凭证", | |||||
addNew: "新增合作商", | |||||
createTime: "创建时间", | |||||
cancel: "取消", | |||||
confirm: "确认", | |||||
nameInputText: "请输入所属人名称", | |||||
addressInputText: "请输入地址", | |||||
codeInputText: "请输入凭证并确保此字段是唯一值", | |||||
accessMethod: "接入方式", | |||||
typeInputText: "请选择接入方式", | |||||
}, | }, | ||||
keyMangage: { | keyMangage: { | ||||
@@ -40,7 +40,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="myRouter-item" @click="router.push('/model')"> | |||||
<div class="myRouter-item" @click="router.push('/businessList')"> | |||||
<div class="icon"> | <div class="icon"> | ||||
<el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
{{ $t("businessMangage.title") }} | {{ $t("businessMangage.title") }} | ||||
@@ -287,9 +287,11 @@ const showChildrenRouter = ref(""); | |||||
} | } | ||||
.childrenRouter { | .childrenRouter { | ||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | |||||
} | } | ||||
.childrenRouter:hover { | .childrenRouter:hover { | ||||
background-color: #304156; | |||||
color: #ffffff; | |||||
background-color: #000000; | |||||
} | } | ||||
&:hover { | &:hover { | ||||
// background: rgba(255, 255, 255, 0.2); | // background: rgba(255, 255, 255, 0.2); | ||||
@@ -45,7 +45,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
children: [ | children: [ | ||||
{ | { | ||||
path: "keyList", | path: "keyList", | ||||
component: () => import("@/views/mangage/keyList.vue"), | |||||
component: () => import("@/views/keys/keyList.vue"), | |||||
name: "keyList", | name: "keyList", | ||||
meta: { | meta: { | ||||
title: "keyList", | title: "keyList", | ||||
@@ -63,7 +63,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
children: [ | children: [ | ||||
{ | { | ||||
path: "keyCheck", | path: "keyCheck", | ||||
component: () => import("@/views/mangage/keyCheck.vue"), | |||||
component: () => import("@/views/keys/keyCheck.vue"), | |||||
name: "keyCheck", | name: "keyCheck", | ||||
meta: { | meta: { | ||||
title: "keyCheck", | 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: "/", | path: "/", | ||||
@@ -2,6 +2,7 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | 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 ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | 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: typeof import('./../components/EditPosition.vue')['default'] | ||||
'EditPosition copy': typeof import('./../components/EditPosition copy.vue')['default'] | 'EditPosition copy': typeof import('./../components/EditPosition copy.vue')['default'] | ||||
ElButton: typeof import('element-plus/es')['ElButton'] | ElButton: typeof import('element-plus/es')['ElButton'] | ||||
ElCard: typeof import('element-plus/es')['ElCard'] | |||||
ElDialog: typeof import('element-plus/es')['ElDialog'] | ElDialog: typeof import('element-plus/es')['ElDialog'] | ||||
ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | 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'] | ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
ElInput: typeof import('element-plus/es')['ElInput'] | ElInput: typeof import('element-plus/es')['ElInput'] | ||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | ||||
ElOption: typeof import('element-plus/es')['ElOption'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
ElPagination: typeof import('element-plus/es')['ElPagination'] | 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'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ||||
ElTable: typeof import('element-plus/es')['ElTable'] | ElTable: typeof import('element-plus/es')['ElTable'] | ||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] | ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] | ||||
ElTag: typeof import('element-plus/es')['ElTag'] | |||||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ||||
ElUpload: typeof import('element-plus/es')['ElUpload'] | ElUpload: typeof import('element-plus/es')['ElUpload'] | ||||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
IconSelect: typeof import('./../components/IconSelect/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'] | IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | ||||
IEpEdit: typeof import('~icons/ep/edit')['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'] | LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | ||||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | ||||
MyLoading: typeof import('./../components/myLoading.vue')['default'] | MyLoading: typeof import('./../components/myLoading.vue')['default'] | ||||
@@ -49,5 +60,6 @@ declare module '@vue/runtime-core' { | |||||
} | } | ||||
export interface ComponentCustomProperties { | export interface ComponentCustomProperties { | ||||
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | 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); | const res = await keyListApi(PageNum, PageSize); | ||||
console.log(res, "res"); | console.log(res, "res"); | ||||
tableData.value = res.data.list; | tableData.value = res.data.list; | ||||
total.value = res.data.total * 1; | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, "err"); | console.log(error, "err"); | ||||
} | } |