Skip to content

S
so-manage-ui
Commit e7452102 authored by 李鹏 's avatar 李鹏
Browse files
Options

管理中心功能1

parent 4d6d53a0
Hide whitespace changes
Inline Side-by-side
Showing with 3279 additions and 147 deletions
src/main.js
View file @ e7452102
import { createApp } from 'vue' import { createApp } from "vue";
import ElementPlus from 'element-plus' import ElementPlus from "element-plus";
import 'element-plus/dist/index.css' import "element-plus/dist/index.css";
import locale from 'element-plus/lib/locale/lang/zh-cn' import locale from "element-plus/lib/locale/lang/zh-cn";
import * as ElementPlusIconsVue from '@element-plus/icons-vue' import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import bgui from "@/bg-ui"; import bgui from "@/bg-ui";
import "@/bg-ui/index.scss"; import "@/bg-ui/index.scss";
import msgSdk from './msg-sdk/index.js'; import msgSdk from "./msg-sdk/index.js";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import {generateRoutes} from './router/index.js' import { generateRoutes } from "./router/index.js";
import "../src/assets/css/font.css";
import "../src/assets/css/index.css";
import "../src/assets/item.css";
import '../src/assets/css/font.css' import store from "@/store";
import '../src/assets/css/index.css'
import '../src/assets/item.css'
import store from '@/store'; import i18n from "./i18n/i18n.js";
import i18n from './i18n/i18n.js' import axios from "./request/http.js";
import axios from './request/http.js' const createVue = createApp(App);
const createVue = createApp(App)
createVue.use(ElementPlus, { locale }); createVue.use(ElementPlus, { locale });
function getMsgAppid() { function getMsgAppid() {
axios.get(`/apaas/system/v5/message/account`).then(res => { axios.get(`/apaas/system/v5/message/account`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
createVue.use(msgSdk, { createVue.use(msgSdk, {
requestUrl: 'https://msg.wodcloud.com', // 请求地址 requestUrl: "https://msg.wodcloud.com", // 请求地址
appID: decodeURIComponent(escape(window.atob(res.data.data.app_id))), // 应用id appID: decodeURIComponent(escape(window.atob(res.data.data.app_id))), // 应用id
secretKey: decodeURIComponent(escape(window.atob(res.data.data.secret_key))), // 应用密钥 secretKey: decodeURIComponent(escape(window.atob(res.data.data.secret_key))), // 应用密钥
userId: '', userId: "",
userType: '', userType: "",
roleId: '', roleId: "",
organization: '', organization: "",
}) });
} }
}) });
} }
// getMsgAppid() // getMsgAppid()
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
createVue.component(key, component) createVue.component(key, component);
} }
createVue.config.globalProperties.$axios = axios createVue.config.globalProperties.$axios = axios;
import menu from './router/function.js' import menu from "./router/function.js";
//获取用户信息 //获取用户信息
function getUser() { function getUser() {
return axios.get(`/apaas/system/v5/user/getUserInfo`) return axios.get(`/apaas/system/v5/user/getUserInfo`);
} }
//获取用户菜单信息 //获取用户菜单信息
function getMenu(search) { function getMenu(search) {
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`) return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
} }
//处理菜单成为对象 //处理菜单成为对象
function getMenuObj(menu,parentRowPath,menuObj){ function getMenuObj(menu, parentRowPath, menuObj) {
menu.forEach((e,idx) => { menu.forEach((e, idx) => {
e.rowPath = parentRowPath + '.' + idx e.rowPath = parentRowPath + "." + idx;
menuObj[e.path] = e menuObj[e.path] = e;
if(e.children&&e.children.length){ if (e.children && e.children.length) {
getMenuObj(e.children,e.rowPath,menuObj) getMenuObj(e.children, e.rowPath, menuObj);
} }
}); });
} }
Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
Promise.all([getUser(),getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then(res => { .then((res) => {
console.log(res); if (res[0].data.code == 200 && res[1].data.code == 200) {
if (res[0].data.code == 200&&res[1].data.code == 200) {
//已登录则记录菜单和用户信息 //已登录则记录菜单和用户信息
let data = res[1].data.data&&res[1].data.data[0].children||[] let data = (res[1].data.data && res[1].data.data[0].children) || [];
store.commit('setUserInfo', res[0].data.data) store.commit("setUserInfo", res[0].data.data);
// if (res[0].data.data.userType == 1) {//超管 // if (res[0].data.data.userType == 1) {//超管
store.commit('setMenu', data) store.commit("setMenu", data);
menu.menuToRouter(data) console.log("data", data);
console.log(menu); menu.menuToRouter(data);
store.commit('setRoute',data) store.commit("setRoute", data);
//存储菜单对象信息 //存储菜单对象信息
let menuObj = {} let menuObj = {};
getMenuObj(data,'',menuObj) getMenuObj(data, "", menuObj);
store.commit('setMenuObj',menuObj) store.commit("setMenuObj", menuObj);
console.log(menuObj);
// } // }
} }
generateRoutes() generateRoutes();
createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui) createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui);
createVue.mount('#app') createVue.mount("#app");
}).catch(() => {
createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui)
createVue.mount('#app')
}) })
.catch(() => {
createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui);
createVue.mount("#app");
});
//后期加入权限处理，参考msg/ui //后期加入权限处理，参考msg/ui
src/page/main/config/accessRule/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入规则名称或规则">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="addRule">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增
</el-button>
<el-button @click="deleteBatch"> 批量删除 </el-button>
<span class="sleceted_tip">已选<span class="num">3</span>项</span>
<span class="clean" @click="cleanSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">修改时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :stripe="true" select>
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:start_use="{ row }">
<el-switch></el-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="edit(row)">编辑</bg-table-btn>
<bg-table-btn @click="deleteCurrent(row)">删除</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box_detail" title="用户详情" v-model="dialogDetail" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
<el-select placeholder="全部类型" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-select placeholder="请选择所属组织" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-input placeholder="请输入关键词" style="width: 200px; margin-left: 16px" :prefix-icon="Search" />
</div>
<div class="right">
<el-button type="primary" @click="cancelCache">查询</el-button>
<el-button type="default" @click="confirmCache">重置</el-button>
</div>
</div>
<div class="table_content">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="430" :stripe="true">
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="approve(row)">审批</bg-table-btn>
<bg-table-btn @click="approveDetail(row)">审批详情</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
</el-dialog>
<el-dialog class="dialog_box" title="提示" v-model="cacheDialog" width="400px">
<div style="font-size: 16px; color: #404a62">你有未提交的服务，是否继续编辑该服务？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelCache">取 消</el-button>
<el-button type="primary" @click="confirmCache">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import store from "@/store";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const state = reactive({
filter: {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
},
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "已上架",
value: "1",
},
{
name: "已下架",
value: "2",
},
{
name: "上架中",
value: "3",
},
{
name: "下架中",
value: "4",
},
{
name: "待上架",
value: "0",
},
],
headers: [
{
label: "规则名称",
prop: "ability_name",
// minWidth: 280,
},
{
label: "规则类型",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户数量",
prop: "created_time",
// width: 200,
},
{
label: "规则",
prop: "ability_state",
// width: 120,
},
{
label: "是否启用",
prop: "start_use",
// width: 120,
},
{
label: "修改时间",
prop: "ability_state",
width: 240,
},
{
label: "操作",
prop: "action",
width: 120,
fixed: "right",
},
],
detailHeaders: [
{
label: "账号",
prop: "ability_name",
// minWidth: 280,
},
{
label: "类型",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户手机号",
prop: "created_time",
// width: 200,
},
{
label: "所属组织",
prop: "ability_state",
// width: 120,
},
],
tableRows: [],
tableTotal: 0,
actionRow: {},
dialogDetail: false,
cacheDialog: false,
});
const { filter, stateOptions, headers, detailHeaders, tableRows, tableTotal, dialogDetail, cacheDialog } =
toRefs(state);
// 认证方案未确定，暂时使用假数据registerValid，后续更改
const registerValid = computed(() => {
return store.state.registerValid;
});
//新增
const addRule = () => {
router.push("/develop/menu/add");
};
//批量删除
const deleteBatch = () => {};
//清空
const cleanSelected = () => {};
const cancelCache = () => {
axios
.get(`/apaas/service/v5/ability/clear/cach?abilityType=0`)
.then((res) => {
if (res.data.code == 200) {
state.cacheDialog = false;
router.push("/ability-register/add");
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
router.push("/ability-register/add");
});
}; // 取消按钮，清空缓存跳转注册页
const confirmCache = () => {
state.cacheDialog = false;
router.push("/ability-register/add");
}; // 确定按钮，直接跳转注册页
const changeSearch = (val) => {
state.filter.keyword = val;
changePage(1);
};
const changePage = (page) => {
state.filter.page = page;
getTableRows();
};
const getTableRows = () => {
let params = { ...state.filter };
params.registerStartTime = params.time ? params.time[0] || "" : "";
params.registerEndTime = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/service/v5/ability/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
};
const filterAction = () => {
changePage(1);
};
const changeSize = (size) => {
state.filter.size = size;
changePage(1);
};
const filterClear = () => {
state.filter = {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
};
changePage(1);
};
//编辑
const edit = (row) => {
state.dialogDetail = true;
// router.push(`/develop/account/add`);
};
//删除
const deleteCurrent = (row) => {
router.push(`/develop/account/detail`);
};
const goDetail = (row) => {
router.push({
path: "/ability-manage/real-list/detail",
query: {
id: row.id,
},
});
};
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.sleceted_tip {
margin: 0 24px 0 40px;
vertical-align: middle;
font-size: 14px;
color: #404a62;
.num {
margin: 0 3px 0 3px;
font-weight: 600;
color: #202531;
}
}
.clean {
vertical-align: middle;
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.circle {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
margin-right: 8px;
transform: translateY(-2px);
}
.bgc_1 {
background-color: #48ad97;
}
.bgc_2 {
background-color: #d75138;
}
.bgc_3 {
background-color: #3759be;
}
.bgc_4 {
background-color: #ea7d19;
}
.bgc_0 {
background-color: #9e9e9e;
}
.mock_tip {
display: inline-block;
margin-left: 4px;
width: 43px;
height: 20px;
font-size: 12px;
color: #2b4695;
text-align: center;
background-color: #eff2fa;
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
height: 20px;
min-width: 44px;
}
}
}
}
}
::v-deep .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
}
.form_filter {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
border-bottom: 1px solid #e6e9ef;
.right {
margin-right: 16px;
.el-button {
width: 64px;
&:last-child {
margin-left: 16px;
}
}
}
}
.table_content {
padding: 0 16px;
}
}
}
</style>
src/page/main/config/loginPage/index.vue 0 → 100644
View file @ e7452102
<!-- 角色管理 -->
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="form_content apaas_scroll_nor">
<el-form ref="refForm" :model="formData" :rules="rules" label-width="82px" class="registerForm">
<el-form-item label="LOGO" prop="logo">
<bg-upload-image
v-model="formData.logo"
:fileSize="1"
:showTips="true"
customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KBB"
:limit="1"
listType="picture-card"
:accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
</el-form-item>
<el-form-item label="登录背景图" prop="banner">
<bg-upload-image
v-model="formData.banner"
:fileSize="1"
:showTips="true"
customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于1MB"
:limit="1"
listType="picture-card"
:accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
</el-form-item>
<bg-form-gap title="底部所有权内容"></bg-form-gap>
<el-form-item label="内容" prop="force">
<el-input placeholder="例如：Copyright © 某某大数据, All Rights Reserved." maxlength="100"></el-input>
</el-form-item>
<bg-form-gap title="底部ICP备案"></bg-form-gap>
<el-form-item label="内容" prop="force">
<el-input placeholder="请输入" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="跳转连接" prop="force">
<el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
</el-form-item>
<bg-form-gap title="底部公安网备案"></bg-form-gap>
<el-form-item label="内容" prop="force">
<el-input placeholder="请输入" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="跳转连接" prop="force">
<el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
</el-form-item>
<bg-form-gap title="法律声明"></bg-form-gap>
<el-form-item label="跳转连接" prop="force">
<el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
</el-form-item>
<bg-form-gap title="隐私政策"></bg-form-gap>
<el-form-item label="跳转连接" prop="force">
<el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
</el-form-item>
</el-form>
</div>
<div class="operate_btns">
<el-button type="primary" @click="save"> 保存 </el-button>
</div>
</div>
</div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../request/http.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
//表单数据
const formData = reactive({
logo: "",
});
//表单校验规则
const rules = reactive({});
</script>
<style lang="scss" scoped>
.page_container {
.main_container {
position: relative;
margin: 0 0 16px;
width: 100%;
height: calc(100% - 62px);
padding: 32px 0 70px;
overflow: auto;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
.form_content {
overflow: auto;
height: 100%;
padding-left: 24px;
.el-form {
width: 60%;
::v-deep .el-form-item {
&:nth-of-type(1) {
.el-upload--picture-card {
width: 120px;
height: 120px;
}
}
&:nth-of-type(2) {
.el-upload--picture-card {
width: 367px;
height: 196px;
}
}
}
}
::v-deep .gap-title {
font-size: 16px;
color: #202531;
}
}
.operate_btns {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
text-align: right;
line-height: 68px;
border-top: solid 1px #e6e9ef;
.el-button {
width: 92px;
margin-right: 16px;
}
}
}
}
</style>
src/page/main/config/preference/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="parent_container">
<div class="left_container bgc_white">
<el-menu default-active="1" @select="switchMenu">
<el-menu-item index="1">
<span>授权信息</span>
</el-menu-item>
<el-menu-item index="2">
<span>安全相关</span>
</el-menu-item>
<el-menu-item index="3">
<span>登录注册配置</span>
</el-menu-item>
</el-menu>
</div>
<div class="right_container bgc_white">
<!-- 授权信息表单 -->
<el-form
v-if="activeIndex == 1"
ref="authorizeFormRef"
:model="authorizeFormData"
:rules="authorizeRules"
label-width="110px"
class="authorizeForm">
<el-form-item label="当前版本号" prop="ability_name">
<el-input disabled placeholder="当前版本号" maxlength="20" />
</el-form-item>
<el-form-item label="User" prop="synopsis">
<el-input placeholder="统一管理用户认证平台" maxlength="20" />
</el-form-item>
<el-form-item label="Key" prop="synopsis">
<el-input placeholder="safjsaf23423sdkafsafja" rows="5" maxlength="200" show-word-limit type="textarea" />
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item label="有效期至" prop="synopsis">
<el-input placeholder="2022-08-23" maxlength="20" />
</el-form-item>
<el-form-item label="剩余有效期提醒" prop="synopsis">
<el-input placeholder="请输入" maxlength="20">
<template #append>天</template>
</el-input>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
</el-form>
<!-- 安全相关表单 -->
<el-form
v-if="activeIndex == 2"
ref="secureFormRef"
:model="secureFormData"
:rules="secureRules"
label-width="110px"
class="secureForm">
<div class="passwordItem">
<el-form-item label="最低密码强度" prop="synopsis">
<el-select placeholder="请选择">
<el-option label="低" value="1"> </el-option>
<el-option label="高" value="2"> </el-option>
</el-select>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item label="是否强制修改" prop="force">
<el-switch></el-switch>
</el-form-item>
</div>
<el-form-item label="密码有效期" prop="synopsis">
<el-input placeholder="请输入" maxlength="20">
<template #append>天</template>
</el-input>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item label="会话有效期" prop="synopsis">
<el-input placeholder="请输入" maxlength="20">
<template #append>分钟</template>
</el-input>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
<el-form-item label="访问规则模式" prop="synopsis">
<el-select placeholder="请选择">
<el-option label="关闭" value="1"> </el-option>
<el-option label="打开" value="2"> </el-option>
</el-select>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</el-form-item>
</el-form>
<!-- 登录注册配置表单 -->
<el-form
v-if="activeIndex == 3"
ref="registerFormRef"
:model="registerFormData"
:rules="registerRules"
label-width="125px"
class="registerForm">
<bg-form-gap title="登录受限配置"></bg-form-gap>
<el-form-item label="登录受限是否启用" prop="force">
<el-switch></el-switch>
</el-form-item>
<div class="input_password_config">
<span>在</span>
<el-form-item prop="minutes" label-width="0">
<el-input placeholder="请输入小时数" maxlength="3"></el-input>
</el-form-item>
<span>小时内</span>
<el-form-item prop="times" label-width="0">
<el-input placeholder="请输入密码输错次数" maxlength="3"></el-input>
</el-form-item>
<span>次输错密码，自动锁定</span>
<el-form-item prop="times" label-width="0">
<el-input placeholder="请输入分钟数" maxlength="3"></el-input>
</el-form-item>
<span>分钟</span>
<el-button type="primary"> 一键还原受限 </el-button>
<el-tooltip placement="top-start" effect="light">
<template #content> 支持中文、英文（区分大小写）、数字、_、/、-、.,最多不超过64个字 </template>
<div class="tip-image"></div>
</el-tooltip>
</div>
<bg-form-gap title="注册配置"></bg-form-gap>
<el-form-item label="允许注册" prop="times">
<el-radio-group>
<el-radio label="1"> 是 </el-radio>
<el-radio label="1"> 否 </el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div class="operate_btns">
<el-button type="primary" @click="save"> 保存 </el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from "@vue/runtime-core";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
//授权信息表单
const authorizeFormData = reactive({});
//授权表单校验规则
const authorizeRules = reactive({});
//安全相关信息表单
const secureFormData = reactive({});
//安全相关表单校验规则
const secureRules = reactive({});
//登录注册配置表单
const registerFormData = reactive({});
const registerRules = reactive({});
//登录注册配置表单校验规则
let activeIndex = ref("1");
//切换菜单选项
const switchMenu = (index) => {
activeIndex.value = index;
};
//保存表单项
const save = () => {};
</script>
<style lang="scss" scoped>
.parent_container {
display: flex;
justify-content: space-between;
height: calc(100% - 46px - 20px);
.left_container {
width: 240px;
height: 100%;
padding: 24px 16px 0;
.el-menu {
border: none;
.el-menu-item {
justify-content: center;
height: 36px;
color: #404a62 !important;
&.is-active,
&:hover {
background-color: #f2f3f7;
border-radius: 4px;
}
}
}
}
.right_container {
position: relative;
width: calc(100% - 256px);
height: 100%;
padding: 32px 0 68px 24px;
.authorizeForm,
.secureForm,
.registerForm {
::v-deep .el-form-item {
margin-bottom: 24px;
width: 750px;
font-size: 14px;
.el-form-item__label,
.el-radio__label {
color: var(--el-text-color-primary);
}
.el-select {
width: 100%;
}
.el-input-group__append {
width: 60px;
color: #404a62;
border-radius: 0 6px 6px 0;
background: #f7f7f9;
}
}
}
.secureForm {
.passwordItem {
display: flex;
align-items: center;
.el-form-item:nth-of-type(1) {
flex-shrink: 0;
margin-right: 56px;
}
}
}
.registerForm {
.input_password_config {
position: relative;
display: flex;
align-items: center;
width: 798px;
margin-bottom: 24px;
font-size: 14px;
color: var(--el-text-color-primary);
.el-form-item {
margin: 0px 8px;
&:nth-of-type(1),
&:nth-of-type(3) {
width: 120px;
}
&:nth-of-type(2) {
width: 150px;
}
}
.el-button {
margin-left: 18px;
}
}
.el-radio {
margin-right: 54px;
}
}
.operate_btns {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 68px;
padding-right: 16px;
line-height: 68px;
text-align: right;
border-top: solid 1px #e6e9ef;
.el-button {
width: 92px;
}
}
}
}
</style>
src/page/main/develop/systemApproval/approval/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="page_content">
<bg-form-gap title="注册信息"></bg-form-gap>
<bg-detail-table2 class="register_info" :list="instanceData.applyBasicInfo">
<!-- <template v-slot:approvalStatus="{ data }">
<p class="detail-module">
<span>{{ data.label }}</span>
<span>{{ data.value }}</span>
</p>
</template> -->
</bg-detail-table2>
<bg-form-gap title="审批"></bg-form-gap>
<div class="approve">
<div class="header">
<div class="left">
<span class="approve_person">平台运营者审批</span>
<span class="approve_status">待审批</span>
</div>
<div class="right">
<span class="label">申请时间：</span>
<span class="value">2022-10-22 09:58:30</span>
</div>
</div>
<el-form
ref="approveFormRef"
:model="formData"
:rules="rules"
label-width="70px"
class="approveForm"
:size="formSize">
<el-form-item label="审批单位" prop="ability_name">
<el-input disabled placeholder="平台用户组织" maxlength="20" />
</el-form-item>
<el-form-item label="审批人" prop="synopsis">
<el-input disabled placeholder="超级管理员" maxlength="20" />
</el-form-item>
<el-form-item label="审批结果" prop="openness_id">
<el-radio-group>
<el-radio label="1"> 通过 </el-radio>
<el-radio label="0"> 驳回 </el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审批意见" prop="synopsis">
<el-input placeholder="请输入审批意见" rows="5" maxlength="200" show-word-limit type="textarea" />
</el-form-item>
</el-form>
</div>
<div class="operate_btns">
<el-button type="default" @click="cancel"> 取消 </el-button>
<el-button type="primary" @click="save"> 保存 </el-button>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const instanceData = reactive({
applyBasicInfo: [
{
key: "approval_status",
label: "所属机构",
value: "",
// slot: "approvalStatus",
},
{
key: "apply_time",
label: "业务系统名称",
value: "",
},
{
key: "apply_organization",
label: "账号",
value: "",
},
{
key: "business_name",
label: "手机号",
value: "",
},
{
key: "contact_person",
label: "开发厂商名称",
value: "",
},
{
key: "contact_phone",
label: "提交时间",
value: "",
},
{
key: "contact_person",
label: "联系人",
value: "",
},
{
key: "contact_phone",
label: "联系人手机号",
value: "",
},
{
key: "apply_application",
label: "业务系统描述",
value: "",
},
],
formData: {},
rules: {},
});
//取消
const cancel = () => {};
//保存
const save = () => {};
</script>
<style lang="scss" scoped>
.page_content {
position: relative;
padding: 24px 0 68px 24px;
.register_info {
margin-bottom: 24px;
width: 960px;
}
.approve {
overflow: hidden;
width: 1127px;
height: 378px;
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #e3e4ef;
.header {
display: flex;
justify-content: space-between;
height: 38px;
padding: 0 16px;
border-bottom: 1px solid #e3e4ef;
background-color: #f9fafc;
.left {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
height: 100%;
.approve_person {
display: inline-block;
width: 98px;
font-size: 14px;
font-weight: 600;
color: #242c43;
}
.approve_status {
display: inline-block;
width: 46px;
height: 18px;
font-size: 12px;
text-align: center;
color: #e56600;
background-color: #fcf0e6;
border-radius: 3px;
border: solid 1px #f2b380;
}
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
width: 210px;
height: 100%;
font-size: 14px;
color: #7784a6;
.value {
color: #242c43;
}
}
}
.approveForm {
padding: 24px 24px 0 24px;
::v-deep .el-form-item {
margin-bottom: 24px;
}
::v-deep .el-form-item__label,
::v-deep .el-radio__label {
color: var(--el-text-color-primary);
}
}
}
.operate_btns {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
padding-right: 16px;
line-height: 64px;
text-align: right;
border-top: solid 1px #e6e9ef;
.el-button {
width: 92px;
& + .el-button {
margin-left: 16px;
}
}
}
}
</style>
src/page/main/develop/systemApproval/detail/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="page_content">
<bg-form-gap title="注册信息"></bg-form-gap>
<bg-detail-table2 class="register_info" :list="instanceData.applyBasicInfo">
<template v-slot:approvalStatus="{ data }">
<p class="detail-module">
<span>{{ data.label }}</span>
<span>{{ data.value }}</span>
</p>
</template>
</bg-detail-table2>
<bg-form-gap title="审批信息"></bg-form-gap>
<bg-detail-table2 class="approve_info" :list="instanceData.approveInfo">
<template v-slot:applyOrganization="{ data }">
<p class="detail-module">
<span>{{ data.label }}</span>
<span>{{ data.value }}</span>
</p>
</template>
</bg-detail-table2>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const instanceData = reactive({
applyBasicInfo: [
{
key: "approval_status",
label: "所属机构",
value: "1",
slot: "approvalStatus",
},
{
key: "apply_time",
label: "业务系统名称",
value: "",
},
{
key: "apply_organization",
label: "账号",
value: "",
},
{
key: "business_name",
label: "手机号",
value: "",
},
{
key: "contact_person",
label: "开发厂商名称",
value: "",
},
{
key: "contact_phone",
label: "提交时间",
value: "",
},
{
key: "contact_person",
label: "联系人",
value: "",
},
{
key: "contact_phone",
label: "联系人手机号",
value: "",
},
{
key: "apply_application",
label: "业务系统描述",
value: "",
},
],
approveInfo: [
{
key: "apply_organization",
label: "审核状态",
value: "",
slot: "applyOrganization",
},
{
key: "business_name",
label: "审核人",
value: "",
},
{
key: "apply_organization",
label: "审批时间",
value: "",
},
{
key: "business_name",
label: "审批意见",
value: "",
},
],
});
</script>
<style lang="scss" scoped>
.page_content {
position: relative;
padding: 24px 0 68px 24px;
.register_info,
.approve_info {
margin-bottom: 24px;
width: 960px;
}
}
</style>
src/page/main/develop/systemApproval/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入业务系统名称、账号或所属机构">
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">审批状态</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">提交时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="approve(row)">审批</bg-table-btn>
<bg-table-btn @click="approveDetail(row)">审批详情</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box" title="删除" v-model="dialogDelete" width="400px">
<div style="text-align: left">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确定要删除数据吗？数据删除后不能恢复，请谨慎操作
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog class="dialog_box" title="提示" v-model="cacheDialog" width="400px">
<div style="font-size: 16px; color: #404a62">你有未提交的服务，是否继续编辑该服务？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelCache">取 消</el-button>
<el-button type="primary" @click="confirmCache">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import store from "@/store";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const state = reactive({
filter: {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
},
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "已上架",
value: "1",
},
{
name: "已下架",
value: "2",
},
{
name: "上架中",
value: "3",
},
{
name: "下架中",
value: "4",
},
{
name: "待上架",
value: "0",
},
],
headers: [
{
label: "业务系统名称",
prop: "ability_name",
minWidth: 280,
},
{
label: "账号",
prop: "synopsis",
minWidth: 360,
},
{
label: "所属机构",
prop: "created_time",
width: 200,
},
{
label: "审批状态",
prop: "ability_state",
width: 120,
},
{
label: "提交时间",
prop: "ability_state",
width: 120,
},
{
label: "操作",
prop: "action",
width: 270,
fixed: "right",
},
],
tableRows: [],
tableTotal: 0,
actionRow: {},
dialogDelete: false,
cacheDialog: false,
});
const { filter, stateOptions, headers, tableRows, tableTotal, dialogDelete, cacheDialog } = toRefs(state);
// 认证方案未确定，暂时使用假数据registerValid，后续更改
const registerValid = computed(() => {
return store.state.registerValid;
});
const register = () => {
// 请求认证校验接口
// 未认证跳转认证页"/ability-register/add/valid"
// 认证状态取用store中的registerValid，接口未出 暂时做假数据
console.log("跳转能力注册页");
// if (!registerValid.value) {
// router.push({
// path: "/ability-register/add/valid",
// query: {
// abilityType: 0,
// },
// });
// } else {
// 已认证情况
// 1.请求缓存接口看是否有缓存，有则显示弹窗，没有则直接跳转注册页"/ability-register/add"
axios.get(`/apaas/service/v5/ability/get/cach`).then((res) => {
if (res.data.code == 200) {
if (res.data.data) {
// 有缓存打开弹窗
state.cacheDialog = true;
} else {
// 无缓存
router.push("/ability-register/add");
}
}
});
// }
};
const cancelCache = () => {
axios
.get(`/apaas/service/v5/ability/clear/cach?abilityType=0`)
.then((res) => {
if (res.data.code == 200) {
state.cacheDialog = false;
router.push("/ability-register/add");
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
router.push("/ability-register/add");
});
}; // 取消按钮，清空缓存跳转注册页
const confirmCache = () => {
state.cacheDialog = false;
router.push("/ability-register/add");
}; // 确定按钮，直接跳转注册页
const changeSearch = (val) => {
state.filter.keyword = val;
changePage(1);
};
const changePage = (page) => {
state.filter.page = page;
getTableRows();
};
const getTableRows = () => {
let params = { ...state.filter };
params.registerStartTime = params.time ? params.time[0] || "" : "";
params.registerEndTime = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/service/v5/ability/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
};
const filterAction = () => {
changePage(1);
};
const changeSize = (size) => {
state.filter.size = size;
changePage(1);
};
const filterClear = () => {
state.filter = {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
};
changePage(1);
};
const approve = (row) => {
router.push(`/develop/systemApproval/approval`);
};
const approveDetail = (row) => {
router.push(`/develop/systemApproval/detail`);
};
const deleteData = () => {
console.log(state.actionRow.id);
axios.delete(`/apaas/service/v5/ability/${state.actionRow.id}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.dialogDelete = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
};
const goDetail = (row) => {
router.push({
path: "/ability-manage/real-list/detail",
query: {
id: row.id,
},
});
};
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.circle {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
margin-right: 8px;
transform: translateY(-2px);
}
.bgc_1 {
background-color: #48ad97;
}
.bgc_2 {
background-color: #d75138;
}
.bgc_3 {
background-color: #3759be;
}
.bgc_4 {
background-color: #ea7d19;
}
.bgc_0 {
background-color: #9e9e9e;
}
.mock_tip {
display: inline-block;
margin-left: 4px;
width: 43px;
height: 20px;
font-size: 12px;
color: #2b4695;
text-align: center;
background-color: #eff2fa;
border-radius: 3px;
border: solid 1px #b0bee8;
}
}
}
}
}
</style>
src/page/main/log/system/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="flex_row">
<div class="flex_left">
<div class="box">
<el-date-picker style="width: 100%" type="date" placeholder="请选择日期" />
<div class="type_station bg-scroll">
<div
class="type-box"
:class="{ 'current-type': nodeClassifyId == item.classify_id }"
@click="nodeClick(item)"
v-for="(item, index) in typeList"
:key="'type' + index + 200">
{{ item.classify_name }}
</div>
</div>
</div>
</div>
<div class="flex_right">
<div class="form-filter">
<el-form inline>
<el-form-item label="级别" prop="force">
<el-select placeholder="全部" style="width: 160px">
<el-option label="选项1" value="1"> </el-option>
<el-option label="选项2" value="2"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字" prop="force">
<el-input placeholder="请输入" maxlength="100" style="width: 240px"></el-input>
</el-form-item>
</el-form>
<div class="operate_btns">
<el-button type="primary"> 查询 </el-button>
<el-button type="default"> 重置 </el-button>
</div>
</div>
<div class="search-result"></div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "../../../../request/http.js";
import { Search } from "@element-plus/icons-vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const bgForm = ref(null);
const state = reactive({
bgForm,
typeList: [], // 分类数据
typeKeyword: "", // 分类删选关键词
nodeClassifyId: null, // 当前选中分类的uuid 用于新增字典
nodeId: null, // 当前选中分类的id 用于请求列表
timer: null, // 定时器
headers: [
{
label: "名称",
prop: "name",
},
{
label: "描述",
prop: "describe",
minWidth: 360,
},
{
label: "更新时间",
prop: "updated_time",
width: 220,
},
{
label: "是否启用",
prop: "state",
},
{
label: "操作",
prop: "action",
width: 176,
fixed: "right",
},
], // 表格数据表头
tableRows: [], // 表格数据
tableTotal: 0, // 表格数据条数
filter: {
state: "",
search: "",
page: 1,
limit: 10,
}, // 表格筛选项
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "启用",
value: "1",
},
{
name: "禁用",
value: "0",
},
], // 启用禁用
actionRow: null, // 当前操作的数据
dialogDelete: false, // 删除弹窗
addType: 0, //
addDialog: false,
formData: {
name: "",
describe: "",
state: 1,
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
describe: [
{ required: true, message: "请输入描述", trigger: "blur" },
{ max: 200, message: "描述最大为200字", trigger: "blur" },
],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
},
});
const nodeClick = (item) => {
state.nodeId = item.id;
state.nodeClassifyId = item.classify_id;
state.filter = {
state: "",
search: "",
page: 1,
limit: 10,
};
changePage(1);
}; // 切换字典分类
const getTypeList = () => {
let params = {
name: state.typeKeyword,
};
axios
.get(`/apaas/system/v5/dictionary/classify/list`, { params })
.then((res) => {
if (res.data.code == 200) {
state.typeList = res.data.data || [];
state.nodeClassifyId = state.typeList[0].classify_id || null;
state.nodeId = state.typeList[0].id || null;
if (state.nodeId) {
getTableRows();
}
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
}; // 获取字典分类
const changeSearch = (val) => {
state.filter.search = val;
changePage(1);
}; // 表格关键字筛选
const filterAction = () => {
changePage(1);
}; // 查询按钮
const filterClear = () => {
state.filter = {
state: "",
search: "",
limit: 10,
page: 1,
};
changePage(1);
}; // 重置筛选项
const getTableRows = () => {
let params = { ...state.filter };
params.id = state.nodeId;
axios
.get(`/apaas/system/v5/dictionary/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
if (state.tableRows.length > 0) {
state.tableRows.forEach((e) => {
e.canMoveUp = true;
e.canMoveDown = true;
});
state.tableRows[0].canMoveUp = false;
state.tableRows[state.tableRows.length - 1].canMoveDown = false;
}
} else {
ElMessage.error(res.data.data);
}
});
}; // 获取表格数据
const changeUseRow = (row) => {
axios.put(`/apaas/system/v5/dictionary/state?id=${row.id}&state=${row.state}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
changePage(1);
} else {
ElMessage.error(res.data.data);
row.state = row.state == 0 ? 1 : 0;
}
});
}; // 启用禁用
const changePage = (page) => {
state.filter.page = page;
getTableRows();
}; // 改变页码
const changeSize = (size) => {
state.filter.limit = size;
changePage(1);
}; // 改变每页条数
const register = () => {
state.formData = {
name: "",
describe: "",
state: 1,
};
if (state.bgForm) {
nextTick().then(() => {
state.bgForm.validate((valid) => {
if (!valid) {
state.bgForm.clearValidate();
}
});
});
}
state.addType = 1;
state.addDialog = true;
}; // 新增字典按钮
const edit_row = (row) => {
axios
.get(`/apaas/system/v5/dictionary/${row.id}`)
.then((res) => {
if (res.data.code == 200) {
state.actionRow = res.data.data;
state.formData = {
name: state.actionRow.name,
describe: state.actionRow.describe,
state: state.actionRow.state,
};
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
if (state.bgForm) {
nextTick().then(() => {
state.bgForm.validate((valid) => {
if (!valid) {
state.bgForm.clearValidate();
}
});
});
}
state.addType = 2;
state.addDialog = true;
}; // 编辑按钮
const addConfirm = () => {
state.bgForm.validate((valid) => {
if (valid) {
if (state.addType == 1) {
// 新增
let params = {
classify_id: state.nodeClassifyId,
...state.formData,
};
axios.post(`/apaas/system/v5/dictionary/add`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.addDialog = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
} else {
// 编辑
let params = {
id: state.actionRow.id,
...state.formData,
};
axios.put(`/apaas/system/v5/dictionary/update`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.addDialog = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
}
}
});
}; // 确定新增/编辑
const delete_row = (row) => {
state.dialogDelete = true;
state.actionRow = row;
}; // 删除按钮
const deleteData = () => {
axios.delete(`/apaas/system/v5/dictionary/${state.actionRow.id}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.dialogDelete = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
}; // 确定删除
const moveRow = (row, type) => {
let index;
state.tableRows.forEach((e, i) => {
if (e.id == row.id) {
index = i;
}
});
let nextRow;
if (type == 1) {
// 上移
nextRow = state.tableRows[index - 1];
} else {
// 下移
nextRow = state.tableRows[index + 1];
}
let params = [
{
id: row.id,
sort: nextRow.sort,
},
{
id: nextRow.id,
sort: row.sort,
},
];
axios
.put(`/apaas/system/v5/dictionary/sort`, [...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
changePage(1);
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
};
onBeforeMount(() => {
getTypeList();
});
const { typeList, typeKeyword, nodeClassifyId, headers, tableRows, tableTotal, filter, stateOptions } = toRefs(state);
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
height: calc(100vh - 56px);
padding: 0 24px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.flex_row {
// flex-grow: 1;
width: 100%;
display: flex;
margin-bottom: 16px;
position: relative;
height: calc(100% - 62px);
.flex_left {
width: 240px;
background-color: #fff;
margin-right: 16px;
border-radius: 6px;
padding: 16px;
height: 100%;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
overflow: hidden;
.box {
width: 208px;
height: 100%;
overflow: hidden;
.type_station {
width: 100%;
margin-top: 16px;
height: calc(100% - 50px);
.type-box {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
color: #404a62;
cursor: pointer;
&:hover {
background-color: #f2f3f7;
}
}
.current-type {
background-color: #f2f3f7;
border-radius: 4px;
}
}
}
}
.flex_right {
flex: 1;
height: 100%;
.form-filter {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
height: 68px;
width: 100%;
padding: 16px 16px 16px 24px;
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
.el-form {
width: calc(100% - 144px);
}
.el-form-item {
margin-bottom: 0px;
}
.operate_btns {
width: 144px;
}
}
.search-result {
width: 100%;
height: calc(100% - 84px);
background-color: #1a1a1a;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px;
}
}
}
}
</style>
src/page/main/log/userAccount/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入账号、手机号和所属机构">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="addRule">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-file-send"></bg-icon>
导出
</el-button>
<el-button @click="deleteBatch"> 强制修改密码 </el-button>
<span class="sleceted_tip">已选<span class="num">3</span>项</span>
<span class="clean" @click="cleanSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">用户类型</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">上次访问时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
<div class="filter_item">
<span class="filter_title">活跃度</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">密码强度</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :stripe="true" select>
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:start_use="{ row }">
<el-switch></el-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="edit(row)">编辑</bg-table-btn>
<bg-table-btn @click="deleteCurrent(row)">删除</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box_detail" title="用户详情" v-model="dialogDetail" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
<el-select placeholder="全部类型" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-select placeholder="请选择所属组织" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-input placeholder="请输入关键词" style="width: 200px; margin-left: 16px" :prefix-icon="Search" />
</div>
<div class="right">
<el-button type="primary" @click="cancelCache">查询</el-button>
<el-button type="default" @click="confirmCache">重置</el-button>
</div>
</div>
<div class="table_content">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="430" :stripe="true">
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="approve(row)">审批</bg-table-btn>
<bg-table-btn @click="approveDetail(row)">审批详情</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
</el-dialog>
<el-dialog class="dialog_box" title="提示" v-model="cacheDialog" width="400px">
<div style="font-size: 16px; color: #404a62">你有未提交的服务，是否继续编辑该服务？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelCache">取 消</el-button>
<el-button type="primary" @click="confirmCache">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import store from "@/store";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const state = reactive({
filter: {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
},
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "已上架",
value: "1",
},
{
name: "已下架",
value: "2",
},
{
name: "上架中",
value: "3",
},
{
name: "下架中",
value: "4",
},
{
name: "待上架",
value: "0",
},
],
headers: [
{
label: "账号",
prop: "ability_name",
// minWidth: 280,
},
{
label: "手机号",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户类型",
prop: "created_time",
// width: 200,
},
{
label: "所属机构",
prop: "ability_state",
// width: 120,
},
{
label: "活跃度",
prop: "start_use",
// width: 120,
},
{
label: "密码强度",
prop: "ability_state",
width: 240,
},
{
label: "密码使用时常（天）",
prop: "ability_state",
width: 240,
},
{
label: "创建时间",
prop: "ability_state",
width: 240,
},
],
detailHeaders: [
{
label: "账号",
prop: "ability_name",
// minWidth: 280,
},
{
label: "类型",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户手机号",
prop: "created_time",
// width: 200,
},
{
label: "所属组织",
prop: "ability_state",
// width: 120,
},
],
tableRows: [],
tableTotal: 0,
actionRow: {},
dialogDetail: false,
cacheDialog: false,
});
const { filter, stateOptions, headers, detailHeaders, tableRows, tableTotal, dialogDetail, cacheDialog } =
toRefs(state);
// 认证方案未确定，暂时使用假数据registerValid，后续更改
const registerValid = computed(() => {
return store.state.registerValid;
});
//新增
const addRule = () => {
router.push("/develop/menu/add");
};
//批量删除
const deleteBatch = () => {};
//清空
const cleanSelected = () => {};
const cancelCache = () => {
axios
.get(`/apaas/service/v5/ability/clear/cach?abilityType=0`)
.then((res) => {
if (res.data.code == 200) {
state.cacheDialog = false;
router.push("/ability-register/add");
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
router.push("/ability-register/add");
});
}; // 取消按钮，清空缓存跳转注册页
const confirmCache = () => {
state.cacheDialog = false;
router.push("/ability-register/add");
}; // 确定按钮，直接跳转注册页
const changeSearch = (val) => {
state.filter.keyword = val;
changePage(1);
};
const changePage = (page) => {
state.filter.page = page;
getTableRows();
};
const getTableRows = () => {
let params = { ...state.filter };
params.registerStartTime = params.time ? params.time[0] || "" : "";
params.registerEndTime = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/service/v5/ability/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
};
const filterAction = () => {
changePage(1);
};
const changeSize = (size) => {
state.filter.size = size;
changePage(1);
};
const filterClear = () => {
state.filter = {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
};
changePage(1);
};
//编辑
const edit = (row) => {
state.dialogDetail = true;
// router.push(`/develop/account/add`);
};
//删除
const deleteCurrent = (row) => {
router.push(`/develop/account/detail`);
};
const goDetail = (row) => {
router.push({
path: "/ability-manage/real-list/detail",
query: {
id: row.id,
},
});
};
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.sleceted_tip {
margin: 0 24px 0 40px;
vertical-align: middle;
font-size: 14px;
color: #404a62;
.num {
margin: 0 3px 0 3px;
font-weight: 600;
color: #202531;
}
}
.clean {
vertical-align: middle;
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.circle {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
margin-right: 8px;
transform: translateY(-2px);
}
.bgc_1 {
background-color: #48ad97;
}
.bgc_2 {
background-color: #d75138;
}
.bgc_3 {
background-color: #3759be;
}
.bgc_4 {
background-color: #ea7d19;
}
.bgc_0 {
background-color: #9e9e9e;
}
.mock_tip {
display: inline-block;
margin-left: 4px;
width: 43px;
height: 20px;
font-size: 12px;
color: #2b4695;
text-align: center;
background-color: #eff2fa;
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
height: 20px;
min-width: 44px;
}
}
}
}
}
::v-deep .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
}
.form_filter {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
border-bottom: 1px solid #e6e9ef;
.right {
margin-right: 16px;
.el-button {
width: 64px;
&:last-child {
margin-left: 16px;
}
}
}
}
.table_content {
padding: 0 16px;
}
}
}
</style>
src/page/main/log/userBehavior/index.vue 0 → 100644
View file @ e7452102
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.keyword" placeholder="请输入账号、手机号和所属机构">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="addRule">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-file-send"></bg-icon>
导出
</el-button>
<el-button @click="deleteBatch"> 强制修改密码 </el-button>
<span class="sleceted_tip">已选<span class="num">3</span>项</span>
<span class="clean" @click="cleanSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">用户类型</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">上次访问时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
<div class="filter_item">
<span class="filter_title">活跃度</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">密码强度</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :stripe="true" select>
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:start_use="{ row }">
<el-switch></el-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="edit(row)">编辑</bg-table-btn>
<bg-table-btn @click="deleteCurrent(row)">删除</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box_detail" title="用户详情" v-model="dialogDetail" width="1062px">
<div class="content_detail">
<div class="form_filter">
<div class="left">
<el-select placeholder="全部类型" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-select placeholder="请选择所属组织" style="width: 200px; margin-left: 16px">
<el-option label="选共享1" value="1"> </el-option>
<el-option label="选共享2" value="2"> </el-option>
</el-select>
<el-input placeholder="请输入关键词" style="width: 200px; margin-left: 16px" :prefix-icon="Search" />
</div>
<div class="right">
<el-button type="primary" @click="cancelCache">查询</el-button>
<el-button type="default" @click="confirmCache">重置</el-button>
</div>
</div>
<div class="table_content">
<bg-table ref="bgTable" :headers="detailHeaders" :rows="tableRows" height="430" :stripe="true">
<template v-slot:ability_name="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.ability_name }}
<span v-if="row.include_mock_service" class="mock_tip"> mock </span>
</span>
</template>
<template v-slot:ability_state="{ row }">
<span class="circle" :class="'bgc_' + row.ability_state"></span>
{{ ["待上架", "已上架", "已下架", "上架中", "下架中"][row.ability_state] }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :key="row.id">
<bg-table-btn @click="approve(row)">审批</bg-table-btn>
<bg-table-btn @click="approveDetail(row)">审批详情</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
</el-dialog>
<el-dialog class="dialog_box" title="提示" v-model="cacheDialog" width="400px">
<div style="font-size: 16px; color: #404a62">你有未提交的服务，是否继续编辑该服务？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelCache">取 消</el-button>
<el-button type="primary" @click="confirmCache">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, computed, onBeforeMount } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import store from "@/store";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const state = reactive({
filter: {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
},
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "已上架",
value: "1",
},
{
name: "已下架",
value: "2",
},
{
name: "上架中",
value: "3",
},
{
name: "下架中",
value: "4",
},
{
name: "待上架",
value: "0",
},
],
headers: [
{
label: "账号",
prop: "ability_name",
// minWidth: 280,
},
{
label: "手机号",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户类型",
prop: "created_time",
// width: 200,
},
{
label: "所属机构",
prop: "ability_state",
// width: 120,
},
{
label: "活跃度",
prop: "start_use",
// width: 120,
},
{
label: "密码强度",
prop: "ability_state",
width: 240,
},
{
label: "密码使用时常（天）",
prop: "ability_state",
width: 240,
},
{
label: "创建时间",
prop: "ability_state",
width: 240,
},
],
detailHeaders: [
{
label: "账号",
prop: "ability_name",
// minWidth: 280,
},
{
label: "类型",
prop: "synopsis",
// minWidth: 360,
},
{
label: "用户手机号",
prop: "created_time",
// width: 200,
},
{
label: "所属组织",
prop: "ability_state",
// width: 120,
},
],
tableRows: [],
tableTotal: 0,
actionRow: {},
dialogDetail: false,
cacheDialog: false,
});
const { filter, stateOptions, headers, detailHeaders, tableRows, tableTotal, dialogDetail, cacheDialog } =
toRefs(state);
// 认证方案未确定，暂时使用假数据registerValid，后续更改
const registerValid = computed(() => {
return store.state.registerValid;
});
//新增
const addRule = () => {
router.push("/develop/menu/add");
};
//批量删除
const deleteBatch = () => {};
//清空
const cleanSelected = () => {};
const cancelCache = () => {
axios
.get(`/apaas/service/v5/ability/clear/cach?abilityType=0`)
.then((res) => {
if (res.data.code == 200) {
state.cacheDialog = false;
router.push("/ability-register/add");
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
router.push("/ability-register/add");
});
}; // 取消按钮，清空缓存跳转注册页
const confirmCache = () => {
state.cacheDialog = false;
router.push("/ability-register/add");
}; // 确定按钮，直接跳转注册页
const changeSearch = (val) => {
state.filter.keyword = val;
changePage(1);
};
const changePage = (page) => {
state.filter.page = page;
getTableRows();
};
const getTableRows = () => {
let params = { ...state.filter };
params.registerStartTime = params.time ? params.time[0] || "" : "";
params.registerEndTime = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/service/v5/ability/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
};
const filterAction = () => {
changePage(1);
};
const changeSize = (size) => {
state.filter.size = size;
changePage(1);
};
const filterClear = () => {
state.filter = {
state: "",
keyword: "",
page: 1,
size: 10,
abilityType: 0,
time: [],
};
changePage(1);
};
//编辑
const edit = (row) => {
state.dialogDetail = true;
// router.push(`/develop/account/add`);
};
//删除
const deleteCurrent = (row) => {
router.push(`/develop/account/detail`);
};
const goDetail = (row) => {
router.push({
path: "/ability-manage/real-list/detail",
query: {
id: row.id,
},
});
};
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.sleceted_tip {
margin: 0 24px 0 40px;
vertical-align: middle;
font-size: 14px;
color: #404a62;
.num {
margin: 0 3px 0 3px;
font-weight: 600;
color: #202531;
}
}
.clean {
vertical-align: middle;
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.circle {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
margin-right: 8px;
transform: translateY(-2px);
}
.bgc_1 {
background-color: #48ad97;
}
.bgc_2 {
background-color: #d75138;
}
.bgc_3 {
background-color: #3759be;
}
.bgc_4 {
background-color: #ea7d19;
}
.bgc_0 {
background-color: #9e9e9e;
}
.mock_tip {
display: inline-block;
margin-left: 4px;
width: 43px;
height: 20px;
font-size: 12px;
color: #2b4695;
text-align: center;
background-color: #eff2fa;
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
height: 20px;
min-width: 44px;
}
}
}
}
}
::v-deep .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
}
.form_filter {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
border-bottom: 1px solid #e6e9ef;
.right {
margin-right: 16px;
.el-button {
width: 64px;
&:last-child {
margin-left: 16px;
}
}
}
}
.table_content {
padding: 0 16px;
}
}
}
</style>
src/router/function.js
View file @ e7452102
...@@ -100,7 +100,7 @@ var adminMenu = [ ...@@ -100,7 +100,7 @@ var adminMenu = [
dict_group_id: "64c156e0-bfff-4bfc-a63a-56effe130a25", dict_group_id: "64c156e0-bfff-4bfc-a63a-56effe130a25",
menuType: 2, menuType: 2,
}, },
] ],
}, },
], ],
dict_group_id: "64c156e0-bfff-4bfc-a63a-56effe130a25", dict_group_id: "64c156e0-bfff-4bfc-a63a-56effe130a25",
...@@ -169,7 +169,7 @@ var adminMenu = [ ...@@ -169,7 +169,7 @@ var adminMenu = [
dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d", dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d",
menuType: 1, //system:64c156e0-bfff-4bfc-a63a-56effe130a25:apaas后管,能力注册页等 font:2cb4f767-fad7-44f2-afa3-f055e15dd2b6:apaas前台页 manager:09938937-3db9-47de-b967-7777ea4ebb2d:apaas管理中心 知识中心：26d3903a-863e-4efc-b53e-0fb8772ddaa4 menuType: 1, //system:64c156e0-bfff-4bfc-a63a-56effe130a25:apaas后管,能力注册页等 font:2cb4f767-fad7-44f2-afa3-f055e15dd2b6:apaas前台页 manager:09938937-3db9-47de-b967-7777ea4ebb2d:apaas管理中心 知识中心：26d3903a-863e-4efc-b53e-0fb8772ddaa4
path: "/system/organization", path: "/system/organization",
children:[ children: [
{ {
menuName: "新增平台用户", menuName: "新增平台用户",
dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d", dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d",
...@@ -198,27 +198,27 @@ var adminMenu = [ ...@@ -198,27 +198,27 @@ var adminMenu = [
show: false, show: false,
path: "/system/organization/org-detail", path: "/system/organization/org-detail",
}, },
] ],
}, },
{ {
menuName: "角色管理", menuName: "角色管理",
dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d", dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d",
menuType: 1, //system:64c156e0-bfff-4bfc-a63a-56effe130a25:apaas后管,能力注册页等 font:2cb4f767-fad7-44f2-afa3-f055e15dd2b6:apaas前台页 manager:09938937-3db9-47de-b967-7777ea4ebb2d:apaas管理中心 知识中心：26d3903a-863e-4efc-b53e-0fb8772ddaa4 menuType: 1, //system:64c156e0-bfff-4bfc-a63a-56effe130a25:apaas后管,能力注册页等 font:2cb4f767-fad7-44f2-afa3-f055e15dd2b6:apaas前台页 manager:09938937-3db9-47de-b967-7777ea4ebb2d:apaas管理中心 知识中心：26d3903a-863e-4efc-b53e-0fb8772ddaa4
path: "/system/role", path: "/system/role",
children:[ children: [
{ {
menuName:'新增角色', menuName: "新增角色",
menuType:2, menuType: 2,
dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d", dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d",
path: "/system/role/add", path: "/system/role/add",
}, },
{ {
menuName:'编辑角色', menuName: "编辑角色",
menuType:2, menuType: 2,
dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d", dict_group_id: "09938937-3db9-47de-b967-7777ea4ebb2d",
path: "/system/role/edit", path: "/system/role/edit",
}, },
] ],
}, },
], ],
}, },
...@@ -241,13 +241,13 @@ var adminMenu = [ ...@@ -241,13 +241,13 @@ var adminMenu = [
}, },
]; ];
function getName(str){ function getName(str) {
if(str=='/'){ if (str == "/") {
return 'index' return "index";
} }
let temp = str.slice(1) let temp = str.slice(1);
temp = temp.replaceAll('/','-') temp = temp.replaceAll("/", "-");
return temp return temp;
} }
function getViews(path) { function getViews(path) {
...@@ -271,14 +271,13 @@ function getViews(path) { ...@@ -271,14 +271,13 @@ function getViews(path) {
break; break;
} }
// 然后动态路由的时候这样来取 // 然后动态路由的时候这样来取
console.log(modules["../page/main" + path + "/index.vue"]);
return modules["../page/main" + path + "/index.vue"]; return modules["../page/main" + path + "/index.vue"];
} }
//处理路由方法 //处理路由方法
var menuToRouter = (menu) => { var menuToRouter = (menu) => {
menu.forEach((e) => { menu.forEach((e) => {
e.name = getName(e.path) e.name = getName(e.path);
if (e.children && e.menuType == 0) { if (e.children && e.menuType == 0) {
// 其他层级作为文件夹，只提供父级 // 其他层级作为文件夹，只提供父级
e.component = () => import("../page/parent/parent.vue"); e.component = () => import("../page/parent/parent.vue");
...@@ -286,28 +285,25 @@ var menuToRouter = (menu) => { ...@@ -286,28 +285,25 @@ var menuToRouter = (menu) => {
} else if (e.children && e.menuType !== 0) { } else if (e.children && e.menuType !== 0) {
//叶子层级需要加载到对应文件 //叶子层级需要加载到对应文件
//对首页做兼容 //对首页做兼容
if(e.source){ if (e.source) {
console.log(`@/page/main${e.source}/index.vue`);
e.component = getViews(e.source); e.component = getViews(e.source);
}else{ } else {
console.log(`@/page/main${e.path}/index.vue`);
e.component = getViews(e.path); e.component = getViews(e.path);
} }
menuToRouter(e.children); menuToRouter(e.children);
} else { } else {
console.log(`@/page/main${e.path}/index.vue`);
//叶子层级需要加载到对应文件 //叶子层级需要加载到对应文件
//对首页做兼容 //对首页做兼容
if (e.path == "/") { if (e.path == "/") {
if(e.source){ if (e.source) {
e.component = () => import(`../page/main/${e.source}/index.vue`); e.component = () => import(`../page/main/${e.source}/index.vue`);
}else{ } else {
e.component = () => import("../page/main/index/index.vue"); e.component = () => import("../page/main/index/index.vue");
} }
} else { } else {
if(e.source){ if (e.source) {
e.component = getViews(e.source); e.component = getViews(e.source);
}else{ } else {
e.component = getViews(e.path); e.component = getViews(e.path);
} }
} }
......
src/router/index.js
View file @ e7452102
//路由前端原则可以不写，但是需要在recorder中记录，防止以后忘记 //路由前端原则可以不写，但是需要在recorder中记录，防止以后忘记
//不用新增父路由的文件，父路由全部由parent/parent.vue来支撑 //不用新增父路由的文件，父路由全部由parent/parent.vue来支撑
import {createRouter, createWebHashHistory} from "vue-router"; import { createRouter, createWebHashHistory } from "vue-router";
import store from '../store' import store from "../store";
//写入初始必须有的路由 //写入初始必须有的路由
//或者隐藏式路由，不会表现在菜单上，但是需要存在的路由 //或者隐藏式路由，不会表现在菜单上，但是需要存在的路由
const routes = [ const routes = [
{ {
path: '/login', path: "/login",
name: 'login', name: "login",
show:true, show: true,
component: () => import('../page/login/index.vue') component: () => import("../page/login/index.vue"),
}, },
{ {
path: '/', path: "/",
name: 'index', name: "index",
component: () => import('../page/welcom.vue'), component: () => import("../page/welcom.vue"),
}, },
{ {
path: '/404', path: "/404",
show:true, show: true,
component: () => import('../page/404.vue') component: () => import("../page/404.vue"),
}, },
] ];
//重新创建router //重新创建router
function newRouterFunc(){ function newRouterFunc() {
return createRouter({ return createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes routes,
}); });
} }
const router = newRouterFunc() const router = newRouterFunc();
function inWhiteList(toPath) { function inWhiteList(toPath) {
//配置白名单 //配置白名单
const whiteList = ['/login'] const whiteList = ["/login"];
const path = whiteList.find((value) => { const path = whiteList.find((value) => {
// 使用正则匹配 // 使用正则匹配
const reg = new RegExp('^' + value) const reg = new RegExp("^" + value);
return reg.test(toPath) return reg.test(toPath);
}) });
return !!path return !!path;
} }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const userInfo = store.state.userInfo;
const userInfo = store.state.userInfo
console.log(store.state.route); console.log(store.state.route);
//已登录不可跳转登陆页 //已登录不可跳转登陆页
if(userInfo&&(to.path=='/login'||to.path=='/')){ if (userInfo && (to.path == "/login" || to.path == "/")) {
next({path:'/develop/account'}) next({ path: "/develop/account" });
} }
// 检查to.path是否存在于免登陆白名单 // 检查to.path是否存在于免登陆白名单
if (inWhiteList(to.path)) { if (inWhiteList(to.path)) {
next() next();
} else { } else {
// 判断是否已经登录，未登录则重定向到首页或其他页面（通过query传参记录原来的路径） // 判断是否已经登录，未登录则重定向到首页或其他页面（通过query传参记录原来的路径）
// 根据配置判断是否跳转第三方登录，跳转第三方登录则不跳login // 根据配置判断是否跳转第三方登录，跳转第三方登录则不跳login
// axios封装中也需要对是否登录过期进行判断，如果登录过期，则跳转登录页，具体跳转地址根据配置来· // axios封装中也需要对是否登录过期进行判断，如果登录过期，则跳转登录页，具体跳转地址根据配置来·
if (!userInfo) { if (!userInfo) {
next({ next({
path: '/login', path: "/login",
}) });
} else { } else {
} }
} }
//判读是否匹配，否则跳转404 //判读是否匹配，否则跳转404
if (to.matched.length !== 0) { if (to.matched.length !== 0) {
next() next();
} else { } else {
return next({ path: '/404' }) return next({ path: "/404" });
} }
}) });
// 在路由完成初始导航时调用，如果有异步操作放置到这里 // 在路由完成初始导航时调用，如果有异步操作放置到这里
// 请求相应的角色和菜单 // 请求相应的角色和菜单
// router.onReady(() => { // router.onReady(() => {
// generateRoutes() // generateRoutes()
// }) // })
function addRoute(router,routers){ function addRoute(router, routers) {
routers.forEach(e => { routers.forEach((e) => {
if(e.path[0]=='/'){ if (e.path[0] == "/") {
router.addRoute(e) router.addRoute(e);
if(e.children&&e.children.length){ if (e.children && e.children.length) {
addRoute(router,e.children) addRoute(router, e.children);
} }
} }
}); });
} }
export function generateRoutes() { export function generateRoutes() {
const _asyncRoutes = store.state.route const _asyncRoutes = store.state.route;
if (_asyncRoutes) { if (_asyncRoutes) {
//动态添加路由 //动态添加路由
addRoute(router,_asyncRoutes) addRoute(router, _asyncRoutes);
} }
router.addRoute( router.addRoute({
{ path: "/:pathMatch(.*)",
path: '/:pathMatch(.*)', redirect: "/404",
redirect: '/404' });
}
)
console.log(router.getRoutes()); console.log(router.getRoutes());
} }
//新创建一个router替代之前的router，并把matcher方法替换成新的router的matcher //新创建一个router替代之前的router，并把matcher方法替换成新的router的matcher
export function resetRouter() { export function resetRouter() {
const newRouter = newRouterFunc() const newRouter = newRouterFunc();
router.matcher = newRouter.matcher router.matcher = newRouter.matcher;
} }
export default router;
export default router
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment