@@ -10,4 +10,16 @@ export function getMenuNavApi() { | |||
url: `/menu/nav`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description:用户角色 | |||
* @param | |||
* @return: | |||
*/ | |||
export function getUser() { | |||
return request({ | |||
url: `/user/getUser`, | |||
method: 'get', | |||
}) | |||
} |
@@ -0,0 +1,101 @@ | |||
import request from "@/utils/request.js"; | |||
/** | |||
* @description 获取合作商列表 | |||
* @param {*} (pageNum,pageSize) | |||
* @returns data | |||
*/ | |||
export function businessListApi(pageNum, pageSize, type) { | |||
return request({ | |||
url: `/serviceInfo/page?pageNum=${pageNum}&pageSize=${pageSize}&type=${type}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 新增合作商 | |||
* @param {*} data | |||
* @returns data | |||
*/ | |||
export function addBusinessApi(data) { | |||
return request({ | |||
url: `/serviceInfo/save`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 获取api接入管理列表 | |||
* @param {*} (pageNum,pageSize) | |||
* @returns data | |||
*/ | |||
export function apiManageListApi(pageNum, pageSize) { | |||
return request({ | |||
url: `/serviceInfo/page?type=1pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 设置登录账号 | |||
* @param {*} data | |||
* @returns data | |||
*/ | |||
export function saveMallUserInfo(data) { | |||
return request({ | |||
url: `/serviceInfo/saveMallUserInfo`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 设置时长 | |||
* @param {*} data | |||
* @returns data | |||
*/ | |||
export function setRemainingTimes(data) { | |||
return request({ | |||
url: `/serviceInfo/setRemainingTimes`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 所有模版 | |||
* @param {*} (pageNum,pageSize) | |||
* @returns data | |||
*/ | |||
export function modelAllList(pageNum, pageSize) { | |||
return request({ | |||
url: `/personMould/alList?pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 已关联模版 | |||
* @param {*} | |||
* @returns data | |||
*/ | |||
export function personMouldIdList() { | |||
return request({ | |||
url: `/serviceInfo/personMouldIdList`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 保存关联模版 | |||
* @param {*} | |||
* @returns data | |||
*/ | |||
export function associatedMould(data) { | |||
return request({ | |||
url: `/serviceInfo/associatedMould`, | |||
method: 'post', | |||
data | |||
}) | |||
} |
@@ -0,0 +1,14 @@ | |||
import request from "@/utils/request.js"; | |||
/** | |||
* @description 修改密码 | |||
* @params userName, pwd | |||
* @returns data | |||
*/ | |||
export function updatepwd(data) { | |||
return request({ | |||
url: `/user/updatepwd`, | |||
method: 'post', | |||
data | |||
}) | |||
} |
@@ -11,8 +11,27 @@ | |||
</div> | |||
<!-- 侧边路由列表 --> | |||
<div class="myRouter"> | |||
<el-menu | |||
default-active="1" | |||
active-text-color="#ffd04b" | |||
background-color="#000" | |||
text-color="#fff" | |||
class="el-menu-vertical-demo"> | |||
<el-menu-item index="1" @click="router.push('/apiManage')"> | |||
<el-icon><i-ep-link /></el-icon> | |||
<span>API接入方管理</span> | |||
</el-menu-item> | |||
<el-menu-item index="2" @click="router.push('/privatization')"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
<span>私有化客户管理</span> | |||
</el-menu-item> | |||
<el-menu-item index="3" @click="router.push('/editPass')"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
<span>修改密码</span> | |||
</el-menu-item> | |||
</el-menu> | |||
<!-- 动态路由 --> | |||
<div | |||
<!-- <div | |||
v-for="item in MenuList" | |||
:key="item.id" | |||
class="myRouter-item" | |||
@@ -31,51 +50,38 @@ | |||
> | |||
{{ childrens.name }} | |||
</div> | |||
</div> | |||
</div> --> | |||
<!-- 固定路由 --> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<!-- <div class="myRouter-item" @click="router.push('/apiManage')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ $t("modelMangage.title") }} | |||
API接入方管理 | |||
</div> | |||
</div> | |||
<div class="myRouter-item" @click="router.push('/businessList')"> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ $t("businessMangage.title") }} | |||
私有化客户管理 | |||
</div> | |||
</div> | |||
<div class="myRouter-item" @click="router.push('/keyList')"> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ $t("keyMangage.title") }} | |||
密钥查看 | |||
</div> | |||
</div> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ $t("priceMangage.title") }} | |||
模板管理 | |||
</div> | |||
</div> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="myRouter-item" @click="router.push('/editPass')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ $t("dataCount.title") }} | |||
修改密码 | |||
</div> | |||
</div> | |||
<div class="bottomBtx"> | |||
<div class="myRouter-item" @click="router.push('/model')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-DocumentAdd /></el-icon> | |||
{{ $t("apiMangage.title") }} | |||
</div> | |||
</div> | |||
</div> | |||
</div> --> | |||
</div> | |||
</div> | |||
<!-- 右边显示部分 --> | |||
@@ -93,6 +99,23 @@ | |||
<lang-select class="navItem" /> | |||
</el-tooltip> | |||
<!-- 登录 --> | |||
<el-dropdown> | |||
<span class="el-dropdown-link"> | |||
我的 | |||
<el-icon class="el-icon--right"> | |||
<arrow-down /> | |||
</el-icon> | |||
</span> | |||
<template #dropdown> | |||
<el-dropdown-menu> | |||
<el-dropdown-item>账户时长</el-dropdown-item> | |||
<el-dropdown-item>密钥查看</el-dropdown-item> | |||
<el-dropdown-item>模板管理</el-dropdown-item> | |||
<el-dropdown-item @click="showEditPasswordDialog = true">修改密码</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> | |||
<div class="navItem" v-if="!AccessToken" @click="router.push('login')"> | |||
{{ $t("navbar.goLogin") }} | |||
</div> | |||
@@ -127,7 +150,7 @@ import { useAppStore } from "@/store/modules/app"; | |||
// import { useSettingsStore } from "@/store/modules/settings"; | |||
import { useRoute, useRouter } from "vue-router"; | |||
import { useI18n } from "vue-i18n"; | |||
import { getMenuNavApi } from "@/apis/Permission.js"; | |||
import { getMenuNavApi, getUser } from "@/apis/Permission.js"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
const userInfoPinia = userInfoModules(); | |||
@@ -190,6 +213,7 @@ function handleOutsideClick() { | |||
onMounted(() => { | |||
getMenuNavFunc(); | |||
isAdminFn() | |||
}); | |||
//#region 联系我们弹窗 | |||
const showTalkUsDialog = ref(false); | |||
@@ -214,12 +238,26 @@ async function getMenuNavFunc() { | |||
const showChildrenRouter = ref(""); | |||
//#endregion ------------------------------------ | |||
// 修改密码 | |||
const showEditPasswordDialog = ref(false); | |||
const updateShowEditPassDialog = () => { | |||
showEditPasswordDialog.value = false | |||
} | |||
const isAdmin = ref(''); | |||
function isAdminFn() { | |||
getUser().then(res => { | |||
isAdmin.value = res.data.isAdmin // isAdmin=1,为管理人员(邃芒后台) , isAdmin=0,为API接入方登录后台 | |||
}) | |||
} | |||
</script> | |||
<!-- 新样式 --> | |||
<style lang="scss" scoped> | |||
.app-wrapper { | |||
width: 1920px; | |||
// width: 1920px; | |||
display: flex; | |||
} | |||
.Sidebar { | |||
@@ -241,6 +279,7 @@ const showChildrenRouter = ref(""); | |||
height: calc(100% - 80px); | |||
padding: 130px 20px 0; | |||
color: #fff; | |||
width: 230px; | |||
// color: #868593; | |||
.bottomBtx { | |||
@@ -342,4 +381,11 @@ const showChildrenRouter = ref(""); | |||
} | |||
} | |||
} | |||
.el-menu{ | |||
border: none; | |||
:deep .el-sub-menu__title, :deep .el-menu-item{ | |||
font-size: 16px; | |||
} | |||
} | |||
</style> |
@@ -17,7 +17,7 @@ import "element-plus/theme-chalk/dark/css-vars.css"; | |||
import "@/styles/index.scss"; | |||
import "uno.css"; | |||
import "@/styles/my.scss"; // 引入自己定义的样式 | |||
import 'amfe-flexible'; | |||
// import 'amfe-flexible'; | |||
import ElementPlus from "element-plus"; | |||
// 引入组件 | |||
import myLoading from "@/components/myLoading.vue"; | |||
@@ -5,6 +5,10 @@ export const Layout = () => import("@/layout/index.vue"); | |||
// 静态路由 | |||
export const constantRoutes: RouteRecordRaw[] = [ | |||
{ | |||
path: "/", | |||
redirect: "/login", | |||
}, | |||
// 登录 | |||
{ | |||
path: "/login", | |||
@@ -147,6 +151,60 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
}, | |||
], | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/editPass", | |||
children: [ | |||
{ | |||
path: "editPass", | |||
component: () => import("@/views/editPass/index.vue"), | |||
name: "editPass", | |||
meta: { | |||
title: "editPass", | |||
icon: "homepage", | |||
affix: true, | |||
name: "ruleListMangage.title", | |||
}, | |||
}, | |||
], | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/apiManage", | |||
children: [ | |||
{ | |||
path: "apiManage", | |||
component: () => import("@/views/apiManage/index.vue"), | |||
name: "apiManage", | |||
meta: { | |||
title: "apiManage", | |||
icon: "homepage", | |||
affix: true, | |||
name: "ruleListMangage.title", | |||
}, | |||
}, | |||
], | |||
}, | |||
{ | |||
path: "/", | |||
component: Layout, | |||
redirect: "/privatization", | |||
children: [ | |||
{ | |||
path: "privatization", | |||
component: () => import("@/views/privatization/index.vue"), | |||
name: "privatization", | |||
meta: { | |||
title: "privatization", | |||
icon: "homepage", | |||
affix: true, | |||
name: "ruleListMangage.title", | |||
}, | |||
}, | |||
], | |||
} | |||
]; | |||
/** | |||
@@ -4,6 +4,7 @@ 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'] | |||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] | |||
const computed: typeof import('vue')['computed'] | |||
@@ -272,6 +273,7 @@ declare module 'vue' { | |||
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']> | |||
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> | |||
readonly computed: UnwrapRef<typeof import('vue')['computed']> | |||
@@ -14,7 +14,6 @@ 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'] | |||
@@ -23,33 +22,24 @@ declare module '@vue/runtime-core' { | |||
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'] | |||
ElMenu: typeof import('element-plus/es')['ElMenu'] | |||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] | |||
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] | |||
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'] | |||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] | |||
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'] | |||
IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | |||
IEpCollection: typeof import('~icons/ep/collection')['default'] | |||
IEpDelete: typeof import('~icons/ep/delete')['default'] | |||
IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | |||
IEpDownload: typeof import('~icons/ep/download')['default'] | |||
IEpDocument: typeof import('~icons/ep/document')['default'] | |||
IEpEdit: typeof import('~icons/ep/edit')['default'] | |||
IEpLoading: typeof import('~icons/ep/loading')['default'] | |||
IEpLock: typeof import('~icons/ep/lock')['default'] | |||
IEpIconMenu: typeof import('~icons/ep/icon-menu')['default'] | |||
IEpLink: typeof import('~icons/ep/link')['default'] | |||
IEpPlus: typeof import('~icons/ep/plus')['default'] | |||
IEpRefresh: typeof import('~icons/ep/refresh')['default'] | |||
IEpSearch: typeof import('~icons/ep/search')['default'] | |||
IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | |||
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | |||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | |||
MyLoading: typeof import('./../components/myLoading.vue')['default'] | |||
@@ -63,8 +53,4 @@ declare module '@vue/runtime-core' { | |||
TalkUs: typeof import('./../components/talkUs.vue')['default'] | |||
WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | |||
} | |||
export interface ComponentCustomProperties { | |||
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | |||
vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | |||
} | |||
} |
@@ -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> |
@@ -0,0 +1,411 @@ | |||
<template> | |||
<div class="page justify-around"> | |||
<div class="addbtn"> | |||
<el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon>新增</el-button> | |||
</div> | |||
<el-table | |||
:data="tableData" | |||
style="width: 100%; height: 90%" | |||
size="large" | |||
border | |||
> | |||
<el-table-column | |||
prop="name" | |||
:label="$t('businessMangage.name')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="address" | |||
:label="$t('businessMangage.address')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="status" | |||
:label="$t('businessMangage.status')" | |||
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)" | |||
>查看密钥</el-button | |||
> | |||
<el-button | |||
link | |||
type="primary" | |||
size="small" | |||
@click="showDetail(scope.row.id)" | |||
>充值时长</el-button> | |||
<el-button | |||
link | |||
type="primary" | |||
size="small" | |||
@click="showDetail(scope.row.id)" | |||
>已关联模版</el-button> | |||
<el-button | |||
link | |||
type="primary" | |||
size="small" | |||
@click="showDetail(scope.row.id)" | |||
>关联模版</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="'用户名' + ':'" prop="username"> | |||
<el-input | |||
v-model="formData.username" | |||
:placeholder="$t('businessMangage.nameInputText')" | |||
/> | |||
</el-form-item> | |||
<el-form-item | |||
:label="'姓名' + ':'" | |||
prop="name" | |||
> | |||
<el-input | |||
v-model="formData.name" | |||
:placeholder="$t('businessMangage.addressInputText')" | |||
/> | |||
</el-form-item> | |||
<el-form-item :label="'密码' + ':'" prop="password"> | |||
<el-input | |||
v-model="formData.password" | |||
:placeholder="$t('businessMangage.codeInputText')" | |||
/> | |||
</el-form-item> | |||
<el-form-item | |||
:label="'手机号' + ':'" | |||
prop="phone" | |||
> | |||
<el-input | |||
v-model="formData.phone" | |||
:placeholder="$t('businessMangage.codeInputText')" | |||
/> | |||
</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> | |||
<!-- 设置时长 --> | |||
<!-- <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="formDataTime" | |||
:rules="rulesTime" | |||
> | |||
<el-form-item :label="'时长' + ':'" prop="times"> | |||
<el-input v-model="formData.times" placeholder="请输入时长"> | |||
<template #append>秒</template> | |||
</el-input> | |||
</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 { apiManageListApi, addApiManage } from "@/apis/apiManage.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; | |||
getApiManageListFunc(pageNum.value, pageSize.value); | |||
}; | |||
const handleCurrentChange = (val) => { | |||
pageNum.value = val; | |||
getApiManageListFunc(pageNum.value, pageSize.value); | |||
}; | |||
const getApiManageListFunc = async (PageNum, PageSize) => { | |||
try { | |||
const res = await apiManageListApi(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({ | |||
id: "", | |||
username: "", | |||
name: "", | |||
password: "", | |||
phone: "" | |||
}); | |||
const rules = { | |||
username: [ | |||
{ | |||
required: true, | |||
message: "Please input username", | |||
trigger: "blur", | |||
}, | |||
], | |||
name: [ | |||
{ | |||
required: true, | |||
message: "Please input name", | |||
trigger: "blur", | |||
}, | |||
], | |||
password: [ | |||
{ | |||
required: true, | |||
message: "Please input code", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
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 = { | |||
id: "", | |||
username: "", | |||
name: "", | |||
password: "", | |||
phone: "" | |||
}; | |||
}, 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 addApiManage(data); | |||
console.log(res, "res"); | |||
if (res.code == 200) { | |||
ElMessage.success("添加成功!"); | |||
dialogVisible.value = false; | |||
} | |||
getApiManageListFunc(1, 10); | |||
pageNum.value = 1; | |||
pageSize.value = 10; | |||
} catch (error) { | |||
console.log(error, "err"); | |||
ElMessage.error(error.message); | |||
} | |||
} else { | |||
ElMessage.error("请完善信息!"); | |||
} | |||
}); | |||
}; | |||
// 设置时长 | |||
const formDataTime = ref({ | |||
times: "" | |||
}); | |||
const rulesTime = { | |||
times: [ | |||
{ | |||
required: true, | |||
message: "Please input times", | |||
trigger: "blur", | |||
}, | |||
] | |||
}; | |||
onMounted(() => { | |||
getApiManageListFunc(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; | |||
text-align: right; | |||
} | |||
.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,493 @@ | |||
<template> | |||
<div class="page justify-around"> | |||
<div class="addbtn"> | |||
<el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon> 新增</el-button> | |||
</div> | |||
<el-table | |||
:data="tableData" | |||
style="width: 100%; height: 90%" | |||
size="large" | |||
align="center" | |||
border | |||
> | |||
<el-table-column | |||
prop="name" | |||
:label="$t('businessMangage.name')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="address" | |||
:label="$t('businessMangage.address')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="status" | |||
:label="$t('businessMangage.status')" | |||
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')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="createTime" | |||
:label="$t('businessMangage.createTime')" | |||
align="center" | |||
> | |||
<template #default="scope"> | |||
{{ getDate(scope.row.createTime) }} | |||
</template> | |||
</el-table-column> | |||
<el-table-column | |||
fixed="right" | |||
:label="$t('keyMangage.operations')" | |||
width="400" | |||
align="center" | |||
> | |||
<template #default="scope"> | |||
<el-button | |||
link | |||
type="primary" | |||
size="small" | |||
@click="showDetail(scope.row.id)" | |||
>查看密钥</el-button> | |||
<el-button link type="primary" size="small" @click="loginAccount(scope.row)">{{ scope.row.mallUserInfo ? '修改登录账号' : '新增登录账号'}}</el-button> | |||
<el-button link type="primary" size="small" @click="setTime(scope.row.id)">设置时长</el-button> | |||
<el-button link type="primary" size="small" @click="modelDialogVisible = true">关联模版</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 | |||
disabled | |||
> | |||
<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> | |||
<!-- 登录账号 --> | |||
<el-dialog v-model="accountDialogVisible" title="登录账号" width="35%" :before-close="handleClose" > | |||
<el-form ref="ruleForm2" label-position="left" label-width="120px" :model="formData2" :rules="rules2"> | |||
<el-form-item label="用户名" prop="username"> | |||
<el-input :disabled="mallUserInfoFlag" v-model="formData2.username" :placeholder="$t('businessMangage.nameInputText')" /> | |||
</el-form-item> | |||
<el-form-item label="名称" prop="name" > | |||
<el-input v-model="formData2.name" :placeholder="$t('businessMangage.addressInputText')" /> | |||
</el-form-item> | |||
<el-form-item label="密码" prop="password"> | |||
<el-input v-model="formData2.password" :placeholder="$t('businessMangage.codeInputText')" /> | |||
</el-form-item> | |||
<el-form-item label="手机号" prop="phone"> | |||
<el-input v-model="formData2.phone" :placeholder="$t('businessMangage.codeInputText')" /> | |||
</el-form-item> | |||
</el-form> | |||
<template #footer> | |||
<span class="dialog-footer"> | |||
<el-button @click="accountDialogVisible = false">{{ | |||
$t("businessMangage.cancel") | |||
}}</el-button> | |||
<el-button type="primary" @click="addAccount(ruleForm2)"> | |||
{{ $t("businessMangage.confirm") }} | |||
</el-button> | |||
</span> | |||
</template> | |||
</el-dialog> | |||
<el-dialog v-model="modelDialogVisible" title="关联模版" width="60%" :before-close="handleClose" > | |||
<model></model> | |||
</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, setRemainingTimes, saveMallUserInfo } from '@/apis/apiManage.js' | |||
import { useI18n } from "vue-i18n"; | |||
import dayjs from "dayjs"; | |||
import { useRoute, useRouter } from "vue-router"; | |||
import model from './model.vue' | |||
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, 1); | |||
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: 1, | |||
}); | |||
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; | |||
accountDialogVisible.value = false; | |||
modelDialogVisible.value = false; | |||
setTimeout(() => { | |||
formData.value = { | |||
name: "", | |||
address: "", | |||
code: "", | |||
type: 1, | |||
}; | |||
}, 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("请完善信息!"); | |||
} | |||
}); | |||
}; | |||
// 设置时长 | |||
const setTime = (id) => { | |||
ElMessageBox.prompt('请输入时长(秒)', '设置时长', { | |||
confirmButtonText: 'OK', | |||
cancelButtonText: 'Cancel', | |||
inputPattern: /^[0-9]*$/, | |||
inputErrorMessage: '请输入数字', | |||
beforeClose: async (action, instance, done) => { | |||
if (action == "confirm") {//点击确认请求接口 | |||
let res = await setRemainingTimes({ id: id, times: instance.inputValue }) | |||
if (res.code === 200) { | |||
// 通过监测关闭 | |||
ElMessage.success('设置成功') | |||
done(); | |||
} else { | |||
ElMessage.error(res.message) | |||
} | |||
} else { | |||
//点击取消关闭 | |||
done(); | |||
} | |||
} | |||
}) | |||
} | |||
// 登录账号 | |||
const accountDialogVisible = ref(false); | |||
const mallUserInfoFlag = ref(false); | |||
const loginAccount = (item) => { | |||
if (item.mallUserInfo) { | |||
formData.value.name = item.name | |||
formData.value.username = item.username | |||
} | |||
mallUserInfoFlag.value = item.mallUserInfo ? true : false | |||
formData2.value.serviceId = item.id | |||
accountDialogVisible.value = true | |||
} | |||
const formData2 = ref({ | |||
serviceId: "", | |||
username: "", | |||
name: "", | |||
password: "", | |||
phone: "", | |||
}); | |||
const rules2 = { | |||
name: [ | |||
{ | |||
required: true, | |||
message: "Please input name", | |||
trigger: "blur", | |||
}, | |||
], | |||
username: [ | |||
{ | |||
required: true, | |||
message: "Please input username", | |||
trigger: "blur", | |||
}, | |||
], | |||
password: [ | |||
{ | |||
required: true, | |||
message: "Please input password", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
message: "Please input phone", | |||
trigger: "blur", | |||
}, | |||
], | |||
}; | |||
const ruleForm2 = ref(); | |||
const addAccount = async (refForm) => { | |||
if (!refForm) return; | |||
await refForm.validate(async (valid, fields) => { | |||
if (valid) { | |||
const data = formData2.value; | |||
try { | |||
const res = await saveMallUserInfo(data); | |||
if (res.code == 200) { | |||
ElMessage.success("添加成功!"); | |||
accountDialogVisible.value = false; | |||
} | |||
getBusinessListFunc(1, 10); | |||
pageNum.value = 1; | |||
pageSize.value = 10; | |||
} catch (error) { | |||
console.log(error, "err"); | |||
ElMessage.error(error.message); | |||
} | |||
} else { | |||
ElMessage.error("请完善信息!"); | |||
} | |||
}); | |||
}; | |||
// 关联模版 | |||
const modelDialogVisible = ref(false); | |||
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,130 @@ | |||
<template> | |||
<el-table | |||
ref="multipleTableRef" | |||
:data="tableData" | |||
style="width: 100%" | |||
border | |||
@selection-change="handleSelectionChange" | |||
> | |||
<el-table-column type="selection" width="55" align="center"/> | |||
<el-table-column property="title" label="标题" align="center"/> | |||
<el-table-column label="图片" align="center"> | |||
<template #default="scope"> | |||
<img :src="scope.row.coverImg" width="50" /> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
<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 style="margin-top: 20px"> | |||
<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])" | |||
>Toggle selection status of second and third rows</el-button | |||
> | |||
<el-button @click="toggleSelection()">Clear selection</el-button> --> | |||
<el-button @click="toggleSelection([tableData[1], tableData[2]])" | |||
>取消</el-button | |||
> | |||
<el-button type="primary" @click="addModel()">确认关联</el-button> | |||
</div> | |||
</template> | |||
<script lang="ts" setup> | |||
import { ref } from 'vue' | |||
import { ElTable } from 'element-plus' | |||
import { modelAllList, personMouldIdList, associatedMould } from '@/apis/apiManage.js' | |||
interface User { | |||
date: string | |||
name: string | |||
address: string | |||
} | |||
const multipleTableRef = ref<InstanceType<typeof ElTable>>() | |||
const multipleSelection = ref<User[]>([]) | |||
const toggleSelection = (rows?: User[]) => { | |||
if (rows) { | |||
rows.forEach((row) => { | |||
// TODO: improvement typing when refactor table | |||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment | |||
// @ts-expect-error | |||
multipleTableRef.value!.toggleRowSelection(row, undefined) | |||
}) | |||
} else { | |||
multipleTableRef.value!.clearSelection() | |||
} | |||
} | |||
const handleSelectionChange = (val: User[]) => { | |||
debugger | |||
multipleSelection.value = val | |||
} | |||
const pageNum = ref(1); | |||
const pageSize = ref(10); | |||
const total = ref(0); | |||
const tableData = ref([]); | |||
const handleSizeChange = (val) => { | |||
pageSize.value = val; | |||
modelAllListFunc(pageNum.value, pageSize.value); | |||
}; | |||
const handleCurrentChange = (val) => { | |||
pageNum.value = val; | |||
modelAllListFunc(pageNum.value, pageSize.value); | |||
}; | |||
const modelAllListFunc = async (PageNum, PageSize) => { | |||
try { | |||
const res = await modelAllList(PageNum, PageSize); | |||
const modelIds = await personMouldIdList(); | |||
console.log(res, "res"); | |||
tableData.value = res.data.list; | |||
total.value = res.data.total * 1; | |||
} catch (error) { | |||
console.log(error, "err"); | |||
} | |||
}; | |||
const addModel = async () => { | |||
console.log(multipleSelection.value) | |||
debugger | |||
const data = { | |||
mouldIds: [], | |||
serviceId: '' | |||
} | |||
const res = await associatedMould(data); | |||
// await refForm.validate(async (valid, fields) => { | |||
// if (valid) { | |||
// const data = formData2.value; | |||
// try { | |||
// const res = await associatedMould(data); | |||
// 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(() => { | |||
modelAllListFunc(1, 10); | |||
}); | |||
</script> |
@@ -0,0 +1,111 @@ | |||
<!-- | |||
* @Autor: Chutingting | |||
* @Date: 2023-11-05 19:03:11 | |||
* @LastEditors: Chutingting | |||
* @LastEditTime: 2023-11-07 17:55:54 | |||
* @Description: 修改密码 | |||
--> | |||
<template> | |||
<div class="page"> | |||
<el-form | |||
ref="ruleFormRef" | |||
:model="ruleForm" | |||
status-icon | |||
:rules="rules" | |||
label-width="120px" | |||
class="editPass" | |||
> | |||
<el-form-item label="用户名" prop="pass"> | |||
<el-input v-model="ruleForm.username" disabled type="password" autocomplete="off" /> | |||
</el-form-item> | |||
<el-form-item label="原密码" prop="pass"> | |||
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" /> | |||
</el-form-item> | |||
<el-form-item label="确认密码" prop="checkPass"> | |||
<el-input | |||
v-model="ruleForm.checkPass" | |||
type="password" | |||
autocomplete="off" | |||
/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button @click="handleClose(ruleFormRef)">Close</el-button> | |||
<el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</template> | |||
<script lang="ts" setup> | |||
import { reactive, ref } from 'vue' | |||
import type { FormInstance, FormRules } from 'element-plus' | |||
import { updatepwd } from "@/apis/editPass.js"; | |||
const ruleFormRef = ref<FormInstance>() | |||
const validatePass = (rule: any, value: any, callback: any) => { | |||
if (value === '') { | |||
callback(new Error('请输入密码')) | |||
} else { | |||
if (ruleForm.checkPass !== '') { | |||
if (!ruleFormRef.value) return | |||
ruleFormRef.value.validateField('checkPass', () => null) | |||
} | |||
callback() | |||
} | |||
} | |||
const validatePass2 = (rule: any, value: any, callback: any) => { | |||
if (value === '') { | |||
callback(new Error('请重新输入密码')) | |||
} else if (value !== ruleForm.pass) { | |||
callback(new Error("两次密码不一致")) | |||
} else { | |||
callback() | |||
} | |||
} | |||
const ruleForm = reactive({ | |||
pass: '', | |||
checkPass: '' | |||
}) | |||
const rules = reactive<FormRules<typeof ruleForm>>({ | |||
pass: [{ validator: validatePass, trigger: 'blur' }], | |||
checkPass: [{ validator: validatePass2, trigger: 'blur' }] | |||
}) | |||
const submitForm = (formEl: FormInstance | undefined) => { | |||
if (!formEl) return | |||
formEl.validate((valid) => { | |||
if (valid) { | |||
const data = ruleForm; | |||
try { | |||
const res = updatepwd(data); | |||
console.log(res, "res"); | |||
// if (res.code == 200) { | |||
// ElMessage.success("修改成功!"); | |||
// handleClose(ruleFormRef.value) | |||
// } | |||
} catch (error) { | |||
console.log(error, "err"); | |||
// ElMessage.error(error.message); | |||
} | |||
} else { | |||
console.log('error submit!') | |||
return false | |||
} | |||
}) | |||
} | |||
</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; | |||
} | |||
</style> | |||
@@ -0,0 +1,354 @@ | |||
<template> | |||
<div class="page justify-around"> | |||
<div class="addbtn"> | |||
<el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon> 新增</el-button> | |||
</div> | |||
<el-table | |||
:data="tableData" | |||
style="width: 100%; height: 90%" | |||
size="large" | |||
align="center" | |||
border | |||
> | |||
<el-table-column | |||
prop="name" | |||
:label="$t('businessMangage.name')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="address" | |||
:label="$t('businessMangage.address')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="status" | |||
:label="$t('businessMangage.status')" | |||
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')" | |||
align="center" | |||
/> | |||
<el-table-column | |||
prop="createTime" | |||
:label="$t('businessMangage.createTime')" | |||
align="center" | |||
> | |||
<template #default="scope"> | |||
{{ getDate(scope.row.createTime) }} | |||
</template> | |||
</el-table-column> | |||
<el-table-column | |||
fixed="right" | |||
:label="$t('keyMangage.operations')" | |||
width="400" | |||
align="center" | |||
> | |||
<template #default="scope"> | |||
<el-button link type="primary" size="small" @click="setTime(scope.row.id)">设置时长</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 | |||
disabled | |||
> | |||
<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 { businessListApi, addBusinessApi, setRemainingTimes, saveMallUserInfo } from '@/apis/apiManage.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 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, 2); | |||
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: 2, | |||
}); | |||
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: 1, | |||
}; | |||
}, 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("请完善信息!"); | |||
} | |||
}); | |||
}; | |||
// 设置时长 | |||
const setTime = (id) => { | |||
ElMessageBox.prompt('请输入时长(秒)', '设置时长', { | |||
confirmButtonText: 'OK', | |||
cancelButtonText: 'Cancel', | |||
inputPattern: /^[0-9]*$/, | |||
inputErrorMessage: '请输入数字', | |||
beforeClose: async (action, instance, done) => { | |||
if (action == "confirm") {//点击确认请求接口 | |||
let res = await setRemainingTimes({ id: id, times: instance.inputValue }) | |||
if (res.code === 200) { | |||
// 通过监测关闭 | |||
ElMessage.success('设置成功') | |||
done(); | |||
} else { | |||
ElMessage.error(res.message) | |||
} | |||
} else { | |||
//点击取消关闭 | |||
done(); | |||
} | |||
} | |||
}) | |||
} | |||
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> |
@@ -35,15 +35,15 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { | |||
`, | |||
}, | |||
}, | |||
postcss: { | |||
plugins: [ | |||
postCssPxToRem({ | |||
rootValue: 192, // 1rem 的大小 | |||
propList: ['*'], // 需要转换的属性,*(全部转换) | |||
unitPrecision: 6 // 转换精度,保留的小数位数 | |||
}) | |||
] | |||
} | |||
// postcss: { | |||
// plugins: [ | |||
// postCssPxToRem({ | |||
// rootValue: 192, // 1rem 的大小 | |||
// propList: ['*'], // 需要转换的属性,*(全部转换) | |||
// unitPrecision: 6 // 转换精度,保留的小数位数 | |||
// }) | |||
// ] | |||
// } | |||
}, | |||
server: { | |||
host: "0.0.0.0", | |||