Browse Source

api管理

ctt_dev_new
chutingting 1 year ago
parent
commit
cc4de57991
15 changed files with 2077 additions and 58 deletions
  1. +12
    -0
      src/apis/Permission.js
  2. +101
    -0
      src/apis/apiManage.js
  3. +14
    -0
      src/apis/editPass.js
  4. +73
    -27
      src/layout/index.vue
  5. +1
    -1
      src/main.ts
  6. +58
    -0
      src/router/index.ts
  7. +2
    -0
      src/types/auto-imports.d.ts
  8. +7
    -21
      src/types/components.d.ts
  9. +301
    -0
      src/views/apiManage/businessCheck.vue
  10. +411
    -0
      src/views/apiManage/index copy.vue
  11. +493
    -0
      src/views/apiManage/index.vue
  12. +130
    -0
      src/views/apiManage/model.vue
  13. +111
    -0
      src/views/editPass/index.vue
  14. +354
    -0
      src/views/privatization/index.vue
  15. +9
    -9
      vite.config.ts

+ 12
- 0
src/apis/Permission.js View File

@@ -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',
})
}

+ 101
- 0
src/apis/apiManage.js View File

@@ -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
})
}

+ 14
- 0
src/apis/editPass.js View File

@@ -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
})
}

+ 73
- 27
src/layout/index.vue View File

@@ -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>

+ 1
- 1
src/main.ts View File

@@ -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";


+ 58
- 0
src/router/index.ts View File

@@ -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",
},
},
],
}
];

/**


+ 2
- 0
src/types/auto-imports.d.ts View File

@@ -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']>


+ 7
- 21
src/types/components.d.ts View File

@@ -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']
}
}

+ 301
- 0
src/views/apiManage/businessCheck.vue View File

@@ -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>

+ 411
- 0
src/views/apiManage/index copy.vue View File

@@ -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>

+ 493
- 0
src/views/apiManage/index.vue View File

@@ -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>

+ 130
- 0
src/views/apiManage/model.vue View File

@@ -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>

+ 111
- 0
src/views/editPass/index.vue View File

@@ -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>


+ 354
- 0
src/views/privatization/index.vue View File

@@ -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>

+ 9
- 9
vite.config.ts View File

@@ -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",


Loading…
Cancel
Save