TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-04 00:10:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 小功能优化&前端基于setup语法糖重构

Browse Source
This commit is contained in:
meilin.huang
2022-10-29 20:08:15 +08:00
parent 812c0d0f6a
commit b028708b94
147 changed files with 9177 additions and 10035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
mayfly_go_web/src/components/jsonedit/index.vue
View File

@@ -4,126 +4,119 @@
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, nextTick, watch, onMounted, onUnmounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, nextTick, watch, onMounted, onUnmounted } from 'vue';
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';
export default defineComponent({
name: 'JsonEdit',
components: {},
props: {
modelValue: {
type: [String, Object],
},
height: {
type: String,
default: '500px',
},
width: {
type: String,
default: 'auto',
},
options: {
type: Object,
default: null,
},
currentMode: {
type: String,
default: 'tree',
},
modeList: {
type: Array,
default() {
return ['tree', 'code', 'form', 'text', 'view'];
},
const props = defineProps({
modelValue: {
type: [String, Object],
},
height: {
type: String,
default: '500px',
},
width: {
type: String,
default: 'auto',
},
options: {
type: Object,
default: null,
},
currentMode: {
type: String,
default: 'tree',
},
modeList: {
type: Array,
default() {
return ['tree', 'code', 'form', 'text', 'view'];
},
},
setup(props: any, { emit }) {
let { modelValue, options, modeList, currentMode } = toRefs(props);
})
const jsoneditorVue = ref(null)
// 编辑器实例
let editor = null as any;
// 值类型
let valueType = 'string';
// 是否内部改变(即onChange事件双向绑定)，内部改变则不需要重新赋值给editor
let internalChange = false;
//定义事件
const emit = defineEmits(['update:visible', 'update:modelValue', 'onChange'])
const state = reactive({
height: '500px',
width: 'auto',
});
let { modelValue, options, modeList, currentMode } = toRefs(props);
onMounted(() => {
state.width = props.width;
state.height = props.height;
const jsoneditorVue = ref(null)
// 编辑器实例
let editor = null as any;
// 值类型
let valueType = 'string';
// 是否内部改变(即onChange事件双向绑定)，内部改变则不需要重新赋值给editor
let internalChange = false;
init();
setJson(modelValue.value);
});
onUnmounted(() => {
editor?.destroy();
editor = null;
});
watch(
() => props.modelValue,
(newValue) => {
if (!editor) {
init();
}
setJson(newValue);
}
);
const setJson = (value: any) => {
if (internalChange) {
return;
}
if (typeof value == 'string') {
valueType = 'string';
editor.set(JSON.parse(value));
} else {
valueType = 'object';
editor.set(value);
}
};
const onChange = () => {
try {
const json = editor.get();
if (valueType == 'string') {
emit('update:modelValue', JSON.stringify(json));
} else {
emit('update:modelValue', json);
}
emit('onChange', json);
internalChange = true;
nextTick(() => {
internalChange = false;
});
} catch (error) {}
};
const init = () => {
console.log('init json editor');
const finalOptions = {
...options.value,
mode: currentMode.value,
modes: modeList.value,
onChange,
};
editor = new JSONEditor(jsoneditorVue.value, finalOptions);
};
return {
...toRefs(state),
jsoneditorVue,
};
},
const state = reactive({
height: '500px',
width: 'auto',
});
onMounted(() => {
state.width = props.width;
state.height = props.height;
init();
setJson(modelValue!.value);
});
onUnmounted(() => {
editor?.destroy();
editor = null;
});
watch(
() => props.modelValue,
(newValue) => {
if (!editor) {
init();
}
setJson(newValue);
}
);
const setJson = (value: any) => {
if (internalChange) {
return;
}
if (typeof value == 'string') {
valueType = 'string';
editor.set(JSON.parse(value));
} else {
valueType = 'object';
editor.set(value);
}
};
const onChange = () => {
try {
const json = editor.get();
if (valueType == 'string') {
emit('update:modelValue', JSON.stringify(json));
} else {
emit('update:modelValue', json);
}
emit('onChange', json);
internalChange = true;
nextTick(() => {
internalChange = false;
});
} catch (error) { }
};
const init = () => {
console.log('init json editor');
const finalOptions = {
...options.value,
mode: currentMode.value,
modes: modeList.value,
onChange,
};
editor = new JSONEditor(jsoneditorVue.value, finalOptions);
};
</script>
<style lang="scss">

2
mayfly_go_web/src/router/imports.ts
View File

@@ -3,7 +3,7 @@ import RouterParent from '@/views/layout/routerView/parent.vue';
export const imports = {
'RouterParent': RouterParent,
"Home": () => import('@/views/home/index.vue'),
"Home": () => import('@/views/home/Home.vue'),
'Personal': () => import('@/views/personal/index.vue'),
// machine
"MachineList": () => import('@/views/ops/machine'),

205
mayfly_go_web/src/views/home/index.vue → mayfly_go_web/src/views/home/Home.vue
View File

@@ -7,13 +7,14 @@
<img :src="getUserInfos.photo" />
<div class="home-card-first-right ml15">
<div class="flex-margin">
<div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}` }}</div>
<div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}`
}}</div>
</div>
</div>
</div>
</div>
</el-col>
<el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
<el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList as any" :key="k">
<div @click="toPage(v)" class="home-card-item home-card-item-box" :style="{ background: v.color }">
<div class="home-card-item-flex">
<div class="home-card-item-title pb3">{{ v.title }}</div>
@@ -26,7 +27,7 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
import { useStore } from '@/store/index.ts';
// import * as echarts from 'echarts';
@@ -34,103 +35,96 @@ import { CountUp } from 'countup.js';
import { formatAxis } from '@/common/utils/formatTime.ts';
import { indexApi } from './api';
import { useRouter } from 'vue-router';
export default {
name: 'HomePage',
setup() {
// const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const store = useStore();
const state = reactive({
topCardItemList: [
{
title: 'Linux机器',
id: 'machineNum',
color: '#F95959',
},
{
title: '数据库',
id: 'dbNum',
color: '#8595F4',
},
{
title: 'redis',
id: 'redisNum',
color: '#1abc9c',
},
{
title: 'Mongo',
id: 'mongoNum',
color: '#FEBB50',
},
],
});
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
const router = useRouter();
const store = useStore();
const state = reactive({
topCardItemList: [
{
title: 'Linux机器',
id: 'machineNum',
color: '#F95959',
},
{
title: '数据库',
id: 'dbNum',
color: '#8595F4',
},
{
title: 'redis',
id: 'redisNum',
color: '#1abc9c',
},
{
title: 'Mongo',
id: 'mongoNum',
color: '#FEBB50',
},
],
});
// 初始化数字滚动
const initNumCountUp = async () => {
const res: any = await indexApi.getIndexCount.request();
nextTick(() => {
new CountUp('mongoNum', res.mongoNum).start();
new CountUp('machineNum', res.machineNum).start();
new CountUp('dbNum', res.dbNum).start();
new CountUp('redisNum', res.redisNum).start();
});
};
const {
topCardItemList,
} = toRefs(state)
const toPage = (item: any) => {
switch (item.id) {
case 'personal': {
router.push('/personal');
break;
}
case 'mongoNum': {
router.push('/mongo/mongo-data-operation');
break;
}
case 'machineNum': {
router.push('/machine/machines');
break;
}
case 'dbNum': {
router.push('/dbms/sql-exec');
break;
}
case 'redisNum': {
router.push('/redis/data-operation');
break;
}
}
};
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
// 页面加载时
onMounted(() => {
initNumCountUp();
// initHomeLaboratory();
// initHomeOvertime();
});
// 获取用户信息 vuex
const getUserInfos = computed(() => {
return store.state.userInfos.userInfos;
});
return {
getUserInfos,
currentTime,
toPage,
...toRefs(state),
};
},
// 初始化数字滚动
const initNumCountUp = async () => {
const res: any = await indexApi.getIndexCount.request();
nextTick(() => {
new CountUp('mongoNum', res.mongoNum).start();
new CountUp('machineNum', res.machineNum).start();
new CountUp('dbNum', res.dbNum).start();
new CountUp('redisNum', res.redisNum).start();
});
};
const toPage = (item: any) => {
switch (item.id) {
case 'personal': {
router.push('/personal');
break;
}
case 'mongoNum': {
router.push('/mongo/mongo-data-operation');
break;
}
case 'machineNum': {
router.push('/machine/machines');
break;
}
case 'dbNum': {
router.push('/dbms/sql-exec');
break;
}
case 'redisNum': {
router.push('/redis/data-operation');
break;
}
}
};
// 页面加载时
onMounted(() => {
initNumCountUp();
// initHomeLaboratory();
// initHomeOvertime();
});
// 获取用户信息 vuex
const getUserInfos = computed(() => {
return store.state.userInfos.userInfos;
});
</script>
<style scoped lang="scss">
.home-container {
overflow-x: hidden;
.home-card-item {
width: 100%;
height: 103px;
@@ -138,16 +132,19 @@ export default {
border-radius: 4px;
transition: all ease 0.3s;
cursor: pointer;
&:hover {
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
transition: all ease 0.3s;
}
}
.home-card-item-box {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
&:hover {
i {
right: 0px !important;
@@ -155,6 +152,7 @@ export default {
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
@@ -163,48 +161,59 @@ export default {
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.home-card-item-flex {
padding: 0 20px;
color: white;
.home-card-item-title,
.home-card-item-tip {
font-size: 13px;
}
.home-card-item-title-num {
font-size: 18px;
}
.home-card-item-tip-num {
font-size: 13px;
}
}
}
.home-card-first {
background: white;
border: 1px solid #ebeef5;
display: flex;
align-items: center;
img {
width: 60px;
height: 60px;
border-radius: 100%;
border: 2px solid var(--color-primary-light-5);
}
.home-card-first-right {
flex: 1;
display: flex;
flex-direction: column;
.home-card-first-right-msg {
font-size: 13px;
color: gray;
}
}
}
.home-monitor {
height: 200px;
.flex-warp-item {
width: 50%;
height: 100px;
display: flex;
.flex-warp-item-box {
margin: auto;
height: auto;
@@ -212,19 +221,24 @@ export default {
}
}
}
.home-warning-card {
height: 292px;
::v-deep(.el-card) {
height: 100%;
}
}
.home-dynamic {
height: 200px;
.home-dynamic-item {
display: flex;
width: 100%;
height: 60px;
overflow: hidden;
&:first-of-type {
.home-dynamic-item-line {
i {
@@ -232,20 +246,24 @@ export default {
}
}
}
.home-dynamic-item-left {
text-align: right;
.home-dynamic-item-left-time1 {
}
.home-dynamic-item-left-time1 {}
.home-dynamic-item-left-time2 {
font-size: 13px;
color: gray;
}
}
.home-dynamic-item-line {
height: 60px;
border-right: 2px dashed #dfdfdf;
margin: 0 20px;
position: relative;
i {
color: var(--color-primary);
font-size: 12px;
@@ -256,8 +274,10 @@ export default {
background: white;
}
}
.home-dynamic-item-right {
flex: 1;
.home-dynamic-item-right-title {
i {
margin-right: 5px;
@@ -270,6 +290,7 @@ export default {
color: var(--color-primary);
}
}
.home-dynamic-item-right-label {
font-size: 13px;
color: gray;

438
mayfly_go_web/src/views/login/component/AccountLogin.vue
View File

@@ -2,37 +2,25 @@
<div>
<el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-content-form" size="large">
<el-form-item prop="username">
<el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable autocomplete="off">
<el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable
autocomplete="off">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password" autocomplete="off" show-password>
<el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password"
autocomplete="off" show-password>
</el-input>
</el-form-item>
<el-form-item v-if="useLoginCaptcha" prop="captcha">
<el-form-item v-if="isUseLoginCaptcha" prop="captcha">
<el-row :gutter="15">
<el-col :span="16">
<el-input
type="text"
maxlength="6"
placeholder="请输入验证码"
prefix-icon="position"
v-model="loginForm.captcha"
clearable
autocomplete="off"
@keyup.enter="login"
></el-input>
<el-input type="text" maxlength="6" placeholder="请输入验证码" prefix-icon="position"
v-model="loginForm.captcha" clearable autocomplete="off" @keyup.enter="login"></el-input>
</el-col>
<el-col :span="8">
<div class="login-content-code">
<img
class="login-content-code-img"
@click="getCaptcha"
width="130px"
height="40px"
:src="captchaImage"
style="cursor: pointer"
/>
<img class="login-content-code-img" @click="getCaptcha" width="130px" height="40px"
:src="captchaImage" style="cursor: pointer" />
</div>
</el-col>
</el-row>
@@ -44,21 +32,20 @@
</el-form-item>
</el-form>
<el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px" :destroy-on-close="true">
<el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef" label-width="65px">
<el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px"
:destroy-on-close="true">
<el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef"
label-width="65px">
<el-form-item prop="username" label="用户名" required>
<el-input v-model.trim="changePwdDialog.form.username" disabled></el-input>
</el-form-item>
<el-form-item prop="oldPassword" label="旧密码" required>
<el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password" type="password"></el-input>
<el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password"
type="password"></el-input>
</el-form-item>
<el-form-item prop="newPassword" label="新密码" required>
<el-input
v-model.trim="changePwdDialog.form.newPassword"
placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
type="password"
autocomplete="new-password"
></el-input>
<el-input v-model.trim="changePwdDialog.form.newPassword" placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
type="password" autocomplete="new-password"></el-input>
</el-form-item>
</el-form>
@@ -72,8 +59,8 @@
</div>
</template>
<script lang="ts">
import { nextTick, onMounted, ref, toRefs, reactive, defineComponent, computed } from 'vue';
<script lang="ts" setup>
import { nextTick, onMounted, ref, toRefs, reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { initBackEndControlRoutesFun } from '@/router/index.ts';
@@ -85,214 +72,209 @@ import { RsaEncrypt } from '@/common/rsa';
import { useLoginCaptcha, useWartermark } from '@/common/sysconfig';
import { letterAvatar } from '@/common/utils/string';
export default defineComponent({
name: 'AccountLogin',
setup() {
const store = useStore();
const route = useRoute();
const router = useRouter();
const loginFormRef: any = ref(null);
const changePwdFormRef: any = ref(null);
const rules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}
const state = reactive({
useLoginCaptcha: false,
captchaImage: '',
loginForm: {
username: '',
password: '',
captcha: '',
cid: '',
},
changePwdDialog: {
visible: false,
form: {
username: '',
oldPassword: '',
newPassword: '',
const store = useStore();
const route = useRoute();
const router = useRouter();
const loginFormRef: any = ref(null);
const changePwdFormRef: any = ref(null);
const state = reactive({
isUseLoginCaptcha: false,
captchaImage: '',
loginForm: {
username: '',
password: '',
captcha: '',
cid: '',
},
changePwdDialog: {
visible: false,
form: {
username: '',
oldPassword: '',
newPassword: '',
},
rules: {
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
message: '须为8位以上且包含字⺟⼤⼩写+数字+特殊符号',
trigger: 'blur',
},
rules: {
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
message: '须为8位以上且包含字⺟⼤⼩写+数字+特殊符号',
trigger: 'blur',
},
],
},
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
},
loading: {
signIn: false,
changePwd: false,
},
});
onMounted(async () => {
nextTick(async () => {
state.useLoginCaptcha = await useLoginCaptcha();
getCaptcha();
});
// 移除公钥, 方便后续重新获取
sessionStorage.removeItem('RsaPublicKey');
});
const getCaptcha = async () => {
if (!state.useLoginCaptcha) {
return;
}
let res: any = await openApi.captcha();
state.captchaImage = res.base64Captcha;
state.loginForm.cid = res.cid;
};
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
});
// 校验登录表单并登录
const login = () => {
loginFormRef.value.validate((valid: boolean) => {
if (valid) {
onSignIn();
} else {
return false;
}
});
};
// 登录
const onSignIn = async () => {
state.loading.signIn = true;
let loginRes;
const originPwd = state.loginForm.password;
try {
const loginReq = { ...state.loginForm };
loginReq.password = await RsaEncrypt(originPwd);
loginRes = await openApi.login(loginReq);
// 存储 token 到浏览器缓存
setSession('token', loginRes.token);
setSession('menus', loginRes.menus);
} catch (e: any) {
state.loading.signIn = false;
state.loginForm.captcha = '';
// 密码强度不足
if (e.code && e.code == 401) {
state.changePwdDialog.form.username = state.loginForm.username;
state.changePwdDialog.form.oldPassword = originPwd;
state.changePwdDialog.form.newPassword = '';
state.changePwdDialog.visible = true;
} else {
getCaptcha();
}
return;
}
// 用户信息
const userInfos = {
username: state.loginForm.username,
// 头像
photo: letterAvatar(state.loginForm.username),
time: new Date().getTime(),
// // 菜单资源code数组
// menus: loginRes.menus,
permissions: loginRes.permissions,
lastLoginTime: loginRes.lastLoginTime,
lastLoginIp: loginRes.lastLoginIp,
};
// 存储用户信息到浏览器缓存
setUserInfo2Session(userInfos);
// 1、请注意执行顺序(存储用户信息到vuex)
store.dispatch('userInfos/setUserInfos', userInfos);
if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
// await initAllFun();
await initBackEndControlRoutesFun();
signInSuccess();
} else {
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
await initBackEndControlRoutesFun();
// 执行完 initBackEndControlRoutesFun，再执行 signInSuccess
signInSuccess();
}
};
// 登录成功后的跳转
const signInSuccess = () => {
// 初始化登录成功时间问候语
let currentTimeInfo = currentTime.value;
// 登录成功，跳到转首页
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
route.query?.redirect ? router.push(route.query.redirect as string) : router.push('/');
// 登录成功提示
setTimeout(async () => {
// 关闭 loading
state.loading.signIn = true;
ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
if (await useWartermark()) {
setUseWatermark2Session(true);
}
}, 300);
};
const changePwd = () => {
changePwdFormRef.value.validate(async (valid: boolean) => {
if (!valid) {
return false;
}
try {
state.loading.changePwd = true;
const form = state.changePwdDialog.form;
const changePwdReq: any = { ...form };
changePwdReq.oldPassword = await RsaEncrypt(form.oldPassword);
changePwdReq.newPassword = await RsaEncrypt(form.newPassword);
await openApi.changePwd(changePwdReq);
ElMessage.success('密码修改成功, 新密码已填充至登录密码框');
state.loginForm.password = state.changePwdDialog.form.newPassword;
state.changePwdDialog.visible = false;
getCaptcha();
} finally {
state.loading.changePwd = false;
}
});
};
const cancelChangePwd = () => {
state.changePwdDialog.visible = false;
state.changePwdDialog.form.newPassword = '';
state.changePwdDialog.form.oldPassword = '';
state.changePwdDialog.form.username = '';
getCaptcha();
};
return {
getCaptcha,
currentTime,
loginFormRef,
changePwdFormRef,
login,
changePwd,
cancelChangePwd,
...toRefs(state),
};
],
},
},
loading: {
signIn: false,
changePwd: false,
},
});
const {
isUseLoginCaptcha,
captchaImage,
loginForm,
changePwdDialog,
loading,
} = toRefs(state)
onMounted(async () => {
nextTick(async () => {
state.isUseLoginCaptcha = await useLoginCaptcha();
getCaptcha();
});
// 移除公钥, 方便后续重新获取
sessionStorage.removeItem('RsaPublicKey');
});
const getCaptcha = async () => {
if (!state.isUseLoginCaptcha) {
return;
}
let res: any = await openApi.captcha();
state.captchaImage = res.base64Captcha;
state.loginForm.cid = res.cid;
};
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
});
// 校验登录表单并登录
const login = () => {
loginFormRef.value.validate((valid: boolean) => {
if (valid) {
onSignIn();
} else {
return false;
}
});
};
// 登录
const onSignIn = async () => {
state.loading.signIn = true;
let loginRes;
const originPwd = state.loginForm.password;
try {
const loginReq = { ...state.loginForm };
loginReq.password = await RsaEncrypt(originPwd);
loginRes = await openApi.login(loginReq);
// 存储 token 到浏览器缓存
setSession('token', loginRes.token);
setSession('menus', loginRes.menus);
} catch (e: any) {
state.loading.signIn = false;
state.loginForm.captcha = '';
// 密码强度不足
if (e.code && e.code == 401) {
state.changePwdDialog.form.username = state.loginForm.username;
state.changePwdDialog.form.oldPassword = originPwd;
state.changePwdDialog.form.newPassword = '';
state.changePwdDialog.visible = true;
} else {
getCaptcha();
}
return;
}
// 用户信息
const userInfos = {
username: state.loginForm.username,
// 头像
photo: letterAvatar(state.loginForm.username),
time: new Date().getTime(),
// // 菜单资源code数组
// menus: loginRes.menus,
permissions: loginRes.permissions,
lastLoginTime: loginRes.lastLoginTime,
lastLoginIp: loginRes.lastLoginIp,
};
// 存储用户信息到浏览器缓存
setUserInfo2Session(userInfos);
// 1、请注意执行顺序(存储用户信息到vuex)
store.dispatch('userInfos/setUserInfos', userInfos);
if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
// await initAllFun();
await initBackEndControlRoutesFun();
signInSuccess();
} else {
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
await initBackEndControlRoutesFun();
// 执行完 initBackEndControlRoutesFun，再执行 signInSuccess
signInSuccess();
}
};
// 登录成功后的跳转
const signInSuccess = () => {
// 初始化登录成功时间问候语
let currentTimeInfo = currentTime.value;
// 登录成功，跳到转首页
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
route.query?.redirect ? router.push(route.query.redirect as string) : router.push('/');
// 登录成功提示
setTimeout(async () => {
// 关闭 loading
state.loading.signIn = true;
ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
if (await useWartermark()) {
setUseWatermark2Session(true);
}
}, 300);
};
const changePwd = () => {
changePwdFormRef.value.validate(async (valid: boolean) => {
if (!valid) {
return false;
}
try {
state.loading.changePwd = true;
const form = state.changePwdDialog.form;
const changePwdReq: any = { ...form };
changePwdReq.oldPassword = await RsaEncrypt(form.oldPassword);
changePwdReq.newPassword = await RsaEncrypt(form.newPassword);
await openApi.changePwd(changePwdReq);
ElMessage.success('密码修改成功, 新密码已填充至登录密码框');
state.loginForm.password = state.changePwdDialog.form.newPassword;
state.changePwdDialog.visible = false;
getCaptcha();
} finally {
state.loading.changePwd = false;
}
});
};
const cancelChangePwd = () => {
state.changePwdDialog.visible = false;
state.changePwdDialog.form.newPassword = '';
state.changePwdDialog.form.oldPassword = '';
state.changePwdDialog.form.username = '';
getCaptcha();
};
</script>
<style scoped lang="scss">
.login-content-form {
margin-top: 20px;
.login-content-code {
display: flex;
align-items: center;
justify-content: space-around;
.login-content-code-img {
width: 100%;
height: 40px;
@@ -309,12 +291,14 @@ export default defineComponent({
transition: all ease 0.2s;
border-radius: 4px;
user-select: none;
&:hover {
border-color: #c0c4cc;
transition: all ease 0.2s;
}
}
}
.login-content-submit {
width: 100%;
letter-spacing: 2px;

53
mayfly_go_web/src/views/login/index.vue
View File

@@ -31,33 +31,30 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { toRefs, reactive, computed } from 'vue';
import Account from '@/views/login/component/AccountLogin.vue';
import { useStore } from '@/store/index.ts';
export default {
name: 'LoginPage',
components: { Account },
setup() {
const store = useStore();
const state = reactive({
tabsActiveName: 'account',
isTabPaneShow: true,
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
// 切换密码、手机登录
const onTabsClick = () => {
state.isTabPaneShow = !state.isTabPaneShow;
};
return {
onTabsClick,
getThemeConfig,
...toRefs(state),
};
},
const store = useStore();
const state = reactive({
tabsActiveName: 'account',
isTabPaneShow: true,
});
const {
isTabPaneShow,
tabsActiveName,
} = toRefs(state)
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
// 切换密码、手机登录
const onTabsClick = () => {
state.isTabPaneShow = !state.isTabPaneShow;
};
</script>
@@ -67,6 +64,7 @@ export default {
height: 100%;
background: url('@/assets/image/bg-login.png') no-repeat;
background-size: 100% 100%;
.login-logo {
position: absolute;
top: 30px;
@@ -80,6 +78,7 @@ export default {
width: 90%;
transform: translateX(-50%);
}
.login-content {
width: 500px;
padding: 20px;
@@ -94,9 +93,11 @@ export default {
height: 480px;
overflow: hidden;
z-index: 1;
.login-content-main {
margin: 0 auto;
width: 80%;
.login-content-title {
color: #333;
font-weight: 500;
@@ -108,9 +109,11 @@ export default {
}
}
}
.login-content-mobile {
height: 418px;
}
.login-copyright {
position: absolute;
left: 50%;
@@ -120,9 +123,11 @@ export default {
color: white;
font-size: 12px;
opacity: 0.8;
.login-copyright-company {
white-space: nowrap;
}
.login-copyright-msg {
@extend .login-copyright-company;
}

100
mayfly_go_web/src/views/ops/component/ProjectEnvSelect.vue
View File

@@ -1,100 +0,0 @@
<template>
<div>
<el-form class="search-form" label-position="right" :inline="true">
<el-form-item prop="project" label="项目" label-width="40px">
<el-select v-model="projectId" placeholder="请选择项目" @change="changeProject" filterable>
<el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="env" label="env" label-width="33px">
<el-select style="width: 85px" v-model="envId" placeholder="环境" @change="changeEnv" filterable>
<el-option v-for="item in envs" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
</el-option>
</el-select>
</el-form-item>
<slot></slot>
</el-form>
</div>
</template>
<script lang="ts">
import {toRefs, reactive, defineComponent, onMounted, watch} from 'vue';
import { projectApi } from '../project/api';
export default defineComponent({
name: 'ProjectEnvSelect',
props: {
visible: {
type: Boolean,
},
data: {
type: Object,
},
title: {
type: String,
},
machineId: {
type: Number,
},
isCommon: {
type: Boolean,
},
},
setup(props: any, { emit }) {
const state = reactive({
projects: [] as any,
envs: [] as any,
projectId: null,
envId: null,
});
// 动态选中项目和环境
const setData = async (projectId: null, envId: null) => {
if (projectId) {
state.projectId = projectId;
if (envId) {
state.envs = await projectApi.projectEnvs.request({projectId});
state.envId = envId;
}
}
}
watch(() => props.data, (newValue)=>{
setData(newValue.projectId, newValue.envId)
})
onMounted(async () => {
state.projects = await projectApi.accountProjects.request(null);
// 初始化容器时可能会选中项目和环境
if(props.data?.projectId && props.data?.envId){
await setData(props.data.projectId, props.data.envId)
}
});
const changeProject = async (projectId: any) => {
emit('update:projectId', projectId);
emit('changeProjectEnv', state.projectId, null);
state.envId = null;
state.envs = await projectApi.projectEnvs.request({ projectId });
};
const changeEnv = (envId: any) => {
emit('update:envId', envId);
emit('changeProjectEnv', state.projectId, envId);
};
return {
...toRefs(state),
changeProject,
changeEnv,
setData,
};
},
});
</script>
<style lang="scss">
</style>

95
mayfly_go_web/src/views/ops/component/TagSelect.vue
View File

@@ -1,21 +1,12 @@
<template>
<div>
<el-tree-select
@check="changeTag"
style="width: 100%"
v-model="selectTags"
:data="tags"
:render-after-expand="true"
:default-expanded-keys="[selectTags]"
show-checkbox
check-strictly
node-key="id"
<el-tree-select @check="changeTag" style="width: 100%" v-model="selectTags" :data="tags"
:render-after-expand="true" :default-expanded-keys="[selectTags]" show-checkbox check-strictly node-key="id"
:props="{
value: 'id',
label: 'codePath',
children: 'children',
}"
>
}">
<template #default="{ data }">
<span class="custom-tree-node">
<span style="font-size: 13px">
@@ -31,51 +22,51 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { tagApi } from '../tag/api';
export default defineComponent({
name: 'TagSelect',
props: {
tagId: {
type: Number,
},
tagPath: {
type: String,
},
const props = defineProps({
tagId: {
type: Number,
},
setup(props: any, { emit }) {
const state = reactive({
tags: [],
// 单选则为id，多选为id数组
selectTags: null as any,
});
onMounted(async () => {
if (props.tagId) {
state.selectTags = props.tagId;
}
state.tags = await tagApi.getTagTrees.request(null);
});
const changeTag = (tag: any, checkInfo: any) => {
if (checkInfo.checkedNodes.length > 0) {
emit('update:tagId', tag.id);
emit('update:tagPath', tag.codePath);
emit('changeTag', tag);
} else {
emit('update:tagId', null);
emit('update:tagPath', null);
}
};
return {
...toRefs(state),
changeTag,
};
tagPath: {
type: String,
},
})
//定义事件
const emit = defineEmits(['changeTag', 'update:tagId', 'update:tagPath'])
const state = reactive({
tags: [],
// 单选则为id，多选为id数组
selectTags: null as any,
});
const {
tags,
selectTags,
} = toRefs(state)
onMounted(async () => {
if (props.tagId) {
state.selectTags = props.tagId;
}
state.tags = await tagApi.getTagTrees.request(null);
});
const changeTag = (tag: any, checkInfo: any) => {
if (checkInfo.checkedNodes.length > 0) {
emit('update:tagId', tag.id);
emit('update:tagPath', tag.codePath);
emit('changeTag', tag);
} else {
emit('update:tagId', null);
emit('update:tagPath', null);
}
};
</script>
<style lang="scss">
</style>

998
mayfly_go_web/src/views/ops/db/CreateTable.vue
View File

File diff suppressed because it is too large Load Diff

422
mayfly_go_web/src/views/ops/db/DbEdit.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false"
:destroy-on-close="true" width="38%">
<el-form :model="form" ref="dbForm" :rules="rules" label-width="95px">
<el-form-item prop="tagId" label="标签:" required>
<tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
@@ -17,7 +18,8 @@
</el-form-item>
<el-form-item prop="host" label="host:" required>
<el-col :span="18">
<el-input :disabled="form.id!==undefined" v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
<el-input :disabled="form.id !== undefined" v-model.trim="form.host" placeholder="请输入主机ip"
auto-complete="off"></el-input>
</el-col>
<el-col style="text-align: center" :span="1">:</el-col>
<el-col :span="5">
@@ -28,17 +30,14 @@
<el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-input
type="password"
show-password
v-model.trim="form.password"
placeholder="请输入密码，修改操作可不填"
autocomplete="new-password"
>
<el-input type="password" show-password v-model.trim="form.password" placeholder="请输入密码，修改操作可不填"
autocomplete="new-password">
<template v-if="form.id && form.id != 0" #suffix>
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click"
:content="pwd">
<template #reference>
<el-link @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
<el-link @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码
</el-link>
</template>
</el-popover>
</template>
@@ -46,29 +45,23 @@
</el-form-item>
<el-form-item prop="params" label="连接参数:">
<el-input v-model.trim="form.params" placeholder="其他连接参数，形如: key1=value1&key2=value2">
<template v-if="form.id && form.id != 0" #suffix>
<el-link target="_blank" href="https://github.com/go-sql-driver/mysql#dsn-data-source-name" :underline="false" type="primary" class="mr5">参数参考</el-link>
</template>
<template v-if="form.id && form.id != 0" #suffix>
<el-link target="_blank" href="https://github.com/go-sql-driver/mysql#dsn-data-source-name"
:underline="false" type="primary" class="mr5">参数参考</el-link>
</template>
</el-input>
</el-form-item>
<el-form-item prop="database" label="数据库名:" required>
<el-col :span="19">
<el-select
@change="changeDatabase"
v-model="databaseList"
multiple
clearable
collapse-tags
collapse-tags-tooltip
filterable
allow-create
placeholder="请确保数据库实例信息填写完整后获取库名"
style="width: 100%"
>
<el-select @change="changeDatabase" v-model="databaseList" multiple clearable collapse-tags
collapse-tags-tooltip filterable allow-create placeholder="请确保数据库实例信息填写完整后获取库名"
style="width: 100%">
<el-option v-for="db in allDatabases" :key="db" :label="db" :value="db" />
</el-select>
</el-col>
<el-col style="text-align: center" :span="1"><el-divider direction="vertical" border-style="dashed" /></el-col>
<el-col style="text-align: center" :span="1">
<el-divider direction="vertical" border-style="dashed" />
</el-col>
<el-col :span="4">
<el-link @click="getAllDatabase" :underline="false" type="success">获取库名</el-link>
</el-col>
@@ -80,17 +73,14 @@
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1"
:false-label="-1"></el-checkbox>
</el-col>
<el-col :span="5" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="16" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
<el-option v-for="item in sshTunnelMachineList" :key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`" :value="item.id">
</el-option>
</el-select>
</el-col>
@@ -107,8 +97,8 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { dbApi } from './api';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
@@ -116,213 +106,187 @@ import { notBlank } from '@/common/assert';
import { RsaEncrypt } from '@/common/rsa';
import TagSelect from '../component/TagSelect.vue';
export default defineComponent({
name: 'DbEdit',
components: {
TagSelect,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
projects: {
type: Array,
},
db: {
type: [Boolean, Object],
},
title: {
type: String,
},
db: {
type: [Boolean, Object],
},
setup(props: any, { emit }) {
const dbForm: any = ref(null);
title: {
type: String,
},
})
const state = reactive({
dialogVisible: false,
projects: [],
envs: [],
allDatabases: [] as any,
databaseList: [] as any,
sshTunnelMachineList: [] as any,
form: {
id: null,
tagId: null as any,
tagPath: null as any,
type: null,
name: null,
host: '',
port: 3306,
username: null,
password: null,
params: null,
database: '',
project: null,
projectId: null,
envId: null,
env: null,
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
},
// 原密码
pwd: '',
btnLoading: false,
rules: {
projectId: [
{
required: true,
message: '请选择项目',
trigger: ['change', 'blur'],
},
],
envId: [
{
required: true,
message: '请选择环境',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入别名',
trigger: ['change', 'blur'],
},
],
type: [
{
required: true,
message: '请选择数据库类型',
trigger: ['change', 'blur'],
},
],
host: [
{
required: true,
message: '请输入主机ip和port',
trigger: ['change', 'blur'],
},
],
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
database: [
{
required: true,
message: '请添加数据库',
trigger: ['change', 'blur'],
},
],
},
});
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.db) {
state.form = { ...newValue.db };
// 将数据库名使用空格切割，获取所有数据库列表
state.databaseList = newValue.db.database.split(' ');
} else {
state.envs = [];
state.form = { port: 3306, enableSshTunnel: -1 } as any;
state.databaseList = [];
}
getSshTunnelMachines();
});
const rules = {
tagId: [
{
required: true,
message: '请选择标签',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入别名',
trigger: ['change', 'blur'],
},
],
type: [
{
required: true,
message: '请选择数据库类型',
trigger: ['change', 'blur'],
},
],
host: [
{
required: true,
message: '请输入主机ip和port',
trigger: ['change', 'blur'],
},
],
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
database: [
{
required: true,
message: '请添加数据库',
trigger: ['change', 'blur'],
},
],
}
/**
* 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
*/
const changeDatabase = () => {
state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
};
const dbForm: any = ref(null);
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const state = reactive({
dialogVisible: false,
allDatabases: [] as any,
databaseList: [] as any,
sshTunnelMachineList: [] as any,
form: {
id: null,
tagId: null as any,
tagPath: null as any,
type: null,
name: null,
host: '',
port: 3306,
username: null,
password: null,
params: null,
database: '',
project: null,
projectId: null,
envId: null,
env: null,
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
},
// 原密码
pwd: '',
btnLoading: false,
});
const changeEnv = (envId: number) => {
for (let p of state.envs as any) {
if (p.id == envId) {
state.form.env = p.name;
}
}
};
const {
dialogVisible,
allDatabases,
databaseList,
sshTunnelMachineList,
form,
pwd,
btnLoading,
} = toRefs(state)
const getAllDatabase = async () => {
watch(props, (newValue: any) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
if (newValue.db) {
state.form = { ...newValue.db };
// 将数据库名使用空格切割，获取所有数据库列表
state.databaseList = newValue.db.database.split(' ');
} else {
state.form = { port: 3306, enableSshTunnel: -1 } as any;
state.databaseList = [];
}
getSshTunnelMachines();
});
/**
* 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
*/
const changeDatabase = () => {
state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
};
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getAllDatabase = async () => {
const reqForm = { ...state.form };
reqForm.password = await RsaEncrypt(reqForm.password);
state.allDatabases = await dbApi.getAllDatabase.request(reqForm);
ElMessage.success('获取成功, 请选择需要管理操作的数据库');
};
const getDbPwd = async () => {
state.pwd = await dbApi.getDbPwd.request({ id: state.form.id });
};
const btnOk = async () => {
if (!state.form.id) {
notBlank(state.form.password, '新增操作，密码不可为空');
}
dbForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
reqForm.password = await RsaEncrypt(reqForm.password);
state.allDatabases = await dbApi.getAllDatabase.request(reqForm);
ElMessage.success('获取成功, 请选择需要管理操作的数据库');
};
dbApi.saveDb.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
const getDbPwd = async () => {
state.pwd = await dbApi.getDbPwd.request({ id: state.form.id });
};
const btnOk = async () => {
if (!state.form.id) {
notBlank(state.form.password, '新增操作，密码不可为空');
}
dbForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
reqForm.password = await RsaEncrypt(reqForm.password);
dbApi.saveDb.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
ElMessage.error('请正确填写信息');
return false;
}
cancel();
});
};
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const resetInputDb = () => {
state.databaseList = [];
state.allDatabases = [];
};
const resetInputDb = () => {
state.databaseList = [];
state.allDatabases = [];
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
resetInputDb();
}, 500);
};
return {
...toRefs(state),
dbForm,
getAllDatabase,
getDbPwd,
changeDatabase,
getSshTunnelMachines,
changeEnv,
btnOk,
cancel,
};
},
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
resetInputDb();
}, 500);
};
</script>
<style lang="scss">
</style>

1050
mayfly_go_web/src/views/ops/db/DbList.vue
View File

File diff suppressed because it is too large Load Diff

2135
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

File diff suppressed because it is too large Load Diff

105
mayfly_go_web/src/views/ops/db/TableEdit.vue
View File

@@ -2,67 +2,70 @@
<div>
<el-dialog :title="`${title} 详情`" v-model="dialogVisible" :before-close="cancel" width="90%">
<el-table @cell-click="cellClick" :data="data.res">
<el-table-column :width="200" :prop="item" :label="item" v-for="item in data.colNames" :key="item"> </el-table-column>
<el-table-column :width="200" :prop="item" :label="item" v-for="item in data.colNames" :key="item">
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script lang="ts">
import { watch, toRefs, reactive, defineComponent } from 'vue';
<script lang="ts" setup>
import { watch, toRefs, reactive } from 'vue';
export default defineComponent({
name: 'tableEdit',
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
data: {
type: Object,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
data: {
res: [],
colNames: [],
},
});
title: {
type: String,
},
data: {
type: Object,
},
})
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.data.res = newValue.data.res;
state.data.colNames = newValue.data.colNames;
});
const cellClick = (row: any, column: any, cell: any, event: any) => {
let isDiv = cell.children[0].tagName === 'DIV';
let text = cell.children[0].innerText;
let div = cell.children[0];
if (isDiv) {
let input = document.createElement('input');
input.setAttribute('value', text);
cell.replaceChildren(input);
input.focus();
input.addEventListener('blur', () => {
div.innerText = input.value;
cell.replaceChildren(div);
});
}
};
const cancel = () => {
emit('update:visible', false);
};
return {
...toRefs(state),
cancel,
cellClick,
};
//定义事件
const emit = defineEmits(['update:visible'])
const state = reactive({
dialogVisible: false,
data: {
res: [],
colNames: [],
},
});
const {
dialogVisible,
data,
} = toRefs(state)
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
state.data.res = newValue.data.res;
state.data.colNames = newValue.data.colNames;
});
const cellClick = (row: any, column: any, cell: any) => {
let isDiv = cell.children[0].tagName === 'DIV';
let text = cell.children[0].innerText;
let div = cell.children[0];
if (isDiv) {
let input = document.createElement('input');
input.setAttribute('value', text);
cell.replaceChildren(input);
input.focus();
input.addEventListener('blur', () => {
div.innerText = input.value;
cell.replaceChildren(div);
});
}
};
const cancel = () => {
emit('update:visible', false);
};
</script>

229
mayfly_go_web/src/views/ops/db/component/SqlExecDialog.vue
View File

@@ -2,7 +2,8 @@
<div>
<el-dialog title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px">
如需执行多条sql，需要在【数据库管理】配置连接参数：multiStatements=true
<codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sqlValue" :options="cmOptions" />
<codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sqlValue"
:options="cmOptions" />
<el-input ref="remarkInputRef" v-model="remark" placeholder="请输入执行备注" class="mt5" />
<template #footer>
<span class="dialog-footer">
@@ -14,8 +15,8 @@
</div>
</template>
<script lang="ts">
import { toRefs, ref, nextTick, reactive, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, ref, nextTick, reactive } from 'vue';
import { dbApi } from '../api';
import { ElDialog, ElButton, ElInput, ElMessage, InputInstance } from 'element-plus';
// import base style
@@ -28,126 +29,116 @@ import { format as sqlFormatter } from 'sql-formatter';
import { SqlExecProps } from './SqlExecBox';
export default defineComponent({
name: 'SqlExecDialog',
components: {
codemirror,
ElButton,
ElDialog,
ElInput,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
dbId: {
type: [Number],
},
db: {
type: String,
},
sql: {
type: String,
},
dbId: {
type: [Number],
},
setup(props: any) {
const remarkInputRef = ref<InputInstance>();
const state = reactive({
dialogVisible: false,
sqlValue: '',
dbId: 0,
db: '',
remark: '',
btnLoading: false,
cmOptions: {
tabSize: 4,
mode: 'text/x-sql',
lineNumbers: true,
line: true,
indentWithTabs: true,
smartIndent: true,
matchBrackets: true,
theme: 'base16-light',
autofocus: true,
extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
},
});
state.sqlValue = props.sql;
let runSuccessCallback: any;
let cancelCallback: any;
let runSuccess: boolean = false;
/**
* 执行sql
*/
const runSql = async () => {
if (!state.remark) {
ElMessage.error('请输入执行的备注信息');
return;
}
try {
state.btnLoading = true;
await dbApi.sqlExec.request({
id: state.dbId,
db: state.db,
remark: state.remark,
sql: state.sqlValue.trim(),
});
ElMessage.success('执行成功');
runSuccess = true;
} catch (e) {
runSuccess = false;
}
if (runSuccess) {
if (runSuccessCallback) {
runSuccessCallback();
}
cancel();
}
state.btnLoading = false;
};
const cancel = () => {
state.dialogVisible = false;
// 没有执行成功，并且取消回调函数存在，则执行
if (!runSuccess && cancelCallback) {
cancelCallback();
}
setTimeout(() => {
state.dbId = 0;
state.sqlValue = '';
state.remark = '';
runSuccessCallback = null;
cancelCallback = null;
runSuccess = false;
}, 200);
};
const open = (props: SqlExecProps) => {
runSuccessCallback = props.runSuccessCallback;
cancelCallback = props.cancelCallback;
state.sqlValue = sqlFormatter(props.sql);
state.dbId = props.dbId;
state.db = props.db;
state.dialogVisible = true;
nextTick(() => {
setTimeout(() => {
remarkInputRef.value?.focus();
});
});
};
return {
...toRefs(state),
remarkInputRef,
open,
runSql,
cancel,
};
db: {
type: String,
},
sql: {
type: String,
},
})
const cmOptions = {
tabSize: 4,
mode: 'text/x-sql',
lineNumbers: true,
line: true,
indentWithTabs: true,
smartIndent: true,
matchBrackets: true,
theme: 'base16-light',
autofocus: true,
extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
}
const remarkInputRef = ref<InputInstance>();
const state = reactive({
dialogVisible: false,
sqlValue: '',
dbId: 0,
db: '',
remark: '',
btnLoading: false,
});
const {
dialogVisible,
sqlValue,
remark,
btnLoading
} = toRefs(state)
state.sqlValue = props.sql as any;
let runSuccessCallback: any;
let cancelCallback: any;
let runSuccess: boolean = false;
/**
* 执行sql
*/
const runSql = async () => {
if (!state.remark) {
ElMessage.error('请输入执行的备注信息');
return;
}
try {
state.btnLoading = true;
await dbApi.sqlExec.request({
id: state.dbId,
db: state.db,
remark: state.remark,
sql: state.sqlValue.trim(),
});
ElMessage.success('执行成功');
runSuccess = true;
} catch (e) {
runSuccess = false;
}
if (runSuccess) {
if (runSuccessCallback) {
runSuccessCallback();
}
cancel();
}
state.btnLoading = false;
};
const cancel = () => {
state.dialogVisible = false;
// 没有执行成功，并且取消回调函数存在，则执行
if (!runSuccess && cancelCallback) {
cancelCallback();
}
setTimeout(() => {
state.dbId = 0;
state.sqlValue = '';
state.remark = '';
runSuccessCallback = null;
cancelCallback = null;
runSuccess = false;
}, 200);
};
const open = (props: SqlExecProps) => {
runSuccessCallback = props.runSuccessCallback;
cancelCallback = props.cancelCallback;
state.sqlValue = sqlFormatter(props.sql);
state.dbId = props.dbId;
state.db = props.db;
state.dialogVisible = true;
nextTick(() => {
setTimeout(() => {
remarkInputRef.value?.focus();
});
});
};
</script>
<style lang="scss">
.codesql {

973
mayfly_go_web/src/views/ops/machine/FileManage.vue
View File

File diff suppressed because it is too large Load Diff

345
mayfly_go_web/src/views/ops/machine/MachineEdit.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :destroy-on-close="true" :before-close="cancel" width="38%">
<el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :destroy-on-close="true"
:before-close="cancel" width="38%">
<el-form :model="form" ref="machineForm" :rules="rules" label-width="85px">
<el-form-item prop="tagId" label="标签:" required>
<tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
@@ -10,7 +11,8 @@
</el-form-item>
<el-form-item prop="ip" label="ip:" required>
<el-col :span="18">
<el-input :disabled="form.id" v-model.trim="form.ip" placeholder="主机ip" auto-complete="off"></el-input>
<el-input :disabled="form.id" v-model.trim="form.ip" placeholder="主机ip" auto-complete="off">
</el-input>
</el-col>
<el-col style="text-align: center" :span="1">:</el-col>
<el-col :span="5">
@@ -27,15 +29,11 @@
</el-select>
</el-form-item>
<el-form-item v-if="form.authMethod == 1" prop="password" label="密码:">
<el-input
type="password"
show-password
v-model.trim="form.password"
placeholder="请输入密码，修改操作可不填"
autocomplete="new-password"
>
<el-input type="password" show-password v-model.trim="form.password" placeholder="请输入密码，修改操作可不填"
autocomplete="new-password">
<template v-if="form.id && form.id != 0" #suffix>
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click"
:content="pwd">
<template #reference>
<el-link @click="getPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
</template>
@@ -44,7 +42,8 @@
</el-input>
</el-form-item>
<el-form-item v-if="form.authMethod == 2" prop="password" label="秘钥:">
<el-input type="textarea" :rows="3" v-model="form.password" placeholder="请将私钥文件内容拷贝至此，修改操作可不填"></el-input>
<el-input type="textarea" :rows="3" v-model="form.password" placeholder="请将私钥文件内容拷贝至此，修改操作可不填">
</el-input>
</el-form-item>
<el-form-item prop="remark" label="备注:">
<el-input type="textarea" v-model="form.remark"></el-input>
@@ -56,17 +55,14 @@
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1"
:false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
<el-option v-for="item in sshTunnelMachineList" :key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`" :value="item.id">
</el-option>
</el-select>
</el-col>
@@ -83,176 +79,169 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { machineApi } from './api';
import { ElMessage } from 'element-plus';
import { notBlank } from '@/common/assert';
import { RsaEncrypt } from '@/common/rsa';
import TagSelect from '../component/TagSelect.vue';
export default defineComponent({
name: 'MachineEdit',
components: {
TagSelect,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
projects: {
type: Array,
},
machine: {
type: [Boolean, Object],
},
title: {
type: String,
},
projects: {
type: Array,
},
setup(props: any, { emit }) {
const machineForm: any = ref(null);
const state = reactive({
dialogVisible: false,
projects: [] as any,
sshTunnelMachineList: [] as any,
tags: [],
selectTags: [],
form: {
id: null,
tagId: null as any,
tagPath: '',
ip: null,
name: null,
authMethod: 1,
port: 22,
username: '',
password: '',
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
enableRecorder: -1,
},
pwd: '',
btnLoading: false,
rules: {
tagId: [
{
required: true,
message: '请选择标签',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入别名',
trigger: ['change', 'blur'],
},
],
ip: [
{
required: true,
message: '请输入主机ip和端口',
trigger: ['change', 'blur'],
},
],
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
authMethod: [
{
required: true,
message: '请选择认证方式',
trigger: ['change', 'blur'],
},
],
},
});
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.machine) {
state.form = { ...newValue.machine };
} else {
state.form = { port: 22, authMethod: 1 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getSshTunnelMachine = (machineId: any) => {
notBlank(machineId, '请选择或先创建一台隧道机器');
return state.sshTunnelMachineList.find((x: any) => x.id == machineId);
};
const getPwd = async () => {
state.pwd = await machineApi.getMachinePwd.request({ id: state.form.id });
};
const btnOk = async () => {
if (!state.form.id) {
notBlank(state.form.password, '新增操作，密码不可为空');
}
machineForm.value.validate(async (valid: boolean) => {
if (valid) {
const form: any = state.form;
if (form.enableSshTunnel == 1) {
const tunnelMachine: any = getSshTunnelMachine(form.sshTunnelMachineId);
if (tunnelMachine.ip == form.ip && tunnelMachine.port == form.port) {
ElMessage.error('隧道机器不能与本机器一致');
return;
}
}
const reqForm: any = { ...form };
if (reqForm.authMethod == 1) {
reqForm.password = await RsaEncrypt(state.form.password);
}
state.btnLoading = true;
try {
await machineApi.saveMachine.request(reqForm);
ElMessage.success('保存成功');
emit('val-change', state.form);
cancel();
} finally {
state.btnLoading = false;
}
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
machineForm,
getSshTunnelMachines,
getPwd,
btnOk,
cancel,
};
machine: {
type: [Boolean, Object],
},
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const rules = {
tagId: [
{
required: true,
message: '请选择标签',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入别名',
trigger: ['change', 'blur'],
},
],
ip: [
{
required: true,
message: '请输入主机ip和端口',
trigger: ['change', 'blur'],
},
],
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
authMethod: [
{
required: true,
message: '请选择认证方式',
trigger: ['change', 'blur'],
},
],
}
const machineForm: any = ref(null);
const state = reactive({
dialogVisible: false,
sshTunnelMachineList: [] as any,
form: {
id: null,
tagId: null as any,
tagPath: '',
ip: null,
name: null,
authMethod: 1,
port: 22,
username: '',
password: '',
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
enableRecorder: -1,
},
pwd: '',
btnLoading: false,
});
const {
dialogVisible,
sshTunnelMachineList,
form,
pwd,
btnLoading,
} = toRefs(state)
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
if (newValue.machine) {
state.form = { ...newValue.machine };
} else {
state.form = { port: 22, authMethod: 1 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getSshTunnelMachine = (machineId: any) => {
notBlank(machineId, '请选择或先创建一台隧道机器');
return state.sshTunnelMachineList.find((x: any) => x.id == machineId);
};
const getPwd = async () => {
state.pwd = await machineApi.getMachinePwd.request({ id: state.form.id });
};
const btnOk = async () => {
if (!state.form.id) {
notBlank(state.form.password, '新增操作，密码不可为空');
}
machineForm.value.validate(async (valid: boolean) => {
if (valid) {
const form: any = state.form;
if (form.enableSshTunnel == 1) {
const tunnelMachine: any = getSshTunnelMachine(form.sshTunnelMachineId);
if (tunnelMachine.ip == form.ip && tunnelMachine.port == form.port) {
ElMessage.error('隧道机器不能与本机器一致');
return;
}
}
const reqForm: any = { ...form };
if (reqForm.authMethod == 1) {
reqForm.password = await RsaEncrypt(state.form.password);
}
state.btnLoading = true;
try {
await machineApi.saveMachine.request(reqForm);
ElMessage.success('保存成功');
emit('val-change', state.form);
cancel();
} finally {
state.btnLoading = false;
}
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
</script>
<style lang="scss">
</style>

549
mayfly_go_web/src/views/ops/machine/MachineList.vue
View File

@@ -2,27 +2,21 @@
<div>
<el-card>
<div>
<el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加</el-button>
<el-button v-auth="'machine:update'" type="primary" icon="edit" :disabled="!currentId" @click="openFormDialog(currentData)" plain
>编辑</el-button
>
<el-button v-auth="'machine:del'" :disabled="!currentId" @click="deleteMachine(currentId)" type="danger" icon="delete"
>删除</el-button
>
<el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加
</el-button>
<el-button v-auth="'machine:update'" type="primary" icon="edit" :disabled="!currentId"
@click="openFormDialog(currentData)" plain>编辑</el-button>
<el-button v-auth="'machine:del'" :disabled="!currentId" @click="deleteMachine(currentId)" type="danger"
icon="delete">删除</el-button>
<div style="float: right">
<el-select @focus="getTags" v-model="params.tagPath" placeholder="请选择标签" @clear="search" filterable clearable>
<el-select @focus="getTags" v-model="params.tagPath" placeholder="请选择标签" @clear="search" filterable
clearable>
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
</el-select>
<el-input
class="ml5"
placeholder="请输入名称"
style="width: 150px"
v-model="params.name"
@clear="search"
plain
clearable
></el-input>
<el-input class="ml5" placeholder="请输入ip" style="width: 150px" v-model="params.ip" @clear="search" plain clearable></el-input>
<el-input class="ml5" placeholder="请输入名称" style="width: 150px" v-model="params.name" @clear="search"
plain clearable></el-input>
<el-input class="ml5" placeholder="请输入ip" style="width: 150px" v-model="params.ip" @clear="search"
plain clearable></el-input>
<el-button class="ml5" @click="search" type="success" icon="search"></el-button>
</div>
</div>
@@ -35,32 +29,25 @@
</el-radio>
</template>
</el-table-column>
<el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip></el-table-column>
<el-table-column prop="ip" label="ip:port" min-width="150">
<template #default="scope">
<el-link :disabled="scope.row.status == -1" @click="showMachineStats(scope.row)" type="primary" :underline="false">{{
`${scope.row.ip}:${scope.row.port}`
}}</el-link>
<el-link :disabled="scope.row.status == -1" @click="showMachineStats(scope.row)" type="primary"
:underline="false">{{
`${scope.row.ip}:${scope.row.port}`
}}</el-link>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="75">
<template #default="scope">
<el-switch
v-auth:disabled="'machine:update'"
:width="47"
v-model="scope.row.status"
:active-value="1"
:inactive-value="-1"
inline-prompt
active-text="启用"
inactive-text="停用"
<el-switch v-auth:disabled="'machine:update'" :width="47" v-model="scope.row.status"
:active-value="1" :inactive-value="-1" inline-prompt active-text="启用" inactive-text="停用"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
@change="changeStatus(scope.row)"
></el-switch>
@change="changeStatus(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" min-width="90"></el-table-column>
<el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="remark" label="备注" min-width="250" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="165">
<template #default="scope">
@@ -71,40 +58,19 @@
<el-table-column label="操作" min-width="235" fixed="right">
<template #default="scope">
<span v-auth="'machine:terminal'">
<el-link
:disabled="scope.row.status == -1"
type="primary"
@click="showTerminal(scope.row)"
plain
size="small"
:underline="false"
>终端</el-link
>
<el-link :disabled="scope.row.status == -1" type="primary" @click="showTerminal(scope.row)"
plain size="small" :underline="false">终端</el-link>
<el-divider direction="vertical" border-style="dashed" />
</span>
<span v-auth="'machine:file'">
<el-link
type="success"
:disabled="scope.row.status == -1"
@click="fileManage(scope.row)"
plain
size="small"
:underline="false"
>文件</el-link
>
<el-link type="success" :disabled="scope.row.status == -1"
@click="showFileManage(scope.row)" plain size="small" :underline="false">文件</el-link>
<el-divider direction="vertical" border-style="dashed" />
</span>
<el-link
:disabled="scope.row.status == -1"
type="warning"
@click="serviceManager(scope.row)"
plain
size="small"
:underline="false"
>脚本</el-link
>
<el-link :disabled="scope.row.status == -1" type="warning" @click="serviceManager(scope.row)"
plain size="small" :underline="false">脚本</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-dropdown>
@@ -116,34 +82,21 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
><el-link
@click="showProcess(scope.row)"
:disabled="scope.row.status == -1"
plain
:underline="false"
size="small"
>进程</el-link
></el-dropdown-item
>
<el-dropdown-item>
<el-link @click="showProcess(scope.row)" :disabled="scope.row.status == -1"
plain :underline="false" size="small">进程</el-link>
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.enableRecorder == 1"
><el-link v-auth="'machine:update'" @click="showRec(scope.row)" plain :underline="false" size="small"
>终端回放</el-link
></el-dropdown-item
>
<el-dropdown-item v-if="scope.row.enableRecorder == 1">
<el-link v-auth="'machine:update'" @click="showRec(scope.row)" plain
:underline="false" size="small">终端回放</el-link>
</el-dropdown-item>
<el-dropdown-item
><el-link
:disabled="!scope.row.hasCli || scope.row.status == -1"
type="danger"
@click="closeCli(scope.row)"
plain
size="small"
:underline="false"
>关闭连接</el-link
></el-dropdown-item
>
<el-dropdown-item>
<el-link :disabled="!scope.row.hasCli || scope.row.status == -1" type="danger"
@click="closeCli(scope.row)" plain size="small" :underline="false">关闭连接
</el-link>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -151,42 +104,33 @@
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
:total="data.total"
layout="prev, pager, next, total, jumper"
v-model:current-page="params.pageNum"
:page-size="params.pageSize"
@current-change="handlePageChange"
></el-pagination>
<el-pagination style="text-align: right" :total="data.total" layout="prev, pager, next, total, jumper"
v-model:current-page="params.pageNum" :page-size="params.pageSize"
@current-change="handlePageChange"></el-pagination>
</el-row>
</el-card>
<machine-edit
:title="machineEditDialog.title"
v-model:visible="machineEditDialog.visible"
v-model:machine="machineEditDialog.data"
@valChange="submitSuccess"
></machine-edit>
<machine-edit :title="machineEditDialog.title" v-model:visible="machineEditDialog.visible"
v-model:machine="machineEditDialog.data" @valChange="submitSuccess"></machine-edit>
<process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />
<service-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible" v-model:machineId="serviceDialog.machineId" />
<service-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible"
v-model:machineId="serviceDialog.machineId" />
<file-manage :title="fileDialog.title" v-model:visible="fileDialog.visible" v-model:machineId="fileDialog.machineId" />
<file-manage :title="fileDialog.title" v-model:visible="fileDialog.visible"
v-model:machineId="fileDialog.machineId" />
<machine-stats
v-model:visible="machineStatsDialog.visible"
:machineId="machineStatsDialog.machineId"
:title="machineStatsDialog.title"
></machine-stats>
<machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId"
:title="machineStatsDialog.title"></machine-stats>
<machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId" :title="machineRecDialog.title"></machine-rec>
<machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId"
:title="machineRecDialog.title"></machine-rec>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { machineApi } from './api';
@@ -199,217 +143,198 @@ import MachineStats from './MachineStats.vue';
import MachineRec from './MachineRec.vue';
import { dateFormat } from '@/common/utils/date';
export default defineComponent({
name: 'MachineList',
components: {
ServiceManage,
ProcessList,
FileManage,
MachineEdit,
MachineStats,
MachineRec,
const router = useRouter();
const state = reactive({
tags: [] as any,
params: {
pageNum: 1,
pageSize: 10,
ip: null,
name: null,
tagPath: null,
},
setup() {
const router = useRouter();
const state = reactive({
tags: [] as any,
stats: '',
params: {
pageNum: 1,
pageSize: 10,
ip: null,
name: null,
tagPath: null,
},
// 列表数据
data: {
list: [],
total: 10,
},
// 当前选中数据id
currentId: 0,
currentData: null,
serviceDialog: {
visible: false,
machineId: 0,
title: '',
},
processDialog: {
visible: false,
machineId: 0,
},
fileDialog: {
visible: false,
machineId: 0,
title: '',
},
machineStatsDialog: {
visible: false,
stats: null,
title: '',
machineId: 0,
},
machineEditDialog: {
visible: false,
data: null as any,
title: '新增机器',
},
machineRecDialog: {
visible: false,
machineId: 0,
title: '',
},
});
onMounted(async () => {
search();
});
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const showTerminal = (row: any) => {
const { href } = router.resolve({
path: `/machine/terminal`,
query: {
id: row.id,
name: row.name,
},
});
window.open(href, '_blank');
};
const closeCli = async (row: any) => {
await ElMessageBox.confirm(`确定关闭该机器客户端连接?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await machineApi.closeCli.request({ id: row.id });
ElMessage.success('关闭成功');
search();
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const openFormDialog = async (machine: any) => {
let dialogTitle;
if (machine) {
state.machineEditDialog.data = state.currentData as any;
dialogTitle = '编辑机器';
} else {
state.machineEditDialog.data = null;
dialogTitle = '添加机器';
}
state.machineEditDialog.title = dialogTitle;
state.machineEditDialog.visible = true;
};
const deleteMachine = async (id: number) => {
try {
await ElMessageBox.confirm(`确定删除该机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await machineApi.del.request({ id });
ElMessage.success('操作成功');
state.currentId = 0;
state.currentData = null;
search();
} catch (err) {}
};
const serviceManager = (row: any) => {
state.serviceDialog.machineId = row.id;
state.serviceDialog.visible = true;
state.serviceDialog.title = `${row.name} => ${row.ip}`;
};
/**
* 调整机器状态
*/
const changeStatus = async (row: any) => {
await machineApi.changeStatus.request({ id: row.id, status: row.status });
};
/**
* 显示机器状态统计信息
*/
const showMachineStats = async (machine: any) => {
state.machineStatsDialog.machineId = machine.id;
state.machineStatsDialog.title = `机器状态: ${machine.name} => ${machine.ip}`;
state.machineStatsDialog.visible = true;
};
const submitSuccess = () => {
state.currentId = 0;
state.currentData = null;
search();
};
const fileManage = (currentData: any) => {
state.fileDialog.visible = true;
state.fileDialog.machineId = currentData.id;
state.fileDialog.title = `${currentData.name} => ${currentData.ip}`;
};
const search = async () => {
const res = await machineApi.list.request(state.params);
state.data = res;
};
const handlePageChange = (curPage: number) => {
state.params.pageNum = curPage;
search();
};
const showProcess = (row: any) => {
state.processDialog.machineId = row.id;
state.processDialog.visible = true;
};
const showRec = (row: any) => {
state.machineRecDialog.title = `${row.name}[${row.ip}]-终端回放记录`;
state.machineRecDialog.machineId = row.id;
state.machineRecDialog.visible = true;
};
return {
...toRefs(state),
dateFormat,
choose,
getTags,
showTerminal,
openFormDialog,
deleteMachine,
closeCli,
serviceManager,
showMachineStats,
showProcess,
changeStatus,
submitSuccess,
fileManage,
search,
showRec,
handlePageChange,
};
// 列表数据
data: {
list: [],
total: 10,
},
// 当前选中数据id
currentId: 0,
currentData: null,
serviceDialog: {
visible: false,
machineId: 0,
title: '',
},
processDialog: {
visible: false,
machineId: 0,
},
fileDialog: {
visible: false,
machineId: 0,
title: '',
},
machineStatsDialog: {
visible: false,
stats: null,
title: '',
machineId: 0,
},
machineEditDialog: {
visible: false,
data: null as any,
title: '新增机器',
},
machineRecDialog: {
visible: false,
machineId: 0,
title: '',
},
});
const {
tags,
params,
data,
currentId,
currentData,
serviceDialog,
processDialog,
fileDialog,
machineStatsDialog,
machineEditDialog,
machineRecDialog,
} = toRefs(state)
onMounted(async () => {
search();
});
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const showTerminal = (row: any) => {
const { href } = router.resolve({
path: `/machine/terminal`,
query: {
id: row.id,
name: row.name,
},
});
window.open(href, '_blank');
};
const closeCli = async (row: any) => {
await ElMessageBox.confirm(`确定关闭该机器客户端连接?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await machineApi.closeCli.request({ id: row.id });
ElMessage.success('关闭成功');
search();
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const openFormDialog = async (machine: any) => {
let dialogTitle;
if (machine) {
state.machineEditDialog.data = state.currentData as any;
dialogTitle = '编辑机器';
} else {
state.machineEditDialog.data = null;
dialogTitle = '添加机器';
}
state.machineEditDialog.title = dialogTitle;
state.machineEditDialog.visible = true;
};
const deleteMachine = async (id: number) => {
try {
await ElMessageBox.confirm(`确定删除该机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await machineApi.del.request({ id });
ElMessage.success('操作成功');
state.currentId = 0;
state.currentData = null;
search();
} catch (err) { }
};
const serviceManager = (row: any) => {
state.serviceDialog.machineId = row.id;
state.serviceDialog.visible = true;
state.serviceDialog.title = `${row.name} => ${row.ip}`;
};
/**
* 调整机器状态
*/
const changeStatus = async (row: any) => {
await machineApi.changeStatus.request({ id: row.id, status: row.status });
};
/**
* 显示机器状态统计信息
*/
const showMachineStats = async (machine: any) => {
state.machineStatsDialog.machineId = machine.id;
state.machineStatsDialog.title = `机器状态: ${machine.name} => ${machine.ip}`;
state.machineStatsDialog.visible = true;
};
const submitSuccess = () => {
state.currentId = 0;
state.currentData = null;
search();
};
const showFileManage = (currentData: any) => {
state.fileDialog.visible = true;
state.fileDialog.machineId = currentData.id;
state.fileDialog.title = `${currentData.name} => ${currentData.ip}`;
};
const search = async () => {
const res = await machineApi.list.request(state.params);
state.data = res;
};
const handlePageChange = (curPage: number) => {
state.params.pageNum = curPage;
search();
};
const showProcess = (row: any) => {
state.processDialog.machineId = row.id;
state.processDialog.visible = true;
};
const showRec = (row: any) => {
state.machineRecDialog.title = `${row.name}[${row.ip}]-终端回放记录`;
state.machineRecDialog.machineId = row.id;
state.machineRecDialog.visible = true;
};
</script>
<style>
.el-dialog__body {
padding: 2px 2px;
}
.el-dropdown-link-machine-list {
cursor: pointer;
color: var(--el-color-primary);

197
mayfly_go_web/src/views/ops/machine/MachineRec.vue
View File

@@ -1,13 +1,7 @@
<template>
<div id="terminalRecDialog">
<el-dialog
:title="title"
v-model="dialogVisible"
:before-close="handleClose"
:close-on-click-modal="false"
:destroy-on-close="true"
width="70%"
>
<el-dialog :title="title" v-model="dialogVisible" :before-close="handleClose" :close-on-click-modal="false"
:destroy-on-close="true" width="70%">
<div class="toolbar">
<el-select @change="getUsers" v-model="operateDate" placeholder="操作日期" filterable>
<el-option v-for="item in operateDates" :key="item" :label="item" :value="item"> </el-option>
@@ -26,107 +20,106 @@
</div>
</template>
<script lang="ts">
import { toRefs, watch, ref, reactive, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, watch, ref, reactive } from 'vue';
import { machineApi } from './api';
import * as AsciinemaPlayer from 'asciinema-player';
import 'asciinema-player/dist/bundle/asciinema-player.css';
export default defineComponent({
name: 'MachineRec',
components: {},
props: {
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
},
setup(props: any, context) {
const playerRef = ref(null);
const state = reactive({
dialogVisible: false,
title: '',
machineId: 0,
operateDates: [],
users: [],
recs: [],
operateDate: '',
user: '',
rec: '',
});
const props = defineProps({
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
})
watch(props, async (newValue) => {
const visible = newValue.visible;
if (visible) {
state.machineId = newValue.machineId;
state.title = newValue.title;
await getOperateDate();
}
state.dialogVisible = visible;
});
const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
const getOperateDate = async () => {
const res = await machineApi.recDirNames.request({ path: state.machineId });
state.operateDates = res as any;
};
const getUsers = async (operateDate: string) => {
state.users = [];
state.user = '';
state.recs = [];
state.rec = '';
const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${operateDate}` });
state.users = res as any;
};
const getRecs = async (user: string) => {
state.recs = [];
state.rec = '';
const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${state.operateDate}/${user}` });
state.recs = res as any;
};
let player: any = null;
const playRec = async (rec: string) => {
if (player) {
player.dispose();
}
const content = await machineApi.recDirNames.request({
isFile: '1',
path: `${state.machineId}/${state.operateDate}/${state.user}/${rec}`,
});
player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
autoPlay: true,
speed: 1.0,
idleTimeLimit: 2,
});
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
context.emit('update:visible', false);
context.emit('update:machineId', null);
context.emit('cancel');
state.operateDates = [];
state.users = [];
state.recs = [];
state.operateDate = '';
state.user = '';
state.rec = '';
};
return {
...toRefs(state),
playerRef,
getUsers,
getRecs,
playRec,
handleClose,
};
},
const playerRef = ref(null);
const state = reactive({
dialogVisible: false,
title: '',
machineId: 0,
operateDates: [],
users: [],
recs: [],
operateDate: '',
user: '',
rec: '',
});
const {
dialogVisible,
title,
operateDates,
operateDate,
users,
recs,
user,
rec,
} = toRefs(state)
watch(props, async (newValue: any) => {
const visible = newValue.visible;
if (visible) {
state.machineId = newValue.machineId;
state.title = newValue.title;
await getOperateDate();
}
state.dialogVisible = visible;
});
const getOperateDate = async () => {
const res = await machineApi.recDirNames.request({ path: state.machineId });
state.operateDates = res as any;
};
const getUsers = async (operateDate: string) => {
state.users = [];
state.user = '';
state.recs = [];
state.rec = '';
const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${operateDate}` });
state.users = res as any;
};
const getRecs = async (user: string) => {
state.recs = [];
state.rec = '';
const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${state.operateDate}/${user}` });
state.recs = res as any;
};
let player: any = null;
const playRec = async (rec: string) => {
if (player) {
player.dispose();
}
const content = await machineApi.recDirNames.request({
isFile: '1',
path: `${state.machineId}/${state.operateDate}/${state.user}/${rec}`,
});
player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
autoPlay: true,
speed: 1.0,
idleTimeLimit: 2,
});
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
emit('update:visible', false);
emit('update:machineId', null);
emit('cancel');
state.operateDates = [];
state.users = [];
state.recs = [];
state.operateDate = '';
state.user = '';
state.rec = '';
};
</script>
<style lang="scss">
#terminalRecDialog {

472
mayfly_go_web/src/views/ops/machine/MachineStats.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="true" :destroy-on-close="true" :before-close="cancel" width="1050px">
<el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="true" :destroy-on-close="true"
:before-close="cancel" width="1050px">
<el-row :gutter="20">
<el-col :lg="12" :md="12">
<el-descriptions size="small" title="基础信息" :column="2" border>
@@ -19,7 +20,8 @@
<el-descriptions-item label="运行中任务">
{{ stats.RunningProcs }}
</el-descriptions-item>
<el-descriptions-item label="负载"> {{ stats.Load1 }} {{ stats.Load5 }} {{ stats.Load10 }} </el-descriptions-item>
<el-descriptions-item label="负载"> {{ stats.Load1 }} {{ stats.Load5 }} {{ stats.Load10 }}
</el-descriptions-item>
</el-descriptions>
</el-col>
@@ -36,7 +38,8 @@
<el-col :lg="8" :md="8">
<span style="font-size: 16px; font-weight: 700">磁盘</span>
<el-table :data="stats.FSInfos" stripe max-height="250" style="width: 100%" border>
<el-table-column prop="MountPoint" label="挂载点" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="MountPoint" label="挂载点" min-width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="Used" label="可使用" min-width="70" show-overflow-tooltip>
<template #default="scope">
{{ formatByteSize(scope.row.Free) }}
@@ -54,8 +57,10 @@
<span style="font-size: 16px; font-weight: 700">网卡</span>
<el-table :data="netInter" stripe max-height="250" style="width: 100%" border>
<el-table-column prop="name" label="网卡" min-width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="IPv4" label="IPv4" min-width="130" show-overflow-tooltip></el-table-column>
<el-table-column prop="IPv6" label="IPv6" min-width="130" show-overflow-tooltip></el-table-column>
<el-table-column prop="IPv4" label="IPv4" min-width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="IPv6" label="IPv6" min-width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="Rx" label="接收(rx)" min-width="110" show-overflow-tooltip>
<template #default="scope">
{{ formatByteSize(scope.row.Rx) }}
@@ -73,245 +78,240 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref, nextTick } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref, nextTick } from 'vue';
import useEcharts from '@/common/echarts/useEcharts.ts';
import tdTheme from '@/common/echarts/theme.json';
import { formatByteSize } from '@/common/utils/format';
import { machineApi } from './api';
export default defineComponent({
name: 'MachineStats',
components: {},
props: {
visible: {
type: Boolean,
},
stats: {
type: Object,
},
machineId: {
type: Number,
},
title: {
type: String,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const cpuRef: any = ref();
const memRef: any = ref();
let cpuChart: any = null;
let memChart: any = null;
const state = reactive({
dialogVisible: false,
charts: [] as any,
stats: {} as any,
netInter: [] as any,
});
watch(props, async (newValue) => {
const visible = newValue.visible;
if (visible) {
await setStats();
}
state.dialogVisible = visible;
if (visible) {
initCharts();
}
});
const setStats = async () => {
state.stats = await machineApi.stats.request({ id: props.machineId });
};
const onRefresh = async () => {
await setStats();
initCharts();
};
const initMemStats = () => {
const data = [
{ name: '可用内存', value: state.stats.MemAvailable },
{
name: '已用内存',
value: state.stats.MemTotal - state.stats.MemAvailable,
},
];
const option = {
title: {
text: '内存',
x: 'left',
textStyle: { fontSize: 15 },
},
tooltip: {
trigger: 'item',
valueFormatter: formatByteSize,
},
legend: {
top: '15%',
orient: 'vertical',
left: 'left',
textStyle: { fontSize: 12 },
},
series: [
{
name: '内存',
type: 'pie',
radius: ['30%', '60%'], // 饼图内圈和外圈大小
center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '15',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
if (memChart) {
memChart.setOption(option, true);
return;
}
const chart: any = useEcharts(memRef.value, tdTheme, option);
memChart = chart;
state.charts.push(chart);
};
const initCpuStats = () => {
const cpu = state.stats.CPU;
const data = [
{ name: 'Idle', value: cpu.Idle },
{
name: 'Iowait',
value: cpu.Iowait,
},
{
name: 'System',
value: cpu.System,
},
{
name: 'User',
value: cpu.User,
},
];
const option = {
title: {
text: 'CPU使用率',
x: 'left',
textStyle: { fontSize: 15 },
},
tooltip: {
trigger: 'item',
valueFormatter: (value: any) => value + '%',
},
legend: {
top: '15%',
orient: 'vertical',
left: 'left',
textStyle: { fontSize: 12 },
},
series: [
{
name: 'CPU',
type: 'pie',
radius: ['30%', '60%'], // 饼图内圈和外圈大小
center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '15',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
if (cpuChart) {
cpuChart.setOption(option, true);
return;
}
const chart: any = useEcharts(cpuRef.value, tdTheme, option);
cpuChart = chart;
state.charts.push(chart);
};
const initCharts = () => {
nextTick(() => {
initMemStats();
initCpuStats();
});
parseNetInter();
initEchartsResize();
};
const initEchartResizeFun = () => {
nextTick(() => {
for (let i = 0; i < state.charts.length; i++) {
setTimeout(() => {
state.charts[i].resize();
}, i * 1000);
}
});
};
const initEchartsResize = () => {
window.addEventListener('resize', initEchartResizeFun);
};
const parseNetInter = () => {
state.netInter = [];
const netInter = state.stats.NetIntf;
const keys = Object.keys(netInter);
const values = Object.values(netInter);
for (let i = 0; i < values.length; i++) {
let value: any = values[i];
// 将网卡名称赋值新属性值name
value.name = keys[i];
state.netInter.push(value);
}
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
cpuChart = null;
memChart = null;
}, 200);
};
return {
...toRefs(state),
cpuRef,
memRef,
cancel,
formatByteSize,
onRefresh,
};
stats: {
type: Object,
},
machineId: {
type: Number,
},
title: {
type: String,
},
})
const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
const cpuRef: any = ref();
const memRef: any = ref();
let cpuChart: any = null;
let memChart: any = null;
const state = reactive({
dialogVisible: false,
stats: {} as any,
netInter: [] as any,
});
const {
dialogVisible,
stats,
netInter,
} = toRefs(state)
let charts = [] as any
watch(props, async (newValue: any) => {
const visible = newValue.visible;
if (visible) {
await setStats();
}
state.dialogVisible = visible;
if (visible) {
initCharts();
}
});
const setStats = async () => {
state.stats = await machineApi.stats.request({ id: props.machineId });
};
const onRefresh = async () => {
await setStats();
initCharts();
};
const initMemStats = () => {
const data = [
{ name: '可用内存', value: state.stats.MemAvailable },
{
name: '已用内存',
value: state.stats.MemTotal - state.stats.MemAvailable,
},
];
const option = {
title: {
text: '内存',
x: 'left',
textStyle: { fontSize: 15 },
},
tooltip: {
trigger: 'item',
valueFormatter: formatByteSize,
},
legend: {
top: '15%',
orient: 'vertical',
left: 'left',
textStyle: { fontSize: 12 },
},
series: [
{
name: '内存',
type: 'pie',
radius: ['30%', '60%'], // 饼图内圈和外圈大小
center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '15',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
if (memChart) {
memChart.setOption(option, true);
return;
}
const chart: any = useEcharts(memRef.value, tdTheme, option);
memChart = chart;
charts.push(chart);
};
const initCpuStats = () => {
const cpu = state.stats.CPU;
const data = [
{ name: 'Idle', value: cpu.Idle },
{
name: 'Iowait',
value: cpu.Iowait,
},
{
name: 'System',
value: cpu.System,
},
{
name: 'User',
value: cpu.User,
},
];
const option = {
title: {
text: 'CPU使用率',
x: 'left',
textStyle: { fontSize: 15 },
},
tooltip: {
trigger: 'item',
valueFormatter: (value: any) => value + '%',
},
legend: {
top: '15%',
orient: 'vertical',
left: 'left',
textStyle: { fontSize: 12 },
},
series: [
{
name: 'CPU',
type: 'pie',
radius: ['30%', '60%'], // 饼图内圈和外圈大小
center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '15',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
if (cpuChart) {
cpuChart.setOption(option, true);
return;
}
const chart: any = useEcharts(cpuRef.value, tdTheme, option);
cpuChart = chart;
charts.push(chart);
};
const initCharts = () => {
nextTick(() => {
initMemStats();
initCpuStats();
});
parseNetInter();
initEchartsResize();
};
const initEchartResizeFun = () => {
nextTick(() => {
for (let i = 0; i < charts.length; i++) {
setTimeout(() => {
charts[i].resize();
}, i * 1000);
}
});
};
const initEchartsResize = () => {
window.addEventListener('resize', initEchartResizeFun);
};
const parseNetInter = () => {
state.netInter = [];
const netInter = state.stats.NetIntf;
const keys = Object.keys(netInter);
const values = Object.values(netInter);
for (let i = 0; i < values.length; i++) {
let value: any = values[i];
// 将网卡名称赋值新属性值name
value.name = keys[i];
state.netInter.push(value);
}
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
cpuChart = null;
memChart = null;
}, 200);
};
</script>
<style lang="scss">
.card-item-chart {

248
mayfly_go_web/src/views/ops/machine/ProcessList.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="file-manage">
<el-dialog title="进程信息" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" :before-close="handleClose" width="65%">
<el-dialog title="进程信息" v-model="dialogVisible" :destroy-on-close="true" :show-close="true"
:before-close="handleClose" width="65%">
<div class="toolbar">
<el-row>
<el-col :span="4">
@@ -21,7 +22,8 @@
</el-select>
</el-col>
<el-col :span="6">
<el-button class="ml5" @click="getProcess" type="primary" icon="tickets" size="small" plain>刷新</el-button>
<el-button class="ml5" @click="getProcess" type="primary" icon="tickets" size="small" plain>刷新
</el-button>
</el-col>
</el-row>
</div>
@@ -35,7 +37,9 @@
<template #header>
VSZ
<el-tooltip class="box-item" effect="dark" content="虚拟内存" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -43,7 +47,9 @@
<template #header>
RSS
<el-tooltip class="box-item" effect="dark" content="固定内存" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -51,7 +57,9 @@
<template #header>
STAT
<el-tooltip class="box-item" effect="dark" content="进程状态" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -59,7 +67,9 @@
<template #header>
START
<el-tooltip class="box-item" effect="dark" content="启动时间" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -67,17 +77,21 @@
<template #header>
TIME
<el-tooltip class="box-item" effect="dark" content="该进程实际使用CPU运作的时间" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="command" label="command" :min-width="120" show-overflow-tooltip> </el-table-column>
<el-table-column prop="command" label="command" :min-width="120" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-popconfirm title="确定终止该进程?" @confirm="confirmKillProcess(scope.row.pid)">
<template #reference>
<el-button v-auth="'machine:killprocess'" type="danger" icon="delete" size="small" plain>终止</el-button>
<el-button v-auth="'machine:killprocess'" type="danger" icon="delete" size="small"
plain>终止</el-button>
</template>
</el-popconfirm>
<!-- <el-button @click="addFiles(scope.row)" type="danger" icon="delete" size="small" plain>终止</el-button> -->
@@ -88,118 +102,114 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { machineApi } from './api';
import enums from './enums';
export default defineComponent({
name: 'ProcessList',
components: {},
props: {
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
},
setup(props: any, context) {
const state = reactive({
dialogVisible: false,
params: {
name: '',
sortType: '1',
count: '10',
id: 0,
},
processList: [],
});
watch(props, (newValue) => {
if (props.machineId) {
state.params.id = props.machineId;
getProcess();
}
state.dialogVisible = newValue.visible;
});
const getProcess = async () => {
const res = await machineApi.process.request(state.params);
// 解析字符串
// USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
// root 1 0.0 0.0 125632 3352 ? Ss 2019 154:04 /usr/lib/systemd/systemd --system --deserialize 22
const psStrings = res.split('\n');
const ps = [];
// 如果有根据名称查进程，则第一行没有表头
const index = state.params.name == '' ? 1 : 0;
for (let i = index; i < psStrings.length; i++) {
const psStr = psStrings[i];
const process = psStr.split(/\s+/);
if (process.length < 2) {
continue;
}
let command = process[10];
// 搜索进程时由于使用grep命令，可能会多个bash或grep进程
if (state.params.name) {
if (command == 'bash' || command == 'grep') {
continue;
}
}
// 获取command，由于command中也有可能存在空格被切割，故重新拼接
for (let j = 10; j < process.length - 1; j++) {
command += ' ' + process[j + 1];
}
ps.push({
user: process[0],
pid: process[1],
cpu: process[2],
mem: process[3],
vsz: kb2Mb(process[4]),
rss: kb2Mb(process[5]),
stat: process[7],
start: process[8],
time: process[9],
command,
});
}
state.processList = ps as any;
};
const confirmKillProcess = async (pid: any) => {
await machineApi.killProcess.request({
pid,
id: state.params.id,
});
ElMessage.success('kill success');
state.params.name = '';
getProcess();
};
const kb2Mb = (kb: string) => {
return (parseInt(kb) / 1024).toFixed(2) + 'M';
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
context.emit('update:visible', false);
context.emit('update:machineId', null);
context.emit('cancel');
state.params = {
name: '',
sortType: '1',
count: '10',
id: 0,
};
state.processList = [];
};
return {
...toRefs(state),
getProcess,
confirmKillProcess,
enums,
handleClose,
};
const props = defineProps({
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
})
const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
const state = reactive({
dialogVisible: false,
params: {
name: '',
sortType: '1',
count: '10',
id: 0,
},
processList: [],
});
const {
dialogVisible,
params,
processList,
} = toRefs(state)
watch(props, (newValue) => {
if (props.machineId) {
state.params.id = props.machineId;
getProcess();
}
state.dialogVisible = newValue.visible;
});
const getProcess = async () => {
const res = await machineApi.process.request(state.params);
// 解析字符串
// USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
// root 1 0.0 0.0 125632 3352 ? Ss 2019 154:04 /usr/lib/systemd/systemd --system --deserialize 22
const psStrings = res.split('\n');
const ps = [];
// 如果有根据名称查进程，则第一行没有表头
const index = state.params.name == '' ? 1 : 0;
for (let i = index; i < psStrings.length; i++) {
const psStr = psStrings[i];
const process = psStr.split(/\s+/);
if (process.length < 2) {
continue;
}
let command = process[10];
// 搜索进程时由于使用grep命令，可能会多个bash或grep进程
if (state.params.name) {
if (command == 'bash' || command == 'grep') {
continue;
}
}
// 获取command，由于command中也有可能存在空格被切割，故重新拼接
for (let j = 10; j < process.length - 1; j++) {
command += ' ' + process[j + 1];
}
ps.push({
user: process[0],
pid: process[1],
cpu: process[2],
mem: process[3],
vsz: kb2Mb(process[4]),
rss: kb2Mb(process[5]),
stat: process[7],
start: process[8],
time: process[9],
command,
});
}
state.processList = ps as any;
};
const confirmKillProcess = async (pid: any) => {
await machineApi.killProcess.request({
pid,
id: state.params.id,
});
ElMessage.success('kill success');
state.params.name = '';
getProcess();
};
const kb2Mb = (kb: string) => {
return (parseInt(kb) / 1024).toFixed(2) + 'M';
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
emit('update:visible', false);
emit('update:machineId', null);
emit('cancel');
state.params = {
name: '',
sortType: '1',
count: '10',
id: 0,
};
state.processList = [];
};
</script>

251
mayfly_go_web/src/views/ops/machine/ScriptEdit.vue
View File

@@ -1,14 +1,7 @@
<template>
<div class="mock-data-dialog">
<el-dialog
:title="title"
v-model="dialogVisible"
:close-on-click-modal="false"
:before-close="cancel"
:show-close="true"
:destroy-on-close="true"
width="900px"
>
<el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :before-close="cancel"
:show-close="true" :destroy-on-close="true" width="900px">
<el-form :model="form" ref="scriptForm" label-width="50px" size="small">
<el-form-item prop="method" label="名称">
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
@@ -20,7 +13,8 @@
<el-form-item prop="type" label="类型">
<el-select v-model="form.type" default-first-option style="width: 100%" placeholder="请选择类型">
<el-option v-for="item in enums.scriptTypeEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in enums.scriptTypeEnum as any" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
@@ -29,17 +23,25 @@
</el-row>
<el-form-item :key="param" v-for="(param, index) in params" prop="params" :label="`参数${index + 1}`">
<el-row>
<el-col :span="5"><el-input v-model="param.model" placeholder="内容中用{{.model}}替换"></el-input></el-col>
<el-col :span="5">
<el-input v-model="param.model" placeholder="内容中用{{.model}}替换"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4"><el-input v-model="param.name" placeholder="字段名"></el-input></el-col>
<el-col :span="4">
<el-input v-model="param.name" placeholder="字段名"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4"><el-input v-model="param.placeholder" placeholder="字段说明"></el-input></el-col>
<el-col :span="4">
<el-input v-model="param.placeholder" placeholder="字段说明"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4">
<el-input v-model="param.options" placeholder="可选值 ,分割"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="2"><el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button></el-col>
<el-col :span="2">
<el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button>
</el-col>
</el-row>
</el-form-item>
@@ -51,22 +53,16 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()" :disabled="submitDisabled">关 闭</el-button>
<el-button
v-auth="'machine:script:save'"
type="primary"
:loading="btnLoading"
@click="btnOk"
:disabled="submitDisabled"
>保 存</el-button
>
<el-button v-auth="'machine:script:save'" type="primary" :loading="btnLoading" @click="btnOk"
:disabled="submitDisabled">保 存</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { machineApi } from './api';
import enums from './enums';
@@ -74,117 +70,110 @@ import { notEmpty } from '@/common/assert';
import { codemirror } from '@/components/codemirror';
export default defineComponent({
name: 'ScriptEdit',
components: {
codemirror,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
data: {
type: Object,
},
title: {
type: String,
},
machineId: {
type: Number,
},
isCommon: {
type: Boolean,
},
data: {
type: Object,
},
setup(props: any, { emit }) {
const { isCommon, machineId } = toRefs(props);
const scriptForm: any = ref(null);
const state = reactive({
dialogVisible: false,
submitDisabled: false,
params: [] as any,
form: {
id: null,
name: '',
machineId: 0,
description: '',
script: '',
params: '',
type: null,
},
btnLoading: false,
});
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (!newValue.visible) {
return;
}
if (newValue.data) {
state.form = { ...newValue.data };
if (state.form.params) {
state.params = JSON.parse(state.form.params);
}
} else {
state.form = {} as any;
state.form.script = '';
}
});
const onAddParam = () => {
state.params.push({ name: '', model: '', placeholder: '' });
};
const onDeleteParam = (idx: number) => {
state.params.splice(idx, 1);
};
const btnOk = () => {
state.form.machineId = isCommon.value ? 9999999 : (machineId.value as any);
console.log('machineid:', machineId);
scriptForm.value.validate((valid: any) => {
if (valid) {
notEmpty(state.form.name, '名称不能为空');
notEmpty(state.form.description, '描述不能为空');
notEmpty(state.form.script, '内容不能为空');
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
machineApi.saveScript.request(state.form).then(
() => {
ElMessage.success('保存成功');
emit('submitSuccess');
state.submitDisabled = false;
cancel();
},
() => {
state.submitDisabled = false;
}
);
} else {
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
state.params = [];
};
return {
...toRefs(state),
enums,
onAddParam,
onDeleteParam,
scriptForm,
btnOk,
cancel,
};
title: {
type: String,
},
machineId: {
type: Number,
},
isCommon: {
type: Boolean,
},
})
const emit = defineEmits(['update:visible', 'cancel', 'submitSuccess'])
const { isCommon, machineId } = toRefs(props);
const scriptForm: any = ref(null);
const state = reactive({
dialogVisible: false,
submitDisabled: false,
params: [] as any,
form: {
id: null,
name: '',
machineId: 0,
description: '',
script: '',
params: '',
type: null,
},
btnLoading: false,
});
const {
dialogVisible,
submitDisabled,
params,
form,
btnLoading,
} = toRefs(state)
watch(props, (newValue: any) => {
state.dialogVisible = newValue.visible;
if (!newValue.visible) {
return;
}
if (newValue.data) {
state.form = { ...newValue.data };
if (state.form.params) {
state.params = JSON.parse(state.form.params);
}
} else {
state.form = {} as any;
state.form.script = '';
}
});
const onAddParam = () => {
state.params.push({ name: '', model: '', placeholder: '' });
};
const onDeleteParam = (idx: number) => {
state.params.splice(idx, 1);
};
const btnOk = () => {
state.form.machineId = isCommon.value ? 9999999 : (machineId?.value as any);
console.log('machineid:', machineId);
scriptForm.value.validate((valid: any) => {
if (valid) {
notEmpty(state.form.name, '名称不能为空');
notEmpty(state.form.description, '描述不能为空');
notEmpty(state.form.script, '内容不能为空');
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
machineApi.saveScript.request(state.form).then(
() => {
ElMessage.success('保存成功');
emit('submitSuccess');
state.submitDisabled = false;
cancel();
},
() => {
state.submitDisabled = false;
}
);
} else {
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
state.params = [];
};
</script>
<style lang="scss">
#content {

531
mayfly_go_web/src/views/ops/machine/ServiceManage.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="file-manage">
<el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" :before-close="handleClose" width="60%">
<el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true"
:before-close="handleClose" width="60%">
<div class="toolbar">
<div style="float: left">
<el-select v-model="type" @change="getScripts" size="small" placeholder="请选择">
@@ -9,20 +10,12 @@
</el-select>
</div>
<div style="float: right">
<el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary" icon="tickets" size="small" plain
>查看</el-button
>
<el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus" size="small" plain>添加</el-button>
<el-button
v-auth="'machine:script:del'"
:disabled="currentId == null"
type="danger"
@click="deleteRow(currentData)"
icon="delete"
size="small"
plain
>删除</el-button
>
<el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary"
icon="tickets" size="small" plain>查看</el-button>
<el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus"
size="small" plain>添加</el-button>
<el-button v-auth="'machine:script:del'" :disabled="currentId == null" type="danger"
@click="deleteRow(currentData)" icon="delete" size="small" plain>删除</el-button>
</div>
</div>
@@ -43,56 +36,32 @@
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="el-icon-success" size="small" plain
>确定</el-button
>
<el-button v-if="scope.row.id == null" type="success" icon="el-icon-success" size="small" plain>
确定</el-button>
<el-button
v-auth="'machine:script:run'"
v-if="scope.row.id != null"
@click="runScript(scope.row)"
type="primary"
icon="video-play"
size="small"
plain
>执行</el-button
>
<el-button v-auth="'machine:script:run'" v-if="scope.row.id != null"
@click="runScript(scope.row)" type="primary" icon="video-play" size="small" plain>执行
</el-button>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 10px" type="flex" justify="end">
<el-pagination
small
style="text-align: center"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
@current-change="handlePageChange"
></el-pagination>
<el-pagination small style="text-align: center" :total="total" layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum" :page-size="query.pageSize" @current-change="handlePageChange">
</el-pagination>
</el-row>
</el-dialog>
<el-dialog title="脚本参数" v-model="scriptParamsDialog.visible" width="400px">
<el-form ref="paramsForm" :model="scriptParamsDialog.params" label-width="70px" size="small">
<el-form-item v-for="item in scriptParamsDialog.paramsFormItem" :key="item.name" :prop="item.model" :label="item.name" required>
<el-input
v-if="!item.options"
v-model="scriptParamsDialog.params[item.model]"
:placeholder="item.placeholder"
autocomplete="off"
clearable
></el-input>
<el-select
v-else
v-model="scriptParamsDialog.params[item.model]"
:placeholder="item.placeholder"
filterable
autocomplete="off"
clearable
style="width: 100%"
>
<el-option v-for="option in item.options.split(',')" :key="option" :label="option" :value="option" />
<el-form-item v-for="item in scriptParamsDialog.paramsFormItem as any" :key="item.name"
:prop="item.model" :label="item.name" required>
<el-input v-if="!item.options" v-model="scriptParamsDialog.params[item.model]"
:placeholder="item.placeholder" autocomplete="off" clearable></el-input>
<el-select v-else v-model="scriptParamsDialog.params[item.model]" :placeholder="item.placeholder"
filterable autocomplete="off" clearable style="width: 100%">
<el-option v-for="option in item.options.split(',')" :key="option" :label="option"
:value="option" />
</el-select>
</el-form-item>
</el-form>
@@ -109,257 +78,237 @@
</div>
</el-dialog>
<el-dialog
v-if="terminalDialog.visible"
title="终端"
v-model="terminalDialog.visible"
width="80%"
:close-on-click-modal="false"
:modal="false"
@close="closeTermnial"
>
<ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId" height="560px" />
<el-dialog v-if="terminalDialog.visible" title="终端" v-model="terminalDialog.visible" width="80%"
:close-on-click-modal="false" :modal="false" @close="closeTermnial">
<ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId"
height="560px" />
</el-dialog>
<script-edit
v-model:visible="editDialog.visible"
v-model:data="editDialog.data"
:title="editDialog.title"
v-model:machineId="editDialog.machineId"
:isCommon="type == 1"
@submitSuccess="submitSuccess"
/>
<script-edit v-model:visible="editDialog.visible" v-model:data="editDialog.data" :title="editDialog.title"
v-model:machineId="editDialog.machineId" :isCommon="type == 1" @submitSuccess="submitSuccess" />
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import SshTerminal from './SshTerminal.vue';
import { machineApi } from './api';
import enums from './enums';
import ScriptEdit from './ScriptEdit.vue';
export default defineComponent({
name: 'ServiceManage',
components: {
ScriptEdit,
SshTerminal,
const props = defineProps({
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
})
const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
const paramsForm: any = ref(null);
const state = reactive({
dialogVisible: false,
type: 0,
currentId: null,
currentData: null,
query: {
machineId: 0 as any,
pageNum: 1,
pageSize: 8,
},
props: {
visible: { type: Boolean },
machineId: { type: Number },
title: { type: String },
editDialog: {
visible: false,
data: null as any,
title: '',
machineId: 9999999,
},
setup(props: any, context) {
const paramsForm: any = ref(null);
const state = reactive({
dialogVisible: false,
type: 0,
currentId: null,
currentData: null,
query: {
machineId: 0,
pageNum: 1,
pageSize: 8,
},
editDialog: {
visible: false,
data: null,
title: '',
machineId: 9999999,
},
total: 0,
scriptTable: [],
scriptParamsDialog: {
visible: false,
params: {},
paramsFormItem: [],
},
resultDialog: {
visible: false,
result: '',
},
terminalDialog: {
visible: false,
cmd: '',
machineId: 0,
},
});
watch(props, async (newValue) => {
if (props.machineId && newValue.visible) {
await getScripts();
}
state.dialogVisible = newValue.visible;
});
const getScripts = async () => {
state.currentId = null;
state.currentData = null;
state.query.machineId = state.type == 0 ? props.machineId : 9999999;
const res = await machineApi.scripts.request(state.query);
state.scriptTable = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
getScripts();
};
const runScript = async (script: any) => {
// 如果存在参数，则弹窗输入参数后执行
if (script.params) {
state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
state.scriptParamsDialog.visible = true;
return;
}
}
run(script);
};
// 有参数的脚本执行函数
const hasParamsRun = async (script: any) => {
// 如果脚本参数弹窗显示，则校验参数表单数据通过后执行
if (state.scriptParamsDialog.visible) {
paramsForm.value.validate((valid: any) => {
if (valid) {
run(script);
state.scriptParamsDialog.params = {};
state.scriptParamsDialog.visible = false;
paramsForm.value.resetFields();
} else {
return false;
}
});
}
};
const run = async (script: any) => {
const noResult = script.type == enums.scriptTypeEnum['NO_RESULT'].value;
// 如果脚本类型为有结果类型，则显示结果信息
if (script.type == enums.scriptTypeEnum['RESULT'].value || noResult) {
const res = await machineApi.runScript.request({
machineId: props.machineId,
scriptId: script.id,
params: state.scriptParamsDialog.params,
});
if (noResult) {
ElMessage.success('执行完成');
return;
}
state.resultDialog.result = res;
state.resultDialog.visible = true;
return;
}
if (script.type == enums.scriptTypeEnum['REAL_TIME'].value) {
script = script.script;
if (state.scriptParamsDialog.params) {
script = templateResolve(script, state.scriptParamsDialog.params);
}
state.terminalDialog.cmd = script;
state.terminalDialog.visible = true;
state.terminalDialog.machineId = props.machineId;
return;
}
};
/**
* 解析 {{.param}} 形式模板字符串
*/
function templateResolve(template: string, param: any) {
return template.replace(/\{{.\w+\}}/g, (word) => {
const key = word.substring(3, word.length - 2);
const value = param[key];
if (value != null || value != undefined) {
return value;
}
return '';
});
}
const closeTermnial = () => {
state.terminalDialog.visible = false;
state.terminalDialog.machineId = 0;
};
/**
* 选择数据
*/
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const editScript = (data: any) => {
state.editDialog.machineId = props.machineId;
state.editDialog.data = data;
if (data) {
state.editDialog.title = '查看编辑脚本';
} else {
state.editDialog.title = '新增脚本';
}
state.editDialog.visible = true;
};
const submitSuccess = () => {
getScripts();
};
const deleteRow = (row: any) => {
ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
machineApi.deleteScript
.request({
machineId: props.machineId,
scriptId: row.id,
})
.then(() => {
getScripts();
});
// 删除配置文件
});
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
context.emit('update:visible', false);
context.emit('update:machineId', null);
context.emit('cancel');
state.scriptTable = [];
state.scriptParamsDialog.paramsFormItem = [];
};
return {
...toRefs(state),
paramsForm,
enums,
getScripts,
handlePageChange,
runScript,
hasParamsRun,
closeTermnial,
choose,
editScript,
submitSuccess,
deleteRow,
handleClose,
};
total: 0,
scriptTable: [],
scriptParamsDialog: {
visible: false,
params: {},
paramsFormItem: [],
},
resultDialog: {
visible: false,
result: '',
},
terminalDialog: {
visible: false,
cmd: '',
machineId: 0,
},
});
const {
dialogVisible,
type,
currentId,
currentData,
query,
editDialog,
total,
scriptTable,
scriptParamsDialog,
resultDialog,
terminalDialog,
} = toRefs(state)
watch(props, async (newValue) => {
if (props.machineId && newValue.visible) {
await getScripts();
}
state.dialogVisible = newValue.visible;
});
const getScripts = async () => {
state.currentId = null;
state.currentData = null;
state.query.machineId = state.type == 0 ? props.machineId : 9999999;
const res = await machineApi.scripts.request(state.query);
state.scriptTable = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
getScripts();
};
const runScript = async (script: any) => {
// 如果存在参数，则弹窗输入参数后执行
if (script.params) {
state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
state.scriptParamsDialog.visible = true;
return;
}
}
run(script);
};
// 有参数的脚本执行函数
const hasParamsRun = async (script: any) => {
// 如果脚本参数弹窗显示，则校验参数表单数据通过后执行
if (state.scriptParamsDialog.visible) {
paramsForm.value.validate((valid: any) => {
if (valid) {
run(script);
state.scriptParamsDialog.params = {};
state.scriptParamsDialog.visible = false;
paramsForm.value.resetFields();
} else {
return false;
}
});
}
};
const run = async (script: any) => {
const noResult = script.type == enums.scriptTypeEnum['NO_RESULT'].value;
// 如果脚本类型为有结果类型，则显示结果信息
if (script.type == enums.scriptTypeEnum['RESULT'].value || noResult) {
const res = await machineApi.runScript.request({
machineId: props.machineId,
scriptId: script.id,
params: state.scriptParamsDialog.params,
});
if (noResult) {
ElMessage.success('执行完成');
return;
}
state.resultDialog.result = res;
state.resultDialog.visible = true;
return;
}
if (script.type == enums.scriptTypeEnum['REAL_TIME'].value) {
script = script.script;
if (state.scriptParamsDialog.params) {
script = templateResolve(script, state.scriptParamsDialog.params);
}
state.terminalDialog.cmd = script;
state.terminalDialog.visible = true;
state.terminalDialog.machineId = props.machineId as any;
return;
}
};
/**
* 解析 {{.param}} 形式模板字符串
*/
function templateResolve(template: string, param: any) {
return template.replace(/\{{.\w+\}}/g, (word) => {
const key = word.substring(3, word.length - 2);
const value = param[key];
if (value != null || value != undefined) {
return value;
}
return '';
});
}
const closeTermnial = () => {
state.terminalDialog.visible = false;
state.terminalDialog.machineId = 0;
};
/**
* 选择数据
*/
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const editScript = (data: any) => {
state.editDialog.machineId = props.machineId as any;
state.editDialog.data = data;
if (data) {
state.editDialog.title = '查看编辑脚本';
} else {
state.editDialog.title = '新增脚本';
}
state.editDialog.visible = true;
};
const submitSuccess = () => {
getScripts();
};
const deleteRow = (row: any) => {
ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
machineApi.deleteScript
.request({
machineId: props.machineId,
scriptId: row.id,
})
.then(() => {
getScripts();
});
// 删除配置文件
});
};
/**
* 关闭取消按钮触发的事件
*/
const handleClose = () => {
emit('update:visible', false);
emit('update:machineId', null);
emit('cancel');
state.scriptTable = [];
state.scriptParamsDialog.paramsFormItem = [];
};
</script>
<style lang="sass">
</style>

361
mayfly_go_web/src/views/ops/machine/SshTerminal.vue
View File

@@ -2,196 +2,191 @@
<div :style="{ height: height }" id="xterm" class="xterm" />
</template>
<script lang="ts">
<script lang="ts" setup>
import 'xterm/css/xterm.css';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { getSession } from '@/common/utils/storage.ts';
import config from '@/common/config';
import { useStore } from '@/store/index.ts';
import { nextTick, toRefs, watch, computed, reactive, defineComponent, onMounted, onBeforeUnmount } from 'vue';
import { nextTick, toRefs, watch, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
export default defineComponent({
name: 'SshTerminal',
props: {
machineId: { type: Number },
cmd: { type: String },
height: { type: String },
},
setup(props: any) {
const state = reactive({
machineId: 0,
cmd: '',
height: '',
term: null as any,
socket: null as any,
});
const props = defineProps({
machineId: { type: Number },
cmd: { type: String },
height: { type: String },
})
const resize = 1;
const data = 2;
const ping = 3;
watch(props, (newValue) => {
state.machineId = newValue.machineId;
state.cmd = newValue.cmd;
state.height = newValue.height;
});
onMounted(() => {
state.machineId = props.machineId;
state.height = props.height;
state.cmd = props.cmd;
});
onBeforeUnmount(() => {
closeAll();
});
const store = useStore();
// 获取布局配置信息
const getThemeConfig: any = computed(() => {
return store.state.themeConfig.themeConfig;
});
nextTick(() => {
initXterm();
initSocket();
});
function initXterm() {
const term: any = new Terminal({
fontSize: getThemeConfig.value.terminalFontSize || 15,
fontWeight: getThemeConfig.value.terminalFontWeight || 'normal',
fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
cursorBlink: true,
disableStdin: false,
theme: {
foreground: getThemeConfig.value.terminalForeground || '#7e9192', //字体
background: getThemeConfig.value.terminalBackground || '#002833', //背景色
cursor: getThemeConfig.value.terminalCursor || '#268F81', //设置光标
// cursorAccent: "red", // 光标停止颜色
} as any,
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('xterm'));
fitAddon.fit();
term.focus();
state.term = term;
// 监听窗口resize
window.addEventListener('resize', () => {
try {
// 窗口大小改变时，触发xterm的resize方法使自适应
fitAddon.fit();
if (state.term) {
state.term.focus();
send({
type: resize,
Cols: parseInt(state.term.cols),
Rows: parseInt(state.term.rows),
});
}
} catch (e) {
console.log(e);
}
});
// / **
// *添加事件监听器，用于按下键时的事件。事件值包含
// *将在data事件以及DOM事件中发送的字符串
// *触发了它。
// * @返回一个IDisposable停止监听。
// * /
// / ** 更新：xterm 4.x（新增）
// *为数据事件触发时添加事件侦听器。发生这种情况
// *用户输入或粘贴到终端时的示例。事件值
// *是`string`结果的结果，在典型的设置中，应该通过
// *到支持pty。
// * @返回一个IDisposable停止监听。
// * /
// 支持输入与粘贴方法
term.onData((key: any) => {
sendCmd(key);
});
}
let pingInterval: any;
function initSocket() {
state.socket = new WebSocket(
`${config.baseWsUrl}/machines/${state.machineId}/terminal?token=${getSession('token')}&cols=${state.term.cols}&rows=${
state.term.rows
}`
);
// 监听socket连接
state.socket.onopen = () => {
// 如果有初始要执行的命令，则发送执行命令
if (state.cmd) {
sendCmd(state.cmd + ' \r');
}
// 开启心跳
pingInterval = setInterval(() => {
send({ type: ping, msg: 'ping' });
}, 8000);
};
// 监听socket错误信息
state.socket.onerror = (e: any) => {
console.log('连接错误', e);
};
state.socket.onclose = () => {
if (state.term) {
state.term.writeln('\r\n\x1b[31m提示: 连接已关闭...');
}
if (pingInterval) {
clearInterval(pingInterval);
}
};
// 发送socket消息
state.socket.onsend = send;
// 监听socket消息
state.socket.onmessage = getMessage;
}
function getMessage(msg: any) {
// msg.data是真正后端返回的数据
state.term.write(msg.data);
}
function send(msg: any) {
state.socket.send(JSON.stringify(msg));
}
function sendCmd(key: any) {
send({
type: data,
msg: key,
});
}
function close() {
if (state.socket) {
state.socket.close();
console.log('socket关闭');
}
}
function closeAll() {
close();
if (state.term) {
state.term.dispose();
state.term = null;
}
}
return {
...toRefs(state),
};
},
const state = reactive({
machineId: 0,
cmd: '',
height: '',
term: null as any,
socket: null as any,
});
const {
height,
} = toRefs(state)
const resize = 1;
const data = 2;
const ping = 3;
watch(props, (newValue: any) => {
state.machineId = newValue.machineId;
state.cmd = newValue.cmd;
state.height = newValue.height;
});
onMounted(() => {
state.machineId = props.machineId as any;
state.height = props.height as any;
state.cmd = props.cmd as any;
});
onBeforeUnmount(() => {
closeAll();
});
const store = useStore();
// 获取布局配置信息
const getThemeConfig: any = computed(() => {
return store.state.themeConfig.themeConfig;
});
nextTick(() => {
initXterm();
initSocket();
});
function initXterm() {
const term: any = new Terminal({
fontSize: getThemeConfig.value.terminalFontSize || 15,
fontWeight: getThemeConfig.value.terminalFontWeight || 'normal',
fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
cursorBlink: true,
disableStdin: false,
theme: {
foreground: getThemeConfig.value.terminalForeground || '#7e9192', //字体
background: getThemeConfig.value.terminalBackground || '#002833', //背景色
cursor: getThemeConfig.value.terminalCursor || '#268F81', //设置光标
// cursorAccent: "red", // 光标停止颜色
} as any,
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('xterm'));
fitAddon.fit();
term.focus();
state.term = term;
// 监听窗口resize
window.addEventListener('resize', () => {
try {
// 窗口大小改变时，触发xterm的resize方法使自适应
fitAddon.fit();
if (state.term) {
state.term.focus();
send({
type: resize,
Cols: parseInt(state.term.cols),
Rows: parseInt(state.term.rows),
});
}
} catch (e) {
console.log(e);
}
});
// / **
// *添加事件监听器，用于按下键时的事件。事件值包含
// *将在data事件以及DOM事件中发送的字符串
// *触发了它。
// * @返回一个IDisposable停止监听。
// * /
// / ** 更新：xterm 4.x（新增）
// *为数据事件触发时添加事件侦听器。发生这种情况
// *用户输入或粘贴到终端时的示例。事件值
// *是`string`结果的结果，在典型的设置中，应该通过
// *到支持pty。
// * @返回一个IDisposable停止监听。
// * /
// 支持输入与粘贴方法
term.onData((key: any) => {
sendCmd(key);
});
}
let pingInterval: any;
function initSocket() {
state.socket = new WebSocket(
`${config.baseWsUrl}/machines/${state.machineId}/terminal?token=${getSession('token')}&cols=${state.term.cols}&rows=${state.term.rows
}`
);
// 监听socket连接
state.socket.onopen = () => {
// 如果有初始要执行的命令，则发送执行命令
if (state.cmd) {
sendCmd(state.cmd + ' \r');
}
// 开启心跳
pingInterval = setInterval(() => {
send({ type: ping, msg: 'ping' });
}, 8000);
};
// 监听socket错误信息
state.socket.onerror = (e: any) => {
console.log('连接错误', e);
};
state.socket.onclose = () => {
if (state.term) {
state.term.writeln('\r\n\x1b[31m提示: 连接已关闭...');
}
if (pingInterval) {
clearInterval(pingInterval);
}
};
// 发送socket消息
state.socket.onsend = send;
// 监听socket消息
state.socket.onmessage = getMessage;
}
function getMessage(msg: any) {
// msg.data是真正后端返回的数据
state.term.write(msg.data);
}
function send(msg: any) {
state.socket.send(JSON.stringify(msg));
}
function sendCmd(key: any) {
send({
type: data,
msg: key,
});
}
function close() {
if (state.socket) {
state.socket.close();
console.log('socket关闭');
}
}
function closeAll() {
close();
if (state.term) {
state.term.dispose();
state.term = null;
}
}
</script>

39
mayfly_go_web/src/views/ops/machine/SshTerminalPage.vue
View File

@@ -4,36 +4,27 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import SshTerminal from './SshTerminal.vue';
import { reactive, toRefs, defineComponent, onMounted } from 'vue';
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
name: 'SshTerminalPage',
components: {
SshTerminal,
},
props: {
machineId: { type: Number },
},
setup() {
const route = useRoute();
const state = reactive({
machineId: 0,
height: 700,
});
const route = useRoute();
const state = reactive({
machineId: 0,
height: 700,
});
onMounted(() => {
state.height = window.innerHeight + 5;
state.machineId = Number.parseInt(route.query.id as string);
});
const {
machineId,
height,
} = toRefs(state)
return {
...toRefs(state),
};
},
onMounted(() => {
state.height = window.innerHeight + 5;
state.machineId = Number.parseInt(route.query.id as string);
});
</script>
<style lang="scss">
</style>

709
mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
View File

@@ -5,14 +5,8 @@
<el-col :span="24">
<el-form class="search-form" label-position="right" :inline="true">
<el-form-item label="标签">
<el-select
@change="changeTag"
@focus="getTags"
v-model="query.tagPath"
placeholder="请选择标签"
filterable
style="width: 250px"
>
<el-select @change="changeTag" @focus="getTags" v-model="query.tagPath" placeholder="请选择标签"
filterable style="width: 250px">
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
</el-select>
</el-form-item>
@@ -20,17 +14,20 @@
<el-select v-model="mongoId" placeholder="请选择mongo" @change="changeMongo">
<el-option v-for="item in mongoList" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{ ` [${item.uri}]` }}</span>
<span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{ `
[${item.uri}]`
}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="库" label-width="20px">
<el-select v-model="database" placeholder="请选择库" @change="changeDatabase" filterable>
<el-option v-for="item in databases" :key="item.Name" :label="item.Name" :value="item.Name">
<el-option v-for="item in databases" :key="item.Name" :label="item.Name"
:value="item.Name">
<span style="float: left">{{ item.Name }}</span>
<span style="float: right; color: #8492a6; margin-left: 4px; font-size: 13px">{{
` [${formatByteSize(item.SizeOnDisk)}]`
` [${formatByteSize(item.SizeOnDisk)}]`
}}</span>
</el-option>
</el-select>
@@ -38,7 +35,8 @@
<el-form-item label="集合" label-width="40px">
<el-select v-model="collection" placeholder="请选择集合" @change="changeCollection" filterable>
<el-option v-for="item in collections" :key="item" :label="item" :value="item"> </el-option>
<el-option v-for="item in collections" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
</el-form>
@@ -47,19 +45,18 @@
</div>
<el-container id="data-exec" style="border: 1px solid #eee; margin-top: 1px">
<el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%; margin-left: 5px" v-model="activeName">
<el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%; margin-left: 5px"
v-model="activeName">
<el-tab-pane closable v-for="dt in dataTabs" :key="dt.name" :label="dt.name" :name="dt.name">
<el-row v-if="mongoId">
<el-link @click="findCommand(activeName)" icon="refresh" :underline="false" class="ml5"></el-link>
<el-link @click="showInsertDocDialog" class="ml5" type="primary" icon="plus" :underline="false"></el-link>
<el-link @click="findCommand(activeName)" icon="refresh" :underline="false" class="ml5">
</el-link>
<el-link @click="showInsertDocDialog" class="ml5" type="primary" icon="plus" :underline="false">
</el-link>
</el-row>
<el-row class="mt5 mb5">
<el-input
ref="findParamInputRef"
v-model="dt.findParamStr"
placeholder="点击输入相应查询条件"
@focus="showFindDialog(dt.name)"
>
<el-input ref="findParamInputRef" v-model="dt.findParamStr" placeholder="点击输入相应查询条件"
@focus="showFindDialog(dt.name)">
<template #prepend>查询参数</template>
</el-input>
</el-row>
@@ -69,17 +66,20 @@
<el-input type="textarea" v-model="item.value" :rows="12" />
<div style="padding: 3px; float: right" class="mr5 mongo-doc-btns">
<div>
<el-link @click="onJsonEditor(item)" :underline="false" type="success" icon="MagicStick"></el-link>
<el-link @click="onJsonEditor(item)" :underline="false" type="success"
icon="MagicStick"></el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-link @click="onSaveDoc(item.value)" :underline="false" type="warning" icon="DocumentChecked"></el-link>
<el-link @click="onSaveDoc(item.value)" :underline="false" type="warning"
icon="DocumentChecked"></el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-popconfirm @confirm="onDeleteDoc(item.value)" title="确定删除该文档?">
<template #reference>
<el-link :underline="false" type="danger" icon="DocumentDelete"></el-link>
<el-link :underline="false" type="danger" icon="DocumentDelete">
</el-link>
</template>
</el-popconfirm>
</div>
@@ -94,10 +94,12 @@
<el-dialog width="600px" title="find参数" v-model="findDialog.visible">
<el-form label-width="70px">
<el-form-item label="filter">
<el-input v-model="findDialog.findParam.filter" type="textarea" :rows="6" clearable auto-complete="off"></el-input>
<el-input v-model="findDialog.findParam.filter" type="textarea" :rows="6" clearable
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="sort">
<el-input v-model="findDialog.findParam.sort" type="textarea" :rows="3" clearable auto-complete="off"></el-input>
<el-input v-model="findDialog.findParam.sort" type="textarea" :rows="3" clearable
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="limit">
<el-input v-model.number="findDialog.findParam.limit" type="number" auto-complete="off"></el-input>
@@ -114,7 +116,8 @@
</template>
</el-dialog>
<el-dialog width="800px" :title="`新增'${activeName}'集合文档`" v-model="insertDocDialog.visible" :close-on-click-modal="false">
<el-dialog width="800px" :title="`新增'${activeName}'集合文档`" v-model="insertDocDialog.visible"
:close-on-click-modal="false">
<json-edit currentMode="code" v-model="insertDocDialog.doc" />
<template #footer>
<div>
@@ -124,7 +127,8 @@
</template>
</el-dialog>
<el-dialog width="70%" title="json编辑器" v-model="jsoneditorDialog.visible" @close="onCloseJsonEditDialog" :close-on-click-modal="false">
<el-dialog width="70%" title="json编辑器" v-model="jsoneditorDialog.visible" @close="onCloseJsonEditDialog"
:close-on-click-modal="false">
<json-edit v-model="jsoneditorDialog.doc" />
</el-dialog>
@@ -132,9 +136,9 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { mongoApi } from './api';
import {toRefs, ref, reactive, defineComponent, watch} from 'vue';
import { toRefs, ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { isTrue, notBlank, notNull } from '@/common/assert';
@@ -143,339 +147,324 @@ import JsonEdit from '@/components/jsonedit/index.vue';
import { tagApi } from '../tag/api.ts';
import { useStore } from '@/store/index.ts';
export default defineComponent({
name: 'MongoDataOp',
components: {
JsonEdit,
const store = useStore();
const findParamInputRef: any = ref(null);
const state = reactive({
tags: [],
mongoList: [] as any,
query: {
tagPath: null,
},
setup() {
const store = useStore();
const findParamInputRef: any = ref(null);
const state = reactive({
loading: false,
tags: [],
mongoList: [] as any,
query: {
tagPath: null,
},
mongoId: null, // 当前选择操作的mongo
database: '', // 当前选择操作的库
collection: '', //当前选中的collection
activeName: '', // 当前操作的tab
databases: [] as any,
collections: [] as any,
dataTabs: {} as any, // 数据tabs
findDialog: {
visible: false,
findParam: {
limit: 0,
skip: 0,
filter: '',
sort: '',
},
},
insertDocDialog: {
visible: false,
doc: '',
},
jsoneditorDialog: {
visible: false,
doc: '',
item: {} as any,
},
});
const searchMongo = async () => {
notNull(state.query.tagPath, '请先选择标签');
const res = await mongoApi.mongoList.request(state.query);
state.mongoList = res.list;
};
const changeTag = (tagPath: string) => {
state.databases = [];
state.collections = [];
state.mongoId = null;
state.collection = '';
state.database = '';
state.dataTabs = {};
if (tagPath != null) {
searchMongo();
}
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const changeMongo = () => {
state.databases = [];
state.collections = [];
state.dataTabs = {};
getDatabases();
};
const getDatabases = async () => {
const res = await mongoApi.databases.request({ id: state.mongoId });
state.databases = res.Databases;
};
const changeDatabase = () => {
state.collections = [];
state.collection = '';
state.dataTabs = {};
getCollections();
};
const getCollections = async () => {
state.collections = await mongoApi.collections.request({ id: state.mongoId, database: state.database });
};
const changeCollection = () => {
const collection = state.collection;
let dataTab = state.dataTabs[collection];
if (!dataTab) {
// 默认查询参数
const findParam = {
filter: '{}',
sort: '{"_id": -1}',
skip: 0,
limit: 12,
},
dataTab = {
name: collection,
datas: [],
findParamStr: JSON.stringify(findParam),
findParam,
};
state.dataTabs[collection] = dataTab;
}
state.activeName = collection;
findCommand(collection);
};
const showFindDialog = (collection: string) => {
// 获取当前tab的索引位置，将其输入框失去焦点，防止输入以及重复获取焦点
const dataTabNames = Object.keys(state.dataTabs);
for (let i = 0; i < dataTabNames.length; i++) {
if (collection == dataTabNames[i]) {
findParamInputRef.value[i].blur();
}
}
state.findDialog.findParam = state.dataTabs[collection].findParam;
state.findDialog.visible = true;
};
const confirmFindDialog = () => {
state.dataTabs[state.activeName].findParam = state.findDialog.findParam;
state.dataTabs[state.activeName].findParamStr = JSON.stringify(state.findDialog.findParam);
state.findDialog.visible = false;
findCommand(state.activeName);
};
const findCommand = async (collection: string) => {
const dataTab = state.dataTabs[collection];
const findParma = dataTab.findParam;
let filter, sort;
try {
filter = findParma.filter ? JSON.parse(findParma.filter) : {};
sort = findParma.sort ? JSON.parse(findParma.sort) : {};
} catch (e) {
ElMessage.error('filter或sort字段json字符串值错误。注意: json key需双引号');
return;
}
const datas = await mongoApi.findCommand.request({
id: state.mongoId,
database: state.database,
collection,
filter,
sort,
limit: findParma.limit || 12,
skip: findParma.skip || 0,
});
state.dataTabs[collection].datas = wrapDatas(datas);
};
/**
* 包装mongo查询回来的对象，即将其都转为json字符串并用value属性值描述，方便显示
*/
const wrapDatas = (datas: any) => {
const wrapDatas = [] as any;
if (!datas) {
return wrapDatas;
}
for (let data of datas) {
wrapDatas.push({ value: JSON.stringify(data, null, 4) });
}
return wrapDatas;
};
const showInsertDocDialog = () => {
// tab数据中的第一个文档，因为该集合的文档都类似，故使用第一个文档赋值至需要新增的文档输入框，方便直接修改新增
const datasFirstDoc = state.dataTabs[state.activeName].datas[0];
let doc = '';
if (datasFirstDoc) {
// 移除_id字段，因为新增无需该字段
const docObj = JSON.parse(datasFirstDoc.value);
delete docObj['_id'];
doc = JSON.stringify(docObj, null, 4);
}
state.insertDocDialog.doc = doc;
state.insertDocDialog.visible = true;
};
const onInsertDoc = async () => {
let docObj;
try {
docObj = JSON.parse(state.insertDocDialog.doc);
} catch (e) {
ElMessage.error('文档内容错误,无法解析为json对象');
}
const res = await mongoApi.insertCommand.request({
id: state.mongoId,
database: state.database,
collection: state.activeName,
doc: docObj,
});
isTrue(res.InsertedID, '新增失败');
ElMessage.success('新增成功');
findCommand(state.activeName);
state.insertDocDialog.visible = false;
};
const onJsonEditor = (item: any) => {
state.jsoneditorDialog.item = item;
state.jsoneditorDialog.doc = item.value;
state.jsoneditorDialog.visible = true;
};
const onCloseJsonEditDialog = () => {
state.jsoneditorDialog.item.value = JSON.stringify(JSON.parse(state.jsoneditorDialog.doc), null, 4);
};
const onSaveDoc = async (doc: string) => {
const docObj = parseDocJsonString(doc);
const id = docObj._id;
notBlank(id, '文档的_id属性不存在');
delete docObj['_id'];
const res = await mongoApi.updateByIdCommand.request({
id: state.mongoId,
database: state.database,
collection: state.collection,
docId: id,
update: { $set: docObj },
});
isTrue(res.ModifiedCount == 1, '修改失败');
ElMessage.success('保存成功');
};
const onDeleteDoc = async (doc: string) => {
const docObj = parseDocJsonString(doc);
const id = docObj._id;
notBlank(id, '文档的_id属性不存在');
const res = await mongoApi.deleteByIdCommand.request({
id: state.mongoId,
database: state.database,
collection: state.collection,
docId: id,
});
isTrue(res.DeletedCount == 1, '删除失败');
ElMessage.success('删除成功');
findCommand(state.activeName);
};
/**
* 将json字符串解析为json对象
*/
const parseDocJsonString = (doc: string) => {
try {
return JSON.parse(doc);
} catch (e) {
ElMessage.error('文档内容解析为json对象失败');
throw e;
}
};
/**
* 数据tab点击
*/
const onDataTabClick = (tab: any) => {
const name = tab.props.name;
// 修改选择框绑定的表信息
state.collection = name;
};
const removeDataTab = (targetName: string) => {
const tabNames = Object.keys(state.dataTabs);
let activeName = state.activeName;
tabNames.forEach((name, index) => {
if (name === targetName) {
const nextTab = tabNames[index + 1] || tabNames[index - 1];
if (nextTab) {
activeName = nextTab;
}
}
});
state.activeName = activeName;
// 如果移除最后一个数据tab，则将选择框绑定的collection置空
if (activeName == targetName) {
state.collection = '';
} else {
state.collection = activeName;
}
delete state.dataTabs[targetName];
};
// 加载选中的tagPath
const setSelects = async (mongoDbOptInfo: any) =>{
const { tagPath, dbId, db} = mongoDbOptInfo.dbOptInfo;
state.query.tagPath = tagPath
await searchMongo();
state.mongoId = dbId
await getDatabases();
state.database = db
await getCollections();
if(state.collection){
state.collection = ''
state.dataTabs = {}
}
}
// 判断如果有数据则加载下拉选项
let mongoDbOptInfo = store.state.mongoDbOptInfo
if(mongoDbOptInfo.dbOptInfo.tagPath){
setSelects(mongoDbOptInfo)
}
// 监听选中操作的db变化，并加载下拉选项
watch(store.state.mongoDbOptInfo,async (newValue) => {
await setSelects(newValue)
})
return {
...toRefs(state),
findParamInputRef,
getTags,
changeTag,
changeMongo,
changeDatabase,
changeCollection,
onDataTabClick,
removeDataTab,
showFindDialog,
confirmFindDialog,
findCommand,
showInsertDocDialog,
onInsertDoc,
onSaveDoc,
onDeleteDoc,
onJsonEditor,
onCloseJsonEditDialog,
formatByteSize,
};
mongoId: null, // 当前选择操作的mongo
database: '', // 当前选择操作的库
collection: '', //当前选中的collection
activeName: '', // 当前操作的tab
databases: [] as any,
collections: [] as any,
dataTabs: {} as any, // 数据tabs
findDialog: {
visible: false,
findParam: {
limit: 0,
skip: 0,
filter: '',
sort: '',
},
},
insertDocDialog: {
visible: false,
doc: '',
},
jsoneditorDialog: {
visible: false,
doc: '',
item: {} as any,
},
});
const {
tags,
mongoList,
query,
mongoId,
database,
collection,
activeName,
databases,
collections,
dataTabs,
findDialog,
insertDocDialog,
jsoneditorDialog,
} = toRefs(state)
const searchMongo = async () => {
notNull(state.query.tagPath, '请先选择标签');
const res = await mongoApi.mongoList.request(state.query);
state.mongoList = res.list;
};
const changeTag = (tagPath: string) => {
state.databases = [];
state.collections = [];
state.mongoId = null;
state.collection = '';
state.database = '';
state.dataTabs = {};
if (tagPath != null) {
searchMongo();
}
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const changeMongo = () => {
state.databases = [];
state.collections = [];
state.dataTabs = {};
getDatabases();
};
const getDatabases = async () => {
const res = await mongoApi.databases.request({ id: state.mongoId });
state.databases = res.Databases;
};
const changeDatabase = () => {
state.collections = [];
state.collection = '';
state.dataTabs = {};
getCollections();
};
const getCollections = async () => {
state.collections = await mongoApi.collections.request({ id: state.mongoId, database: state.database });
};
const changeCollection = () => {
const collection = state.collection;
let dataTab = state.dataTabs[collection];
if (!dataTab) {
// 默认查询参数
const findParam = {
filter: '{}',
sort: '{"_id": -1}',
skip: 0,
limit: 12,
},
dataTab = {
name: collection,
datas: [],
findParamStr: JSON.stringify(findParam),
findParam,
};
state.dataTabs[collection] = dataTab;
}
state.activeName = collection;
findCommand(collection);
};
const showFindDialog = (collection: string) => {
// 获取当前tab的索引位置，将其输入框失去焦点，防止输入以及重复获取焦点
const dataTabNames = Object.keys(state.dataTabs);
for (let i = 0; i < dataTabNames.length; i++) {
if (collection == dataTabNames[i]) {
findParamInputRef.value[i].blur();
}
}
state.findDialog.findParam = state.dataTabs[collection].findParam;
state.findDialog.visible = true;
};
const confirmFindDialog = () => {
state.dataTabs[state.activeName].findParam = state.findDialog.findParam;
state.dataTabs[state.activeName].findParamStr = JSON.stringify(state.findDialog.findParam);
state.findDialog.visible = false;
findCommand(state.activeName);
};
const findCommand = async (collection: string) => {
const dataTab = state.dataTabs[collection];
const findParma = dataTab.findParam;
let filter, sort;
try {
filter = findParma.filter ? JSON.parse(findParma.filter) : {};
sort = findParma.sort ? JSON.parse(findParma.sort) : {};
} catch (e) {
ElMessage.error('filter或sort字段json字符串值错误。注意: json key需双引号');
return;
}
const datas = await mongoApi.findCommand.request({
id: state.mongoId,
database: state.database,
collection,
filter,
sort,
limit: findParma.limit || 12,
skip: findParma.skip || 0,
});
state.dataTabs[collection].datas = wrapDatas(datas);
};
/**
* 包装mongo查询回来的对象，即将其都转为json字符串并用value属性值描述，方便显示
*/
const wrapDatas = (datas: any) => {
const wrapDatas = [] as any;
if (!datas) {
return wrapDatas;
}
for (let data of datas) {
wrapDatas.push({ value: JSON.stringify(data, null, 4) });
}
return wrapDatas;
};
const showInsertDocDialog = () => {
// tab数据中的第一个文档，因为该集合的文档都类似，故使用第一个文档赋值至需要新增的文档输入框，方便直接修改新增
const datasFirstDoc = state.dataTabs[state.activeName].datas[0];
let doc = '';
if (datasFirstDoc) {
// 移除_id字段，因为新增无需该字段
const docObj = JSON.parse(datasFirstDoc.value);
delete docObj['_id'];
doc = JSON.stringify(docObj, null, 4);
}
state.insertDocDialog.doc = doc;
state.insertDocDialog.visible = true;
};
const onInsertDoc = async () => {
let docObj;
try {
docObj = JSON.parse(state.insertDocDialog.doc);
} catch (e) {
ElMessage.error('文档内容错误,无法解析为json对象');
}
const res = await mongoApi.insertCommand.request({
id: state.mongoId,
database: state.database,
collection: state.activeName,
doc: docObj,
});
isTrue(res.InsertedID, '新增失败');
ElMessage.success('新增成功');
findCommand(state.activeName);
state.insertDocDialog.visible = false;
};
const onJsonEditor = (item: any) => {
state.jsoneditorDialog.item = item;
state.jsoneditorDialog.doc = item.value;
state.jsoneditorDialog.visible = true;
};
const onCloseJsonEditDialog = () => {
state.jsoneditorDialog.item.value = JSON.stringify(JSON.parse(state.jsoneditorDialog.doc), null, 4);
};
const onSaveDoc = async (doc: string) => {
const docObj = parseDocJsonString(doc);
const id = docObj._id;
notBlank(id, '文档的_id属性不存在');
delete docObj['_id'];
const res = await mongoApi.updateByIdCommand.request({
id: state.mongoId,
database: state.database,
collection: state.collection,
docId: id,
update: { $set: docObj },
});
isTrue(res.ModifiedCount == 1, '修改失败');
ElMessage.success('保存成功');
};
const onDeleteDoc = async (doc: string) => {
const docObj = parseDocJsonString(doc);
const id = docObj._id;
notBlank(id, '文档的_id属性不存在');
const res = await mongoApi.deleteByIdCommand.request({
id: state.mongoId,
database: state.database,
collection: state.collection,
docId: id,
});
isTrue(res.DeletedCount == 1, '删除失败');
ElMessage.success('删除成功');
findCommand(state.activeName);
};
/**
* 将json字符串解析为json对象
*/
const parseDocJsonString = (doc: string) => {
try {
return JSON.parse(doc);
} catch (e) {
ElMessage.error('文档内容解析为json对象失败');
throw e;
}
};
/**
* 数据tab点击
*/
const onDataTabClick = (tab: any) => {
const name = tab.props.name;
// 修改选择框绑定的表信息
state.collection = name;
};
const removeDataTab = (targetName: string) => {
const tabNames = Object.keys(state.dataTabs);
let activeName = state.activeName;
tabNames.forEach((name, index) => {
if (name === targetName) {
const nextTab = tabNames[index + 1] || tabNames[index - 1];
if (nextTab) {
activeName = nextTab;
}
}
});
state.activeName = activeName;
// 如果移除最后一个数据tab，则将选择框绑定的collection置空
if (activeName == targetName) {
state.collection = '';
} else {
state.collection = activeName;
}
delete state.dataTabs[targetName];
};
// 加载选中的tagPath
const setSelects = async (mongoDbOptInfo: any) => {
const { tagPath, dbId, db } = mongoDbOptInfo.dbOptInfo;
state.query.tagPath = tagPath
await searchMongo();
state.mongoId = dbId
await getDatabases();
state.database = db
await getCollections();
if (state.collection) {
state.collection = ''
state.dataTabs = {}
}
}
// 判断如果有数据则加载下拉选项
let mongoDbOptInfo = store.state.mongoDbOptInfo
if (mongoDbOptInfo.dbOptInfo.tagPath) {
setSelects(mongoDbOptInfo)
}
// 监听选中操作的db变化，并加载下拉选项
watch(store.state.mongoDbOptInfo, async (newValue) => {
await setSelects(newValue)
})
</script>
<style>

240
mayfly_go_web/src/views/ops/mongo/MongoEdit.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false"
width="38%" :destroy-on-close="true">
<el-form :model="form" ref="mongoForm" :rules="rules" label-width="85px">
<el-form-item prop="tagId" label="标签:" required>
<tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
@@ -10,28 +11,20 @@
<el-input v-model.trim="form.name" placeholder="请输入名称" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="uri" label="uri" required>
<el-input
type="textarea"
:rows="2"
v-model.trim="form.uri"
placeholder="形如 mongodb://username:password@host1:port1"
auto-complete="off"
></el-input>
<el-input type="textarea" :rows="2" v-model.trim="form.uri"
placeholder="形如 mongodb://username:password@host1:port1" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1"
:false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
<el-option v-for="item in sshTunnelMachineList" :key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`" :value="item.id">
</el-option>
</el-select>
</el-col>
@@ -48,125 +41,122 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { mongoApi } from './api';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import TagSelect from '../component/TagSelect.vue';
export default defineComponent({
name: 'MongoEdit',
components: {
TagSelect,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
mongo: {
type: [Boolean, Object],
},
title: {
type: String,
},
mongo: {
type: [Boolean, Object],
},
setup(props: any, { emit }) {
const mongoForm: any = ref(null);
const state = reactive({
dialogVisible: false,
sshTunnelMachineList: [] as any,
form: {
id: null,
name: null,
uri: null,
enableSshTunnel: -1,
sshTunnelMachineId: null,
tagId: null as any,
tagPath: null as any,
},
btnLoading: false,
rules: {
tagId: [
{
required: true,
message: '请选择标签',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入名称',
trigger: ['change', 'blur'],
},
],
uri: [
{
required: true,
message: '请输入mongo uri',
trigger: ['change', 'blur'],
},
],
},
});
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
if (newValue.mongo) {
state.form = { ...newValue.mongo };
} else {
state.form = { db: 0 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const btnOk = async () => {
mongoForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
// reqForm.uri = await RsaEncrypt(reqForm.uri);
mongoApi.saveMongo.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
mongoForm,
getSshTunnelMachines,
btnOk,
cancel,
};
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const rules = {
tagId: [
{
required: true,
message: '请选择标签',
trigger: ['change', 'blur'],
},
],
name: [
{
required: true,
message: '请输入名称',
trigger: ['change', 'blur'],
},
],
uri: [
{
required: true,
message: '请输入mongo uri',
trigger: ['change', 'blur'],
},
],
}
const mongoForm: any = ref(null);
const state = reactive({
dialogVisible: false,
sshTunnelMachineList: [] as any,
form: {
id: null,
name: null,
uri: null,
enableSshTunnel: -1,
sshTunnelMachineId: null,
tagId: null as any,
tagPath: null as any,
},
btnLoading: false,
});
const {
dialogVisible,
sshTunnelMachineList,
form,
btnLoading,
} = toRefs(state)
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
if (newValue.mongo) {
state.form = { ...newValue.mongo };
} else {
state.form = { db: 0 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const btnOk = async () => {
mongoForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
// reqForm.uri = await RsaEncrypt(reqForm.uri);
mongoApi.saveMongo.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
</script>
<style lang="scss">
</style>

514
mayfly_go_web/src/views/ops/mongo/MongoList.vue
View File

@@ -2,8 +2,10 @@
<div>
<el-card>
<el-button type="primary" icon="plus" @click="editMongo(true)" plain>添加</el-button>
<el-button type="primary" icon="edit" :disabled="currentId == null" @click="editMongo(false)" plain>编辑</el-button>
<el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteMongo" plain>删除</el-button>
<el-button type="primary" icon="edit" :disabled="currentId == null" @click="editMongo(false)" plain>编辑
</el-button>
<el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteMongo" plain>删除
</el-button>
<div style="float: right">
<el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" filterable clearable>
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
@@ -34,19 +36,15 @@
<el-table-column label="操作" width>
<template #default="scope">
<el-link type="primary" @click="showDatabases(scope.row.id, scope.row)" plain size="small" :underline="false">数据库</el-link>
<el-link type="primary" @click="showDatabases(scope.row.id, scope.row)" plain size="small"
:underline="false">数据库</el-link>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
@@ -62,16 +60,20 @@
<el-table-column min-width="150" label="操作">
<template #default="scope">
<el-link type="success" @click="showDatabaseStats(scope.row.Name)" plain size="small" :underline="false">stats</el-link>
<el-link type="success" @click="showDatabaseStats(scope.row.Name)" plain size="small"
:underline="false">stats</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-link type="primary" @click="showCollections(scope.row.Name)" plain size="small" :underline="false">集合</el-link>
<el-link type="primary" @click="showCollections(scope.row.Name)" plain size="small"
:underline="false">集合</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-link type="primary" @click="openDataOps(scope.row)" plain size="small" :underline="false">数据操作</el-link>
<el-link type="primary" @click="openDataOps(scope.row)" plain size="small" :underline="false">
数据操作</el-link>
</template>
</el-table-column>
</el-table>
<el-dialog width="700px" :title="databaseDialog.statsDialog.title" v-model="databaseDialog.statsDialog.visible">
<el-dialog width="700px" :title="databaseDialog.statsDialog.title"
v-model="databaseDialog.statsDialog.visible">
<el-descriptions title="库状态信息" :column="3" border size="small">
<el-descriptions-item label="db" label-align="right" align="center">
{{ databaseDialog.statsDialog.data.db }}
@@ -120,7 +122,8 @@
<el-table-column prop="name" label="名称" show-overflow-tooltip> </el-table-column>
<el-table-column min-width="80" label="操作">
<template #default="scope">
<el-link type="success" @click="showCollectionStats(scope.row.name)" plain size="small" :underline="false">stats</el-link>
<el-link type="success" @click="showCollectionStats(scope.row.name)" plain size="small"
:underline="false">stats</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-popconfirm @confirm="onDeleteCollection(scope.row.name)" title="确定删除该集合?">
<template #reference>
@@ -131,7 +134,8 @@
</el-table-column>
</el-table>
<el-dialog width="700px" :title="collectionsDialog.statsDialog.title" v-model="collectionsDialog.statsDialog.visible">
<el-dialog width="700px" :title="collectionsDialog.statsDialog.title"
v-model="collectionsDialog.statsDialog.visible">
<el-descriptions title="集合状态信息" :column="3" border size="small">
<el-descriptions-item label="ns" label-align="right" :span="2" align="center">
{{ collectionsDialog.statsDialog.data.ns }}
@@ -179,269 +183,249 @@
</template>
</el-dialog>
<mongo-edit
@val-change="valChange"
:title="mongoEditDialog.title"
v-model:visible="mongoEditDialog.visible"
v-model:mongo="mongoEditDialog.data"
></mongo-edit>
<mongo-edit @val-change="valChange" :title="mongoEditDialog.title" v-model:visible="mongoEditDialog.visible"
v-model:mongo="mongoEditDialog.data"></mongo-edit>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { mongoApi } from './api';
import { toRefs, reactive, defineComponent, onMounted } from 'vue';
import { toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagApi } from '../tag/api.ts';
import MongoEdit from './MongoEdit.vue';
import { formatByteSize } from '@/common/utils/format';
import {store} from '@/store';
import { store } from '@/store';
import router from '@/router';
import { dateFormat } from '@/common/utils/date';
export default defineComponent({
name: 'MongoList',
components: {
MongoEdit,
const state = reactive({
tags: [],
dbOps: {
dbId: 0,
db: '',
},
setup() {
const state = reactive({
tags: [],
dbOps: {
dbId: 0,
db: '',
},
projects: [],
list: [],
total: 0,
currentId: null,
currentData: null,
query: {
pageNum: 1,
pageSize: 10,
tagPath: null,
},
mongoEditDialog: {
visible: false,
data: null as any,
title: '新增mongo',
},
databaseDialog: {
visible: false,
data: [],
title: '',
statsDialog: {
visible: false,
data: {} as any,
title: '',
},
},
collectionsDialog: {
database: '',
visible: false,
data: [],
title: '',
statsDialog: {
visible: false,
data: {} as any,
title: '',
},
},
createCollectionDialog: {
visible: false,
form: {
name: '',
},
},
});
onMounted(async () => {
search();
});
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const showDatabases = async (id: number, row: any) => {
console.log(row)
state.query.tagPath = row.tagPath
state.dbOps.dbId = id
state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
state.databaseDialog.title = `数据库列表`;
state.databaseDialog.visible = true;
};
const showDatabaseStats = async (dbName: string) => {
state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.currentId,
database: dbName,
command: {
dbStats: 1,
},
});
state.databaseDialog.statsDialog.title = `'${dbName}' stats`;
state.databaseDialog.statsDialog.visible = true;
};
const showCollections = async (database: string) => {
state.collectionsDialog.database = database;
state.collectionsDialog.data = [];
setCollections(database);
state.collectionsDialog.title = `'${database}' 集合`;
state.collectionsDialog.visible = true;
};
const setCollections = async (database: string) => {
const res = await mongoApi.collections.request({ id: state.currentId, database });
const collections = [] as any;
for (let r of res) {
collections.push({ name: r });
}
state.collectionsDialog.data = collections;
};
/**
* 显示集合状态
*/
const showCollectionStats = async (collection: string) => {
state.collectionsDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
collStats: collection,
},
});
state.collectionsDialog.statsDialog.title = `'${collection}' stats`;
state.collectionsDialog.statsDialog.visible = true;
};
/**
* 删除集合
*/
const onDeleteCollection = async (collection: string) => {
await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
drop: collection,
},
});
ElMessage.success('集合删除成功');
setCollections(state.collectionsDialog.database);
};
const showCreateCollectionDialog = () => {
state.createCollectionDialog.visible = true;
};
const onCreateCollection = async () => {
const form = state.createCollectionDialog.form;
await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
create: form.name,
},
});
ElMessage.success('集合创建成功');
state.createCollectionDialog.visible = false;
state.createCollectionDialog.form = {} as any;
setCollections(state.collectionsDialog.database);
};
const deleteMongo = async () => {
try {
await ElMessageBox.confirm(`确定删除该mongo?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await mongoApi.deleteMongo.request({ id: state.currentId });
ElMessage.success('删除成功');
state.currentData = null;
state.currentId = null;
search();
} catch (err) {}
};
const search = async () => {
const res = await mongoApi.mongoList.request(state.query);
state.list = res.list;
state.total = res.total;
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const editMongo = async (isAdd = false) => {
if (isAdd) {
state.mongoEditDialog.data = null;
state.mongoEditDialog.title = '新增mongo';
} else {
state.mongoEditDialog.data = state.currentData;
state.mongoEditDialog.title = '修改mongo';
}
state.mongoEditDialog.visible = true;
};
const valChange = () => {
state.currentId = null;
state.currentData = null;
search();
};
const openDataOps = ( row: any) => {
state.dbOps.db = row.Name
debugger
let data = {
tagPath: state.query.tagPath,
dbId: state.dbOps.dbId,
db: state.dbOps.db,
}
// 判断db是否发生改变
let oldDb = store.state.mongoDbOptInfo.dbOptInfo.db;
if(oldDb !== row.Name){
store.dispatch('mongoDbOptInfo/setMongoDbOptInfo', data);
}
router.push({name: 'MongoDataOp'});
}
return {
...toRefs(state),
dateFormat,
getTags,
search,
handlePageChange,
choose,
showDatabases,
showDatabaseStats,
showCollections,
showCollectionStats,
onDeleteCollection,
showCreateCollectionDialog,
onCreateCollection,
formatByteSize,
deleteMongo,
editMongo,
valChange,
openDataOps,
};
list: [],
total: 0,
currentId: null,
currentData: null,
query: {
pageNum: 1,
pageSize: 10,
tagPath: null,
},
mongoEditDialog: {
visible: false,
data: null as any,
title: '新增mongo',
},
databaseDialog: {
visible: false,
data: [],
title: '',
statsDialog: {
visible: false,
data: {} as any,
title: '',
},
},
collectionsDialog: {
database: '',
visible: false,
data: [],
title: '',
statsDialog: {
visible: false,
data: {} as any,
title: '',
},
},
createCollectionDialog: {
visible: false,
form: {
name: '',
},
},
});
const {
tags,
list,
total,
currentId,
query,
mongoEditDialog,
databaseDialog,
collectionsDialog,
createCollectionDialog,
} = toRefs(state)
onMounted(async () => {
search();
});
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const showDatabases = async (id: number, row: any) => {
console.log(row)
state.query.tagPath = row.tagPath
state.dbOps.dbId = id
state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
state.databaseDialog.title = `数据库列表`;
state.databaseDialog.visible = true;
};
const showDatabaseStats = async (dbName: string) => {
state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.currentId,
database: dbName,
command: {
dbStats: 1,
},
});
state.databaseDialog.statsDialog.title = `'${dbName}' stats`;
state.databaseDialog.statsDialog.visible = true;
};
const showCollections = async (database: string) => {
state.collectionsDialog.database = database;
state.collectionsDialog.data = [];
setCollections(database);
state.collectionsDialog.title = `'${database}' 集合`;
state.collectionsDialog.visible = true;
};
const setCollections = async (database: string) => {
const res = await mongoApi.collections.request({ id: state.currentId, database });
const collections = [] as any;
for (let r of res) {
collections.push({ name: r });
}
state.collectionsDialog.data = collections;
};
/**
* 显示集合状态
*/
const showCollectionStats = async (collection: string) => {
state.collectionsDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
collStats: collection,
},
});
state.collectionsDialog.statsDialog.title = `'${collection}' stats`;
state.collectionsDialog.statsDialog.visible = true;
};
/**
* 删除集合
*/
const onDeleteCollection = async (collection: string) => {
await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
drop: collection,
},
});
ElMessage.success('集合删除成功');
setCollections(state.collectionsDialog.database);
};
const showCreateCollectionDialog = () => {
state.createCollectionDialog.visible = true;
};
const onCreateCollection = async () => {
const form = state.createCollectionDialog.form;
await mongoApi.runCommand.request({
id: state.currentId,
database: state.collectionsDialog.database,
command: {
create: form.name,
},
});
ElMessage.success('集合创建成功');
state.createCollectionDialog.visible = false;
state.createCollectionDialog.form = {} as any;
setCollections(state.collectionsDialog.database);
};
const deleteMongo = async () => {
try {
await ElMessageBox.confirm(`确定删除该mongo?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await mongoApi.deleteMongo.request({ id: state.currentId });
ElMessage.success('删除成功');
state.currentData = null;
state.currentId = null;
search();
} catch (err) { }
};
const search = async () => {
const res = await mongoApi.mongoList.request(state.query);
state.list = res.list;
state.total = res.total;
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const editMongo = async (isAdd = false) => {
if (isAdd) {
state.mongoEditDialog.data = null;
state.mongoEditDialog.title = '新增mongo';
} else {
state.mongoEditDialog.data = state.currentData;
state.mongoEditDialog.title = '修改mongo';
}
state.mongoEditDialog.visible = true;
};
const valChange = () => {
state.currentId = null;
state.currentData = null;
search();
};
const openDataOps = (row: any) => {
state.dbOps.db = row.Name
debugger
let data = {
tagPath: state.query.tagPath,
dbId: state.dbOps.dbId,
db: state.dbOps.db,
}
// 判断db是否发生改变
let oldDb = store.state.mongoDbOptInfo.dbOptInfo.db;
if (oldDb !== row.Name) {
store.dispatch('mongoDbOptInfo/setMongoDbOptInfo', data);
}
router.push({ name: 'MongoDataOp' });
}
</script>
<style>
</style>

691
mayfly_go_web/src/views/ops/redis/DataOperation.vue
View File

@@ -6,37 +6,23 @@
<el-col :span="24">
<el-form class="search-form" label-position="right" :inline="true">
<el-form-item label="标签">
<el-select
@change="changeTag"
@focus="getTags"
v-model="query.tagPath"
placeholder="请选择标签"
filterable
style="width: 250px"
>
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
<el-select @change="changeTag" @focus="getTags" v-model="query.tagPath"
placeholder="请选择标签" filterable style="width: 250px">
<el-option v-for="item in tags" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="redis" label-width="40px">
<el-select
v-model="scanParam.id"
placeholder="请选择redis"
@change="changeRedis"
@clear="clearRedis"
clearable
style="width: 250px"
>
<el-option
v-for="item in redisList"
:key="item.id"
:label="`${item.name ? item.name : ''} [${item.host}]`"
:value="item.id"
>
<el-select v-model="scanParam.id" placeholder="请选择redis" @change="changeRedis"
@clear="clearRedis" clearable style="width: 250px">
<el-option v-for="item in redisList" :key="item.id"
:label="`${item.name ? item.name : ''} [${item.host}]`" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="库" label-width="20px">
<el-select v-model="scanParam.db" @change="changeDb" placeholder="库" style="width: 85px">
<el-select v-model="scanParam.db" @change="changeDb" placeholder="库"
style="width: 85px">
<el-option v-for="db in dbList" :key="db" :label="db" :value="db"> </el-option>
</el-select>
</el-form-item>
@@ -45,16 +31,12 @@
<el-col class="mt10">
<el-form class="search-form" label-position="right" :inline="true" label-width="60px">
<el-form-item label="key" label-width="40px">
<el-input
placeholder="match 支持*模糊key"
style="width: 250px"
v-model="scanParam.match"
@clear="clear()"
clearable
></el-input>
<el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match"
@clear="clear()" clearable></el-input>
</el-form-item>
<el-form-item label="count" label-width="40px">
<el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count"></el-input>
<el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count">
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="searchKey()" type="success" icon="search" plain></el-button>
@@ -63,9 +45,12 @@
<template #reference>
<el-button type="primary" icon="plus" plain></el-button>
</template>
<el-tag @click="onAddData('string')" :color="getTypeColor('string')" style="cursor: pointer">string</el-tag>
<el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5" style="cursor: pointer">hash</el-tag>
<el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5" style="cursor: pointer">set</el-tag>
<el-tag @click="onAddData('string')" :color="getTypeColor('string')"
style="cursor: pointer">string</el-tag>
<el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5"
style="cursor: pointer">hash</el-tag>
<el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5"
style="cursor: pointer">set</el-tag>
<!-- <el-tag @click="onAddData('list')" :color="getTypeColor('list')" class="ml5" style="cursor: pointer">list</el-tag> -->
</el-popover>
</el-form-item>
@@ -91,8 +76,10 @@
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="getValue(scope.row)" type="success" icon="search" plain size="small">查看</el-button>
<el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除</el-button>
<el-button @click="getValue(scope.row)" type="success" icon="search" plain size="small">查看
</el-button>
<el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -100,55 +87,27 @@
<div style="text-align: center; margin-top: 10px"></div>
<hash-value
v-model:visible="hashValueDialog.visible"
:operationType="dataEdit.operationType"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
:db="scanParam.db"
@cancel="onCancelDataEdit"
@valChange="searchKey"
/>
<hash-value v-model:visible="hashValueDialog.visible" :operationType="dataEdit.operationType"
:title="dataEdit.title" :keyInfo="dataEdit.keyInfo" :redisId="scanParam.id" :db="scanParam.db"
@cancel="onCancelDataEdit" @valChange="searchKey" />
<string-value
v-model:visible="stringValueDialog.visible"
:operationType="dataEdit.operationType"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
:db="scanParam.db"
@cancel="onCancelDataEdit"
@valChange="searchKey"
/>
<string-value v-model:visible="stringValueDialog.visible" :operationType="dataEdit.operationType"
:title="dataEdit.title" :keyInfo="dataEdit.keyInfo" :redisId="scanParam.id" :db="scanParam.db"
@cancel="onCancelDataEdit" @valChange="searchKey" />
<set-value
v-model:visible="setValueDialog.visible"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
:db="scanParam.db"
:operationType="dataEdit.operationType"
@valChange="searchKey"
@cancel="onCancelDataEdit"
/>
<set-value v-model:visible="setValueDialog.visible" :title="dataEdit.title" :keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id" :db="scanParam.db" :operationType="dataEdit.operationType" @valChange="searchKey"
@cancel="onCancelDataEdit" />
<list-value
v-model:visible="listValueDialog.visible"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
:db="scanParam.db"
:operationType="dataEdit.operationType"
@valChange="searchKey"
@cancel="onCancelDataEdit"
/>
<list-value v-model:visible="listValueDialog.visible" :title="dataEdit.title" :keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id" :db="scanParam.db" :operationType="dataEdit.operationType" @valChange="searchKey"
@cancel="onCancelDataEdit" />
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { redisApi } from './api';
import { toRefs, reactive, defineComponent, watch } from 'vue';
import { toRefs, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import HashValue from './HashValue.vue';
import StringValue from './StringValue.vue';
@@ -159,303 +118,291 @@ import { isTrue, notBlank, notNull } from '@/common/assert';
import { useStore } from '@/store/index.ts';
import { tagApi } from '../tag/api.ts';
export default defineComponent({
name: 'DataOperation',
components: {
StringValue,
HashValue,
SetValue,
ListValue,
let store = useStore();
const state = reactive({
loading: false,
tags: [],
redisList: [] as any,
dbList: [],
query: {
tagPath: null,
},
setup() {
let store = useStore();
const state = reactive({
projectId: null,
loading: false,
tags: [],
redisList: [] as any,
dbList: [],
query: {
tagPath: null,
},
scanParam: {
id: null,
db: '',
match: null,
count: 10,
cursor: {},
},
dataEdit: {
visible: false,
title: '新增数据',
operationType: 1,
keyInfo: {
type: 'string',
timed: -1,
key: '',
},
},
hashValueDialog: {
visible: false,
},
stringValueDialog: {
visible: false,
},
setValueDialog: {
visible: false,
},
listValueDialog: {
visible: false,
},
keys: [],
dbsize: 0,
});
const searchRedis = async () => {
notBlank(state.query.tagPath, '请先选择标签');
const res = await redisApi.redisList.request(state.query);
state.redisList = res.list;
};
const changeTag = (tagPath: string) => {
clearRedis();
if (tagPath != null) {
searchRedis();
}
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const changeRedis = (id: number) => {
resetScanParam(id);
state.dbList = (state.redisList.find((x: any) => x.id == id) as any).db.split(',');
// 默认选中配置的第一个库
state.scanParam.db = state.dbList[0];
state.keys = [];
state.dbsize = 0;
};
const changeDb = () => {
resetScanParam(state.scanParam.id as any);
state.keys = [];
state.dbsize = 0;
searchKey();
};
const scan = async () => {
isTrue(state.scanParam.id != null, '请先选择redis');
notBlank(state.scanParam.count, 'count不能为空');
const match = state.scanParam.match;
if (!match || (match as string).length < 4) {
isTrue(state.scanParam.count <= 200, 'key为空或小于4字符时, count不能超过200');
} else {
isTrue(state.scanParam.count <= 20000, 'count不能超过20000');
}
state.loading = true;
try {
const res = await redisApi.scan.request(state.scanParam);
state.keys = res.keys;
state.dbsize = res.dbSize;
state.scanParam.cursor = res.cursor;
} finally {
state.loading = false;
}
};
const searchKey = async () => {
state.scanParam.cursor = {};
await scan();
};
const clearRedis = () => {
state.redisList = [];
state.scanParam.id = null;
resetScanParam();
state.scanParam.db = '';
state.keys = [];
state.dbsize = 0;
};
const clear = () => {
resetScanParam();
if (state.scanParam.id) {
scan();
}
};
const resetScanParam = (id: number = 0) => {
state.scanParam.count = 10;
if (id != 0) {
const redis: any = state.redisList.find((x: any) => x.id == id);
// 集群模式count设小点，因为后端会从所有master节点scan一遍然后合并结果
if (redis && redis.mode == 'cluster') {
state.scanParam.count = 4;
}
}
state.scanParam.match = null;
state.scanParam.cursor = {};
};
const getValue = async (row: any) => {
const type = row.type;
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = row.ttl;
state.dataEdit.keyInfo.key = row.key;
state.dataEdit.operationType = 2;
state.dataEdit.title = '查看数据';
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else if (type == 'list') {
state.listValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onAddData = (type: string) => {
notNull(state.scanParam.id, '请先选择redis');
state.dataEdit.operationType = 1;
state.dataEdit.title = '新增数据';
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = -1;
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else if (type == 'list') {
state.listValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onCancelDataEdit = () => {
state.dataEdit.keyInfo = {} as any;
};
const del = (key: string) => {
ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
redisApi.delKey
.request({
key,
id: state.scanParam.id,
db: state.scanParam.db,
})
.then(() => {
ElMessage.success('删除成功！');
searchKey();
});
})
.catch(() => {});
};
const ttlConveter = (ttl: any) => {
if (ttl == -1 || ttl == 0) {
return '永久';
}
if (!ttl) {
ttl = 0;
}
let second = parseInt(ttl); // 秒
let min = 0; // 分
let hour = 0; // 小时
let day = 0;
if (second > 60) {
min = parseInt(second / 60 + '');
second = second % 60;
if (min > 60) {
hour = parseInt(min / 60 + '');
min = min % 60;
if (hour > 24) {
day = parseInt(hour / 24 + '');
hour = hour % 24;
}
}
}
let result = '' + second + 's';
if (min > 0) {
result = '' + min + 'm:' + result;
}
if (hour > 0) {
result = '' + hour + 'h:' + result;
}
if (day > 0) {
result = '' + day + 'd:' + result;
}
return result;
};
const getTypeColor = (type: string) => {
if (type == 'string') {
return '#E4F5EB';
}
if (type == 'hash') {
return '#F9E2AE';
}
if (type == 'set') {
return '#A8DEE0';
}
};
// 加载选中的db
const setSelects = async (redisDbOptInfo: any) => {
// 设置标签路径等
const { tagPath, dbId } = redisDbOptInfo.dbOptInfo;
state.query.tagPath = tagPath;
await searchRedis();
state.scanParam.id = dbId;
changeRedis(dbId);
changeDb();
};
// 判断如果有数据则加载下拉选项
let redisDbOptInfo = store.state.redisDbOptInfo;
if (redisDbOptInfo.dbOptInfo.tagPath) {
setSelects(redisDbOptInfo);
}
// 监听选中操作的db变化，并加载下拉选项
watch(store.state.redisDbOptInfo, async (newValue) => {
await setSelects(newValue);
});
return {
...toRefs(state),
getTags,
changeTag,
changeRedis,
changeDb,
clearRedis,
searchKey,
scan,
clear,
getValue,
del,
ttlConveter,
getTypeColor,
onAddData,
onCancelDataEdit,
};
scanParam: {
id: null as any,
db: '',
match: null,
count: 10,
cursor: {},
},
dataEdit: {
visible: false,
title: '新增数据',
operationType: 1,
keyInfo: {
type: 'string',
timed: -1,
key: '',
},
},
hashValueDialog: {
visible: false,
},
stringValueDialog: {
visible: false,
},
setValueDialog: {
visible: false,
},
listValueDialog: {
visible: false,
},
keys: [],
dbsize: 0,
});
const {
loading,
tags,
redisList,
dbList,
query,
scanParam,
dataEdit,
hashValueDialog,
stringValueDialog,
setValueDialog,
listValueDialog,
keys,
dbsize,
} = toRefs(state)
const searchRedis = async () => {
notBlank(state.query.tagPath, '请先选择标签');
const res = await redisApi.redisList.request(state.query);
state.redisList = res.list;
};
const changeTag = (tagPath: string) => {
clearRedis();
if (tagPath != null) {
searchRedis();
}
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const changeRedis = (id: number) => {
resetScanParam(id);
state.dbList = (state.redisList.find((x: any) => x.id == id) as any).db.split(',');
// 默认选中配置的第一个库
state.scanParam.db = state.dbList[0];
state.keys = [];
state.dbsize = 0;
};
const changeDb = () => {
resetScanParam(state.scanParam.id as any);
state.keys = [];
state.dbsize = 0;
searchKey();
};
const scan = async () => {
isTrue(state.scanParam.id != null, '请先选择redis');
notBlank(state.scanParam.count, 'count不能为空');
const match = state.scanParam.match;
if (!match || (match as string).length < 4) {
isTrue(state.scanParam.count <= 200, 'key为空或小于4字符时, count不能超过200');
} else {
isTrue(state.scanParam.count <= 20000, 'count不能超过20000');
}
state.loading = true;
try {
const res = await redisApi.scan.request(state.scanParam);
state.keys = res.keys;
state.dbsize = res.dbSize;
state.scanParam.cursor = res.cursor;
} finally {
state.loading = false;
}
};
const searchKey = async () => {
state.scanParam.cursor = {};
await scan();
};
const clearRedis = () => {
state.redisList = [];
state.scanParam.id = null;
resetScanParam();
state.scanParam.db = '';
state.keys = [];
state.dbsize = 0;
};
const clear = () => {
resetScanParam();
if (state.scanParam.id) {
scan();
}
};
const resetScanParam = (id: number = 0) => {
state.scanParam.count = 10;
if (id != 0) {
const redis: any = state.redisList.find((x: any) => x.id == id);
// 集群模式count设小点，因为后端会从所有master节点scan一遍然后合并结果
if (redis && redis.mode == 'cluster') {
state.scanParam.count = 4;
}
}
state.scanParam.match = null;
state.scanParam.cursor = {};
};
const getValue = async (row: any) => {
const type = row.type;
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = row.ttl;
state.dataEdit.keyInfo.key = row.key;
state.dataEdit.operationType = 2;
state.dataEdit.title = '查看数据';
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else if (type == 'list') {
state.listValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onAddData = (type: string) => {
notNull(state.scanParam.id, '请先选择redis');
state.dataEdit.operationType = 1;
state.dataEdit.title = '新增数据';
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = -1;
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else if (type == 'list') {
state.listValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onCancelDataEdit = () => {
state.dataEdit.keyInfo = {} as any;
};
const del = (key: string) => {
ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
redisApi.delKey
.request({
key,
id: state.scanParam.id,
db: state.scanParam.db,
})
.then(() => {
ElMessage.success('删除成功！');
searchKey();
});
})
.catch(() => { });
};
const ttlConveter = (ttl: any) => {
if (ttl == -1 || ttl == 0) {
return '永久';
}
if (!ttl) {
ttl = 0;
}
let second = parseInt(ttl); // 秒
let min = 0; // 分
let hour = 0; // 小时
let day = 0;
if (second > 60) {
min = parseInt(second / 60 + '');
second = second % 60;
if (min > 60) {
hour = parseInt(min / 60 + '');
min = min % 60;
if (hour > 24) {
day = parseInt(hour / 24 + '');
hour = hour % 24;
}
}
}
let result = '' + second + 's';
if (min > 0) {
result = '' + min + 'm:' + result;
}
if (hour > 0) {
result = '' + hour + 'h:' + result;
}
if (day > 0) {
result = '' + day + 'd:' + result;
}
return result;
};
const getTypeColor = (type: string) => {
if (type == 'string') {
return '#E4F5EB';
}
if (type == 'hash') {
return '#F9E2AE';
}
if (type == 'set') {
return '#A8DEE0';
}
};
// 加载选中的db
const setSelects = async (redisDbOptInfo: any) => {
// 设置标签路径等
const { tagPath, dbId } = redisDbOptInfo.dbOptInfo;
state.query.tagPath = tagPath;
await searchRedis();
state.scanParam.id = dbId;
changeRedis(dbId);
changeDb();
};
// 判断如果有数据则加载下拉选项
let redisDbOptInfo = store.state.redisDbOptInfo;
if (redisDbOptInfo.dbOptInfo.tagPath) {
setSelects(redisDbOptInfo);
}
// 监听选中操作的db变化，并加载下拉选项
watch(store.state.redisDbOptInfo, async (newValue) => {
await setSelects(newValue);
});
</script>
<style>
</style>

381
mayfly_go_web/src/views/ops/redis/HashValue.vue
View File

@@ -14,14 +14,18 @@
<el-row class="mt10">
<el-form label-position="right" :inline="true">
<el-form-item label="field" label-width="40px" v-if="operationType == 2">
<el-input placeholder="支持*模糊field" style="width: 140px" v-model="scanParam.match" clearable size="small"></el-input>
<el-input placeholder="支持*模糊field" style="width: 140px" v-model="scanParam.match" clearable
size="small"></el-input>
</el-form-item>
<el-form-item label="count" v-if="operationType == 2">
<el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count" size="small"></el-input>
<el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count" size="small">
</el-input>
</el-form-item>
<el-form-item>
<el-button v-if="operationType == 2" @click="reHscan()" type="success" icon="search" plain size="small"></el-button>
<el-button v-if="operationType == 2" @click="hscan()" icon="bottom" plain size="small">scan</el-button>
<el-button v-if="operationType == 2" @click="reHscan()" type="success" icon="search" plain
size="small"></el-button>
<el-button v-if="operationType == 2" @click="hscan()" icon="bottom" plain size="small">scan
</el-button>
<el-button @click="onAddHashValue" icon="plus" size="small" plain>添加</el-button>
</el-form-item>
<div v-if="operationType == 2" class="mt10" style="float: right">
@@ -37,13 +41,16 @@
</el-table-column>
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
<el-input v-model="scope.row.value" clearable type="textarea"
:autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check" size="small" plain></el-button>
<el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small" plain></el-button>
<el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check"
size="small" plain></el-button>
<el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small"
plain></el-button>
</template>
</el-table-column>
</el-table>
@@ -56,196 +63,190 @@
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
export default defineComponent({
name: 'HashValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
require: true,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
hashValue: {
type: [Array, Object],
},
const props = defineProps({
visible: {
type: Boolean,
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: 0,
db: '0',
key: {
key: '',
type: 'hash',
timed: -1,
},
scanParam: {
key: '',
id: 0,
db: '0',
cursor: 0,
match: '',
count: 10,
},
keySize: 0,
hashValues: [
{
field: '',
value: '',
},
],
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.hashValues = [];
state.key = {} as any;
}, 500);
};
watch(props, async (newValue) => {
const visible = newValue.visible;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
if (visible && state.operationType == 2) {
state.scanParam.id = props.redisId;
state.scanParam.key = state.key.key;
await reHscan();
}
state.dialogVisible = visible;
});
const reHscan = async () => {
state.scanParam.id = state.redisId;
state.scanParam.db = state.db;
state.scanParam.cursor = 0;
hscan();
};
const hscan = async () => {
const match = state.scanParam.match;
if (!match || match == '' || match == '*') {
if (state.scanParam.count > 100) {
ElMessage.error('match为空或者*时, count不能超过100');
return;
}
} else {
if (state.scanParam.count > 1000) {
ElMessage.error('count不能超过1000');
return;
}
}
const scanRes = await redisApi.hscan.request(state.scanParam);
state.scanParam.cursor = scanRes.cursor;
state.keySize = scanRes.keySize;
const keys = scanRes.keys;
const hashValue = [];
const fieldCount = keys.length / 2;
let nextFieldIndex = 0;
for (let i = 0; i < fieldCount; i++) {
hashValue.push({ field: keys[nextFieldIndex++], value: keys[nextFieldIndex++] });
}
state.hashValues = hashValue;
};
const hdel = async (field: any, index: any) => {
// 如果是新增操作，则直接数组移除即可
if (state.operationType == 1) {
state.hashValues.splice(index, 1);
return;
}
await ElMessageBox.confirm(`确定删除[${field}]?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.hdel.request({
id: state.redisId,
db: state.db,
key: state.key.key,
field,
});
ElMessage.success('删除成功');
reHscan();
};
const hset = async (row: any) => {
await redisApi.saveHashValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
timed: state.key.timed,
value: [
{
field: row.field,
value: row.value,
},
],
});
ElMessage.success('保存成功');
};
const onAddHashValue = () => {
state.hashValues.unshift({ field: '', value: '' });
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.hashValues.length > 0, 'hash内容不能为空');
const sv = { value: state.hashValues, id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveHashValue.request(sv);
ElMessage.success('保存成功');
cancel();
emit('valChange');
};
return {
...toRefs(state),
reHscan,
hscan,
cancel,
hdel,
hset,
onAddHashValue,
saveValue,
};
title: {
type: String,
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
require: true,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
hashValue: {
type: [Array, Object],
},
})
const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: 0,
db: '0',
key: {
key: '',
type: 'hash',
timed: -1,
},
scanParam: {
key: '',
id: 0,
db: '0',
cursor: 0,
match: '',
count: 10,
},
keySize: 0,
hashValues: [
{
field: '',
value: '',
},
],
});
const {
dialogVisible,
operationType,
key,
scanParam,
keySize,
hashValues,
} = toRefs(state)
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.hashValues = [];
state.key = {} as any;
}, 500);
};
watch(props, async (newValue: any) => {
const visible = newValue.visible;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
if (visible && state.operationType == 2) {
state.scanParam.id = props.redisId as any;
state.scanParam.key = state.key.key;
await reHscan();
}
state.dialogVisible = visible;
});
const reHscan = async () => {
state.scanParam.id = state.redisId;
state.scanParam.db = state.db;
state.scanParam.cursor = 0;
hscan();
};
const hscan = async () => {
const match = state.scanParam.match;
if (!match || match == '' || match == '*') {
if (state.scanParam.count > 100) {
ElMessage.error('match为空或者*时, count不能超过100');
return;
}
} else {
if (state.scanParam.count > 1000) {
ElMessage.error('count不能超过1000');
return;
}
}
const scanRes = await redisApi.hscan.request(state.scanParam);
state.scanParam.cursor = scanRes.cursor;
state.keySize = scanRes.keySize;
const keys = scanRes.keys;
const hashValue = [];
const fieldCount = keys.length / 2;
let nextFieldIndex = 0;
for (let i = 0; i < fieldCount; i++) {
hashValue.push({ field: keys[nextFieldIndex++], value: keys[nextFieldIndex++] });
}
state.hashValues = hashValue;
};
const hdel = async (field: any, index: any) => {
// 如果是新增操作，则直接数组移除即可
if (state.operationType == 1) {
state.hashValues.splice(index, 1);
return;
}
await ElMessageBox.confirm(`确定删除[${field}]?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.hdel.request({
id: state.redisId,
db: state.db,
key: state.key.key,
field,
});
ElMessage.success('删除成功');
reHscan();
};
const hset = async (row: any) => {
await redisApi.saveHashValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
timed: state.key.timed,
value: [
{
field: row.field,
value: row.value,
},
],
});
ElMessage.success('保存成功');
};
const onAddHashValue = () => {
state.hashValues.unshift({ field: '', value: '' });
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.hashValues.length > 0, 'hash内容不能为空');
const sv = { value: state.hashValues, id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveHashValue.request(sv);
ElMessage.success('保存成功');
cancel();
emit('valChange');
};
</script>
<style lang="scss">
#string-value-text {

67
mayfly_go_web/src/views/ops/redis/Info.vue
View File

@@ -145,45 +145,42 @@
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, watch, toRefs } from 'vue';
export default defineComponent({
name: 'Info',
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
info: {
type: [Boolean, Object],
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
});
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
const close = () => {
emit('update:visible', false);
emit('close');
};
return {
...toRefs(state),
close,
};
title: {
type: String,
},
info: {
type: [Boolean, Object],
},
})
const emit = defineEmits(['update:visible', 'close'])
const state = reactive({
dialogVisible: false,
});
const {
dialogVisible,
} = toRefs(state)
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
const close = () => {
emit('update:visible', false);
emit('close');
};
</script>
<style>

290
mayfly_go_web/src/views/ops/redis/ListValue.vue
View File

@@ -18,32 +18,22 @@
<el-table :data="value" stripe style="width: 100%">
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
<el-input v-model="scope.row.value" clearable type="textarea"
:autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="140">
<template #default="scope">
<el-button
v-if="operationType == 2"
type="success"
@click="lset(scope.row, scope.$index)"
icon="check"
size="small"
plain
></el-button>
<el-button v-if="operationType == 2" type="success" @click="lset(scope.row, scope.$index)"
icon="check" size="small" plain></el-button>
<!-- <el-button type="danger" @click="set.value.splice(scope.$index, 1)" icon="delete" size="small" plain></el-button> -->
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
:total="len"
layout="prev, pager, next, total"
@current-change="handlePageChange"
v-model:current-page="pageNum"
:page-size="pageSize"
></el-pagination>
<el-pagination style="text-align: right" :total="len" layout="prev, pager, next, total"
@current-change="handlePageChange" v-model:current-page="pageNum" :page-size="pageSize">
</el-pagination>
</el-row>
</el-form>
<!-- <template #footer>
@@ -54,147 +44,143 @@
</template> -->
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
export default defineComponent({
name: 'ListValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
listValue: {
type: [Array, Object],
},
const props = defineProps({
visible: {
type: Boolean,
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
value: [{ value: '' }],
len: 0,
start: 0,
stop: 0,
pageNum: 1,
pageSize: 10,
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.value = [];
}, 500);
};
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getListValue();
}
});
const getListValue = async () => {
const pageNum = state.pageNum;
const pageSize = state.pageSize;
const res = await redisApi.getListValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
start: (pageNum - 1) * pageSize,
stop: pageNum * pageSize - 1,
});
state.len = res.len;
state.value = res.list.map((x: any) => {
return {
value: x,
};
});
};
const lset = async (row: any, rowIndex: number) => {
await redisApi.setListValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
index: (state.pageNum - 1) * state.pageSize + rowIndex,
value: row.value,
});
ElMessage.success('数据保存成功');
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.value.length > 0, 'list内容不能为空');
// const sv = { value: state.value.map((x) => x.value), id: state.redisId };
// Object.assign(sv, state.key);
// await redisApi.saveSetValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
const onAddListValue = () => {
state.value.unshift({ value: '' });
};
const handlePageChange = (curPage: number) => {
state.pageNum = curPage;
getListValue();
};
return {
...toRefs(state),
saveValue,
handlePageChange,
cancel,
lset,
onAddListValue,
};
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
listValue: {
type: [Array, Object],
},
})
const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
value: [{ value: '' }],
len: 0,
start: 0,
stop: 0,
pageNum: 1,
pageSize: 10,
});
const {
dialogVisible,
operationType,
key,
value,
len,
pageNum,
pageSize,
} = toRefs(state)
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.value = [];
}, 500);
};
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getListValue();
}
});
const getListValue = async () => {
const pageNum = state.pageNum;
const pageSize = state.pageSize;
const res = await redisApi.getListValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
start: (pageNum - 1) * pageSize,
stop: pageNum * pageSize - 1,
});
state.len = res.len;
state.value = res.list.map((x: any) => {
return {
value: x,
};
});
};
const lset = async (row: any, rowIndex: number) => {
await redisApi.setListValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
index: (state.pageNum - 1) * state.pageSize + rowIndex,
value: row.value,
});
ElMessage.success('数据保存成功');
};
// const saveValue = async () => {
// notEmpty(state.key.key, 'key不能为空');
// isTrue(state.value.length > 0, 'list内容不能为空');
// // const sv = { value: state.value.map((x) => x.value), id: state.redisId };
// // Object.assign(sv, state.key);
// // await redisApi.saveSetValue.request(sv);
// ElMessage.success('数据保存成功');
// cancel();
// emit('valChange');
// };
// const onAddListValue = () => {
// state.value.unshift({ value: '' });
// };
const handlePageChange = (curPage: number) => {
state.pageNum = curPage;
getListValue();
};
</script>
<style lang="scss">
#string-value-text {

350
mayfly_go_web/src/views/ops/redis/RedisEdit.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false"
:destroy-on-close="true" width="38%">
<el-form :model="form" ref="redisForm" :rules="rules" label-width="85px">
<el-form-item prop="tagId" label="标签:" required>
<tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
@@ -16,32 +17,25 @@
</el-select>
</el-form-item>
<el-form-item prop="host" label="host:" required>
<el-input
v-model.trim="form.host"
<el-input v-model.trim="form.host"
placeholder="请输入host:port；sentinel模式为: mastername=sentinelhost:port，若集群或哨兵需设多个节点可使用','分割"
auto-complete="off"
type="textarea"
></el-input>
auto-complete="off" type="textarea"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-input
type="password"
show-password
v-model.trim="form.password"
placeholder="请输入密码, 修改操作可不填"
autocomplete="new-password"
><template v-if="form.id && form.id != 0" #suffix>
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
<el-input type="password" show-password v-model.trim="form.password" placeholder="请输入密码, 修改操作可不填"
autocomplete="new-password"><template v-if="form.id && form.id != 0" #suffix>
<el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click"
:content="pwd">
<template #reference>
<el-link @click="getPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
</template>
</el-popover>
</template></el-input
>
</template></el-input>
</el-form-item>
<el-form-item prop="db" label="库号:" required>
<el-select @change="changeDb" v-model="dbList" multiple placeholder="请选择可操作库号" style="width: 100%">
<el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db" :label="db" :value="db" />
<el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db"
:label="db" :value="db" />
</el-select>
</el-form-item>
<el-form-item prop="remark" label="备注:">
@@ -49,17 +43,14 @@
</el-form-item>
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1"
:false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
<el-option v-for="item in sshTunnelMachineList as any" :key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`" :value="item.id">
</el-option>
</el-select>
</el-col>
@@ -76,181 +67,170 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { redisApi } from './api';
import { projectApi } from '../project/api.ts';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import { RsaEncrypt } from '@/common/rsa';
import TagSelect from '../component/TagSelect.vue';
export default defineComponent({
name: 'RedisEdit',
components: {
TagSelect,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
projects: {
type: Array,
},
redis: {
type: [Boolean, Object],
},
title: {
type: String,
},
redis: {
type: [Boolean, Object],
},
setup(props: any, { emit }) {
const redisForm: any = ref(null);
const state = reactive({
dialogVisible: false,
projects: [],
envs: [],
sshTunnelMachineList: [],
form: {
id: null,
tagId: null as any,
tatPath: null as any,
name: null,
mode: 'standalone',
host: '',
password: null,
db: '',
project: null,
projectId: null,
envId: null,
env: null,
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
},
dbList: [0],
pwd: '',
btnLoading: false,
rules: {
projectId: [
{
required: true,
message: '请选择项目',
trigger: ['change', 'blur'],
},
],
envId: [
{
required: true,
message: '请选择环境',
trigger: ['change', 'blur'],
},
],
host: [
{
required: true,
message: '请输入主机ip:port',
trigger: ['change', 'blur'],
},
],
db: [
{
required: true,
message: '请选择库号',
trigger: ['change', 'blur'],
},
],
mode: [
{
required: true,
message: '请选择模式',
trigger: ['change', 'blur'],
},
],
},
});
title: {
type: String,
},
})
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
const emit = defineEmits(['update:visible', 'val-change', 'cancel'])
const rules = {
projectId: [
{
required: true,
message: '请选择项目',
trigger: ['change', 'blur'],
},
],
envId: [
{
required: true,
message: '请选择环境',
trigger: ['change', 'blur'],
},
],
host: [
{
required: true,
message: '请输入主机ip:port',
trigger: ['change', 'blur'],
},
],
db: [
{
required: true,
message: '请选择库号',
trigger: ['change', 'blur'],
},
],
mode: [
{
required: true,
message: '请选择模式',
trigger: ['change', 'blur'],
},
],
}
const redisForm: any = ref(null);
const state = reactive({
dialogVisible: false,
sshTunnelMachineList: [],
form: {
id: null,
tagId: null as any,
tagPath: null as any,
name: null,
mode: 'standalone',
host: '',
password: null,
db: '',
project: null,
projectId: null,
envId: null,
env: null,
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
},
dbList: [0],
pwd: '',
btnLoading: false,
});
const {
dialogVisible,
sshTunnelMachineList,
form,
dbList,
pwd,
btnLoading,
} = toRefs(state)
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
if (newValue.redis) {
state.form = { ...newValue.redis };
convertDb(state.form.db);
} else {
state.form = { db: '0', enableSshTunnel: -1 } as any;
state.dbList = [];
}
getSshTunnelMachines();
});
const convertDb = (db: string) => {
state.dbList = db.split(',').map((x) => Number.parseInt(x));
};
/**
* 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加库号
*/
const changeDb = () => {
state.form.db = state.dbList.length == 0 ? '' : state.dbList.join(',');
};
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getPwd = async () => {
state.pwd = await redisApi.getRedisPwd.request({ id: state.form.id });
};
const btnOk = async () => {
redisForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
if (reqForm.mode == 'sentinel' && reqForm.host.split('=').length != 2) {
ElMessage.error('sentinel模式host需为: mastername=sentinelhost:sentinelport模式');
return;
}
state.projects = newValue.projects;
if (newValue.redis) {
state.form = { ...newValue.redis };
convertDb(state.form.db);
} else {
state.envs = [];
state.form = { db: '0', enableSshTunnel: -1 } as any;
state.dbList = [];
}
getSshTunnelMachines();
});
reqForm.password = await RsaEncrypt(reqForm.password);
redisApi.saveRedis.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
const convertDb = (db: string) => {
state.dbList = db.split(',').map((x) => Number.parseInt(x));
};
/**
* 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加库号
*/
const changeDb = () => {
state.form.db = state.dbList.length == 0 ? '' : state.dbList.join(',');
};
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getPwd = async () => {
state.pwd = await redisApi.getRedisPwd.request({ id: state.form.id });
};
const btnOk = async () => {
redisForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
if (reqForm.mode == 'sentinel' && reqForm.host.split('=').length != 2) {
ElMessage.error('sentinel模式host需为: mastername=sentinelhost:sentinelport模式');
return;
}
reqForm.password = await RsaEncrypt(reqForm.password);
redisApi.saveRedis.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
ElMessage.error('请正确填写信息');
return false;
}
cancel();
});
};
} else {
ElMessage.error('请正确填写信息');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
redisForm,
changeDb,
getSshTunnelMachines,
getPwd,
btnOk,
cancel,
};
},
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
</script>
<style lang="scss">
</style>

390
mayfly_go_web/src/views/ops/redis/RedisList.vue
View File

@@ -2,8 +2,10 @@
<div>
<el-card>
<el-button type="primary" icon="plus" @click="editRedis(true)" plain>添加</el-button>
<el-button type="primary" icon="edit" :disabled="currentId == null" @click="editRedis(false)" plain>编辑</el-button>
<el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteRedis" plain>删除</el-button>
<el-button type="primary" icon="edit" :disabled="currentId == null" @click="editRedis(false)" plain>编辑
</el-button>
<el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteRedis" plain>删除
</el-button>
<div style="float: right">
<el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" filterable clearable>
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
@@ -31,34 +33,27 @@
<el-table-column prop="creator" label="创建人" min-width="100"></el-table-column>
<el-table-column label="更多" min-width="155" fixed="right">
<template #default="scope">
<el-link
v-if="scope.row.mode === 'standalone' || scope.row.mode === 'sentinel'"
type="primary"
@click="info(scope.row)"
:underline="false"
>单机信息</el-link>
<el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode === 'cluster'" type="success" :underline="false">集群信息</el-link>
<el-link v-if="scope.row.mode === 'standalone' || scope.row.mode === 'sentinel'" type="primary"
@click="showInfoDialog(scope.row)" :underline="false">单机信息</el-link>
<el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode === 'cluster'"
type="success" :underline="false">集群信息</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-link @click="openDataOpt(scope.row)" type="success" :underline="false">数据操作</el-link>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
<info v-model:visible="infoDialog.visible" :title="infoDialog.title" :info="infoDialog.info"></info>
<el-dialog width="1000px" title="集群信息" v-model="clusterInfoDialog.visible">
<el-input type="textarea" :autosize="{ minRows: 12, maxRows: 12 }" v-model="clusterInfoDialog.info"> </el-input>
<el-input type="textarea" :autosize="{ minRows: 12, maxRows: 12 }" v-model="clusterInfoDialog.info">
</el-input>
<el-divider content-position="left">节点信息</el-divider>
<el-table :data="clusterInfoDialog.nodes" stripe size="small" border>
@@ -66,44 +61,36 @@
<template #header>
nodeId
<el-tooltip class="box-item" effect="dark" content="节点id" placement="top">
<el-icon><question-filled /></el-icon>
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="ip" label="ip" min-width="180">
<template #header>
ip
<el-tooltip
class="box-item"
effect="dark"
content="ip:port1@port2：port1指redis服务器与客户端通信的端口，port2则是集群内部节点间通信的端口"
placement="top"
>
<el-icon><question-filled /></el-icon>
<el-tooltip class="box-item" effect="dark"
content="ip:port1@port2：port1指redis服务器与客户端通信的端口，port2则是集群内部节点间通信的端口" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<template #default="scope">
<el-tag
@click="info({ id: clusterInfoDialog.redisId, ip: scope.row.ip })"
effect="plain"
type="success"
size="small"
style="cursor: pointer"
>{{ scope.row.ip }}</el-tag
>
<el-tag @click="showInfoDialog({ id: clusterInfoDialog.redisId, ip: scope.row.ip })" effect="plain"
type="success" size="small" style="cursor: pointer">{{ scope.row.ip }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="flags" label="flags" min-width="110"></el-table-column>
<el-table-column prop="masterSlaveRelation" label="masterSlaveRelation" min-width="300">
<template #header>
masterSlaveRelation
<el-tooltip
class="box-item"
effect="dark"
content="如果节点是slave，并且已知master节点，则为master节点ID；否则为符号'-'"
placement="top"
>
<el-icon><question-filled /></el-icon>
<el-tooltip class="box-item" effect="dark"
content="如果节点是slave，并且已知master节点，则为master节点ID；否则为符号'-'" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -120,13 +107,12 @@
<el-table-column prop="configEpoch" label="configEpoch" min-width="130">
<template #header>
configEpoch
<el-tooltip
class="box-item"
effect="dark"
<el-tooltip class="box-item" effect="dark"
content="节点的epoch值（如果该节点是从节点，则为其主节点的epoch值）。每当节点发生失败切换时，都会创建一个新的，独特的，递增的epoch。"
placement="top"
>
<el-icon><question-filled /></el-icon>
placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
@@ -135,189 +121,163 @@
</el-table>
</el-dialog>
<redis-edit
@val-change="valChange"
:tags="tags"
:title="redisEditDialog.title"
v-model:visible="redisEditDialog.visible"
v-model:redis="redisEditDialog.data"
></redis-edit>
<redis-edit @val-change="valChange" :tags="tags" :title="redisEditDialog.title"
v-model:visible="redisEditDialog.visible" v-model:redis="redisEditDialog.data"></redis-edit>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import Info from './Info.vue';
import { redisApi } from './api';
import { toRefs, reactive, defineComponent, onMounted } from 'vue';
import { toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagApi } from '../tag/api.ts';
import RedisEdit from './RedisEdit.vue';
import { dateFormat } from '@/common/utils/date';
import {store} from '@/store';
import { store } from '@/store';
import router from '@/router';
export default defineComponent({
name: 'RedisList',
components: {
Info,
RedisEdit,
const state = reactive({
tags: [],
redisTable: [],
total: 0,
currentId: null,
currentData: null,
query: {
tagPath: null,
pageNum: 1,
pageSize: 10,
clusterId: null,
},
setup() {
const state = reactive({
tags: [],
redisTable: [],
total: 0,
currentId: null,
currentData: null,
query: {
tagPath: null,
pageNum: 1,
pageSize: 10,
clusterId: null,
},
redisInfo: {
url: '',
},
clusterInfoDialog: {
visible: false,
redisId: 0,
info: '',
nodes: [],
},
clusters: [
{
id: 0,
name: '单机',
},
],
infoDialog: {
title: '',
visible: false,
info: {
Server: {},
Keyspace: {},
Clients: {},
CPU: {},
Memory: {},
},
},
redisEditDialog: {
visible: false,
data: null,
title: '新增redis',
},
});
onMounted(async () => {
search();
});
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const deleteRedis = async () => {
try {
await ElMessageBox.confirm(`确定删除该redis?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.delRedis.request({ id: state.currentId });
ElMessage.success('删除成功');
state.currentData = null;
state.currentId = null;
search();
} catch (err) {}
};
const info = async (redis: any) => {
var host = redis.host;
if (redis.ip) {
host = redis.ip.split('@')[0];
}
const res = await redisApi.redisInfo.request({ id: redis.id, host });
state.infoDialog.info = res;
state.infoDialog.title = `'${host}' info`;
state.infoDialog.visible = true;
};
const onShowClusterInfo = async (redis: any) => {
const ci = await redisApi.clusterInfo.request({ id: redis.id });
state.clusterInfoDialog.info = ci.clusterInfo;
state.clusterInfoDialog.nodes = ci.clusterNodes;
state.clusterInfoDialog.redisId = redis.id;
state.clusterInfoDialog.visible = true;
};
const search = async () => {
const res = await redisApi.redisList.request(state.query);
state.redisTable = res.list;
state.total = res.total;
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const editRedis = async (isAdd = false) => {
if (isAdd) {
state.redisEditDialog.data = null;
state.redisEditDialog.title = '新增redis';
} else {
state.redisEditDialog.data = state.currentData;
state.redisEditDialog.title = '修改redis';
}
state.redisEditDialog.visible = true;
};
const valChange = () => {
state.currentId = null;
state.currentData = null;
search();
};
// 打开redis数据操作页
const openDataOpt = (row : any) => {
const {tagPath, id, db} = row;
// 判断db是否发生改变
let oldDbId = store.state.redisDbOptInfo.dbOptInfo.dbId;
if(oldDbId !== id){
let params = {
tagPath,
dbId: id,
db
}
store.dispatch('redisDbOptInfo/setRedisDbOptInfo', params);
}
router.push({name: 'DataOperation'});
}
return {
...toRefs(state),
dateFormat,
getTags,
search,
handlePageChange,
choose,
info,
onShowClusterInfo,
deleteRedis,
editRedis,
valChange,
openDataOpt,
};
clusterInfoDialog: {
visible: false,
redisId: 0,
info: '',
nodes: [],
},
infoDialog: {
title: '',
visible: false,
info: {
Server: {},
Keyspace: {},
Clients: {},
CPU: {},
Memory: {},
},
},
redisEditDialog: {
visible: false,
data: null as any,
title: '新增redis',
},
});
const {
tags,
redisTable,
total,
currentId,
query,
clusterInfoDialog,
infoDialog,
redisEditDialog,
} = toRefs(state)
onMounted(async () => {
search();
});
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const deleteRedis = async () => {
try {
await ElMessageBox.confirm(`确定删除该redis?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.delRedis.request({ id: state.currentId });
ElMessage.success('删除成功');
state.currentData = null;
state.currentId = null;
search();
} catch (err) { }
};
const showInfoDialog = async (redis: any) => {
var host = redis.host;
if (redis.ip) {
host = redis.ip.split('@')[0];
}
const res = await redisApi.redisInfo.request({ id: redis.id, host });
state.infoDialog.info = res;
state.infoDialog.title = `'${host}' info`;
state.infoDialog.visible = true;
};
const onShowClusterInfo = async (redis: any) => {
const ci = await redisApi.clusterInfo.request({ id: redis.id });
state.clusterInfoDialog.info = ci.clusterInfo;
state.clusterInfoDialog.nodes = ci.clusterNodes;
state.clusterInfoDialog.redisId = redis.id;
state.clusterInfoDialog.visible = true;
};
const search = async () => {
const res = await redisApi.redisList.request(state.query);
state.redisTable = res.list;
state.total = res.total;
};
const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null);
};
const editRedis = async (isAdd = false) => {
if (isAdd) {
state.redisEditDialog.data = null;
state.redisEditDialog.title = '新增redis';
} else {
state.redisEditDialog.data = state.currentData;
state.redisEditDialog.title = '修改redis';
}
state.redisEditDialog.visible = true;
};
const valChange = () => {
state.currentId = null;
state.currentData = null;
search();
};
// 打开redis数据操作页
const openDataOpt = (row: any) => {
const { tagPath, id, db } = row;
// 判断db是否发生改变
let oldDbId = store.state.redisDbOptInfo.dbOptInfo.dbId;
if (oldDbId !== id) {
let params = {
tagPath,
dbId: id,
db
}
store.dispatch('redisDbOptInfo/setRedisDbOptInfo', params);
}
router.push({ name: 'DataOperation' });
}
</script>
<style>
</style>

214
mayfly_go_web/src/views/ops/redis/SetValue.vue
View File

@@ -15,12 +15,14 @@
<el-table :data="value" stripe style="width: 100%">
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
<el-input v-model="scope.row.value" clearable type="textarea"
:autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small" plain>删除</el-button>
<el-button type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small"
plain>删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -33,119 +35,115 @@
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
export default defineComponent({
name: 'SetValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
setValue: {
type: [Array, Object],
},
const props = defineProps({
visible: {
type: Boolean,
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
value: [{ value: '' }],
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.value = [];
}, 500);
};
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getSetValue();
}
});
const getSetValue = async () => {
const res = await redisApi.getSetValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
});
state.value = res.map((x: any) => {
return {
value: x,
};
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.value.length > 0, 'set内容不能为空');
const sv = { value: state.value.map((x) => x.value), id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveSetValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
const onAddSetValue = () => {
state.value.unshift({ value: '' });
};
return {
...toRefs(state),
saveValue,
cancel,
onAddSetValue,
};
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
setValue: {
type: [Array, Object],
},
})
const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
value: [{ value: '' }],
});
const {
dialogVisible,
operationType,
key,
value,
} = toRefs(state)
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.value = [];
}, 500);
};
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getSetValue();
}
});
const getSetValue = async () => {
const res = await redisApi.getSetValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
});
state.value = res.map((x: any) => {
return {
value: x,
};
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.value.length > 0, 'set内容不能为空');
const sv = { value: state.value.map((x) => x.value), id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveSetValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
const onAddSetValue = () => {
state.value.unshift({ value: '' });
};
</script>
<style lang="scss">
#string-value-text {

255
mayfly_go_web/src/views/ops/redis/StringValue.vue
View File

@@ -12,7 +12,8 @@
</el-form-item>
<div id="string-value-text" style="width: 100%">
<el-input class="json-text" v-model="string.value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
<el-input class="json-text" v-model="string.value" type="textarea"
:autosize="{ minRows: 10, maxRows: 20 }"></el-input>
<el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
<el-option key="text" label="text" value="text"> </el-option>
<el-option key="json" label="json" value="json"> </el-option>
@@ -27,144 +28,140 @@
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
<script lang="ts" setup>
import { reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { notEmpty } from '@/common/assert';
import { formatJsonString } from '@/common/utils/format';
export default defineComponent({
name: 'StringValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
const props = defineProps({
visible: {
type: Boolean,
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
string: {
type: 'text',
value: '',
},
});
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
db: {
type: [String],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
})
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.string.value = '';
state.string.type = 'text';
}, 500);
};
const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
watch(
() => props.redisId,
(val) => {
state.redisId = val;
}
);
watch(
() => props.db,
(val) => {
state.db = val;
}
);
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getStringValue();
}
});
const getStringValue = async () => {
state.string.value = await redisApi.getStringValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
notEmpty(state.string.value, 'value不能为空');
const sv = { value: formatJsonString(state.string.value, true), id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveStringValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
// 更改文本类型
const onChangeTextType = (val: string) => {
if (val == 'json') {
state.string.value = formatJsonString(state.string.value, false);
return;
}
if (val == 'text') {
state.string.value = formatJsonString(state.string.value, true);
}
};
return {
...toRefs(state),
saveValue,
cancel,
onChangeTextType,
};
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
db: '0',
key: {
key: '',
type: 'string',
timed: -1,
},
string: {
type: 'text',
value: '',
},
});
const {
dialogVisible,
operationType,
key,
string,
} = toRefs(state)
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.string.value = '';
state.string.type = 'text';
}, 500);
};
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
watch(
() => props.redisId,
(val) => {
state.redisId = val as any;
}
);
watch(
() => props.db,
(val) => {
state.db = val as any;
}
);
watch(props, async (newValue: any) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.db = newValue.db;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getStringValue();
}
});
const getStringValue = async () => {
state.string.value = await redisApi.getStringValue.request({
id: state.redisId,
db: state.db,
key: state.key.key,
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
notEmpty(state.string.value, 'value不能为空');
const sv = { value: formatJsonString(state.string.value, true), id: state.redisId, db: state.db };
Object.assign(sv, state.key);
await redisApi.saveStringValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
// 更改文本类型
const onChangeTextType = (val: string) => {
if (val == 'json') {
state.string.value = formatJsonString(state.string.value, false);
return;
}
if (val == 'text') {
state.string.value = formatJsonString(state.string.value, true);
}
};
</script>
<style lang="scss">
#string-value-text {

88
mayfly_go_web/src/views/ops/redis/ValueDialog.vue
View File

@@ -1,88 +0,0 @@
<template>
<el-dialog :title="keyValue.key" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="900px">
<el-form>
<el-form-item>
<el-input class="json-text" v-model="keyValue2.jsonValue" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
</el-form-item>
<!-- <vue3-json-editor v-model="keyValue2.jsonValue" @json-change="valueChange" :show-btns="false" :expandedOnStart="true" /> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button @click="saveValue" type="primary">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { isTrue } from '@/common/assert';
export default defineComponent({
name: 'ValueDialog',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
keyValue: {
type: [String, Object],
},
},
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
keyValue2: {} as any,
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
watch(
() => props.keyValue,
(val) => {
state.keyValue2 = val;
if (typeof val.value == 'string') {
state.keyValue2.jsonValue = JSON.stringify(JSON.parse(val.value), null, 2);
} else {
state.keyValue2.jsonValue = JSON.stringify(val.value, null, 2);
}
}
);
const saveValue = async () => {
isTrue(state.keyValue2.type == 'string', '暂不支持除string外其他类型修改');
state.keyValue2.value = state.keyValue2.jsonValue;
await redisApi.saveStringValue.request(state.keyValue2);
ElMessage.success('保存成功');
cancel();
};
const valueChange = (val: any) => {
state.keyValue2.value = JSON.stringify(val);
};
return {
...toRefs(state),
saveValue,
valueChange,
cancel,
};
},
});
</script>

369
mayfly_go_web/src/views/ops/tag/TagTreeList.vue
View File

@@ -1,29 +1,24 @@
<template>
<div class="menu">
<div class="toolbar">
<el-input v-model="filterTag" placeholder="输入标签关键字过滤" style="width: 200px; margin-right: 10px" />
<el-button v-auth="'tag:save'" type="primary" icon="plus" @click="showSaveTabDialog(null)">添加</el-button>
<div style="float: right">
<el-tooltip effect="dark" placement="top">
<template #content>
1. 用于将资产进行归类
<br />2. 可在团队管理中进行分配，用于资源隔离
<br />3. 父标签可访问及操作所有子标签关联的资源
<br />2. 可在团队管理中进行分配，用于资源隔离 <br />3. 拥有父标签的团队成员可访问操作其自身或子标签关联的资源
</template>
<span>标签作用<el-icon><question-filled /></el-icon></span>
<span>标签作用<el-icon>
<question-filled />
</el-icon>
</span>
</el-tooltip>
</div>
</div>
<el-tree
class="none-select"
:indent="38"
node-key="id"
:props="props"
:data="data"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
>
<el-tree ref="tagTreeRef" class="none-select" :indent="38" node-key="id" :props="props" :data="data"
@node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"
:default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" :filter-node-method="filterNode">
<template #default="{ data }">
<span class="custom-tree-node">
<span style="font-size: 13px">
@@ -34,18 +29,14 @@
<el-tag v-if="data.children !== null" size="small">{{ data.children.length }}</el-tag>
</span>
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="view" type="info" :underline="false" />
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="view" type="info"
:underline="false" />
<el-link v-auth="'tag:save'" @click.prevent="showEditTagDialog(data)" class="ml5" type="primary" icon="edit" :underline="false" />
<el-link v-auth="'tag:save'" @click.prevent="showEditTagDialog(data)" class="ml5" type="primary"
icon="edit" :underline="false" />
<el-link
v-auth="'tag:save'"
@click.prevent="showSaveTabDialog(data)"
icon="circle-plus"
:underline="false"
type="success"
class="ml5"
/>
<el-link v-auth="'tag:save'" @click.prevent="showSaveTabDialog(data)" icon="circle-plus"
:underline="false" type="success" class="ml5" />
<!-- <el-link
v-auth="'resource:changeStatus'"
@@ -68,24 +59,18 @@
class="ml5"
/> -->
<el-link
v-auth="'tag:del'"
@click.prevent="deleteTag(data)"
v-if="data.children == null"
type="danger"
icon="delete"
:underline="false"
plain
class="ml5"
/>
<el-link v-auth="'tag:del'" @click.prevent="deleteTag(data)" v-if="data.children == null"
type="danger" icon="delete" :underline="false" plain class="ml5" />
</span>
</template>
</el-tree>
<el-dialog width="500px" :title="saveTabDialog.title" :before-close="cancelSaveTag" v-model="saveTabDialog.visible">
<el-dialog width="500px" :title="saveTabDialog.title" :before-close="cancelSaveTag"
v-model="saveTabDialog.visible">
<el-form ref="tagForm" :rules="rules" :model="saveTabDialog.form" label-width="70px">
<el-form-item prop="code" label="标识:" required>
<el-input :disabled="saveTabDialog.form.id ? true : false" v-model="saveTabDialog.form.code" auto-complete="off"></el-input>
<el-input :disabled="saveTabDialog.form.id ? true : false" v-model="saveTabDialog.form.code"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="name" label="名称:" required>
<el-input v-model="saveTabDialog.form.name" auto-complete="off"></el-input>
@@ -118,170 +103,178 @@
</div>
</template>
<script lang="ts">
import { toRefs, ref, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, ref, watch, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagApi } from './api';
import { dateFormat } from '@/common/utils/date';
export default defineComponent({
name: 'TagTreeList',
components: {},
setup() {
const tagForm: any = ref(null);
const state = reactive({
saveTabDialog: {
title: '新增标签',
visible: false,
form: { id: 0, pid: 0, code: '', name: '', remark: '' },
},
//资源信息弹出框对象
infoDialog: {
title: '',
visible: false,
// 资源类型选择是否选
data: null as any,
},
data: [],
props: {
label: 'name',
children: 'children',
},
// 展开的节点
defaultExpandedKeys: [] as any[],
rules: {
code: [
{ required: true, message: '标识符不能为空', trigger: 'blur' },
// {
// pattern: /^\w+$/g,
// message: '标识符只能为空数字字母下划线等',
// trigger: 'blur',
// },
],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
},
});
interface Tree {
id: number;
codePath: string;
name: string;
children?: Tree[];
}
onMounted(() => {
search();
});
const tagForm: any = ref(null);
const tagTreeRef: any = ref(null);
const filterTag = ref('');
const search = async () => {
let res = await tagApi.getTagTrees.request(null);
state.data = res;
};
const info = async (data: any) => {
state.infoDialog.data = data;
state.infoDialog.visible = true;
};
const showSaveTabDialog = (data: any) => {
if (data) {
state.saveTabDialog.form.pid = data.id;
state.saveTabDialog.title = `新增 [${data.codePath}] 子标签信息`;
} else {
state.saveTabDialog.title = '新增根标签信息';
}
state.saveTabDialog.visible = true;
};
const showEditTagDialog = (data: any) => {
state.saveTabDialog.form.id = data.id;
state.saveTabDialog.form.code = data.code;
state.saveTabDialog.form.name = data.name;
state.saveTabDialog.form.remark = data.remark;
state.saveTabDialog.title = `修改 [${data.codePath}] 信息`;
state.saveTabDialog.visible = true;
};
const saveTag = async () => {
tagForm.value.validate(async (valid: any) => {
if (valid) {
const form = state.saveTabDialog.form;
await tagApi.saveTagTree.request(form);
ElMessage.success('保存成功');
search();
cancelSaveTag();
}
});
};
const cancelSaveTag = () => {
state.saveTabDialog.visible = false;
state.saveTabDialog.form = {} as any;
tagForm.value.resetFields();
};
const deleteTag = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.codePath}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await tagApi.delTagTree.request({ id: data.id });
ElMessage.success('删除成功！');
search();
});
};
// const changeStatus = async (data: any, status: any) => {
// await resourceApi.changeStatus.request({
// id: data.id,
// status: status,
// });
// data.status = status;
// ElMessage.success((status === 1 ? '启用' : '禁用') + '成功！');
// };
// 节点被展开时触发的事件
const handleNodeExpand = (data: any, node: any) => {
const id: any = node.data.id;
if (!state.defaultExpandedKeys.includes(id)) {
state.defaultExpandedKeys.push(id);
}
};
// 关闭节点
const handleNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(node.data.id);
let childNodes = node.childNodes;
for (let cn of childNodes) {
if (cn.expanded) {
removeDeafultExpandId(cn.data.id);
}
// 递归删除展开的子节点节点id
handleNodeCollapse(data, cn);
}
};
const removeDeafultExpandId = (id: any) => {
let index = state.defaultExpandedKeys.indexOf(id);
if (index > -1) {
state.defaultExpandedKeys.splice(index, 1);
}
};
return {
...toRefs(state),
dateFormat,
tagForm,
info,
saveTag,
showSaveTabDialog,
showEditTagDialog,
cancelSaveTag,
deleteTag,
handleNodeExpand,
handleNodeCollapse,
};
const state = reactive({
data: [],
saveTabDialog: {
title: '新增标签',
visible: false,
form: { id: 0, pid: 0, code: '', name: '', remark: '' },
},
infoDialog: {
title: '',
visible: false,
// 资源类型选择是否选
data: null as any,
},
// 展开的节点
defaultExpandedKeys: [] as any
});
const {
data,
saveTabDialog,
infoDialog,
defaultExpandedKeys,
} = toRefs(state)
const props = {
label: 'name',
children: 'children',
};
const rules = {
code: [
{ required: true, message: '标识符不能为空', trigger: 'blur' },
// {
// pattern: /^\w+$/g,
// message: '标识符只能为空数字字母下划线等',
// trigger: 'blur',
// },
],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
};
onMounted(() => {
search();
});
watch(filterTag, (val) => {
tagTreeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.codePath.includes(value) || data.name.includes(value);
};
const search = async () => {
let res = await tagApi.getTagTrees.request(null);
state.data = res;
};
const info = async (data: any) => {
state.infoDialog.data = data;
state.infoDialog.visible = true;
};
const showSaveTabDialog = (data: any) => {
if (data) {
state.saveTabDialog.form.pid = data.id;
state.saveTabDialog.title = `新增 [${data.codePath}] 子标签信息`;
} else {
state.saveTabDialog.title = '新增根标签信息';
}
state.saveTabDialog.visible = true;
};
const showEditTagDialog = (data: any) => {
state.saveTabDialog.form.id = data.id;
state.saveTabDialog.form.code = data.code;
state.saveTabDialog.form.name = data.name;
state.saveTabDialog.form.remark = data.remark;
state.saveTabDialog.title = `修改 [${data.codePath}] 信息`;
state.saveTabDialog.visible = true;
};
const saveTag = async () => {
tagForm.value.validate(async (valid: any) => {
if (valid) {
const form = state.saveTabDialog.form;
await tagApi.saveTagTree.request(form);
ElMessage.success('保存成功');
search();
cancelSaveTag();
}
});
};
const cancelSaveTag = () => {
state.saveTabDialog.visible = false;
state.saveTabDialog.form = {} as any;
tagForm.value.resetFields();
};
const deleteTag = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.codePath}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await tagApi.delTagTree.request({ id: data.id });
ElMessage.success('删除成功！');
search();
});
};
// const changeStatus = async (data: any, status: any) => {
// await resourceApi.changeStatus.request({
// id: data.id,
// status: status,
// });
// data.status = status;
// ElMessage.success((status === 1 ? '启用' : '禁用') + '成功！');
// };
// 节点被展开时触发的事件
const handleNodeExpand = (data: any, node: any) => {
const id: any = node.data.id;
if (!state.defaultExpandedKeys.includes(id)) {
state.defaultExpandedKeys.push(id);
}
};
// 关闭节点
const handleNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(node.data.id);
let childNodes = node.childNodes;
for (let cn of childNodes) {
if (cn.expanded) {
removeDeafultExpandId(cn.data.id);
}
// 递归删除展开的子节点节点id
handleNodeCollapse(data, cn);
}
};
const removeDeafultExpandId = (id: any) => {
let index = state.defaultExpandedKeys.indexOf(id);
if (index > -1) {
state.defaultExpandedKeys.splice(index, 1);
}
};
</script>
<style lang="scss">
.menu {
height: 100%;
.el-tree-node__content {
height: 40px;
line-height: 40px;

559
mayfly_go_web/src/views/ops/tag/TeamList.vue
View File

@@ -2,13 +2,14 @@
<div class="role-list">
<el-card>
<el-button v-auth="'team:save'" type="primary" icon="plus" @click="showSaveTeamDialog(false)">添加</el-button>
<el-button v-auth="'team:save'" :disabled="chooseId == null" @click="showSaveTeamDialog(chooseData)" type="primary" icon="edit"
>编辑</el-button
>
<el-button v-auth="'team:del'" :disabled="chooseId == null" @click="deleteTeam(chooseData)" type="danger" icon="delete">删除</el-button>
<el-button v-auth="'team:save'" :disabled="!chooseId" @click="showSaveTeamDialog(chooseData)"
type="primary" icon="edit">编辑</el-button>
<el-button v-auth="'team:del'" :disabled="!chooseId" @click="deleteTeam(chooseData)" type="danger"
icon="delete">删除</el-button>
<div style="float: right">
<el-input placeholder="请输入团队名称" class="mr2" style="width: 200px" v-model="query.name" @clear="search" clearable></el-input>
<el-input placeholder="请输入团队名称" class="mr2" style="width: 200px" v-model="query.name" @clear="search"
clearable></el-input>
<el-button @click="search" type="success" icon="search"></el-button>
</div>
<el-table :data="data" @current-change="choose" ref="table" style="width: 100%">
@@ -36,14 +37,9 @@
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
@@ -59,28 +55,19 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelSaveTeam()">取 消</el-button>
<el-button @click="saveTeam" type="primary">确 定</el-button>
<el-button @click="saveTeam" type="primary">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog width="500px" :title="showTagDialog.title" :before-close="closeTagDialog" v-model="showTagDialog.visible">
<el-dialog width="500px" :title="showTagDialog.title" :before-close="closeTagDialog"
v-model="showTagDialog.visible">
<el-form label-width="70px">
<el-form-item prop="project" label="标签:">
<el-tree-select
ref="tagTreeRef"
style="width: 100%"
v-model="showTagDialog.tagTreeTeams"
:data="showTagDialog.tags"
:default-expanded-keys="showTagDialog.tagTreeTeams"
multiple
:render-after-expand="true"
show-checkbox
check-strictly
node-key="id"
:props="showTagDialog.props"
@check="tagTreeNodeCheck"
>
<el-tree-select ref="tagTreeRef" style="width: 100%" v-model="showTagDialog.tagTreeTeams"
:data="showTagDialog.tags" :default-expanded-keys="showTagDialog.tagTreeTeams" multiple
:render-after-expand="true" show-checkbox check-strictly node-key="id"
:props="showTagDialog.props" @check="tagTreeNodeCheck">
<template #default="{ data }">
<span class="custom-tree-node">
<span style="font-size: 13px">
@@ -88,7 +75,8 @@
<span style="color: #3c8dbc">【</span>
{{ data.name }}
<span style="color: #3c8dbc">】</span>
<el-tag v-if="data.children !== null" size="small">{{ data.children.length }}</el-tag>
<el-tag v-if="data.children !== null" size="small">{{ data.children.length }}
</el-tag>
</span>
</span>
</template>
@@ -103,12 +91,19 @@
</template>
</el-dialog>
<el-dialog width="600px" :title="showMemDialog.title" v-model="showMemDialog.visible">
<el-dialog width="700px" :title="showMemDialog.title" v-model="showMemDialog.visible">
<div class="toolbar">
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus">添加</el-button>
<el-button v-auth="'team:member:del'" @click="deleteMember" :disabled="showMemDialog.chooseId == null" type="danger" icon="delete">移除</el-button>
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus"
size="small">添加</el-button>
<el-button v-auth="'team:member:del'" @click="deleteMember" :disabled="showMemDialog.chooseId == null"
type="danger" icon="delete" size="small">移除</el-button>
<div style="float: right">
<el-input placeholder="请输入用户名" class="mr2" style="width: 150px"
v-model="showMemDialog.query.username" size="small" @clear="search" clearable></el-input>
<el-button @click="setMemebers" type="success" icon="search" size="small"></el-button>
</div>
</div>
<el-table @current-change="chooseMember" border :data="showMemDialog.members.list">
<el-table @current-change="chooseMember" border :data="showMemDialog.members.list" size="small">
<el-table-column label="选择" width="50px">
<template #default="scope">
<el-radio v-model="showMemDialog.chooseId" :label="scope.row.id">
@@ -116,6 +111,7 @@
</el-radio>
</template>
</el-table-column>
<el-table-column property="name" label="姓名" width="115"></el-table-column>
<el-table-column property="username" label="账号" width="135"></el-table-column>
<el-table-column property="createTime" label="加入时间">
<template #default="scope">
@@ -124,28 +120,18 @@
</el-table-column>
<el-table-column property="creator" label="分配者" width="135"></el-table-column>
</el-table>
<el-pagination
@current-change="setMemebers"
style="text-align: center"
background
layout="prev, pager, next, total, jumper"
:total="showMemDialog.members.total"
v-model:current-page="showMemDialog.query.pageNum"
:page-size="showMemDialog.query.pageSize"
/>
<el-pagination size="small" @current-change="setMemebers" style="text-align: center" background
layout="prev, pager, next, total, jumper" :total="showMemDialog.members.total"
v-model:current-page="showMemDialog.query.pageNum" :page-size="showMemDialog.query.pageSize" />
<el-dialog width="400px" title="添加成员" :before-close="cancelAddMember" v-model="showMemDialog.addVisible">
<el-form :model="showMemDialog.memForm" label-width="70px">
<el-form-item label="账号:">
<el-select
style="width: 100%"
remote
:remote-method="getAccount"
v-model="showMemDialog.memForm.accountId"
filterable
placeholder="请输入账号模糊搜索并选择"
>
<el-option v-for="item in showMemDialog.accounts" :key="item.id" :label="item.username" :value="item.id"> </el-option>
<el-select style="width: 100%" remote :remote-method="getAccount"
v-model="showMemDialog.memForm.accountIds" filterable multiple placeholder="请输入账号模糊搜索并选择">
<el-option v-for="item in showMemDialog.accounts" :key="item.id"
:label="`${item.username} [${item.name}]`" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
@@ -160,242 +146,250 @@
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, onMounted } from 'vue';
import { tagApi } from './api';
import { accountApi } from '../../system/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { dateFormat } from '@/common/utils/date';
import { notBlank } from '@/common/assert';
export default defineComponent({
name: 'TeamList',
components: {},
setup() {
const teamForm: any = ref(null);
const tagTreeRef: any = ref(null);
const state = reactive({
dialogFormVisible: false,
currentEditPermissions: false,
addTeamDialog: {
title: '新增团队',
visible: false,
form: { id: 0, name: '', remark: '' },
},
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
data: [],
chooseId: 0,
chooseData: null,
showMemDialog: {
visible: false,
chooseId: 0,
chooseData: null,
query: {
pageSize: 8,
pageNum: 1,
teamId: null,
},
members: {
list: [],
total: null,
},
title: '',
addVisible: false,
memForm: {
accountId: null as any,
teamId: 0,
},
accounts: Array(),
},
showTagDialog: {
title: '项目信息',
visible: false,
tags: [],
teamId: 0,
tagTreeTeams: [] as any,
props: {
value: 'id',
label: 'codePath',
children: 'children',
},
},
});
onMounted(() => {
search();
});
const teamForm: any = ref(null);
const tagTreeRef: any = ref(null);
const state = reactive({
currentEditPermissions: false,
addTeamDialog: {
title: '新增团队',
visible: false,
form: { id: 0, name: '', remark: '' },
},
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
data: [],
chooseId: 0,
chooseData: null,
showMemDialog: {
visible: false,
chooseId: 0,
chooseData: null,
query: {
pageSize: 10,
pageNum: 1,
teamId: null,
username: null,
},
members: {
list: [],
total: null,
},
title: '',
addVisible: false,
memForm: {
accountIds: [] as any,
teamId: 0,
},
accounts: Array(),
},
showTagDialog: {
title: '项目信息',
visible: false,
tags: [],
teamId: 0,
tagTreeTeams: [] as any,
props: {
value: 'id',
label: 'codePath',
children: 'children',
},
},
});
const search = async () => {
let res = await tagApi.getTeams.request(state.query);
state.data = res.list;
state.total = res.total;
};
const {
query,
addTeamDialog,
total,
data,
chooseId,
chooseData,
showMemDialog,
showTagDialog,
} = toRefs(state)
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
onMounted(() => {
search();
});
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const search = async () => {
let res = await tagApi.getTeams.request(state.query);
state.data = res.list;
state.total = res.total;
};
const showSaveTeamDialog = (data: any) => {
if (data) {
state.addTeamDialog.form.id = data.id;
state.addTeamDialog.form.name = data.name;
state.addTeamDialog.form.remark = data.remark;
state.addTeamDialog.title = `修改 [${data.codePath}] 信息`;
}
state.addTeamDialog.visible = true;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const saveTeam = async () => {
teamForm.value.validate(async (valid: any) => {
if (valid) {
const form = state.addTeamDialog.form;
await tagApi.saveTeam.request(form);
ElMessage.success('保存成功');
search();
cancelSaveTeam();
}
});
};
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const cancelSaveTeam = () => {
state.addTeamDialog.visible = false;
state.addTeamDialog.form = {} as any;
teamForm.value.resetFields();
};
const showSaveTeamDialog = (data: any) => {
if (data) {
state.addTeamDialog.form.id = data.id;
state.addTeamDialog.form.name = data.name;
state.addTeamDialog.form.remark = data.remark;
state.addTeamDialog.title = `修改 [${data.codePath}] 信息`;
}
state.addTeamDialog.visible = true;
};
const deleteTeam = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await tagApi.delTeam.request({ id: data.id });
ElMessage.success('删除成功！');
search();
});
};
/********** 团队成员相关 ***********/
const showMembers = async (team: any) => {
state.showMemDialog.query.teamId = team.id;
await setMemebers();
state.showMemDialog.title = `[${team.name}] 成员信息`;
state.showMemDialog.visible = true;
};
const getAccount = (username: any) => {
accountApi.list.request({ username }).then((res) => {
state.showMemDialog.accounts = res.list;
});
};
/**
* 选中成员
*/
const chooseMember = (item: any) => {
if (!item) {
return;
}
state.showMemDialog.chooseData = item;
state.showMemDialog.chooseId = item.id;
};
const deleteMember = async () => {
await tagApi.delTeamMem.request(state.showMemDialog.chooseData);
ElMessage.success('移除成功');
// 重新赋值成员列表
setMemebers();
};
/**
* 设置成员列表信息
*/
const setMemebers = async () => {
const res = await tagApi.getTeamMem.request(state.showMemDialog.query);
state.showMemDialog.members.list = res.list;
state.showMemDialog.members.total = res.total;
};
const showAddMemberDialog = () => {
state.showMemDialog.addVisible = true;
};
const addMember = async () => {
const memForm = state.showMemDialog.memForm;
memForm.teamId = state.chooseId;
notBlank(memForm.accountId, '请先选择账号');
await tagApi.saveTeamMem.request(memForm);
const saveTeam = async () => {
teamForm.value.validate(async (valid: any) => {
if (valid) {
const form = state.addTeamDialog.form;
await tagApi.saveTeam.request(form);
ElMessage.success('保存成功');
setMemebers();
cancelAddMember();
};
search();
cancelSaveTeam();
}
});
};
const cancelAddMember = () => {
state.showMemDialog.memForm = {} as any;
state.showMemDialog.addVisible = false;
state.showMemDialog.chooseData = null;
state.showMemDialog.chooseId = 0;
};
const cancelSaveTeam = () => {
state.addTeamDialog.visible = false;
state.addTeamDialog.form = {} as any;
teamForm.value.resetFields();
};
/********** 标签相关 ***********/
const deleteTeam = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await tagApi.delTeam.request({ id: data.id });
ElMessage.success('删除成功！');
search();
});
};
const showTags = async (team: any) => {
state.showTagDialog.tags = await tagApi.getTagTrees.request(null);
state.showTagDialog.tagTreeTeams = await tagApi.getTeamTagIds.request({ teamId: team.id });
state.showTagDialog.title = `[${team.name}] 团队标签信息`;
state.showTagDialog.teamId = team.id;
state.showTagDialog.visible = true;
};
/********** 团队成员相关 ***********/
const closeTagDialog = () => {
state.showTagDialog.visible = false;
setTimeout(() => {
state.showTagDialog.tagTreeTeams = [];
}, 500);
};
const showMembers = async (team: any) => {
state.showMemDialog.query.teamId = team.id;
await setMemebers();
state.showMemDialog.title = `[${team.name}] 成员信息`;
state.showMemDialog.visible = true;
};
const saveTags = async () => {
await tagApi.saveTeamTags.request({
teamId: state.showTagDialog.teamId,
tagIds: state.showTagDialog.tagTreeTeams,
});
ElMessage.success('保存成功');
closeTagDialog();
};
const getAccount = (username: any) => {
accountApi.list.request({ username }).then((res) => {
state.showMemDialog.accounts = res.list;
});
};
const tagTreeNodeCheck = (data: any, checkInfo: any) => {
const node = tagTreeRef.value.getNode(data.id);
console.log(node);
// state.showTagDialog.tagTreeTeams = [16]
if (node.checked) {
if (node.parent) {
console.log(node.parent);
// removeCheckedTagId(node.parent.key);
tagTreeRef.value.setChecked(node.parent, false, false);
}
// // parentNode = node.parent
// for (let parentNode of node.parent) {
// parentNode.setChecked(false);
// }
}
console.log(data);
console.log(checkInfo);
};
/**
* 选中成员
*/
const chooseMember = (item: any) => {
if (!item) {
return;
}
state.showMemDialog.chooseData = item;
state.showMemDialog.chooseId = item.id;
};
const deleteMember = async () => {
await tagApi.delTeamMem.request(state.showMemDialog.chooseData);
ElMessage.success('移除成功');
// 重新赋值成员列表
setMemebers();
};
/**
* 设置成员列表信息
*/
const setMemebers = async () => {
const res = await tagApi.getTeamMem.request(state.showMemDialog.query);
state.showMemDialog.members.list = res.list;
state.showMemDialog.members.total = res.total;
};
const showAddMemberDialog = () => {
state.showMemDialog.addVisible = true;
};
const addMember = async () => {
const memForm = state.showMemDialog.memForm;
memForm.teamId = state.chooseId;
notBlank(memForm.accountIds, '请先选择账号');
await tagApi.saveTeamMem.request(memForm);
ElMessage.success('保存成功');
setMemebers();
cancelAddMember();
};
const cancelAddMember = () => {
state.showMemDialog.memForm = {} as any;
state.showMemDialog.addVisible = false;
state.showMemDialog.chooseData = null;
state.showMemDialog.chooseId = 0;
};
/********** 标签相关 ***********/
const showTags = async (team: any) => {
state.showTagDialog.tags = await tagApi.getTagTrees.request(null);
state.showTagDialog.tagTreeTeams = await tagApi.getTeamTagIds.request({ teamId: team.id });
state.showTagDialog.title = `[${team.name}] 团队标签信息`;
state.showTagDialog.teamId = team.id;
state.showTagDialog.visible = true;
};
const closeTagDialog = () => {
state.showTagDialog.visible = false;
setTimeout(() => {
state.showTagDialog.tagTreeTeams = [];
}, 500);
};
const saveTags = async () => {
await tagApi.saveTeamTags.request({
teamId: state.showTagDialog.teamId,
tagIds: state.showTagDialog.tagTreeTeams,
});
ElMessage.success('保存成功');
closeTagDialog();
};
const tagTreeNodeCheck = (data: any, checkInfo: any) => {
const node = tagTreeRef.value.getNode(data.id);
console.log(node);
// state.showTagDialog.tagTreeTeams = [16]
if (node.checked) {
if (node.parent) {
console.log(node.parent);
// removeCheckedTagId(node.parent.key);
tagTreeRef.value.setChecked(node.parent, false, false);
}
// // parentNode = node.parent
// for (let parentNode of node.parent) {
// parentNode.setChecked(false);
// }
}
console.log(data);
console.log(checkInfo);
};
// function removeCheckedTagId(id: any) {
// console.log(state.showTagDialog.tagTreeTeams);
@@ -407,34 +401,7 @@ export default defineComponent({
// }
// console.log(state.showTagDialog.tagTreeTeams);
// }
return {
...toRefs(state),
teamForm,
tagTreeRef,
dateFormat,
choose,
search,
handlePageChange,
showSaveTeamDialog,
saveTeam,
cancelSaveTeam,
deleteTeam,
showMembers,
setMemebers,
getAccount,
showAddMemberDialog,
addMember,
cancelAddMember,
chooseMember,
deleteMember,
showTags,
closeTagDialog,
saveTags,
tagTreeNodeCheck,
};
},
});
</script>
<style lang="scss">
</style>

225
mayfly_go_web/src/views/personal/index.vue
View File

@@ -12,8 +12,9 @@
</div>
<div class="personal-user-right">
<el-row>
<el-col :span="24" class="personal-title mb18"
>{{ currentTime }}，{{ getUserInfos.username }}，生活变的再糟糕，也不妨碍我变得更好！
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{
getUserInfos.username
}}，生活变的再糟糕，也不妨碍我变得更好！
</el-col>
<el-col :span="24">
<el-row>
@@ -35,7 +36,9 @@
</el-col>
<el-col :xs="24" :sm="16" class="personal-item mb6">
<div class="personal-item-label">上次登录时间：</div>
<div class="personal-item-value">{{ $filters.dateFormat(getUserInfos.lastLoginTime) }}</div>
<div class="personal-item-value">{{
dateFormat(getUserInfos.lastLoginTime)
}}</div>
</el-col>
</el-row>
</el-col>
@@ -54,7 +57,7 @@
</template>
<div class="personal-info-box">
<ul class="personal-info-ul">
<li v-for="(v, k) in msgDialog.msgs.list" :key="k" class="personal-info-li">
<li v-for="(v, k) in msgDialog.msgs.list as any" :key="k" class="personal-info-li">
<a class="personal-info-li-title">{{ `[${getMsgTypeDesc(v.type)}] ${v.msg}` }}</a>
</li>
</ul>
@@ -72,19 +75,13 @@
<el-table-column property="msg" label="消息"></el-table-column>
<el-table-column property="createTime" label="时间" width="150">
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="getMsgs"
style="text-align: center"
background
layout="prev, pager, next, total, jumper"
:total="msgDialog.msgs.total"
v-model:current-page="msgDialog.query.pageNum"
:page-size="msgDialog.query.pageSize"
/>
<el-pagination @current-change="getMsgs" style="text-align: center" background
layout="prev, pager, next, total, jumper" :total="msgDialog.msgs.total"
v-model:current-page="msgDialog.query.pageNum" :page-size="msgDialog.query.pageSize" />
</el-dialog>
<!-- 营销推荐 -->
@@ -112,13 +109,8 @@
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="密码">
<el-input
type="password"
show-password
v-model="accountForm.password"
placeholder="请输入新密码"
clearable
></el-input>
<el-input type="password" show-password v-model="accountForm.password"
placeholder="请输入新密码" clearable></el-input>
</el-form-item>
</el-col>
<!-- -->
@@ -181,122 +173,118 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { toRefs, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { formatAxis } from '@/common/utils/formatTime.ts';
import { recommendList } from './mock.ts';
import { useStore } from '@/store/index.ts';
import { personApi } from './api';
export default {
name: 'PersonalPage',
setup() {
const store = useStore();
const state = reactive({
accountInfo: {
roles: [],
},
msgs: [],
msgDialog: {
visible: false,
query: {
pageSize: 10,
pageNum: 1,
},
msgs: {
list: [],
total: null,
},
},
recommendList,
accountForm: {
password: '',
},
});
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
import { dateFormat } from '@/common/utils/date';
// 获取用户信息 vuex
const getUserInfos = computed(() => {
return store.state.userInfos.userInfos;
});
const store = useStore();
const showMsgs = () => {
state.msgDialog.visible = true;
};
const roleInfo = computed(() => {
if (state.accountInfo.roles.length == 0) {
return '';
}
return state.accountInfo.roles.map((val: any) => val.name).join('、');
});
onMounted(() => {
getAccountInfo();
getMsgs();
});
const getAccountInfo = async () => {
state.accountInfo = await personApi.accountInfo.request();
};
const updateAccount = async () => {
await personApi.updateAccount.request(state.accountForm);
ElMessage.success('更新成功');
};
const getMsgs = async () => {
const res = await personApi.getMsgs.request(state.msgDialog.query);
state.msgDialog.msgs = res;
};
const getMsgTypeDesc = (type: number) => {
if (type == 1) {
return '登录';
}
if (type == 2) {
return '通知';
}
};
return {
getUserInfos,
currentTime,
roleInfo,
showMsgs,
getAccountInfo,
getMsgs,
getMsgTypeDesc,
updateAccount,
...toRefs(state),
};
const state = reactive({
accountInfo: {
roles: [],
},
msgs: [],
msgDialog: {
visible: false,
query: {
pageSize: 10,
pageNum: 1,
},
msgs: {
list: [],
total: null,
},
},
recommendList: [],
accountForm: {
password: '',
},
});
const {
msgDialog,
accountForm,
} = toRefs(state)
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
// 获取用户信息 vuex
const getUserInfos = computed(() => {
return store.state.userInfos.userInfos;
});
const showMsgs = () => {
state.msgDialog.visible = true;
};
const roleInfo = computed(() => {
if (state.accountInfo.roles.length == 0) {
return '';
}
return state.accountInfo.roles.map((val: any) => val.name).join('、');
});
onMounted(() => {
getAccountInfo();
getMsgs();
});
const getAccountInfo = async () => {
state.accountInfo = await personApi.accountInfo.request();
};
const updateAccount = async () => {
await personApi.updateAccount.request(state.accountForm);
ElMessage.success('更新成功');
};
const getMsgs = async () => {
const res = await personApi.getMsgs.request(state.msgDialog.query);
state.msgDialog.msgs = res;
};
const getMsgTypeDesc = (type: number) => {
if (type == 1) {
return '登录';
}
if (type == 2) {
return '通知';
}
};
</script>
<style scoped lang="scss">
@import '../../theme/mixins/mixins.scss';
.personal {
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user-left {
width: 100px;
height: 130px;
border-radius: 3px;
::v-deep(.el-upload) {
height: 100%;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
@@ -304,51 +292,63 @@ export default {
}
}
}
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item-label {
color: gray;
@include text-ellipsis(1);
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-info {
.personal-info-more {
float: right;
color: gray;
font-size: 13px;
&:hover {
color: var(--color-primary);
cursor: pointer;
}
}
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-ul {
list-style: none;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: grey;
text-decoration: none;
}
& a:hover {
color: var(--color-primary);
cursor: pointer;
@@ -357,6 +357,7 @@ export default {
}
}
}
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
@@ -366,6 +367,7 @@ export default {
border-radius: 3px;
overflow: hidden;
cursor: pointer;
&:hover {
i {
right: 0px !important;
@@ -373,6 +375,7 @@ export default {
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
@@ -381,11 +384,13 @@ export default {
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
@@ -394,11 +399,13 @@ export default {
}
}
}
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: #606266;
&::after {
content: '';
width: 2px;
@@ -410,21 +417,26 @@ export default {
background: var(--color-primary);
}
}
.personal-edit-safe-box {
border-bottom: 1px solid #ebeef5;
padding: 15px 0;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left-label {
color: #606266;
margin-bottom: 5px;
}
.personal-edit-safe-item-left-value {
color: gray;
@include text-ellipsis(1);
@@ -432,6 +444,7 @@ export default {
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;

193
mayfly_go_web/src/views/system/account/AccountEdit.vue
View File

@@ -1,12 +1,18 @@
<template>
<div class="account-dialog">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="35%" :destroy-on-close="true">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="35%"
:destroy-on-close="true">
<el-form :model="form" ref="accountForm" :rules="rules" label-width="85px">
<el-form-item prop="username" label="用户名:" required>
<el-input :disabled="edit" v-model.trim="form.username" placeholder="请输入账号用户名，密码默认与账号名一致" auto-complete="off"></el-input>
<el-form-item prop="name" label="姓名:" required>
<el-input v-model.trim="form.name" placeholder="请输入姓名" auto-complete="off"></el-input>
</el-form-item>
<el-form-item v-if="edit" prop="password" label="密码:" required>
<el-input type="password" v-model.trim="form.password" placeholder="请输入密码" autocomplete="new-password"></el-input>
<el-form-item prop="username" label="用户名:" required>
<el-input :disabled="edit" v-model.trim="form.username" placeholder="请输入账号用户名，密码默认与账号名一致"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item v-if="edit" prop="password" label="密码:">
<el-input type="password" v-model.trim="form.password" placeholder="输入密码可修改用户密码"
autocomplete="new-password"></el-input>
</el-form-item>
</el-form>
@@ -20,99 +26,102 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { accountApi } from '../api';
import { ElMessage } from 'element-plus';
export default defineComponent({
name: 'AccountEdit',
props: {
visible: {
type: Boolean,
},
account: {
type: [Boolean, Object],
},
title: {
type: String,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const accountForm: any = ref(null);
const state = reactive({
dialogVisible: false,
edit: false,
form: {
id: null,
username: null,
password: null,
repassword: null,
},
btnLoading: false,
rules: {
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
// password: [
// {
// required: true,
// message: '请输入密码',
// trigger: ['change', 'blur'],
// },
// ],
},
});
watch(props, (newValue) => {
if (newValue.account) {
state.form = { ...newValue.account };
state.edit = true;
} else {
state.edit = false;
state.form = {} as any;
}
state.dialogVisible = newValue.visible;
});
const btnOk = async () => {
accountForm.value.validate((valid: boolean) => {
if (valid) {
accountApi.save.request(state.form).then(() => {
ElMessage.success('操作成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
//重置表单域
accountForm.value.resetFields();
state.form = {} as any;
});
} else {
ElMessage.error('表单填写有误');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
accountForm,
btnOk,
cancel,
};
account: {
type: [Boolean, Object],
},
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const accountForm: any = ref(null);
const rules = {
name: [
{
required: true,
message: '请输入姓名',
trigger: ['change', 'blur'],
},
],
username: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
],
}
const state = reactive({
dialogVisible: false,
edit: false,
form: {
id: null,
name: null,
username: null,
password: null,
repassword: null,
},
btnLoading: false
});
const {
dialogVisible,
edit,
form,
btnLoading,
} = toRefs(state)
watch(props, (newValue: any) => {
if (newValue.account) {
state.form = { ...newValue.account };
state.edit = true;
} else {
state.edit = false;
state.form = {} as any;
}
state.dialogVisible = newValue.visible;
});
const btnOk = async () => {
accountForm.value.validate((valid: boolean) => {
if (valid) {
accountApi.save.request(state.form).then(() => {
ElMessage.success('操作成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
//重置表单域
accountForm.value.resetFields();
state.form = {} as any;
});
} else {
ElMessage.error('表单填写有误');
return false;
}
});
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
</script>
<style lang="scss">
</style>

393
mayfly_go_web/src/views/system/account/AccountList.vue
View File

@@ -2,21 +2,15 @@
<div class="role-list">
<el-card>
<el-button v-auth="'account:add'" type="primary" icon="plus" @click="editAccount(true)">添加</el-button>
<el-button v-auth="'account:add'" :disabled="chooseId == null" @click="editAccount(false)" type="primary" icon="edit">编辑</el-button>
<el-button v-auth="'account:saveRoles'" :disabled="chooseId == null" @click="roleEdit()" type="success" icon="setting"
>角色分配</el-button
>
<el-button v-auth="'account:del'" :disabled="chooseId == null" @click="deleteAccount()" type="danger" icon="delete">删除</el-button>
<el-button v-auth="'account:add'" :disabled="chooseId == null" @click="editAccount(false)" type="primary"
icon="edit">编辑</el-button>
<el-button v-auth="'account:saveRoles'" :disabled="chooseId == null" @click="showRoleEdit()" type="success"
icon="setting">角色分配</el-button>
<el-button v-auth="'account:del'" :disabled="chooseId == null" @click="deleteAccount()" type="danger"
icon="delete">删除</el-button>
<div style="float: right">
<el-input
class="mr2"
placeholder="请输入账号名"
size="small"
style="width: 300px"
v-model="query.username"
@clear="search()"
clearable
></el-input>
<el-input class="mr2" placeholder="请输入账号名" size="small" style="width: 300px" v-model="query.username"
@clear="search()" clearable></el-input>
<el-button @click="search()" type="success" icon="search" size="small"></el-button>
</div>
<el-table :data="datas" ref="table" @current-change="choose" show-overflow-tooltip>
@@ -27,9 +21,10 @@
</el-radio>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="115"></el-table-column>
<el-table-column prop="username" label="用户名" min-width="115"></el-table-column>
<el-table-column align="center" prop="status" label="状态" min-width="65">
<el-table-column align="center" prop="status" label="状态" min-width="70">
<template #default="scope">
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
<el-tag v-if="scope.row.status == -1" type="danger">禁用</el-tag>
@@ -37,20 +32,20 @@
</el-table-column>
<el-table-column min-width="160" prop="lastLoginTime" label="最后登录时间" show-overflow-tooltip>
<template #default="scope">
{{ $filters.dateFormat(scope.row.lastLoginTime) }}
{{ dateFormat(scope.row.lastLoginTime) }}
</template>
</el-table-column>
<el-table-column min-width="115" prop="creator" label="创建账号"></el-table-column>
<el-table-column min-width="160" prop="createTime" label="创建时间" show-overflow-tooltip>
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
<!-- <el-table-column min-width="115" prop="modifier" label="更新账号"></el-table-column>
<el-table-column min-width="160" prop="updateTime" label="修改时间">
<template #default="scope">
{{ $filters.dateFormat(scope.row.updateTime) }}
{{ dateFormat(scope.row.updateTime) }}
</template>
</el-table-column> -->
@@ -65,37 +60,17 @@
<el-table-column label="操作" min-width="200px">
<template #default="scope">
<el-button
v-auth="'account:changeStatus'"
@click="changeStatus(scope.row)"
v-if="scope.row.status == 1"
type="danger"
icom="tickets"
size="small"
plain
>禁用</el-button
>
<el-button
v-auth="'account:changeStatus'"
v-if="scope.row.status == -1"
type="success"
@click="changeStatus(scope.row)"
size="small"
plain
>启用</el-button
>
<el-button v-auth="'account:changeStatus'" @click="changeStatus(scope.row)"
v-if="scope.row.status == 1" type="danger" icom="tickets" size="small" plain>禁用</el-button>
<el-button v-auth="'account:changeStatus'" v-if="scope.row.status == -1" type="success"
@click="changeStatus(scope.row)" size="small" plain>启用</el-button>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
@@ -105,201 +80,189 @@
<el-table-column property="creator" label="分配账号" width="125"></el-table-column>
<el-table-column property="createTime" label="分配时间">
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog :title="showResourceDialog.title" v-model="showResourceDialog.visible" width="400px">
<el-tree
style="height: 50vh; overflow: auto"
:data="showResourceDialog.resources"
node-key="id"
:props="showResourceDialog.defaultProps"
:expand-on-click-node="true"
>
<el-tree style="height: 50vh; overflow: auto" :data="showResourceDialog.resources" node-key="id"
:props="showResourceDialog.defaultProps" :expand-on-click-node="true">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span v-if="data.type == enums.ResourceTypeEnum.MENU.value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum.PERMISSION.value" style="color: #67c23a">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['MENU'].value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['PERMISSION'].value" style="color: #67c23a">{{
node.label
}}</span>
</span>
</template>
</el-tree>
</el-dialog>
<role-edit v-model:visible="roleDialog.visible" :account="roleDialog.account" @cancel="cancel()" />
<account-edit v-model:visible="accountDialog.visible" v-model:account="accountDialog.data" @val-change="valChange()" />
<account-edit v-model:visible="accountDialog.visible" v-model:account="accountDialog.data"
@val-change="valChange()" />
</div>
</template>
<script lang='ts'>
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang='ts' setup>
import { toRefs, reactive, onMounted } from 'vue';
import RoleEdit from './RoleEdit.vue';
import AccountEdit from './AccountEdit.vue';
import enums from '../enums';
import { accountApi } from '../api';
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
name: 'AccountList',
components: {
RoleEdit,
AccountEdit,
import { dateFormat } from '@/common/utils/date';
const state = reactive({
chooseId: null,
/**
* 选中的数据
*/
chooseData: null,
/**
* 查询条件
*/
query: {
username: '',
pageNum: 1,
pageSize: 10,
},
setup() {
const state = reactive({
chooseId: null,
/**
* 选中的数据
*/
chooseData: null,
/**
* 查询条件
*/
query: {
pageNum: 1,
pageSize: 10,
},
datas: [],
total: 0,
showRoleDialog: {
title: '',
visible: false,
accountRoles: [],
},
showResourceDialog: {
title: '',
visible: false,
resources: [],
defaultProps: {
children: 'children',
label: 'name',
},
},
roleDialog: {
visible: false,
account: null,
roles: [],
},
accountDialog: {
visible: false,
data: null,
},
});
onMounted(() => {
search();
});
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const search = async () => {
let res: any = await accountApi.list.request(state.query);
state.datas = res.list;
state.total = res.total;
};
const showResources = async (row: any) => {
let showResourceDialog = state.showResourceDialog;
showResourceDialog.title = '"' + row.username + '" 的菜单&权限';
showResourceDialog.resources = [];
showResourceDialog.resources = await accountApi.resources.request({
id: row.id,
});
showResourceDialog.visible = true;
};
const showRoles = async (row: any) => {
let showRoleDialog = state.showRoleDialog;
showRoleDialog.title = '"' + row.username + '" 的角色信息';
showRoleDialog.accountRoles = await accountApi.roles.request({
id: row.id,
});
showRoleDialog.visible = true;
};
const changeStatus = async (row: any) => {
let id = row.id;
let status = row.status == -1 ? 1 : -1;
await accountApi.changeStatus.request({
id,
status,
});
ElMessage.success('操作成功');
search();
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const roleEdit = () => {
if (!state.chooseId) {
ElMessage.error('请选择账号');
}
state.roleDialog.visible = true;
state.roleDialog.account = state.chooseData;
};
const editAccount = (isAdd = false) => {
if (isAdd) {
state.accountDialog.data = null;
} else {
state.accountDialog.data = state.chooseData;
}
state.accountDialog.visible = true;
};
const cancel = () => {
state.roleDialog.visible = false;
state.roleDialog.account = null;
search();
};
const valChange = () => {
state.accountDialog.visible = false;
search();
};
const deleteAccount = async () => {
try {
await ElMessageBox.confirm(`确定删除该账号?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await accountApi.del.request({ id: state.chooseId });
ElMessage.success('删除成功');
state.chooseData = null;
state.chooseId = null;
search();
} catch (err) {}
};
return {
...toRefs(state),
enums,
search,
choose,
showResources,
showRoles,
changeStatus,
handlePageChange,
roleEdit,
editAccount,
cancel,
valChange,
deleteAccount,
};
datas: [],
total: 0,
showRoleDialog: {
title: '',
visible: false,
accountRoles: [],
},
showResourceDialog: {
title: '',
visible: false,
resources: [],
defaultProps: {
children: 'children',
label: 'name',
},
},
roleDialog: {
visible: false,
account: null as any,
roles: [],
},
accountDialog: {
visible: false,
data: null as any,
},
});
const {
chooseId,
query,
datas,
total,
showRoleDialog,
showResourceDialog,
roleDialog,
accountDialog,
} = toRefs(state)
onMounted(() => {
search();
});
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const search = async () => {
let res: any = await accountApi.list.request(state.query);
state.datas = res.list;
state.total = res.total;
};
const showResources = async (row: any) => {
let showResourceDialog = state.showResourceDialog;
showResourceDialog.title = '"' + row.username + '" 的菜单&权限';
showResourceDialog.resources = [];
showResourceDialog.resources = await accountApi.resources.request({
id: row.id,
});
showResourceDialog.visible = true;
};
const showRoles = async (row: any) => {
let showRoleDialog = state.showRoleDialog;
showRoleDialog.title = '"' + row.username + '" 的角色信息';
showRoleDialog.accountRoles = await accountApi.roles.request({
id: row.id,
});
showRoleDialog.visible = true;
};
const changeStatus = async (row: any) => {
let id = row.id;
let status = row.status == -1 ? 1 : -1;
await accountApi.changeStatus.request({
id,
status,
});
ElMessage.success('操作成功');
search();
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const showRoleEdit = () => {
if (!state.chooseId) {
ElMessage.error('请选择账号');
}
state.roleDialog.visible = true;
state.roleDialog.account = state.chooseData;
};
const editAccount = (isAdd = false) => {
if (isAdd) {
state.accountDialog.data = null;
} else {
state.accountDialog.data = state.chooseData;
}
state.accountDialog.visible = true;
};
const cancel = () => {
state.roleDialog.visible = false;
state.roleDialog.account = null;
search();
};
const valChange = () => {
state.accountDialog.visible = false;
search();
};
const deleteAccount = async () => {
try {
await ElMessageBox.confirm(`确定删除该账号?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await accountApi.del.request({ id: state.chooseId });
ElMessage.success('删除成功');
state.chooseData = null;
state.chooseId = null;
search();
} catch (err) { }
};
</script>
<style lang="scss">
</style>

273
mayfly_go_web/src/views/system/account/RoleEdit.vue
View File

@@ -1,14 +1,11 @@
<template>
<div class="account-dialog">
<el-dialog
:title="account == null ? '' : '分配“' + account.username + '”的角色'"
v-model="dialogVisible"
:before-close="cancel"
:show-close="false"
>
<el-dialog :title="account == null ? '' : '分配“' + account.username + '”的角色'" v-model="dialogVisible"
:before-close="cancel" :show-close="false">
<div class="toolbar">
<div style="float: left">
<el-input placeholder="请输入角色名" style="width: 150px" v-model="query.name" @clear="clear()" clearable></el-input>
<el-input placeholder="请输入角色名" style="width: 150px" v-model="query.name" @clear="clear()" clearable>
</el-input>
<el-button @click="search" type="success" icon="search"></el-button>
</div>
</div>
@@ -22,15 +19,9 @@
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handlePageChange"
style="text-align: center; margin-top: 20px"
background
layout="prev, pager, next, total, jumper"
:total="total"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination @current-change="handlePageChange" style="text-align: center; margin-top: 20px" background
layout="prev, pager, next, total, jumper" :total="total" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
<template #footer>
<div class="dialog-footer">
@@ -42,140 +33,134 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { roleApi, accountApi } from '../api';
import { ElMessage } from 'element-plus';
export default defineComponent({
name: 'RoleEdit',
props: {
visible: {
type: Boolean,
},
account: {
type: [Boolean, Object],
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const roleTable: any = ref(null);
const state = reactive({
dialogVisible: false,
btnLoading: false,
// 所有角色
allRole: [] as any,
// 该账号拥有的角色id
roles: [] as any,
query: {
name: null,
pageNum: 1,
pageSize: 5,
},
total: 0,
});
account: Object
})
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (newValue.account && newValue.account.id != 0) {
accountApi.roleIds
.request({
id: props.account['id'],
})
.then((res) => {
state.roles = res || [];
search();
});
} else {
return;
}
});
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const handlePageChange = () => {
search();
};
const roleTable: any = ref(null);
const selectable = (row: any) => {
// 角色code不以COMMON开头才可勾选
return row.code.indexOf('COMMON') != 0;
};
const select = (val: any, row: any) => {
let roles = state.roles;
// 如果账号的角色id存在则为取消该角色(删除角色id列表中的该记录id)，否则为新增角色
if (roles.includes(row.id)) {
for (let i = 0; i < roles.length; i++) {
let item = roles[i];
if (item === row.id) {
roles.splice(i, 1);
break;
}
}
} else {
roles.push(row.id);
}
};
/**
* 检查是否勾选权限,即是否拥有权限
*/
const checkSelected = () => {
// 必须用异步，否则勾选不了
setTimeout(() => {
roleTable.value.clearSelection();
state.allRole.forEach((r: any) => {
if (state.roles.includes(r.id)) {
roleTable.value.toggleRowSelection(r, true);
}
});
}, 50);
};
const btnOk = async () => {
let roleIds = state.roles.join(',');
await accountApi.saveRoles.request({
id: props.account['id'],
roleIds: roleIds,
});
ElMessage.success('保存成功!');
cancel();
};
/**
* 取消
*/
const cancel = () => {
state.query.pageNum = 1;
state.query.name = null;
emit('update:visible', false);
emit('cancel');
};
/**
* 清空查询框
*/
const clear = () => {
state.query.pageNum = 1;
state.query.name = null;
search();
};
const search = async () => {
let res = await roleApi.list.request(state.query);
state.allRole = res.list;
state.total = res.total;
checkSelected();
};
return {
...toRefs(state),
roleTable,
search,
handlePageChange,
selectable,
select,
btnOk,
cancel,
clear,
};
const state = reactive({
dialogVisible: false,
btnLoading: false,
// 所有角色
allRole: [] as any,
// 该账号拥有的角色id
query: {
name: null,
pageNum: 1,
pageSize: 5,
},
total: 0,
});
const {
dialogVisible,
btnLoading,
allRole,
query,
total,
} = toRefs(state)
// 用户拥有的角色信息
let roles: any[] = []
watch(props, (newValue: any) => {
state.dialogVisible = newValue.visible;
if (state.dialogVisible && newValue.account && newValue.account.id != 0) {
accountApi.roleIds
.request({
id: props.account!.id,
})
.then((res) => {
roles = res || [];
search();
});
}
});
const handlePageChange = () => {
search();
};
const selectable = (row: any) => {
// 角色code不以COMMON开头才可勾选
return row.code.indexOf('COMMON') != 0;
};
const select = (val: any, row: any) => {
// 如果账号的角色id存在则为取消该角色(删除角色id列表中的该记录id)，否则为新增角色
if (roles.includes(row.id)) {
for (let i = 0; i < roles.length; i++) {
let item = roles[i];
if (item === row.id) {
roles.splice(i, 1);
break;
}
}
} else {
roles.push(row.id);
}
};
/**
* 检查是否勾选权限,即是否拥有权限
*/
const checkSelected = () => {
// 必须用异步，否则勾选不了
setTimeout(() => {
roleTable.value.clearSelection();
state.allRole.forEach((r: any) => {
if (roles.includes(r.id)) {
roleTable.value.toggleRowSelection(r, true);
}
});
}, 50);
};
const btnOk = async () => {
let roleIds = roles.join(',');
await accountApi.saveRoles.request({
id: props.account!.id,
roleIds: roleIds,
});
ElMessage.success('保存成功!');
cancel();
};
/**
* 取消
*/
const cancel = () => {
state.query.pageNum = 1;
state.query.name = null;
emit('update:visible', false);
emit('cancel');
};
/**
* 清空查询框
*/
const clear = () => {
state.query.pageNum = 1;
state.query.name = null;
search();
};
const search = async () => {
let res = await roleApi.list.request(state.query);
state.allRole = res.list;
state.total = res.total;
checkSelected();
};
</script>

187
mayfly_go_web/src/views/system/config/ConfigEdit.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="750px" :destroy-on-close="true">
<el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="750px"
:destroy-on-close="true">
<el-form ref="configForm" :model="form" label-width="90px">
<el-form-item prop="name" label="配置项:" required>
<el-input v-model="form.name"></el-input>
@@ -14,17 +15,25 @@
</el-row>
<el-form-item :key="param" v-for="(param, index) in params" prop="params" :label="`参数${index + 1}`">
<el-row>
<el-col :span="5"><el-input v-model="param.model" placeholder="model"></el-input></el-col>
<el-col :span="5">
<el-input v-model="param.model" placeholder="model"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4"><el-input v-model="param.name" placeholder="字段名"></el-input></el-col>
<el-col :span="4">
<el-input v-model="param.name" placeholder="字段名"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4"><el-input v-model="param.placeholder" placeholder="字段说明"></el-input></el-col>
<el-col :span="4">
<el-input v-model="param.placeholder" placeholder="字段说明"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="4">
<el-input v-model="param.options" placeholder="可选值 ,分割"></el-input>
</el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="2"><el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button></el-col>
<el-col :span="2">
<el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button>
</el-col>
</el-row>
</el-form-item>
<!-- <el-form-item prop="value" label="配置值:" required>
@@ -44,96 +53,96 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
import { configApi } from '../api';
export default defineComponent({
name: 'ConfigEdit',
props: {
visible: {
type: Boolean,
},
data: {
type: [Boolean, Object],
},
title: {
type: String,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const configForm: any = ref(null);
const state = reactive({
dvisible: false,
params: [] as any,
form: {
id: null,
name: '',
key: '',
params: '',
value: '',
remark: '',
},
btnLoading: false,
});
watch(props, (newValue) => {
state.dvisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
if (state.form.params) {
state.params = JSON.parse(state.form.params);
} else {
state.params = [];
}
} else {
state.form = {} as any;
state.params = [];
}
});
const onAddParam = () => {
state.params.push({ name: '', model: '', placeholder: '' });
};
const onDeleteParam = (idx: number) => {
state.params.splice(idx, 1);
};
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
// 若父组件有取消事件，则调用
emit('cancel');
};
const btnOk = async () => {
configForm.value.validate(async (valid: boolean) => {
if (valid) {
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
await configApi.save.request(state.form);
emit('val-change', state.form);
cancel();
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
}
});
};
return {
...toRefs(state),
onAddParam,
onDeleteParam,
configForm,
btnOk,
cancel,
};
data: {
type: [Boolean, Object],
},
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const configForm: any = ref(null);
const state = reactive({
dvisible: false,
params: [] as any,
form: {
id: null,
name: '',
key: '',
params: '',
value: '',
remark: '',
},
btnLoading: false,
});
const {
dvisible,
params,
form,
btnLoading,
} = toRefs(state)
watch(props, (newValue: any) => {
state.dvisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
if (state.form.params) {
state.params = JSON.parse(state.form.params);
} else {
state.params = [];
}
} else {
state.form = {} as any;
state.params = [];
}
});
const onAddParam = () => {
state.params.push({ name: '', model: '', placeholder: '' });
};
const onDeleteParam = (idx: number) => {
state.params.splice(idx, 1);
};
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
// 若父组件有取消事件，则调用
emit('cancel');
};
const btnOk = async () => {
configForm.value.validate(async (valid: boolean) => {
if (valid) {
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
await configApi.save.request(state.form);
emit('val-change', state.form);
cancel();
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
}
});
};
</script>
<style lang="scss">
</style>

333
mayfly_go_web/src/views/system/config/ConfigList.vue
View File

@@ -2,7 +2,8 @@
<div class="role-list">
<el-card>
<el-button type="primary" icon="plus" @click="editConfig(false)">添加</el-button>
<el-button :disabled="chooseId == null" @click="editConfig(chooseData)" type="primary" icon="edit">编辑</el-button>
<el-button :disabled="chooseId == null" @click="editConfig(chooseData)" type="primary" icon="edit">编辑
</el-button>
<el-table :data="configs" @current-change="choose" ref="table" style="width: 100%">
<el-table-column label="选择" width="55px">
@@ -18,62 +19,42 @@
<el-table-column prop="remark" label="备注" min-width="100px" show-overflow-tooltip></el-table-column>
<el-table-column prop="updateTime" label="更新时间" min-width="100px">
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column prop="modifier" label="修改者" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" min-width="50" fixed="right">
<template #default="scope">
<el-link
:disabled="scope.row.status == -1"
type="warning"
@click="showSetConfigDialog(scope.row)"
plain
size="small"
:underline="false"
>配置</el-link
>
<el-link :disabled="scope.row.status == -1" type="warning"
@click="showSetConfigDialog(scope.row)" plain size="small" :underline="false">配置</el-link>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
<el-dialog :before-close="closeSetConfigDialog" title="配置项设置" v-model="paramsDialog.visible" width="500px">
<el-form v-if="paramsDialog.paramsFormItem.length > 0" ref="paramsForm" :model="paramsDialog.params" label-width="90px">
<el-form-item v-for="item in paramsDialog.paramsFormItem" :key="item.name" :prop="item.model" :label="item.name" required>
<el-input
v-if="!item.options"
v-model="paramsDialog.params[item.model]"
:placeholder="item.placeholder"
autocomplete="off"
clearable
></el-input>
<el-select
v-else
v-model="paramsDialog.params[item.model]"
:placeholder="item.placeholder"
filterable
autocomplete="off"
clearable
style="width: 100%"
>
<el-option v-for="option in item.options.split(',')" :key="option" :label="option" :value="option" />
<el-form v-if="paramsDialog.paramsFormItem.length > 0" ref="paramsForm" :model="paramsDialog.params"
label-width="90px">
<el-form-item v-for="item in paramsDialog.paramsFormItem" :key="item.name" :prop="item.model"
:label="item.name" required>
<el-input v-if="!item.options" v-model="paramsDialog.params[item.model]"
:placeholder="item.placeholder" autocomplete="off" clearable></el-input>
<el-select v-else v-model="paramsDialog.params[item.model]" :placeholder="item.placeholder"
filterable autocomplete="off" clearable style="width: 100%">
<el-option v-for="option in item.options.split(',')" :key="option" :label="option"
:value="option" />
</el-select>
</el-form-item>
</el-form>
<el-form v-else ref="paramsForm" label-width="90px">
<el-form-item label="配置值" required>
<el-input v-model="paramsDialog.params" :placeholder="paramsDialog.config.remark" autocomplete="off" clearable></el-input>
<el-input v-model="paramsDialog.params" :placeholder="paramsDialog.config.remark" autocomplete="off"
clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -84,155 +65,147 @@
</template>
</el-dialog>
<config-edit :title="configEdit.title" v-model:visible="configEdit.visible" :data="configEdit.config" @val-change="configEditChange" />
<config-edit :title="configEdit.title" v-model:visible="configEdit.visible" :data="configEdit.config"
@val-change="configEditChange" />
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import ConfigEdit from './ConfigEdit.vue';
import { configApi } from '../api';
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
name: 'ConfigList',
components: {
ConfigEdit,
import { ElMessage } from 'element-plus';
import { dateFormat } from '@/common/utils/date';
const state = reactive({
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
setup() {
const state = reactive({
dialogFormVisible: false,
currentEditPermissions: false,
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
configs: [],
chooseId: null,
chooseData: null,
paramsDialog: {
visible: false,
config: null as any,
params: {},
paramsFormItem: [] as any,
},
configEdit: {
title: '配置修改',
visible: false,
config: {},
},
});
onMounted(() => {
search();
});
const search = async () => {
let res = await configApi.list.request(state.query);
state.configs = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const showSetConfigDialog = (row: any) => {
state.paramsDialog.config = row;
// 存在配置项则弹窗提示输入对应的配置项
if (row.params) {
state.paramsDialog.paramsFormItem = JSON.parse(row.params);
if (state.paramsDialog.paramsFormItem && state.paramsDialog.paramsFormItem.length > 0) {
if (row.value) {
state.paramsDialog.params = JSON.parse(row.value);
}
}
} else {
state.paramsDialog.params = row.value;
}
state.paramsDialog.visible = true;
};
const closeSetConfigDialog = () => {
state.paramsDialog.visible = false;
setTimeout(() => {
state.paramsDialog.config = {};
state.paramsDialog.params = {};
state.paramsDialog.paramsFormItem = [];
}, 300);
};
const setConfig = async () => {
let paramsValue = state.paramsDialog.params;
if (state.paramsDialog.paramsFormItem.length > 0) {
// 如果配置项删除，则需要将value中对应的字段移除
for (let paramKey in paramsValue) {
if (!hasParam(paramKey, state.paramsDialog.paramsFormItem)) {
delete paramsValue[paramKey];
}
}
paramsValue = JSON.stringify(paramsValue);
}
await configApi.save.request({
id: state.paramsDialog.config.id,
key: state.paramsDialog.config.key,
name: state.paramsDialog.config.name,
value: paramsValue,
});
ElMessage.success('保存成功');
closeSetConfigDialog();
search();
};
const hasParam = (paramKey: string, paramItems: any) => {
for (let paramItem of paramItems) {
if (paramItem.model == paramKey) {
return true;
}
}
return false;
};
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const configEditChange = () => {
ElMessage.success('保存成功');
state.chooseId = null;
state.chooseData = null;
search();
};
const editConfig = (data: any) => {
if (data) {
state.configEdit.config = data;
} else {
state.configEdit.config = false;
}
state.configEdit.visible = true;
};
return {
...toRefs(state),
showSetConfigDialog,
closeSetConfigDialog,
setConfig,
search,
handlePageChange,
choose,
configEditChange,
editConfig,
};
total: 0,
configs: [],
chooseId: null,
chooseData: null,
paramsDialog: {
visible: false,
config: null as any,
params: {},
paramsFormItem: [] as any,
},
configEdit: {
title: '配置修改',
visible: false,
config: {},
},
});
const {
query,
total,
configs,
chooseId,
chooseData,
paramsDialog,
configEdit,
} = toRefs(state)
onMounted(() => {
search();
});
const search = async () => {
let res = await configApi.list.request(state.query);
state.configs = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const showSetConfigDialog = (row: any) => {
state.paramsDialog.config = row;
// 存在配置项则弹窗提示输入对应的配置项
if (row.params) {
state.paramsDialog.paramsFormItem = JSON.parse(row.params);
if (state.paramsDialog.paramsFormItem && state.paramsDialog.paramsFormItem.length > 0) {
if (row.value) {
state.paramsDialog.params = JSON.parse(row.value);
}
}
} else {
state.paramsDialog.params = row.value;
}
state.paramsDialog.visible = true;
};
const closeSetConfigDialog = () => {
state.paramsDialog.visible = false;
setTimeout(() => {
state.paramsDialog.config = {};
state.paramsDialog.params = {};
state.paramsDialog.paramsFormItem = [];
}, 300);
};
const setConfig = async () => {
let paramsValue = state.paramsDialog.params;
if (state.paramsDialog.paramsFormItem.length > 0) {
// 如果配置项删除，则需要将value中对应的字段移除
for (let paramKey in paramsValue) {
if (!hasParam(paramKey, state.paramsDialog.paramsFormItem)) {
delete paramsValue[paramKey];
}
}
paramsValue = JSON.stringify(paramsValue);
}
await configApi.save.request({
id: state.paramsDialog.config.id,
key: state.paramsDialog.config.key,
name: state.paramsDialog.config.name,
value: paramsValue,
});
ElMessage.success('保存成功');
closeSetConfigDialog();
search();
};
const hasParam = (paramKey: string, paramItems: any) => {
for (let paramItem of paramItems) {
if (paramItem.model == paramKey) {
return true;
}
}
return false;
};
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const configEditChange = () => {
ElMessage.success('保存成功');
state.chooseId = null;
state.chooseData = null;
search();
};
const editConfig = (data: any) => {
if (data) {
state.configEdit.config = data;
} else {
state.configEdit.config = false;
}
state.configEdit.visible = true;
};
</script>
<style lang="scss">
</style>

400
mayfly_go_web/src/views/system/resource/ResourceEdit.vue
View File

@@ -5,8 +5,9 @@
<el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item prop="type" label="类型" required>
<el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择" >
<el-option v-for="item in enums.ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value">
<el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
<el-option v-for="item in enums.ResourceTypeEnum as any" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
@@ -27,55 +28,56 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" label="图标">
<el-form-item v-if="form.type === menuTypeValue" label="图标">
<icon-selector v-model="form.meta.icon" type="ele" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="路由名">
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="路由名">
<el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="组件">
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="组件">
<el-input v-model.trim="form.meta.component" placeholder="请输入组件名"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否缓存">
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否缓存">
<el-select v-model="form.meta.isKeepAlive" placeholder="请选择" width="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
:value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否隐藏">
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否隐藏">
<el-select v-model="form.meta.isHide" placeholder="请选择" width="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
:value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="tag不可删除">
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="tag不可删除">
<el-select v-model="form.meta.isAffix" placeholder="请选择" width="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
:value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否iframe">
<el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择" width="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否iframe">
<el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择"
width="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
:value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
<el-form-item
v-if="form.type === enums.ResourceTypeEnum.MENU.value && form.meta.isIframe"
prop="code"
label="iframe地址"
width="w100"
>
<el-form-item v-if="form.type === menuTypeValue && form.meta.isIframe" prop="code"
label="iframe地址" width="w100">
<el-input v-model.trim="form.meta.link" placeholder="请输入iframe url"></el-input>
</el-form-item>
</el-col>
@@ -92,210 +94,196 @@
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { resourceApi } from '../api';
import enums from '../enums';
import { notEmpty } from '@/common/assert';
import iconSelector from '@/components/iconSelector/index.vue';
export default defineComponent({
name: 'ResourceEdit',
components: {
iconSelector,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
data: {
type: [Boolean, Object],
},
title: {
type: String,
},
typeDisabled: {
type: Boolean,
},
data: {
type: [Boolean, Object],
},
setup(props: any, { emit }) {
const menuForm: any = ref(null);
title: {
type: String,
},
typeDisabled: {
type: Boolean,
},
})
const defaultMeta = {
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const menuForm: any = ref(null);
const menuTypeValue = enums.ResourceTypeEnum['MENU'].value
const defaultMeta = {
routeName: '',
icon: 'Menu',
redirect: '',
component: '',
isKeepAlive: true,
isHide: false,
isAffix: false,
isIframe: false,
link: '',
};
const rules = {
name: [
{
required: true,
message: '请输入资源名称',
trigger: ['change', 'blur'],
},
],
weight: [
{
required: true,
message: '请输入序号',
trigger: ['change', 'blur'],
},
],
}
const trueFalseOption = [
{
label: '是',
value: true,
},
{
label: '否',
value: false,
},
]
const state = reactive({
dialogVisible: false,
form: {
id: null,
name: null,
pid: null,
code: null,
type: null,
weight: 0,
meta: {
routeName: '',
icon: 'Menu',
icon: '',
redirect: '',
component: '',
isKeepAlive: true,
isHide: false,
isAffix: false,
isIframe: false,
};
const state = reactive({
trueFalseOption: [
{
label: '是',
value: true,
},
{
label: '否',
value: false,
},
],
dialogVisible: false,
//弹出框对象
dialogForm: {
title: '',
visible: false,
data: {},
},
props: {
value: 'id',
label: 'name',
children: 'children',
},
form: {
id: null,
name: null,
pid: null,
code: null,
type: null,
weight: 0,
meta: {
routeName: '',
icon: '',
redirect: '',
component: '',
isKeepAlive: true,
isHide: false,
isAffix: false,
isIframe: false,
},
},
// 资源类型选择是否禁用
// typeDisabled: false,
btnLoading: false,
rules: {
name: [
{
required: true,
message: '请输入资源名称',
trigger: ['change', 'blur'],
},
],
weight: [
{
required: true,
message: '请输入序号',
trigger: ['change', 'blur'],
},
],
},
});
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
} else {
state.form = {} as any;
}
if (!state.form.meta) {
state.form.meta = defaultMeta;
}
// 不存在或false，都为false
const meta: any = state.form.meta;
state.form.meta.isKeepAlive = meta.isKeepAlive ? true : false;
state.form.meta.isHide = meta.isHide ? true : false;
state.form.meta.isAffix = meta.isAffix ? true : false;
state.form.meta.isIframe = meta.isIframe ? true : false;
});
// 改变iframe字段，如果为是，则设置默认的组件
const changeIsIframe = (value: boolean) => {
if (value) {
state.form.meta.component = 'RouterParent';
}
};
const btnOk = () => {
const submitForm = { ...state.form };
if (submitForm.type == 1) {
// 如果是菜单，则解析meta，如果值为false或者''则去除该值
submitForm.meta = parseMenuMeta(submitForm.meta);
} else {
submitForm.meta = null as any;
}
submitForm.weight = parseInt(submitForm.weight as any);
menuForm.value.validate((valid: any) => {
if (valid) {
resourceApi.save.request(submitForm).then(() => {
emit('val-change', submitForm);
state.btnLoading = true;
ElMessage.success('保存成功');
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
return false;
}
});
};
const parseMenuMeta = (meta: any) => {
let metaForm: any = {};
// 如果是菜单，则校验meta
notEmpty(meta.routeName, '路由名不能为空');
metaForm.routeName = meta.routeName;
if (meta.isKeepAlive) {
metaForm.isKeepAlive = true;
}
if (meta.isHide) {
metaForm.isHide = true;
}
if (meta.isAffix) {
metaForm.isAffix = true;
}
if (meta.isIframe) {
metaForm.isIframe = true;
}
if (meta.link) {
metaForm.link = meta.link;
}
if (meta.redirect) {
metaForm.redirect = meta.redirect;
}
if (meta.component) {
metaForm.component = meta.component;
}
if (meta.icon) {
metaForm.icon = meta.icon;
}
return metaForm;
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
enums,
changeIsIframe,
menuForm,
btnOk,
cancel,
};
link: '',
},
},
btnLoading: false,
});
const {
dialogVisible,
form,
btnLoading,
} = toRefs(state)
watch(props, (newValue: any) => {
state.dialogVisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
} else {
state.form = {} as any;
}
if (!state.form.meta) {
state.form.meta = defaultMeta;
}
// 不存在或false，都为false
const meta: any = state.form.meta;
state.form.meta.isKeepAlive = meta.isKeepAlive ? true : false;
state.form.meta.isHide = meta.isHide ? true : false;
state.form.meta.isAffix = meta.isAffix ? true : false;
state.form.meta.isIframe = meta.isIframe ? true : false;
});
// 改变iframe字段，如果为是，则设置默认的组件
const changeIsIframe = (value: boolean) => {
if (value) {
state.form.meta.component = 'RouterParent';
}
};
const btnOk = () => {
const submitForm = { ...state.form };
if (submitForm.type == 1) {
// 如果是菜单，则解析meta，如果值为false或者''则去除该值
submitForm.meta = parseMenuMeta(submitForm.meta);
} else {
submitForm.meta = null as any;
}
submitForm.weight = parseInt(submitForm.weight as any);
menuForm.value.validate((valid: any) => {
if (valid) {
resourceApi.save.request(submitForm).then(() => {
emit('val-change', submitForm);
state.btnLoading = true;
ElMessage.success('保存成功');
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} else {
return false;
}
});
};
const parseMenuMeta = (meta: any) => {
let metaForm: any = {};
// 如果是菜单，则校验meta
notEmpty(meta.routeName, '路由名不能为空');
metaForm.routeName = meta.routeName;
if (meta.isKeepAlive) {
metaForm.isKeepAlive = true;
}
if (meta.isHide) {
metaForm.isHide = true;
}
if (meta.isAffix) {
metaForm.isAffix = true;
}
if (meta.isIframe) {
metaForm.isIframe = true;
}
if (meta.link) {
metaForm.link = meta.link;
}
if (meta.redirect) {
metaForm.redirect = meta.redirect;
}
if (meta.component) {
metaForm.component = meta.component;
}
if (meta.icon) {
metaForm.icon = meta.icon;
}
return metaForm;
};
const cancel = () => {
emit('update:visible', false);
emit('cancel');
};
</script>
<style lang="scss">
// .m-dialog {

473
mayfly_go_web/src/views/system/resource/ResourceList.vue
View File

@@ -2,100 +2,57 @@
<div class="menu">
<div class="toolbar">
<div>
<span style="font-size: 14px"><SvgIcon name="info-filled"/>红色字体表示禁用状态</span>
<span style="font-size: 14px">
<SvgIcon name="info-filled" />红色字体表示禁用状态
</span>
</div>
<el-button v-auth="'resource:add'" type="primary" icon="plus" @click="addResource(false)">添加</el-button>
</div>
<el-tree
class="none-select"
:indent="38"
node-key="id"
:props="props"
:data="data"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
>
<el-tree class="none-select" :indent="38" node-key="id" :props="props" :data="data"
@node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"
:default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false">
<template #default="{ data }">
<span class="custom-tree-node">
<span style="font-size: 13px" v-if="data.type === enums.ResourceTypeEnum.MENU.value">
<span style="font-size: 13px" v-if="data.type === menuTypeValue">
<span style="color: #3c8dbc">【</span>
{{ data.name }}
<span style="color: #3c8dbc">】</span>
<el-tag v-if="data.children !== null" size="small">{{ data.children.length }}</el-tag>
</span>
<span style="font-size: 13px" v-if="data.type === enums.ResourceTypeEnum.PERMISSION.value">
<span style="font-size: 13px" v-if="data.type === permissionTypeValue">
<span style="color: #3c8dbc">【</span>
<span :style="data.status == 1 ? 'color: #67c23a;' : 'color: #f67c6c;'">{{ data.name }}</span>
<span style="color: #3c8dbc">】</span>
</span>
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="view" type="info" :underline="false" />
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="view" type="info"
:underline="false" />
<el-link
v-auth="'resource:update'"
@click.prevent="editResource(data)"
class="ml5"
type="primary"
icon="edit"
:underline="false"
/>
<el-link v-auth="'resource:update'" @click.prevent="editResource(data)" class="ml5" type="primary"
icon="edit" :underline="false" />
<el-link
v-auth="'resource:add'"
@click.prevent="addResource(data)"
v-if="data.type === enums.ResourceTypeEnum.MENU.value"
icon="circle-plus"
:underline="false"
type="success"
class="ml5"
/>
<el-link v-auth="'resource:add'" @click.prevent="addResource(data)"
v-if="data.type === menuTypeValue" icon="circle-plus" :underline="false"
type="success" class="ml5" />
<el-link
v-auth="'resource:changeStatus'"
@click.prevent="changeStatus(data, -1)"
v-if="data.status === 1 && data.type === enums.ResourceTypeEnum.PERMISSION.value"
icon="circle-close"
:underline="false"
type="warning"
class="ml5"
/>
<el-link v-auth="'resource:changeStatus'" @click.prevent="changeStatus(data, -1)"
v-if="data.status === 1 && data.type === permissionTypeValue"
icon="circle-close" :underline="false" type="warning" class="ml5" />
<el-link
v-auth="'resource:changeStatus'"
@click.prevent="changeStatus(data, 1)"
v-if="data.status === -1 && data.type === enums.ResourceTypeEnum.PERMISSION.value"
type="success"
icon="circle-check"
:underline="false"
plain
class="ml5"
/>
<el-link v-auth="'resource:changeStatus'" @click.prevent="changeStatus(data, 1)"
v-if="data.status === -1 && data.type === permissionTypeValue"
type="success" icon="circle-check" :underline="false" plain class="ml5" />
<el-link
v-auth="'resource:delete'"
v-if="data.children == null && data.name !== '首页'"
@click.prevent="deleteMenu(data)"
type="danger"
icon="delete"
:underline="false"
plain
class="ml5"
/>
<el-link v-auth="'resource:delete'" v-if="data.children == null && data.name !== '首页'"
@click.prevent="deleteMenu(data)" type="danger" icon="delete" :underline="false" plain
class="ml5" />
</span>
</template>
</el-tree>
<ResourceEdit
:title="dialogForm.title"
v-model:visible="dialogForm.visible"
v-model:data="dialogForm.data"
:typeDisabled="dialogForm.typeDisabled"
:departTree="data"
:type="dialogForm.type"
@val-change="valChange"
></ResourceEdit>
<ResourceEdit :title="dialogForm.title" v-model:visible="dialogForm.visible" v-model:data="dialogForm.data"
:typeDisabled="dialogForm.typeDisabled" :departTree="data" :type="dialogForm.type" @val-change="valChange">
</ResourceEdit>
<el-dialog v-model="infoDialog.visible">
<el-descriptions title="资源信息" :column="2" border>
@@ -123,212 +80,212 @@
<el-descriptions-item v-if="infoDialog.data.type == menuTypeValue" label="是否iframe">
{{ infoDialog.data.meta.isIframe ? '是' : '否' }}
</el-descriptions-item>
<el-descriptions-item v-if="infoDialog.data.type == menuTypeValue && infoDialog.data.meta.isIframe" label="iframe url">
<el-descriptions-item v-if="infoDialog.data.type == menuTypeValue && infoDialog.data.meta.isIframe"
label="iframe url">
{{ infoDialog.data.meta.link }}
</el-descriptions-item>
<el-descriptions-item label="创建者">{{ infoDialog.data.creator }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ $filters.dateFormat(infoDialog.data.createTime) }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ dateFormat(infoDialog.data.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ $filters.dateFormat(infoDialog.data.updateTime) }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }}
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ResourceEdit from './ResourceEdit.vue';
import enums from '../enums';
import { resourceApi } from '../api';
import { dateFormat } from '@/common/utils/date';
export default defineComponent({
name: 'ResourceList',
components: {
ResourceEdit,
const menuTypeValue = enums.ResourceTypeEnum['MENU'].value
const permissionTypeValue = enums.ResourceTypeEnum['PERMISSION'].value
const props = {
label: 'name',
children: 'children',
}
const state = reactive({
//弹出框对象
dialogForm: {
type: null,
title: '',
visible: false,
data: { pid: 0, type: 1, weight: 1 },
// 资源类型选择是否选
typeDisabled: true,
},
setup() {
const state = reactive({
menuTypeValue: enums.ResourceTypeEnum['MENU'].value,
permissionTypeValue: enums.ResourceTypeEnum['PERMISSION'].value,
showBtns: false,
// 当前鼠标右击的节点数据
rightClickData: {},
//弹出框对象
dialogForm: {
title: '',
visible: false,
data: { pid: 0, type: 1, weight: 1 },
// 资源类型选择是否选
typeDisabled: true,
},
//资源信息弹出框对象
infoDialog: {
title: '',
visible: false,
// 资源类型选择是否选
data: {
meta: {},
},
},
data: [],
props: {
label: 'name',
children: 'children',
},
// 展开的节点
defaultExpandedKeys: [] as any[],
});
onMounted(() => {
search();
});
const search = async () => {
let res = await resourceApi.list.request(null);
state.data = res;
};
const deleteMenu = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
resourceApi.del
.request({
id: data.id,
})
.then((res) => {
console.log(res);
ElMessage.success('删除成功！');
search();
});
});
};
const addResource = (data: any) => {
let dialog = state.dialogForm;
dialog.data = { pid: 0, type: 1, weight: 1 };
// 添加顶级菜单情况
if (!data) {
dialog.typeDisabled = true;
dialog.data.type = state.menuTypeValue;
dialog.title = '添加顶级菜单';
dialog.visible = true;
return;
}
// 添加子菜单，把当前菜单id作为新增菜单pid
dialog.data.pid = data.id;
dialog.title = '添加“' + data.name + '”的子资源 ';
if (data.children === null || data.children.length === 0) {
// 如果子节点不存在，则资源类型可选择
dialog.typeDisabled = false;
} else {
dialog.typeDisabled = true;
let hasPermission = false;
for (let c of data.children) {
if (c.type === state.permissionTypeValue) {
hasPermission = true;
break;
}
}
// 如果子节点中存在权限资源，则只能新增权限资源，否则只能新增菜单资源
if (hasPermission) {
dialog.data.type = state.permissionTypeValue;
} else {
dialog.data.type = state.menuTypeValue;
}
dialog.data.weight = data.children.length + 1;
}
dialog.visible = true;
};
const editResource = async (data: any) => {
state.dialogForm.visible = true;
const res = await resourceApi.detail.request({
id: data.id,
});
if (res.meta) {
res.meta = JSON.parse(res.meta);
}
state.dialogForm.data = res;
state.dialogForm.typeDisabled = true;
state.dialogForm.title = '修改“' + data.name + '”菜单';
};
const valChange = () => {
search();
state.dialogForm.visible = false;
};
const changeStatus = async (data: any, status: any) => {
await resourceApi.changeStatus.request({
id: data.id,
status: status,
});
data.status = status;
ElMessage.success((status === 1 ? '启用' : '禁用') + '成功！');
};
// 节点被展开时触发的事件
const handleNodeExpand = (data: any, node: any) => {
const id: any = node.data.id;
if (!state.defaultExpandedKeys.includes(id)) {
state.defaultExpandedKeys.push(id);
}
};
// 关闭节点
const handleNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(node.data.id);
let childNodes = node.childNodes;
for (let cn of childNodes) {
if (cn.data.type == 2) {
return;
}
if (cn.expanded) {
removeDeafultExpandId(cn.data.id);
}
// 递归删除展开的子节点节点id
handleNodeCollapse(data, cn);
}
};
const removeDeafultExpandId = (id: any) => {
let index = state.defaultExpandedKeys.indexOf(id);
if (index > -1) {
state.defaultExpandedKeys.splice(index, 1);
}
};
const info = async (data: any) => {
let info = await resourceApi.detail.request({ id: data.id });
state.infoDialog.data = info;
if (info.meta && info.meta != '') {
state.infoDialog.data.meta = JSON.parse(info.meta);
}
state.infoDialog.visible = true;
};
return {
...toRefs(state),
enums,
deleteMenu,
addResource,
editResource,
valChange,
changeStatus,
handleNodeExpand,
handleNodeCollapse,
info,
};
//资源信息弹出框对象
infoDialog: {
title: '',
visible: false,
// 资源类型选择是否选
data: {
meta: {} as any,
name: '',
type: null,
creator: '',
modifier: '',
createTime: '',
updateTime: '',
weight: null,
code: '',
},
},
data: [],
// 展开的节点
defaultExpandedKeys: [] as any[],
});
const {
dialogForm,
infoDialog,
data,
defaultExpandedKeys,
} = toRefs(state)
onMounted(() => {
search();
});
const search = async () => {
let res = await resourceApi.list.request(null);
state.data = res;
};
const deleteMenu = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
resourceApi.del
.request({
id: data.id,
})
.then((res) => {
console.log(res);
ElMessage.success('删除成功！');
search();
});
});
};
const addResource = (data: any) => {
let dialog = state.dialogForm;
dialog.data = { pid: 0, type: 1, weight: 1 };
// 添加顶级菜单情况
if (!data) {
dialog.typeDisabled = true;
dialog.data.type = menuTypeValue;
dialog.title = '添加顶级菜单';
dialog.visible = true;
return;
}
// 添加子菜单，把当前菜单id作为新增菜单pid
dialog.data.pid = data.id;
dialog.title = '添加“' + data.name + '”的子资源 ';
if (data.children === null || data.children.length === 0) {
// 如果子节点不存在，则资源类型可选择
dialog.typeDisabled = false;
} else {
dialog.typeDisabled = true;
let hasPermission = false;
for (let c of data.children) {
if (c.type === permissionTypeValue) {
hasPermission = true;
break;
}
}
// 如果子节点中存在权限资源，则只能新增权限资源，否则只能新增菜单资源
if (hasPermission) {
dialog.data.type = permissionTypeValue;
} else {
dialog.data.type = menuTypeValue;
}
dialog.data.weight = data.children.length + 1;
}
dialog.visible = true;
};
const editResource = async (data: any) => {
state.dialogForm.visible = true;
const res = await resourceApi.detail.request({
id: data.id,
});
if (res.meta) {
res.meta = JSON.parse(res.meta);
}
state.dialogForm.data = res;
state.dialogForm.typeDisabled = true;
state.dialogForm.title = '修改“' + data.name + '”菜单';
};
const valChange = () => {
search();
state.dialogForm.visible = false;
};
const changeStatus = async (data: any, status: any) => {
await resourceApi.changeStatus.request({
id: data.id,
status: status,
});
data.status = status;
ElMessage.success((status === 1 ? '启用' : '禁用') + '成功！');
};
// 节点被展开时触发的事件
const handleNodeExpand = (data: any, node: any) => {
const id: any = node.data.id;
if (!state.defaultExpandedKeys.includes(id)) {
state.defaultExpandedKeys.push(id);
}
};
// 关闭节点
const handleNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(node.data.id);
let childNodes = node.childNodes;
for (let cn of childNodes) {
if (cn.data.type == 2) {
return;
}
if (cn.expanded) {
removeDeafultExpandId(cn.data.id);
}
// 递归删除展开的子节点节点id
handleNodeCollapse(data, cn);
}
};
const removeDeafultExpandId = (id: any) => {
let index = state.defaultExpandedKeys.indexOf(id);
if (index > -1) {
state.defaultExpandedKeys.splice(index, 1);
}
};
const info = async (data: any) => {
let info = await resourceApi.detail.request({ id: data.id });
state.infoDialog.data = info;
if (info.meta && info.meta != '') {
state.infoDialog.data.meta = JSON.parse(info.meta);
}
state.infoDialog.visible = true;
};
</script>
<style lang="scss">
.menu {

195
mayfly_go_web/src/views/system/role/ResourceEdit.vue
View File

@@ -1,19 +1,15 @@
<template>
<div>
<el-dialog :title="'分配“' + role.name + '”菜单&权限'" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="400px">
<el-tree
style="height: 50vh; overflow: auto"
ref="menuTree"
:data="resources"
show-checkbox
node-key="id"
:default-checked-keys="defaultCheckedKeys"
:props="defaultProps"
>
<el-dialog :title="'分配“' + roleInfo?.name + '”菜单&权限'" v-model="dialogVisible" :before-close="cancel"
:show-close="false" width="400px">
<el-tree style="height: 50vh; overflow: auto" ref="menuTree" :data="resources" show-checkbox node-key="id"
:default-checked-keys="defaultCheckedKeys" :props="defaultProps">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span v-if="data.type == enums.ResourceTypeEnum.MENU.value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum.PERMISSION.value" style="color: #67c23a">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['MENU'].value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['PERMISSION'].value" style="color: #67c23a">{{
node.label
}}</span>
</span>
</template>
</el-tree>
@@ -27,102 +23,101 @@
</div>
</template>
<script lang="ts">
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { roleApi } from '../api';
import enums from '../enums';
export default defineComponent({
name: 'ResourceEdit',
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
role: {
type: Object,
},
// 默认勾选的节点
defaultCheckedKeys: {
type: Array,
},
// 所有资源树
resources: {
type: Array,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const menuTree: any = ref(null);
const state = reactive({
dialogVisible: false,
defaultProps: {
children: 'children',
label: 'name',
},
});
watch(
() => props.visible,
(newValue) => {
state.dialogVisible = newValue;
}
);
/**
* 获取所有菜单树的叶子节点
* @param {Object} trees 菜单树列表
*/
const getAllLeafIds = (trees: any) => {
let leafIds: any = [];
for (let tree of trees) {
setLeafIds(tree, leafIds);
}
return leafIds;
};
const setLeafIds = (tree: any, ids: any) => {
if (tree.children !== null) {
for (let t of tree.children) {
setLeafIds(t, ids);
}
} else {
ids.push(tree.id);
}
};
const btnOk = async () => {
let menuIds = menuTree.value.getCheckedKeys();
let halfMenuIds = menuTree.value.getHalfCheckedKeys();
let resources = [].concat(menuIds, halfMenuIds).join(',');
await roleApi.saveResources.request({
id: props.role['id'],
resourceIds: resources,
});
ElMessage.success('保存成功!');
emit('cancel');
};
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
emit('cancel');
};
return {
...toRefs(state),
enums,
menuTree,
btnOk,
getAllLeafIds,
cancel,
};
title: {
type: String,
},
role: {
type: Object,
},
// 默认勾选的节点
defaultCheckedKeys: {
type: Array,
},
// 所有资源树
resources: {
type: Array,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const defaultProps = {
children: 'children',
label: 'name',
}
const menuTree: any = ref(null);
const state = reactive({
dialogVisible: false,
roleInfo: null as any,
});
const {
dialogVisible,
roleInfo,
} = toRefs(state)
watch(
() => props.visible,
(newValue) => {
state.dialogVisible = newValue;
state.roleInfo = props.role
}
);
/**
* 获取所有菜单树的叶子节点
* @param {Object} trees 菜单树列表
*/
// const getAllLeafIds = (trees: any) => {
// let leafIds: any = [];
// for (let tree of trees) {
// setLeafIds(tree, leafIds);
// }
// return leafIds;
// };
// const setLeafIds = (tree: any, ids: any) => {
// if (tree.children !== null) {
// for (let t of tree.children) {
// setLeafIds(t, ids);
// }
// } else {
// ids.push(tree.id);
// }
// };
const btnOk = async () => {
let menuIds = menuTree.value.getCheckedKeys();
let halfMenuIds = menuTree.value.getHalfCheckedKeys();
let resources = [].concat(menuIds, halfMenuIds).join(',');
await roleApi.saveResources.request({
id: props.role!.id,
resourceIds: resources,
});
ElMessage.success('保存成功!');
emit('cancel');
};
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
emit('cancel');
};
</script>
<style>
</style>

137
mayfly_go_web/src/views/system/role/RoleEdit.vue
View File

@@ -1,17 +1,14 @@
<template>
<div class="role-dialog">
<el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="500px" :destroy-on-close="true">
<el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="500px"
:destroy-on-close="true">
<el-form ref="roleForm" :model="form" label-width="90px">
<el-form-item prop="name" label="角色名称:" required>
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="code" label="角色code:" required>
<el-input
:disabled="form.id != null"
v-model="form.code"
placeholder="COMMON开头则为所有账号共有角色"
auto-complete="off"
></el-input>
<el-input :disabled="form.id != null" v-model="form.code" placeholder="COMMON开头则为所有账号共有角色"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述:">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入角色描述"></el-input>
@@ -27,74 +24,74 @@
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { ref, toRefs, reactive, watch } from 'vue';
import { roleApi } from '../api';
export default defineComponent({
name: 'RoleEdit',
props: {
visible: {
type: Boolean,
},
data: {
type: [Boolean, Object],
},
title: {
type: String,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const roleForm: any = ref(null);
const state = reactive({
dvisible: false,
form: {
id: null,
name: '',
status: 1,
remark: '',
},
btnLoading: false,
});
watch(props, (newValue) => {
state.dvisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
} else {
state.form = {} as any;
}
});
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
// 若父组件有取消事件，则调用
emit('cancel');
};
const btnOk = async () => {
roleForm.value.validate(async (valid: boolean) => {
if (valid) {
await roleApi.save.request(state.form);
emit('val-change', state.form);
cancel();
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
}
});
};
return {
...toRefs(state),
roleForm,
btnOk,
cancel,
};
data: {
type: [Boolean, Object],
},
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
const roleForm: any = ref(null);
const state = reactive({
dvisible: false,
form: {
id: null,
name: '',
code: '',
status: 1,
remark: '',
},
btnLoading: false,
});
const {
dvisible,
form,
btnLoading,
} = toRefs(state)
watch(props, (newValue: any) => {
state.dvisible = newValue.visible;
if (newValue.data) {
state.form = { ...newValue.data };
} else {
state.form = {} as any;
}
});
const cancel = () => {
// 更新父组件visible prop对应的值为false
emit('update:visible', false);
// 若父组件有取消事件，则调用
emit('cancel');
};
const btnOk = async () => {
roleForm.value.validate(async (valid: boolean) => {
if (valid) {
await roleApi.save.request(state.form);
emit('val-change', state.form);
cancel();
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
}
});
};
</script>
<style lang="scss">
</style>

401
mayfly_go_web/src/views/system/role/RoleList.vue
View File

@@ -2,21 +2,16 @@
<div class="role-list">
<el-card>
<el-button v-auth="'role:add'" type="primary" icon="plus" @click="editRole(false)">添加</el-button>
<el-button v-auth="'role:update'" :disabled="chooseId == null" @click="editRole(chooseData)" type="primary" icon="edit">编辑</el-button>
<el-button v-auth="'role:saveResources'" :disabled="chooseId == null" @click="editResource(chooseData)" type="success" icon="setting"
>分配菜单&权限</el-button
>
<el-button v-auth="'role:del'" :disabled="chooseId == null" @click="deleteRole(chooseData)" type="danger" icon="delete">删除</el-button>
<el-button v-auth="'role:update'" :disabled="chooseId == null" @click="editRole(chooseData)" type="primary"
icon="edit">编辑</el-button>
<el-button v-auth="'role:saveResources'" :disabled="chooseId == null" @click="editResource(chooseData)"
type="success" icon="setting">分配菜单&权限</el-button>
<el-button v-auth="'role:del'" :disabled="chooseId == null" @click="deleteRole(chooseData)" type="danger"
icon="delete">删除</el-button>
<div style="float: right">
<el-input
placeholder="请输入角色名称"
class="mr2"
style="width: 200px"
v-model="query.name"
@clear="search"
clearable
></el-input>
<el-input placeholder="请输入角色名称" class="mr2" style="width: 200px" v-model="query.name" @clear="search"
clearable></el-input>
<el-button @click="search" type="success" icon="search"></el-button>
</div>
<el-table :data="roles" @current-change="choose" ref="table" style="width: 100%">
@@ -32,12 +27,12 @@
<el-table-column prop="remark" label="描述" min-width="160px" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间">
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column prop="updateTime" label="修改时间">
<template #default="scope">
{{ $filters.dateFormat(scope.row.updateTime) }}
{{ dateFormat(scope.row.updateTime) }}
</template>
</el-table-column>
<el-table-column label="查看更多" min-width="80px">
@@ -47,222 +42,194 @@
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
<role-edit :title="roleEdit.title" v-model:visible="roleEdit.visible" :data="roleEdit.role" @val-change="roleEditChange" />
<resource-edit
v-model:visible="resourceDialog.visible"
:role="resourceDialog.role"
:resources="resourceDialog.resources"
:defaultCheckedKeys="resourceDialog.defaultCheckedKeys"
@cancel="cancelEditResources()"
/>
<show-resource
v-model:visible="showResourceDialog.visible"
:title="showResourceDialog.title"
v-model:resources="showResourceDialog.resources"
/>
<role-edit :title="roleEditDialog.title" v-model:visible="roleEditDialog.visible" :data="roleEditDialog.role"
@val-change="roleEditChange" />
<resource-edit v-model:visible="resourceDialog.visible" :role="resourceDialog.role"
:resources="resourceDialog.resources" :defaultCheckedKeys="resourceDialog.defaultCheckedKeys"
@cancel="cancelEditResources()" />
<show-resource v-model:visible="showResourceDialog.visible" :title="showResourceDialog.title"
v-model:resources="showResourceDialog.resources" />
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import RoleEdit from './RoleEdit.vue';
import ResourceEdit from './ResourceEdit.vue';
import ShowResource from './ShowResource.vue';
import { roleApi, resourceApi } from '../api';
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
name: 'RoleList',
components: {
RoleEdit,
ResourceEdit,
ShowResource,
import { dateFormat } from '@/common/utils/date';
const state = reactive({
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
setup() {
const state = reactive({
dialogFormVisible: false,
currentEditPermissions: false,
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
roles: [],
chooseId: null,
chooseData: null,
resourceDialog: {
visible: false,
role: {},
resources: [],
defaultCheckedKeys: [],
},
roleEdit: {
title: '角色编辑',
visible: false,
role: {},
},
showResourceDialog: {
visible: false,
resources: [],
title: '',
},
});
onMounted(() => {
search();
});
const search = async () => {
let res = await roleApi.list.request(state.query);
state.roles = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const roleEditChange = () => {
ElMessage.success('修改成功！');
state.chooseId = null;
state.chooseData = null;
search();
};
const editRole = (data: any) => {
if (data) {
state.roleEdit.role = data;
} else {
state.roleEdit.role = false;
}
state.roleEdit.visible = true;
};
const deleteRole = async (data: any) => {
try {
await ElMessageBox.confirm(
`此操作将删除 [${data.name}] 该角色，以及与该角色有关的账号角色关联信息和资源角色关联信息, 是否继续?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
);
await roleApi.del.request({
id: data.id,
});
ElMessage.success('删除成功！');
search();
} catch (err) {}
};
const showResources = async (row: any) => {
state.showResourceDialog.resources = await roleApi.roleResources.request({
id: row.id,
});
state.showResourceDialog.title = '"' + row.name + '"的菜单&权限';
state.showResourceDialog.visible = true;
};
const closeShowResourceDialog = () => {
state.showResourceDialog.visible = false;
state.showResourceDialog.resources = [];
};
const editResource = async (row: any) => {
let menus = await resourceApi.list.request(null);
// 获取所有菜单列表
state.resourceDialog.resources = menus;
// 获取该角色拥有的菜单id
let roles = await roleApi.roleResourceIds.request({
id: row.id,
});
let hasIds = roles ? roles : [];
let hasLeafIds: any = [];
// 获取菜单的所有叶子节点
let leafIds = getAllLeafIds(state.resourceDialog.resources);
for (let id of leafIds) {
// 判断角色拥有的菜单id中，是否含有该叶子节点，有则添加进入用户拥有的叶子节点
if (hasIds.includes(id)) {
hasLeafIds.push(id);
}
}
state.resourceDialog.defaultCheckedKeys = hasLeafIds;
// 显示
state.resourceDialog.visible = true;
state.resourceDialog.role = row;
};
/**
* 获取所有菜单树的叶子节点
* @param {Object} trees 菜单树列表
*/
const getAllLeafIds = (trees: any) => {
let leafIds: any = [];
for (let tree of trees) {
setLeafIds(tree, leafIds);
}
return leafIds;
};
const setLeafIds = (tree: any, ids: any) => {
if (tree.children !== null) {
for (let t of tree.children) {
setLeafIds(t, ids);
}
} else {
ids.push(tree.id);
}
};
/**
* 取消编辑资源权限树
*/
const cancelEditResources = () => {
state.resourceDialog.visible = false;
setTimeout(() => {
state.resourceDialog.role = {};
state.resourceDialog.defaultCheckedKeys = [];
}, 10);
};
return {
...toRefs(state),
search,
handlePageChange,
choose,
roleEditChange,
editRole,
deleteRole,
showResources,
closeShowResourceDialog,
editResource,
cancelEditResources,
};
total: 0,
roles: [],
chooseId: null,
chooseData: null,
resourceDialog: {
visible: false,
role: {},
resources: [],
defaultCheckedKeys: [],
},
roleEditDialog: {
title: '角色编辑',
visible: false,
role: {},
},
showResourceDialog: {
visible: false,
resources: [],
title: '',
},
});
const {
query,
total,
roles,
chooseId,
chooseData,
resourceDialog,
roleEditDialog,
showResourceDialog,
} = toRefs(state)
onMounted(() => {
search();
});
const search = async () => {
let res = await roleApi.list.request(state.query);
state.roles = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const choose = (item: any) => {
if (!item) {
return;
}
state.chooseId = item.id;
state.chooseData = item;
};
const roleEditChange = () => {
ElMessage.success('修改成功！');
state.chooseId = null;
state.chooseData = null;
search();
};
const editRole = (data: any) => {
if (data) {
state.roleEditDialog.role = data;
} else {
state.roleEditDialog.role = false;
}
state.roleEditDialog.visible = true;
};
const deleteRole = async (data: any) => {
try {
await ElMessageBox.confirm(
`此操作将删除 [${data.name}] 该角色，以及与该角色有关的账号角色关联信息和资源角色关联信息, 是否继续?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
);
await roleApi.del.request({
id: data.id,
});
ElMessage.success('删除成功！');
search();
} catch (err) { }
};
const showResources = async (row: any) => {
state.showResourceDialog.resources = await roleApi.roleResources.request({
id: row.id,
});
state.showResourceDialog.title = '"' + row.name + '"的菜单&权限';
state.showResourceDialog.visible = true;
};
const editResource = async (row: any) => {
let menus = await resourceApi.list.request(null);
// 获取所有菜单列表
state.resourceDialog.resources = menus;
// 获取该角色拥有的菜单id
let roles = await roleApi.roleResourceIds.request({
id: row.id,
});
let hasIds = roles ? roles : [];
let hasLeafIds: any = [];
// 获取菜单的所有叶子节点
let leafIds = getAllLeafIds(state.resourceDialog.resources);
for (let id of leafIds) {
// 判断角色拥有的菜单id中，是否含有该叶子节点，有则添加进入用户拥有的叶子节点
if (hasIds.includes(id)) {
hasLeafIds.push(id);
}
}
state.resourceDialog.defaultCheckedKeys = hasLeafIds;
// 显示
state.resourceDialog.visible = true;
state.resourceDialog.role = row;
};
/**
* 获取所有菜单树的叶子节点
* @param {Object} trees 菜单树列表
*/
const getAllLeafIds = (trees: any) => {
let leafIds: any = [];
for (let tree of trees) {
setLeafIds(tree, leafIds);
}
return leafIds;
};
const setLeafIds = (tree: any, ids: any) => {
if (tree.children !== null) {
for (let t of tree.children) {
setLeafIds(t, ids);
}
} else {
ids.push(tree.id);
}
};
/**
* 取消编辑资源权限树
*/
const cancelEditResources = () => {
state.resourceDialog.visible = false;
setTimeout(() => {
state.resourceDialog.role = {};
state.resourceDialog.defaultCheckedKeys = [];
}, 10);
};
</script>
<style lang="scss">
</style>

134
mayfly_go_web/src/views/system/role/ShowResource.vue
View File

@@ -1,13 +1,17 @@
<template>
<div>
<el-dialog @close="closeDialog" :title="title" :before-close="closeDialog" v-model="dialogVisible" width="400px">
<el-dialog @close="closeDialog" :title="title" :before-close="closeDialog" v-model="dialogVisible"
width="400px">
<el-tree style="height: 50vh; overflow: auto" :data="resources" node-key="id" :props="defaultProps">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span v-if="data.type == enums.ResourceTypeEnum.MENU.value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum.PERMISSION.value" style="color: #67c23a">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['MENU'].value">{{ node.label }}</span>
<span v-if="data.type == enums.ResourceTypeEnum['PERMISSION'].value" style="color: #67c23a">{{
node.label
}}</span>
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="el-icon-view" type="info" :underline="false" />
<el-link @click.prevent="info(data)" style="margin-left: 25px" icon="InfoFilled" type="info"
:underline="false" />
</span>
</template>
</el-tree>
@@ -15,75 +19,73 @@
</div>
</template>
<script lang="ts">
import { getCurrentInstance, toRefs, reactive, watch, defineComponent } from 'vue';
<script lang="ts" setup>
import { getCurrentInstance, toRefs, reactive, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import enums from '../enums';
export default defineComponent({
name: 'ShowResource',
props: {
visible: {
type: Boolean,
},
resources: {
type: Array,
},
title: {
type: String,
},
const props = defineProps({
visible: {
type: Boolean,
},
setup(props: any, { emit }) {
const { proxy } = getCurrentInstance() as any;
const state = reactive({
dialogVisible: false,
defaultProps: {
children: 'children',
label: 'name',
},
});
watch(
() => props.visible,
(newValue) => {
state.dialogVisible = newValue;
}
);
const info = (info: any) => {
ElMessageBox.alert(
'<strong style="margin-right: 18px">资源名称:</strong>' +
info.name +
' <br/><strong style="margin-right: 18px">分配账号:</strong>' +
info.creator +
' <br/><strong style="margin-right: 18px">分配时间:</strong>' +
proxy.$filters.dateFormat(info.createTime) +
'',
'分配信息',
{
type: 'info',
dangerouslyUseHTMLString: true,
closeOnClickModal: true,
showConfirmButton: false,
}
).catch(() => {});
return;
};
const closeDialog = () => {
emit('update:visible', false);
emit('update:resources', []);
};
return {
...toRefs(state),
enums,
info,
closeDialog,
};
resources: {
type: Array,
},
title: {
type: String,
},
})
//定义事件
const emit = defineEmits(['update:visible', 'update:resources'])
const { proxy } = getCurrentInstance() as any;
const defaultProps = {
children: 'children',
label: 'name',
}
const state = reactive({
dialogVisible: false,
});
const {
dialogVisible,
} = toRefs(state)
watch(
() => props.visible,
(newValue) => {
state.dialogVisible = newValue;
}
);
const info = (info: any) => {
ElMessageBox.alert(
'<strong style="margin-right: 18px">资源名称:</strong>' +
info.name +
' <br/><strong style="margin-right: 18px">分配账号:</strong>' +
info.creator +
' <br/><strong style="margin-right: 18px">分配时间:</strong>' +
proxy.$filters.dateFormat(info.createTime) +
'',
'分配信息',
{
type: 'info',
dangerouslyUseHTMLString: true,
closeOnClickModal: true,
showConfirmButton: false,
}
).catch(() => { });
return;
};
const closeDialog = () => {
emit('update:visible', false);
emit('update:resources', []);
};
</script>
<style>
</style>

113
mayfly_go_web/src/views/system/syslog/SyslogList.vue
View File

@@ -2,16 +2,10 @@
<div class="role-list">
<el-card>
<div style="float: right">
<el-select
remote
:remote-method="getAccount"
v-model="query.creatorId"
filterable
placeholder="请输入并选择账号"
clearable
class="mr5"
>
<el-option v-for="item in accounts" :key="item.id" :label="item.username" :value="item.id"> </el-option>
<el-select remote :remote-method="getAccount" v-model="query.creatorId" filterable
placeholder="请输入并选择账号" clearable class="mr5">
<el-option v-for="item in accounts" :key="item.id" :label="item.username" :value="item.id">
</el-option>
</el-select>
<el-select v-model="query.type" filterable placeholder="请选择操作结果" clearable class="mr5">
<el-option label="成功" :value="1"> </el-option>
@@ -23,7 +17,7 @@
<el-table-column prop="creator" label="操作人" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="操作时间" min-width="160">
<template #default="scope">
{{ $filters.dateFormat(scope.row.createTime) }}
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column prop="type" label="结果" min-width="65">
@@ -38,66 +32,61 @@
<el-table-column prop="resp" label="响应信息" min-width="200" show-overflow-tooltip></el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination
style="text-align: right"
@current-change="handlePageChange"
:total="total"
layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum"
:page-size="query.pageSize"
></el-pagination>
<el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
:page-size="query.pageSize"></el-pagination>
</el-row>
</el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { logApi, accountApi } from '../api';
export default defineComponent({
name: 'SyslogList',
components: {},
setup() {
const state = reactive({
query: {
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
logs: [],
accounts: [],
});
import { dateFormat } from '@/common/utils/date';
onMounted(() => {
search();
});
const search = async () => {
let res = await logApi.list.request(state.query);
state.logs = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const getAccount = (username: any) => {
accountApi.list.request({ username }).then((res) => {
state.accounts = res.list;
});
};
return {
...toRefs(state),
search,
handlePageChange,
getAccount,
};
const state = reactive({
query: {
type: null,
creatorId: null,
pageNum: 1,
pageSize: 10,
name: null,
},
total: 0,
logs: [],
accounts: [] as any,
});
const {
query,
total,
logs,
accounts,
} = toRefs(state)
onMounted(() => {
search();
});
const search = async () => {
let res = await logApi.list.request(state.query);
state.logs = res.list;
state.total = res.total;
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const getAccount = (username: any) => {
accountApi.list.request({ username }).then((res) => {
state.accounts = res.list;
});
};
</script>
<style lang="scss">
</style>