| @@ -10,4 +10,16 @@ export function getMenuNavApi() { | |||||
| url: `/menu/nav`, | url: `/menu/nav`, | ||||
| method: 'get', | 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> | ||||
| <!-- 侧边路由列表 --> | <!-- 侧边路由列表 --> | ||||
| <div class="myRouter"> | <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" | v-for="item in MenuList" | ||||
| :key="item.id" | :key="item.id" | ||||
| class="myRouter-item" | class="myRouter-item" | ||||
| @@ -31,51 +50,38 @@ | |||||
| > | > | ||||
| {{ childrens.name }} | {{ childrens.name }} | ||||
| </div> | </div> | ||||
| </div> | |||||
| </div> --> | |||||
| <!-- 固定路由 --> | <!-- 固定路由 --> | ||||
| <div class="myRouter-item" @click="router.push('/model')"> | |||||
| <!-- <div class="myRouter-item" @click="router.push('/apiManage')"> | |||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| {{ $t("modelMangage.title") }} | |||||
| API接入方管理 | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="myRouter-item" @click="router.push('/businessList')"> | |||||
| <div class="myRouter-item" @click="router.push('/model')"> | |||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| {{ $t("businessMangage.title") }} | |||||
| 私有化客户管理 | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="myRouter-item" @click="router.push('/keyList')"> | |||||
| <div class="myRouter-item" @click="router.push('/model')"> | |||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| {{ $t("keyMangage.title") }} | |||||
| 密钥查看 | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="myRouter-item" @click="router.push('/model')"> | <div class="myRouter-item" @click="router.push('/model')"> | ||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| {{ $t("priceMangage.title") }} | |||||
| 模板管理 | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="myRouter-item" @click="router.push('/model')"> | |||||
| <div class="myRouter-item" @click="router.push('/editPass')"> | |||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| {{ $t("dataCount.title") }} | |||||
| 修改密码 | |||||
| </div> | </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> | ||||
| </div> | </div> | ||||
| <!-- 右边显示部分 --> | <!-- 右边显示部分 --> | ||||
| @@ -93,6 +99,23 @@ | |||||
| <lang-select class="navItem" /> | <lang-select class="navItem" /> | ||||
| </el-tooltip> | </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')"> | <div class="navItem" v-if="!AccessToken" @click="router.push('login')"> | ||||
| {{ $t("navbar.goLogin") }} | {{ $t("navbar.goLogin") }} | ||||
| </div> | </div> | ||||
| @@ -127,7 +150,7 @@ import { useAppStore } from "@/store/modules/app"; | |||||
| // import { useSettingsStore } from "@/store/modules/settings"; | // import { useSettingsStore } from "@/store/modules/settings"; | ||||
| import { useRoute, useRouter } from "vue-router"; | import { useRoute, useRouter } from "vue-router"; | ||||
| import { useI18n } from "vue-i18n"; | import { useI18n } from "vue-i18n"; | ||||
| import { getMenuNavApi } from "@/apis/Permission.js"; | |||||
| import { getMenuNavApi, getUser } from "@/apis/Permission.js"; | |||||
| import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
| const userInfoPinia = userInfoModules(); | const userInfoPinia = userInfoModules(); | ||||
| @@ -190,6 +213,7 @@ function handleOutsideClick() { | |||||
| onMounted(() => { | onMounted(() => { | ||||
| getMenuNavFunc(); | getMenuNavFunc(); | ||||
| isAdminFn() | |||||
| }); | }); | ||||
| //#region 联系我们弹窗 | //#region 联系我们弹窗 | ||||
| const showTalkUsDialog = ref(false); | const showTalkUsDialog = ref(false); | ||||
| @@ -214,12 +238,26 @@ async function getMenuNavFunc() { | |||||
| const showChildrenRouter = ref(""); | const showChildrenRouter = ref(""); | ||||
| //#endregion ------------------------------------ | //#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> | </script> | ||||
| <!-- 新样式 --> | <!-- 新样式 --> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .app-wrapper { | .app-wrapper { | ||||
| width: 1920px; | |||||
| // width: 1920px; | |||||
| display: flex; | display: flex; | ||||
| } | } | ||||
| .Sidebar { | .Sidebar { | ||||
| @@ -241,6 +279,7 @@ const showChildrenRouter = ref(""); | |||||
| height: calc(100% - 80px); | height: calc(100% - 80px); | ||||
| padding: 130px 20px 0; | padding: 130px 20px 0; | ||||
| color: #fff; | color: #fff; | ||||
| width: 230px; | |||||
| // color: #868593; | // color: #868593; | ||||
| .bottomBtx { | .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> | </style> | ||||
| @@ -17,7 +17,7 @@ import "element-plus/theme-chalk/dark/css-vars.css"; | |||||
| import "@/styles/index.scss"; | import "@/styles/index.scss"; | ||||
| import "uno.css"; | import "uno.css"; | ||||
| import "@/styles/my.scss"; // 引入自己定义的样式 | import "@/styles/my.scss"; // 引入自己定义的样式 | ||||
| import 'amfe-flexible'; | |||||
| // import 'amfe-flexible'; | |||||
| import ElementPlus from "element-plus"; | import ElementPlus from "element-plus"; | ||||
| // 引入组件 | // 引入组件 | ||||
| import myLoading from "@/components/myLoading.vue"; | import myLoading from "@/components/myLoading.vue"; | ||||
| @@ -5,6 +5,10 @@ export const Layout = () => import("@/layout/index.vue"); | |||||
| // 静态路由 | // 静态路由 | ||||
| export const constantRoutes: RouteRecordRaw[] = [ | export const constantRoutes: RouteRecordRaw[] = [ | ||||
| { | |||||
| path: "/", | |||||
| redirect: "/login", | |||||
| }, | |||||
| // 登录 | // 登录 | ||||
| { | { | ||||
| path: "/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 EffectScope: typeof import('vue')['EffectScope'] | ||||
| const ElForm: typeof import('element-plus/es')['ElForm'] | 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 asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
| const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] | const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] | ||||
| const computed: typeof import('vue')['computed'] | const computed: typeof import('vue')['computed'] | ||||
| @@ -272,6 +273,7 @@ declare module 'vue' { | |||||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
| readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | 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 asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
| readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> | readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> | ||||
| readonly computed: UnwrapRef<typeof import('vue')['computed']> | readonly computed: UnwrapRef<typeof import('vue')['computed']> | ||||
| @@ -14,7 +14,6 @@ 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'] | ||||
| @@ -23,33 +22,24 @@ declare module '@vue/runtime-core' { | |||||
| ElFormItem: typeof import('element-plus/es')['ElFormItem'] | 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'] | |||||
| 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'] | 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'] | |||||
| ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] | |||||
| 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'] | |||||
| 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'] | ||||
| 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'] | 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'] | 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'] | 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'] | ||||
| @@ -63,8 +53,4 @@ declare module '@vue/runtime-core' { | |||||
| TalkUs: typeof import('./../components/talkUs.vue')['default'] | TalkUs: typeof import('./../components/talkUs.vue')['default'] | ||||
| WangEditor: typeof import('./../components/WangEditor/index.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: { | server: { | ||||
| host: "0.0.0.0", | host: "0.0.0.0", | ||||