forked from gin/simple-template
feat: initial commit
This commit is contained in:
gin
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
// import { useRouter } from "vue-router";
|
||||
import noAccess from "@/assets/status/403.svg?component";
|
||||
|
||||
defineOptions({
|
||||
name: "403"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-[640px]">
|
||||
<noAccess />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
}
|
||||
}"
|
||||
>
|
||||
403
|
||||
</p>
|
||||
<p
|
||||
class="mb-4 text-gray-500"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
}
|
||||
}"
|
||||
>
|
||||
抱歉，你无权访问该页面
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
}
|
||||
}"
|
||||
>
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import noExist from "@/assets/status/404.svg?component";
|
||||
|
||||
defineOptions({
|
||||
name: "404"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-[640px]">
|
||||
<noExist />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
}
|
||||
}"
|
||||
>
|
||||
404
|
||||
</p>
|
||||
<p
|
||||
class="mb-4 text-gray-500"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
}
|
||||
}"
|
||||
>
|
||||
抱歉，你访问的页面不存在
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="router.push('/')"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
}
|
||||
}"
|
||||
>
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import noServer from "@/assets/status/500.svg?component";
|
||||
|
||||
defineOptions({
|
||||
name: "500"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-[640px]">
|
||||
<noServer />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
}
|
||||
}"
|
||||
>
|
||||
500
|
||||
</p>
|
||||
<p
|
||||
class="mb-4 text-gray-500"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
}
|
||||
}"
|
||||
>
|
||||
抱歉，服务器出错了
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="router.push('/')"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
}
|
||||
}"
|
||||
>
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { phoneRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
});
|
||||
|
||||
const $pageEmit = defineEmits(["update:currentPage"]);
|
||||
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message("登录成功", { type: "success" });
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
$pageEmit("update:currentPage", 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="flex justify-between w-full">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import Motion from "../utils/motion";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
|
||||
defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
});
|
||||
|
||||
const $pageEmit = defineEmits(["update:currentPage"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
|
||||
<Motion :delay="100">
|
||||
<el-divider>
|
||||
<p class="text-xs text-gray-500">{{ '扫码后点击"确认",即可完成登录' }}</p>
|
||||
</el-divider>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
<el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
|
||||
返回
|
||||
</el-button>
|
||||
</Motion>
|
||||
</template>
|
||||
@@ -0,0 +1,189 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
});
|
||||
|
||||
const $pageEmit = defineEmits(["update:currentPage"]);
|
||||
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
username: "",
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入确认密码"));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error("两次密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message("注册成功", {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
message("请勾选隐私政策", { type: "warning" });
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
$pageEmit("update:currentPage", 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="flex justify-between w-full">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
placeholder="确认密码"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
|
||||
<el-button link type="primary"> 隐私政策 </el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="350">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="400">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 4
|
||||
}
|
||||
});
|
||||
|
||||
const $pageEmit = defineEmits(["update:currentPage"]);
|
||||
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入确认密码"));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error("两次密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message("修改密码成功", {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
$pageEmit("update:currentPage", 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="flex justify-between w-full">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
placeholder="确认密码"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,364 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRaw,
|
||||
watch
|
||||
} from "vue";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import phone from "./components/phone.vue";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import qrCode from "./components/qrCode.vue";
|
||||
import register from "./components/register.vue";
|
||||
import resetPassword from "./components/resetPassword.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "@/layout/hooks/useLayout";
|
||||
import { rsaEncrypt } from "@/utils/crypt";
|
||||
import { getTopMenu, initRouter } from "@/router/utils";
|
||||
import { avatar, bg, illustration } from "./utils/static";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import {
|
||||
getIsRememberMe,
|
||||
getPassword,
|
||||
removePassword,
|
||||
saveIsRememberMe,
|
||||
savePassword,
|
||||
setTokenFromBackend
|
||||
} from "@/utils/auth";
|
||||
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import * as CommonAPI from "@/api/common/login";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
});
|
||||
|
||||
// TODO 当请求验证码过于频繁的话 服务器会报错 但是前端没有反应 这块需要处理一下, 通过axios处理一下
|
||||
const captchaCodeBase64 = ref("");
|
||||
|
||||
const isCaptchaOn = ref(false);
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const isRememberMe = ref(false);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
|
||||
const currentPage = ref(0);
|
||||
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
const { dataTheme, dataThemeChange } = useDataThemeChange();
|
||||
dataThemeChange();
|
||||
// const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
|
||||
const { title } = useNav();
|
||||
|
||||
const ruleForm = reactive({
|
||||
username: "admin",
|
||||
password: getPassword(),
|
||||
captchaCode: "",
|
||||
captchaCodeKey: ""
|
||||
});
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
CommonAPI.loginByPassword({
|
||||
username: ruleForm.username,
|
||||
password: rsaEncrypt(ruleForm.password),
|
||||
captchaCode: ruleForm.captchaCode,
|
||||
captchaCodeKey: ruleForm.captchaCodeKey
|
||||
})
|
||||
.then(({ data }) => {
|
||||
// 登录成功后 将token存储到sessionStorage中
|
||||
setTokenFromBackend(data);
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
router.push(getTopMenu(true).path);
|
||||
message("登录成功", { type: "success" });
|
||||
});
|
||||
if (isRememberMe.value) {
|
||||
savePassword(ruleForm.password);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
//如果登陆失败则重新获取验证码
|
||||
getCaptchaCode();
|
||||
});
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 使用公共函数，避免`removeEventListener`失效 */
|
||||
function onkeypress({ code }: KeyboardEvent) {
|
||||
if (code === "Enter") {
|
||||
onLogin(ruleFormRef.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function getCaptchaCode() {
|
||||
if (isCaptchaOn.value) {
|
||||
await CommonAPI.getCaptchaCode().then(res => {
|
||||
captchaCodeBase64.value = `data:image/gif;base64,${res.data.captchaCodeImg}`;
|
||||
ruleForm.captchaCodeKey = res.data.captchaCodeKey;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(isRememberMe, newVal => {
|
||||
saveIsRememberMe(newVal);
|
||||
if (newVal === false) {
|
||||
removePassword();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await CommonAPI.getConfig().then(res => {
|
||||
isCaptchaOn.value = res.data.isCaptchaOn;
|
||||
useUserStoreHook().SET_DICTIONARY(res.data.dictionary);
|
||||
});
|
||||
|
||||
await getCaptchaCode();
|
||||
|
||||
isRememberMe.value = getIsRememberMe();
|
||||
if (isRememberMe.value) {
|
||||
ruleForm.password = getPassword();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.document.addEventListener("keypress", onkeypress);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.document.removeEventListener("keypress", onkeypress);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="select-none">
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="absolute flex-c right-5 top-3">
|
||||
<!-- 主题 -->
|
||||
<el-switch
|
||||
v-model="dataTheme"
|
||||
:active-icon="dayIcon"
|
||||
:inactive-icon="darkIcon"
|
||||
inline-prompt
|
||||
@change="dataThemeChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<!-- 登录页面的背景图 -->
|
||||
<component :is="toRaw(illustration)" />
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<!-- 登录窗口上面的LOGO -->
|
||||
<avatar class="avatar" />
|
||||
<Motion>
|
||||
<h2 class="outline-none">
|
||||
<TypeIt :cursor="false" :speed="150" :values="[title]" />
|
||||
</h2>
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
v-if="currentPage === 0"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
v-model="ruleForm.username"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
clearable
|
||||
placeholder="账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="ruleForm.password"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
clearable
|
||||
placeholder="密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item v-if="isCaptchaOn" prop="captchaCode">
|
||||
<el-input
|
||||
v-model="ruleForm.captchaCode"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
clearable
|
||||
placeholder="验证码"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<el-image
|
||||
:src="captchaCodeBase64"
|
||||
style="
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
"
|
||||
@click="getCaptchaCode"
|
||||
>
|
||||
<template #error>
|
||||
<span>Loading</span>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-checkbox v-model="isRememberMe"> 记住密码</el-checkbox>
|
||||
<el-button link type="primary" @click="currentPage = 4">
|
||||
忘记密码
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
type="primary"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-button
|
||||
v-for="(item, index) in operates"
|
||||
:key="index"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@click="currentPage = item.page"
|
||||
>
|
||||
{{ item.title }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-xs text-gray-500">{{ "第三方登录" }}</p>
|
||||
</el-divider>
|
||||
<div class="flex w-full justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
class="text-gray-500 cursor-pointer hover:text-blue-400"
|
||||
width="20"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<!-- 手机号登录 -->
|
||||
<phone v-if="currentPage === 1" v-model:current-page="currentPage" />
|
||||
<!-- 二维码登录 -->
|
||||
<qrCode v-if="currentPage === 2" v-model:current-page="currentPage" />
|
||||
<!-- 注册 -->
|
||||
<register
|
||||
v-if="currentPage === 3"
|
||||
v-model:current-page="currentPage"
|
||||
/>
|
||||
<!-- 忘记密码 -->
|
||||
<resetPassword
|
||||
v-if="currentPage === 4"
|
||||
v-model:current-page="currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="flex flex-col items-center justify-center mb-3">
|
||||
<span>Copyright © 2018-2023 Agileboot All Rights Reserved. </span>
|
||||
<el-link
|
||||
href="https://beian.miit.gov.cn"
|
||||
rel="external nofollow"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
>闽ICP备2022018106号-2
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/style/login.css");
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.translation {
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
.check-zh {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.check-en {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
const operates = [
|
||||
{
|
||||
title: "手机登录",
|
||||
page: 1
|
||||
},
|
||||
{
|
||||
title: "二维码登录",
|
||||
page: 2
|
||||
},
|
||||
{
|
||||
title: "注册",
|
||||
page: 3
|
||||
}
|
||||
];
|
||||
|
||||
const thirdParty = [
|
||||
{
|
||||
title: "微信登录",
|
||||
icon: "wechat"
|
||||
},
|
||||
{
|
||||
title: "支付宝登录",
|
||||
icon: "alipay"
|
||||
},
|
||||
{
|
||||
title: "QQ登录",
|
||||
icon: "qq"
|
||||
},
|
||||
{
|
||||
title: "微博登录",
|
||||
icon: "weibo"
|
||||
}
|
||||
];
|
||||
|
||||
export { operates, thirdParty };
|
||||
@@ -0,0 +1,40 @@
|
||||
import { h, defineComponent, withDirectives, resolveDirective } from "vue";
|
||||
|
||||
/** 封装@vueuse/motion动画库中的自定义指令v-motion */
|
||||
export default defineComponent({
|
||||
name: "Motion",
|
||||
props: {
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { delay } = this;
|
||||
const motion = resolveDirective("motion");
|
||||
return withDirectives(
|
||||
h(
|
||||
"div",
|
||||
{},
|
||||
{
|
||||
default: () => [this.$slots.default()]
|
||||
}
|
||||
),
|
||||
[
|
||||
[
|
||||
motion,
|
||||
{
|
||||
initial: { opacity: 0, y: 100 },
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,127 @@
|
||||
import { reactive } from "vue";
|
||||
import { isPhone } from "@pureadmin/utils";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
/** 6位数字验证码正则 */
|
||||
export const REGEXP_SIX = /^\d{6}$/;
|
||||
|
||||
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
|
||||
export const REGEXP_PWD =
|
||||
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
|
||||
|
||||
/** 登录校验 */
|
||||
const loginRules = reactive<FormRules>({
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(
|
||||
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
|
||||
);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
} else if (useUserStoreHook().verifyCode !== value) {
|
||||
callback(new Error("请输入正确的验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 手机登录校验 */
|
||||
const phoneRules = reactive<FormRules>({
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入手机号码"));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error("请输入6位数字验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 忘记密码校验 */
|
||||
const updateRules = reactive<FormRules>({
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入手机号码"));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error("请输入6位数字验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(
|
||||
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
|
||||
);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export { loginRules, phoneRules, updateRules };
|
||||
@@ -0,0 +1,5 @@
|
||||
import bg from "@/assets/login/bg.png";
|
||||
import avatar from "@/assets/login/avatar.svg?component";
|
||||
import illustration from "@/assets/login/illustration.svg?component";
|
||||
|
||||
export { bg, avatar, illustration };
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { ref } from "vue";
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const timer = ref(null);
|
||||
const text = ref("");
|
||||
|
||||
export const useVerifyCode = () => {
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 60
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = clone(time, true);
|
||||
await formEl.validateField(props, isValid => {
|
||||
if (isValid) {
|
||||
clearInterval(timer.value);
|
||||
isDisabled.value = true;
|
||||
text.value = `${time}`;
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
time -= 1;
|
||||
text.value = `${time}`;
|
||||
} else {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
};
|
||||
|
||||
return {
|
||||
isDisabled,
|
||||
timer,
|
||||
text,
|
||||
start,
|
||||
end
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { type CSSProperties, computed } from "vue";
|
||||
import { hasAuth, getAuths } from "@/router/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButton"
|
||||
});
|
||||
|
||||
const elStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw",
|
||||
justifyContent: "start"
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="elStyle" size="large" effect="dark">
|
||||
当前拥有的code列表：{{ getAuths() }}
|
||||
</el-tag>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
</template>
|
||||
<Auth value="btn_add">
|
||||
<el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_edit']">
|
||||
<el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
<el-button type="danger">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-button type="success" v-if="hasAuth('btn_add')">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button type="primary" v-if="hasAuth(['btn_edit'])">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
|
||||
>
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-button type="success" v-auth="'btn_add'">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button type="primary" v-auth="['btn_edit']">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { initRouter } from "@/router/utils";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { type CSSProperties, ref, computed } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionPage"
|
||||
});
|
||||
|
||||
const elStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw",
|
||||
justifyContent: "start"
|
||||
};
|
||||
});
|
||||
|
||||
const username = ref(useUserStoreHook()?.username);
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "admin",
|
||||
label: "管理员角色"
|
||||
},
|
||||
{
|
||||
value: "common",
|
||||
label: "普通角色"
|
||||
}
|
||||
];
|
||||
|
||||
function onChange() {
|
||||
useUserStoreHook()
|
||||
.loginByUsername({ username: username.value, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
storageSession().removeItem("async-routes");
|
||||
usePermissionStoreHook().clearAllCachePage();
|
||||
initRouter();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="elStyle" size="large" effect="dark">
|
||||
模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
|
||||
</el-tag>
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>当前角色：{{ username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-select v-model="username" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</template>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { ConfigDTO } from "@/api/system/config";
|
||||
|
||||
interface FormProps<T> {
|
||||
formInline: T;
|
||||
}
|
||||
|
||||
/** TODO 有其他方式 来换掉这个props 父子组件传值吗？ */
|
||||
const props = withDefaults(defineProps<FormProps<ConfigDTO>>(), {
|
||||
formInline: () => ({})
|
||||
});
|
||||
|
||||
const formData = ref(props.formInline);
|
||||
|
||||
// TODO 这段有优化的空间吗？
|
||||
const formRuleRef = ref();
|
||||
|
||||
function getFormRuleRef() {
|
||||
return formRuleRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getFormRuleRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRuleRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input
|
||||
v-model="formData.configName"
|
||||
clearable
|
||||
placeholder="请输入参数名称"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input
|
||||
v-model="formData.configKey"
|
||||
clearable
|
||||
placeholder="请输入参数键名"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="参数值" prop="configValue">
|
||||
<el-select
|
||||
v-model="formData.configValue"
|
||||
v-if="formData.configOptions.length > 0"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in formData.configOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="formData.configValue"
|
||||
placeholder="请输入参数键值"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许修改" prop="isAllowChange">
|
||||
<el-select
|
||||
v-model="formData.isAllowChange"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in useUserStoreHook().dictionaryList['common.yesOrNo']"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
/** !!!重要!!! 组件name最好和菜单表中的router_name一致, copy的时候记得更改这个名字*/
|
||||
defineOptions({
|
||||
name: "SystemConfig"
|
||||
});
|
||||
|
||||
const yesOrNoList = useUserStoreHook().dictionaryList["common.yesOrNo"];
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleRefresh,
|
||||
getList
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="参数名称：" prop="configName">
|
||||
<el-input
|
||||
v-model="searchFormParams.configName"
|
||||
placeholder="请输入参数名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名：" prop="configKey">
|
||||
<el-input
|
||||
v-model="searchFormParams.configKey"
|
||||
placeholder="请输入参数键名"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="允许修改：" prop="isAllowChange">
|
||||
<el-select
|
||||
v-model="searchFormParams.isAllowChange"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in yesOrNoList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="通知列表" :columns="columns" @refresh="onSearch">
|
||||
<!-- 表格操作栏 -->
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="warning"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="handleRefresh()"
|
||||
>
|
||||
刷新缓存
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<!-- TODO sort-change 有其他好的处理方式吗？ -->
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getList"
|
||||
@page-current-change="getList"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
import editForm from "../form.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
|
||||
import {
|
||||
getConfigListApi,
|
||||
getConfigInfoApi,
|
||||
updateConfigApi,
|
||||
refreshConfigCacheApi,
|
||||
ConfigQuery,
|
||||
ConfigDTO,
|
||||
UpdateConfigRequest
|
||||
} from "@/api/system/config";
|
||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
export function useHook() {
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const searchFormParams = reactive<ConfigQuery>({
|
||||
configKey: undefined,
|
||||
configName: undefined,
|
||||
isAllowChange: undefined
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "参数编号",
|
||||
prop: "configId",
|
||||
minWidth: 60
|
||||
},
|
||||
{
|
||||
label: "参数名称",
|
||||
prop: "configName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "参数键",
|
||||
prop: "configKey",
|
||||
minWidth: 120,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "参数值",
|
||||
prop: "configValue",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "参数选项",
|
||||
prop: "configOptions",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "允许更改",
|
||||
prop: "isAllowChangeStr",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 120,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 120,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
|
||||
getList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
|
||||
tableRef.getTableRef().clearSort();
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
|
||||
pageLoading.value = true;
|
||||
const { data } = await getConfigListApi(toRaw(searchFormParams)).finally(
|
||||
() => {
|
||||
pageLoading.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function handleRefresh() {
|
||||
await refreshConfigCacheApi().then(() => {
|
||||
message("刷新缓存成功", {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleUpdate(curData, done) {
|
||||
const request: UpdateConfigRequest = {
|
||||
configValue: curData.configValue
|
||||
};
|
||||
console.log("curData");
|
||||
console.log(curData);
|
||||
|
||||
await updateConfigApi(curData.configId, request).then(() => {
|
||||
message(`您成功修改了配置：${curData.configName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function openDialog(row?: ConfigDTO) {
|
||||
const { data } = await getConfigInfoApi(row.configId);
|
||||
addDialog({
|
||||
title: `修改配置`,
|
||||
props: {
|
||||
formInline: data
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const formRuleRef = formRef.value.getFormRuleRef();
|
||||
|
||||
const curData = options.props.formInline;
|
||||
|
||||
formRuleRef.validate(valid => {
|
||||
if (valid) {
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
multipleSelection,
|
||||
getList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleRefresh,
|
||||
openDialog
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
configValue: [
|
||||
{ required: true, message: "角色名称为必填项", trigger: "blur" }
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
import { DeptRequest } from "@/api/system/dept";
|
||||
|
||||
interface FormProps {
|
||||
formInline: DeptRequest;
|
||||
higherDeptOptions: any[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
id: 0,
|
||||
parentId: 0,
|
||||
deptName: "",
|
||||
leaderName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
orderNum: 0,
|
||||
status: 1
|
||||
}),
|
||||
higherDeptOptions: () => []
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const newFormInline = ref(props.formInline);
|
||||
const deptOptions = ref(props.higherDeptOptions);
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col>
|
||||
<el-form-item label="上级部门">
|
||||
<el-cascader
|
||||
class="w-full"
|
||||
v-model="newFormInline.parentId"
|
||||
:options="deptOptions"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'deptName',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
|
||||
<!-- <template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template> -->
|
||||
<!-- </el-cascader> -->
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="newFormInline.deptName"
|
||||
clearable
|
||||
placeholder="请输入部门名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门负责人">
|
||||
<el-input
|
||||
v-model="newFormInline.leaderName"
|
||||
clearable
|
||||
placeholder="请输入部门负责人"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input
|
||||
v-model="newFormInline.phone"
|
||||
clearable
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="newFormInline.email"
|
||||
clearable
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number
|
||||
v-model="newFormInline.orderNum"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.status"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemDept"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="name">
|
||||
<el-input
|
||||
v-model="searchFormParams.deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="部门列表（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增部门
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
border
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 32 }"
|
||||
align-whole="center"
|
||||
row-key="id"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除部门名称为${row.deptName}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
|
||||
import { message } from "@/utils/message";
|
||||
import {
|
||||
DeptDTO,
|
||||
DeptRequest,
|
||||
addDeptApi,
|
||||
deleteDeptApi,
|
||||
getDeptInfoApi,
|
||||
getDeptListApi,
|
||||
updateDeptApi
|
||||
} from "@/api/system/dept";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h, computed } from "vue";
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
|
||||
export function useHook() {
|
||||
const searchFormParams = reactive({
|
||||
deptName: "",
|
||||
status: null
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const originalDataList = ref([]);
|
||||
const dataList = computed(() => {
|
||||
let filterDataList = [...originalDataList.value];
|
||||
if (!isAllEmpty(searchFormParams.deptName)) {
|
||||
// 前端搜索部门名称
|
||||
filterDataList = filterDataList.filter((item: DeptDTO) =>
|
||||
item.deptName.includes(searchFormParams.deptName)
|
||||
);
|
||||
}
|
||||
if (!isAllEmpty(searchFormParams.status)) {
|
||||
// 前端搜索状态
|
||||
filterDataList = filterDataList.filter(
|
||||
(item: DeptDTO) => item.status === searchFormParams.status
|
||||
);
|
||||
}
|
||||
// 处理成树结构
|
||||
return [...handleTree(filterDataList)];
|
||||
});
|
||||
const loading = ref(true);
|
||||
const { tagStyle } = usePublicHooks();
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "部门名称",
|
||||
prop: "deptName",
|
||||
width: 240,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "部门编号",
|
||||
prop: "id",
|
||||
width: 100,
|
||||
align: "center"
|
||||
},
|
||||
|
||||
{
|
||||
label: "部门负责人",
|
||||
prop: "leaderName",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(row.status)}>
|
||||
{row.status === 1 ? "启用" : "停用"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "orderNum",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 200,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function resetForm(formEl) {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
|
||||
const { data } = await getDeptListApi().finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
originalDataList.value = data;
|
||||
}
|
||||
|
||||
async function handleAdd(row, done) {
|
||||
await addDeptApi(row).then(() => {
|
||||
message(`您新增了部门:${row.deptName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleUpdate(row, done) {
|
||||
await updateDeptApi(row.id, row).then(() => {
|
||||
message(`您更新了部门${row.deptName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
async function openDialog(title = "新增", row?: DeptDTO) {
|
||||
const { data } = await getDeptListApi();
|
||||
const treeList = setDisabledForTreeOptions(handleTree(data), "status");
|
||||
|
||||
if (title === "编辑") {
|
||||
row = (await getDeptInfoApi(row.id + "")).data;
|
||||
}
|
||||
|
||||
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
|
||||
addDialog({
|
||||
title: `${title}部门`,
|
||||
props: {
|
||||
formInline: {
|
||||
id: row?.id ?? 0,
|
||||
parentId: row?.parentId ?? 0,
|
||||
deptName: row?.deptName ?? "",
|
||||
leaderName: row?.leaderName ?? "",
|
||||
phone: row?.phone ?? "",
|
||||
email: row?.email ?? "",
|
||||
orderNum: row?.orderNum ?? 0,
|
||||
status: row?.status ?? 1
|
||||
},
|
||||
higherDeptOptions: [...treeList]
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as DeptRequest;
|
||||
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
handleAdd(curData, done);
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteDeptApi(row.id).then(() => {
|
||||
message(`您删除了部门${row.deptName}`, { type: "success" });
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
// 抽离可公用的工具函数等用于系统管理页面逻辑
|
||||
import { computed } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
|
||||
export function usePublicHooks() {
|
||||
const { isDark } = useDark();
|
||||
|
||||
const switchStyle = computed(() => {
|
||||
return {
|
||||
"--el-switch-on-color": "#6abe39",
|
||||
"--el-switch-off-color": "#e84749"
|
||||
};
|
||||
});
|
||||
|
||||
const tagStyle = computed(() => {
|
||||
return (status: number) => {
|
||||
return status === 1
|
||||
? {
|
||||
"--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
|
||||
"--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
|
||||
"--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
|
||||
}
|
||||
: {
|
||||
"--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
|
||||
"--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
|
||||
"--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
/** 当前网页是否为`dark`模式 */
|
||||
isDark,
|
||||
/** 表现更鲜明的`el-switch`组件 */
|
||||
switchStyle,
|
||||
/** 表现更鲜明的`el-tag`组件 */
|
||||
tagStyle
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useLoginLogHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
// TODO 这个导入声明好长 看看如何优化
|
||||
import { CommonUtils } from "../../../../utils/common";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "SystemOperationLog"
|
||||
});
|
||||
|
||||
const loginLogStatusList =
|
||||
useUserStoreHook().dictionaryList["sysLoginLog.status"];
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
timeRange,
|
||||
defaultSort,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
exportAllExcel,
|
||||
getLoginLogList,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
} = useLoginLogHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="登录IP：" prop="ipAddress">
|
||||
<el-input
|
||||
v-model="searchFormParams.ipAddress"
|
||||
placeholder="请输入IP地址"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名：" prop="username">
|
||||
<el-input
|
||||
v-model="searchFormParams.username"
|
||||
placeholder="请选择用户名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in loginLogStatusList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<label class="el-form-item__label is-required font-bold"
|
||||
>登录时间：</label
|
||||
>
|
||||
<!-- TODO 如何消除这个v-model的warning -->
|
||||
<el-date-picker
|
||||
class="!w-[240px]"
|
||||
v-model="timeRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
|
||||
<!-- 表格操作栏 -->
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleBulkDelete(tableRef)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
|
||||
>单页导出</el-button
|
||||
>
|
||||
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:default-sort="defaultSort"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getLoginLogList"
|
||||
@page-current-change="getLoginLogList"
|
||||
@sort-change="getLoginLogList"
|
||||
@selection-change="
|
||||
rows => (multipleSelection = rows.map(item => item.logId))
|
||||
"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除编号为${row.logId}的这条日志`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,234 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox, Sort } from "element-plus";
|
||||
import {
|
||||
getLoginLogListApi,
|
||||
deleteLoginLogApi,
|
||||
exportLoginLogExcelApi,
|
||||
LoginLogQuery
|
||||
} from "@/api/system/log";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
|
||||
const loginLogStatusMap =
|
||||
useUserStoreHook().dictionaryMap["sysLoginLog.status"];
|
||||
|
||||
export function useLoginLogHook() {
|
||||
const defaultSort: Sort = {
|
||||
prop: "loginTime",
|
||||
order: "descending"
|
||||
};
|
||||
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = ref([]);
|
||||
|
||||
const searchFormParams = reactive<LoginLogQuery>({
|
||||
ipAddress: undefined,
|
||||
username: undefined,
|
||||
status: undefined,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
timeRangeColumn: defaultSort.prop
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "日志编号",
|
||||
prop: "logId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 120,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
label: "IP地址",
|
||||
prop: "ipAddress",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "loginLocation",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "operationSystem",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "浏览器",
|
||||
prop: "browser",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={loginLogStatusMap[row.status].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{loginLogStatusMap[row.status].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态名",
|
||||
prop: "statusStr",
|
||||
minWidth: 120,
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
minWidth: 160,
|
||||
prop: "loginTime",
|
||||
sortable: "custom",
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
getLoginLogList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
// 清空排序
|
||||
searchFormParams.orderColumn = undefined;
|
||||
searchFormParams.orderDirection = undefined;
|
||||
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
|
||||
// Form组件的resetFields方法无法清除datepicker里面的数据。
|
||||
timeRange.value = [];
|
||||
searchFormParams.beginTime = undefined;
|
||||
searchFormParams.endTime = undefined;
|
||||
tableRef.getTableRef().clearSort();
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getLoginLogList(sort: Sort = defaultSort) {
|
||||
pageLoading.value = true;
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
|
||||
() => {
|
||||
pageLoading.value = false;
|
||||
}
|
||||
);
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function exportAllExcel(sort: Sort = defaultSort) {
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteLoginLogApi([row.logId]).then(() => {
|
||||
message(`您删除了操作编号为${row.logId}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getLoginLogList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleBulkDelete(tableRef) {
|
||||
if (multipleSelection.value.length === 0) {
|
||||
message("请选择需要删除的数据", { type: "warning" });
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await deleteLoginLogApi(multipleSelection.value).then(() => {
|
||||
message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getLoginLogList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消删除", {
|
||||
type: "info"
|
||||
});
|
||||
// 清空checkbox选择的数据
|
||||
tableRef.getTableRef().clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getLoginLogList();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
timeRange,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
exportAllExcel,
|
||||
// exportExcel,
|
||||
getLoginLogList,
|
||||
resetForm,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { OperationLogDTO } from "@/api/system/log";
|
||||
|
||||
/** TODO 有其他方式 来换掉这个props 父子组件传值吗？ */
|
||||
const props = defineProps<OperationLogDTO>();
|
||||
|
||||
const operationLogStatusMap =
|
||||
useUserStoreHook().dictionaryMap["sysOperationLog.status"];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-descriptions
|
||||
direction="horizontal"
|
||||
:column="2"
|
||||
:labelStyle="'white-space:nowrap;'"
|
||||
:contentStyle="'word-break:break-all;'"
|
||||
:size="'large'"
|
||||
>
|
||||
<!-- 开头前两列设置宽度 -->
|
||||
<el-descriptions-item label="操作编号:" :width="'25%'">{{
|
||||
props.operationId
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="请求模块:" :width="'25%'">{{
|
||||
props.requestModule
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="操作类型:">{{
|
||||
props.businessTypeStr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人:">{{
|
||||
props.username
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人ID:">{{
|
||||
props.userId
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人类型:">{{
|
||||
props.operatorTypeStr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人部门:">{{
|
||||
props.deptName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人IP:">{{
|
||||
props.operatorIp
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="操作人地址:">{{
|
||||
props.operatorLocation
|
||||
}}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="请求链接:">{{
|
||||
props.requestUrl
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="请求方式:">{{
|
||||
props.requestMethod
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="请求参数:">
|
||||
<!-- 长度可能较长的字符串使用el-text包住 避免超出框 -->
|
||||
<el-text>
|
||||
{{ props.operationParam }}
|
||||
</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="调用方法:">
|
||||
<el-text>
|
||||
{{ props.calledMethod }}
|
||||
</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="返回结果:">
|
||||
<el-text>
|
||||
{{ props.operationResult }}
|
||||
</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="错误详情:">
|
||||
<el-text>
|
||||
{{ props.errorStack }}
|
||||
</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态:"
|
||||
><el-tag
|
||||
:type="operationLogStatusMap[props.status].cssTag"
|
||||
effect="plain"
|
||||
>
|
||||
{{ operationLogStatusMap[props.status].label }}
|
||||
</el-tag></el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="操作时间:">{{
|
||||
props.operationTime
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<style>
|
||||
.el-descriptions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useOperationLogHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import View from "@iconify-icons/ep/view";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
// TODO 这个导入声明好长 看看如何优化
|
||||
import { CommonUtils } from "../../../../utils/common";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "SystemOperationLog"
|
||||
});
|
||||
|
||||
const businessTypeList =
|
||||
useUserStoreHook().dictionaryList["sysOperationLog.businessType"];
|
||||
const operationStatusList =
|
||||
useUserStoreHook().dictionaryList["sysOperationLog.status"];
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
timeRange,
|
||||
defaultSort,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
exportAllExcel,
|
||||
openDialog,
|
||||
getOperationLogList,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
} = useOperationLogHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="系统模块：" prop="requestModule">
|
||||
<el-input
|
||||
v-model="searchFormParams.requestModule"
|
||||
placeholder="请输入系统模块"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="操作类型：" prop="businessType">
|
||||
<el-select
|
||||
v-model="searchFormParams.businessType"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in businessTypeList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员：" prop="username">
|
||||
<el-input
|
||||
v-model="searchFormParams.username"
|
||||
placeholder="请输入创建者"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in operationStatusList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<label class="el-form-item__label is-required font-bold"
|
||||
>操作时间：</label
|
||||
>
|
||||
<!-- TODO 如何消除这个v-model的warning -->
|
||||
<el-date-picker
|
||||
class="!w-[240px]"
|
||||
v-model="timeRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="操作日志列表" :columns="columns" @refresh="onSearch">
|
||||
<!-- 表格操作栏 -->
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleBulkDelete(tableRef)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="CommonUtils.exportExcel(columns, dataList, '操作日志列表')"
|
||||
>单页导出</el-button
|
||||
>
|
||||
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:default-sort="defaultSort"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getOperationLogList"
|
||||
@page-current-change="getOperationLogList"
|
||||
@sort-change="getOperationLogList"
|
||||
@selection-change="
|
||||
rows => (multipleSelection = rows.map(item => item.operationId))
|
||||
"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(View)"
|
||||
@click="openDialog(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除编号为${row.operationId}的这条日志`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,270 @@
|
||||
import dayjs from "dayjs";
|
||||
import descriptionForm from "../description.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { addDialog, closeDialog } from "@/components/ReDialog";
|
||||
import { ElMessageBox, Sort } from "element-plus";
|
||||
import {
|
||||
OperationLogsQuery,
|
||||
getOperationLogListApi,
|
||||
deleteOperationLogApi,
|
||||
exportOperationLogExcelApi
|
||||
} from "@/api/system/log";
|
||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
|
||||
const operationLogStatusMap =
|
||||
useUserStoreHook().dictionaryMap["sysOperationLog.status"];
|
||||
const businessTypeMap =
|
||||
useUserStoreHook().dictionaryMap["sysOperationLog.businessType"];
|
||||
|
||||
export function useOperationLogHook() {
|
||||
const defaultSort: Sort = {
|
||||
prop: "operationTime",
|
||||
order: "descending"
|
||||
};
|
||||
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = ref([]);
|
||||
|
||||
const searchFormParams = reactive<OperationLogsQuery>({
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
businessType: undefined,
|
||||
requestModule: undefined,
|
||||
status: undefined,
|
||||
username: undefined,
|
||||
timeRangeColumn: defaultSort.prop
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "操作编号",
|
||||
prop: "operationId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "业务模块",
|
||||
prop: "requestModule",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作类型",
|
||||
prop: "businessType",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={businessTypeMap[row.businessType].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{businessTypeMap[row.businessType].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "请求方式",
|
||||
prop: "requestMethod",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作人员",
|
||||
prop: "username",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录地址",
|
||||
prop: "operatorIp",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={operationLogStatusMap[row.status].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{operationLogStatusMap[row.status].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态名",
|
||||
prop: "statusStr",
|
||||
minWidth: 120,
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "操作时间",
|
||||
minWidth: 160,
|
||||
prop: "operationTime",
|
||||
sortable: "custom",
|
||||
formatter: ({ operationTime }) =>
|
||||
dayjs(operationTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
getOperationLogList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
// 清空排序
|
||||
searchFormParams.orderColumn = undefined;
|
||||
searchFormParams.orderDirection = undefined;
|
||||
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
|
||||
// Form组件的resetFields方法无法清除datepicker里面的数据。
|
||||
timeRange.value = [];
|
||||
searchFormParams.beginTime = undefined;
|
||||
searchFormParams.endTime = undefined;
|
||||
tableRef.getTableRef().clearSort();
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getOperationLogList(sort: Sort = defaultSort) {
|
||||
pageLoading.value = true;
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
const { data } = await getOperationLogListApi(
|
||||
toRaw(searchFormParams)
|
||||
).finally(() => {
|
||||
pageLoading.value = false;
|
||||
});
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function exportAllExcel(sort: Sort = defaultSort) {
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
exportOperationLogExcelApi(toRaw(searchFormParams), "操作日志.xls");
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteOperationLogApi([row.operationId]).then(() => {
|
||||
message(`您删除了操作编号为${row.operationId}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getOperationLogList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleBulkDelete(tableRef) {
|
||||
if (multipleSelection.value.length === 0) {
|
||||
message("请选择需要删除的数据", { type: "warning" });
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await deleteOperationLogApi(multipleSelection.value).then(() => {
|
||||
message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getOperationLogList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消删除", {
|
||||
type: "info"
|
||||
});
|
||||
// 清空checkbox选择的数据
|
||||
tableRef.getTableRef().clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
function openDialog(row) {
|
||||
addDialog({
|
||||
title: "日志详情",
|
||||
width: "60%",
|
||||
draggable: true,
|
||||
fullscreenIcon: false,
|
||||
closeOnClickModal: true,
|
||||
contentRenderer: () => h(descriptionForm, toRaw(row)),
|
||||
footerButtons: [
|
||||
{
|
||||
label: "关闭",
|
||||
text: true,
|
||||
size: "large",
|
||||
bg: true,
|
||||
btnClick: ({ dialog: { options, index } }) => {
|
||||
closeDialog(options, index);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getOperationLogList();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
timeRange,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
exportAllExcel,
|
||||
// exportExcel,
|
||||
getOperationLogList,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
import { MenuRequest } from "@/api/system/menu";
|
||||
import IconSelect from "@/components/ReIcon/src/Select.vue";
|
||||
|
||||
interface FormProps {
|
||||
formInline: MenuRequest;
|
||||
higherMenuOptions: any[];
|
||||
}
|
||||
|
||||
// TODO 为什么这里设置的rank: 1是不生效的,而hook那边定义的才能生效 到底需不需要 这个withDefaults
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
id: 0,
|
||||
parentId: 0,
|
||||
menuName: "",
|
||||
routerName: "",
|
||||
path: "",
|
||||
status: 1,
|
||||
isButton: undefined,
|
||||
permission: "",
|
||||
menuType: undefined,
|
||||
meta: {}
|
||||
}),
|
||||
higherMenuOptions: () => []
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const newFormInline = ref(props.formInline);
|
||||
const deptOptions = ref(props.higherMenuOptions);
|
||||
|
||||
const typeName = computed(() => {
|
||||
return newFormInline.value.isButton ? "按钮" : "菜单";
|
||||
});
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col>
|
||||
<el-form-item label="父菜单">
|
||||
<el-cascader
|
||||
class="w-full"
|
||||
v-model="newFormInline.parentId"
|
||||
:options="deptOptions"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'menuName',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
placeholder="请选择父菜单（不选则为根目录菜单）"
|
||||
/>
|
||||
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
|
||||
<!-- <template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template> -->
|
||||
<!-- </el-cascader> -->
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group
|
||||
v-model="newFormInline.isButton"
|
||||
:disabled="newFormInline.id !== 0"
|
||||
>
|
||||
<el-radio :label="false">菜单</el-radio>
|
||||
<el-radio :label="true">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<template v-if="newFormInline.isButton === false">
|
||||
<re-col :value="24">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group
|
||||
v-model="newFormInline.menuType"
|
||||
:disabled="newFormInline.id !== 0"
|
||||
>
|
||||
<el-radio :label="1">页面</el-radio>
|
||||
<el-radio :label="2">目录</el-radio>
|
||||
<el-radio :label="3">内嵌Iframe</el-radio>
|
||||
<el-radio :label="4">外链跳转</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item :label="`${typeName}图标`" prop="meta.icon">
|
||||
<IconSelect v-model="newFormInline.meta.icon" />
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item :label="`${typeName}名称`" prop="menuName">
|
||||
<el-input
|
||||
v-model="newFormInline.menuName"
|
||||
clearable
|
||||
:placeholder="`请输入${typeName}名称`"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="权限标识" prop="permission">
|
||||
<template v-slot:label>
|
||||
<el-tooltip content="这是权限标识" placement="top">
|
||||
<span>权限标识</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="newFormInline.permission"
|
||||
clearable
|
||||
placeholder="请输入权限标识"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="newFormInline.isButton === false" :gutter="30">
|
||||
<template v-if="newFormInline.menuType == 1">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="页面路径" prop="path">
|
||||
<el-input
|
||||
v-model="newFormInline.path"
|
||||
clearable
|
||||
placeholder="请输入前端项目views文件内的页面路径"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12">
|
||||
<el-form-item label="组件名">
|
||||
<el-input
|
||||
v-model="newFormInline.routerName"
|
||||
clearable
|
||||
placeholder="请输入组件定义的name，defineOptions中的name"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
<template v-else-if="newFormInline.menuType == 2">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="路由地址" prop="path">
|
||||
<el-input
|
||||
v-model="newFormInline.path"
|
||||
clearable
|
||||
placeholder="请输入目录的路由地址以/开头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
<template v-else-if="newFormInline.menuType == 3">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="网站地址" prop="meta.frameSrc">
|
||||
<el-input
|
||||
v-model="newFormInline.meta.frameSrc"
|
||||
clearable
|
||||
placeholder="请输入外部网站地址或者内部网站相对地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
|
||||
<template v-else-if="newFormInline.menuType == 4">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="网站地址" prop="routerName">
|
||||
<!-- 这里需要做拦截处理 -->
|
||||
<el-input
|
||||
v-model="newFormInline.routerName"
|
||||
clearable
|
||||
placeholder="请输入外部网站地址，必须以https://或者http://开头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="显示">
|
||||
<el-switch
|
||||
v-model="newFormInline.meta.showLink"
|
||||
inline-prompt
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-text="显示"
|
||||
inactive-text="隐藏"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.status"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number
|
||||
v-model="newFormInline.meta.rank"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemMenu"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="菜单名称：" prop="menuName">
|
||||
<el-input
|
||||
v-model="searchFormParams.menuName"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="菜单列表"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增菜单
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 32 }"
|
||||
align-whole="center"
|
||||
row-key="id"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
|
||||
import { message } from "@/utils/message";
|
||||
import { transferToStandardRouterData } from "./menuLogic";
|
||||
import {
|
||||
MenuDTO,
|
||||
MenuRequest,
|
||||
getMenuListApi,
|
||||
addMenuApi,
|
||||
deleteMenuApi,
|
||||
getMenuInfoApi,
|
||||
updateMenuApi,
|
||||
MenuDetailDTO
|
||||
} from "@/api/system/menu";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h, computed } from "vue";
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import { IconifyIconOnline } from "@/components/ReIcon";
|
||||
|
||||
export function useHook() {
|
||||
const searchFormParams = reactive({
|
||||
menuName: "",
|
||||
status: null
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const originalDataList = ref([]);
|
||||
const dataList = computed(() => {
|
||||
let filterDataList = [...originalDataList.value];
|
||||
if (!isAllEmpty(searchFormParams.menuName)) {
|
||||
// 前端搜索菜单名称
|
||||
filterDataList = filterDataList.filter((item: MenuDTO) =>
|
||||
item.menuName.includes(searchFormParams.menuName)
|
||||
);
|
||||
}
|
||||
if (!isAllEmpty(searchFormParams.status)) {
|
||||
// 前端搜索状态
|
||||
filterDataList = filterDataList.filter(
|
||||
(item: MenuDTO) => item.status === searchFormParams.status
|
||||
);
|
||||
}
|
||||
// 处理成树结构
|
||||
return [...handleTree(filterDataList)];
|
||||
});
|
||||
const loading = ref(true);
|
||||
const { tagStyle } = usePublicHooks();
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "菜单名称",
|
||||
prop: "menuName",
|
||||
width: 200,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "页面路径",
|
||||
prop: "path",
|
||||
minWidth: 170
|
||||
},
|
||||
{
|
||||
label: "路由名称",
|
||||
prop: "routerName",
|
||||
width: 160,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
label: "图标",
|
||||
prop: "row.icon",
|
||||
minWidth: 40,
|
||||
cellRenderer: ({ row }) => (
|
||||
<div class="flex justify-center">
|
||||
<IconifyIconOnline icon={row.icon} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(row.status)}>
|
||||
{row.status === 1 ? "启用" : "停用"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
prop: "isButton",
|
||||
minWidth: 100,
|
||||
formatter: ({ isButton }) => (isButton ? "按钮" : "菜单")
|
||||
},
|
||||
{
|
||||
label: "子类型",
|
||||
prop: "menuTypeStr",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "rank",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 200,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function resetForm(formEl) {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
|
||||
const { data } = await getMenuListApi({ isButton: null }).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
originalDataList.value = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试用例
|
||||
* 1.添加外链跳转菜单
|
||||
* 2.添加iframe菜单 外链+内链
|
||||
* 3.添加目录
|
||||
* 4.添加一级菜单
|
||||
* 5.添加按钮
|
||||
* 6.iframe和外链跳转不允许添加按钮
|
||||
* 7.只允许目录添加子菜单
|
||||
* 8.基于目录 测试以上1~5的步骤
|
||||
* @param row dialog表单数据
|
||||
* @param done
|
||||
*/
|
||||
async function handleAdd(row, done) {
|
||||
await addMenuApi(row).then(() => {
|
||||
message(`您新增了菜单:${row.menuName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试用例
|
||||
* 1.编辑页面/目录/iframe/外链/按钮的数据
|
||||
* 2.更换父级菜单
|
||||
* 3.不允许改变类型(会导致逻辑变复杂，比如改变类型需要考虑子节点)
|
||||
* @param row
|
||||
* @param done
|
||||
*/
|
||||
async function handleUpdate(row, done) {
|
||||
await updateMenuApi(row.id, row).then(() => {
|
||||
message(`您更新了菜单:${row.menuName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
async function openDialog(title = "新增", row?: MenuDTO) {
|
||||
// 下拉选项需要排除掉按钮
|
||||
const { data } = await getMenuListApi({ isButton: false });
|
||||
const optionTree = setDisabledForTreeOptions(handleTree(data), "status");
|
||||
|
||||
let meta = undefined;
|
||||
if (title === "编辑") {
|
||||
row = (await getMenuInfoApi(row.id + "")).data;
|
||||
meta = (row as MenuDetailDTO).meta;
|
||||
}
|
||||
|
||||
console.log(row);
|
||||
|
||||
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
|
||||
addDialog({
|
||||
title: `${title}菜单`,
|
||||
props: {
|
||||
formInline: {
|
||||
id: row?.id ?? 0,
|
||||
parentId: row?.parentId ?? 0,
|
||||
menuName: row?.menuName ?? "",
|
||||
routerName: row?.routerName ?? "",
|
||||
path: row?.path ?? "",
|
||||
isButton: row?.isButton,
|
||||
permission: row?.permission ?? "",
|
||||
menuType: row?.menuType ?? undefined,
|
||||
status: row?.status ?? 1,
|
||||
meta: meta ?? { rank: 0 }
|
||||
},
|
||||
higherMenuOptions: [...optionTree]
|
||||
},
|
||||
width: "60%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as MenuRequest;
|
||||
|
||||
// 将菜单的数据转换为标准的路由数据
|
||||
transferToStandardRouterData(curData, optionTree);
|
||||
|
||||
console.log(curData);
|
||||
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
handleAdd(curData, done);
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteMenuApi(row.id).then(() => {
|
||||
message(`您删除了${row.menuName}`, { type: "success" });
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { isUrl } from "@pureadmin/utils";
|
||||
import { MenuRequest } from "@/api/system/menu";
|
||||
import { getNodeByUniqueId } from "@/utils/tree";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
/**
|
||||
* 因为动态路由的逻辑基本上完全依赖前端
|
||||
* 所以需要将菜单的数据转换为标准的路由数据
|
||||
* @param data
|
||||
* @param menuTree
|
||||
*/
|
||||
export function transferToStandardRouterData(data: MenuRequest, menuTree: any) {
|
||||
// 将菜单名称赋值给meta.title
|
||||
if (data.menuName && data.meta) {
|
||||
data.meta.title = data.menuName;
|
||||
}
|
||||
|
||||
// 如果是页面和目录的话 path如果没有/开头 就自动加上
|
||||
if (data.menuType == 1 || data.menuType == 2) {
|
||||
if (data.path && !data.path.startsWith("/")) {
|
||||
data.path = `/${data.path}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果当前菜单是父菜单的唯一节点 记得将当前菜单的showParent=true
|
||||
const parentMenu = getNodeByUniqueId(menuTree, data.parentId);
|
||||
// 按钮不需要显示父菜单
|
||||
if (parentMenu && !data.isButton) {
|
||||
if (!parentMenu.children || parentMenu.children.length === 0) {
|
||||
data.meta.showParent = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是内嵌iframe的话
|
||||
if (data.menuType == 3) {
|
||||
//检测meta.frameSrc是否是以Http/Https开头的 如果不是的话自动补全
|
||||
if (data.menuType == 3 && data.meta && data.meta.frameSrc) {
|
||||
if (!isUrl(data.meta.frameSrc)) {
|
||||
// 如果链接是/开头 则认为是内部链接, 打上内部链接标记即可
|
||||
if (data.meta.frameSrc.startsWith("/")) {
|
||||
data.meta.isFrameSrcInternal = true;
|
||||
} else {
|
||||
data.meta.frameSrc = `http://${data.meta.frameSrc}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const pinyinStr = CommonUtils.toPinyin(data.menuName);
|
||||
data.path = `/${pinyinStr}IframeLink`;
|
||||
data.routerName = `${pinyinStr}IframeRouter`;
|
||||
}
|
||||
|
||||
// 如果是外链跳转的话 需要自动设置他的path 按照外链跳转的规则 必须设置成/external
|
||||
// 详见https://github.com/pure-admin/vue-pure-admin/issues/664
|
||||
// 这里我们直接以菜单名转拼音的方式生成
|
||||
if (data.meta && data.menuType == 4) {
|
||||
if (!isUrl(data.routerName)) {
|
||||
data.routerName = `http://${data.routerName}`;
|
||||
}
|
||||
data.path = `/external`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="main" v-loading="loading">
|
||||
<!-- v-loading指令 可以直接调用Loading动画 -->
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>Redis信息</span></template>
|
||||
<el-descriptions :column="4">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in cacheInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
:span="item.span"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>命令统计</span></template>
|
||||
<div ref="commandChartRef" style="height: 420px" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>内存信息</span></template>
|
||||
<div ref="memoryChartRef" style="height: 420px" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCacheInfoApi, RedisCacheInfoDTO } from "@/api/system/monitor";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "CacheInfo"
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const cacheInfoTable = ref([]);
|
||||
const commandChartRef = ref(null);
|
||||
const memoryChartRef = ref(null);
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
const { data } = await getCacheInfoApi().finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const cacheInfo = data as RedisCacheInfoDTO;
|
||||
|
||||
cacheInfoTable.value = [
|
||||
{
|
||||
field: "Redis版本",
|
||||
value: cacheInfo.info.redis_version
|
||||
},
|
||||
{
|
||||
field: "运行模式",
|
||||
value: cacheInfo.info.redis_mode == "standalone" ? "单机" : "集群"
|
||||
},
|
||||
{
|
||||
field: "端口",
|
||||
value: cacheInfo.info.tcp_port
|
||||
},
|
||||
{
|
||||
field: "客户端数",
|
||||
value: cacheInfo.info.connected_clients
|
||||
},
|
||||
{
|
||||
field: "运行时间(天)",
|
||||
value: cacheInfo.info.uptime_in_days
|
||||
},
|
||||
{
|
||||
field: "使用内存",
|
||||
value: cacheInfo.info.used_memory_human
|
||||
},
|
||||
{
|
||||
field: "使用CPU",
|
||||
value: parseFloat(cacheInfo.info.used_cpu_user_children).toFixed(2)
|
||||
},
|
||||
{
|
||||
field: "内存配置",
|
||||
value: cacheInfo.info.total_system_memory_human
|
||||
},
|
||||
{
|
||||
field: "AOF是否开启",
|
||||
value: cacheInfo.info.aof_enabled == "0" ? "否" : "是"
|
||||
},
|
||||
{
|
||||
field: "RDB是否成功",
|
||||
value: cacheInfo.info.rdb_last_bgsave_status
|
||||
},
|
||||
{
|
||||
field: "Key数量",
|
||||
value: cacheInfo.dbSize
|
||||
},
|
||||
|
||||
{
|
||||
field: "网络入口/出口",
|
||||
value: `${cacheInfo.info.instantaneous_input_kbps} kbs/ ${cacheInfo.info.instantaneous_output_kbps} kbs`
|
||||
}
|
||||
];
|
||||
|
||||
const commandChartInstance = echarts.init(commandChartRef.value, "macarons");
|
||||
commandChartInstance.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "命令统计",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [15, 95],
|
||||
center: ["40%", "50%"],
|
||||
data: cacheInfo.commandStats,
|
||||
animationEasing: "cubicInOut",
|
||||
animationDuration: 1000
|
||||
}
|
||||
]
|
||||
});
|
||||
const memoryChartInstance = echarts.init(memoryChartRef.value, "macarons");
|
||||
memoryChartInstance.setOption({
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${cacheInfo.info.used_memory_human}`
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "峰值",
|
||||
type: "gauge",
|
||||
min: 0,
|
||||
max: 1000,
|
||||
detail: {
|
||||
formatter: cacheInfo.info.used_memory_human
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(cacheInfo.info.used_memory_human),
|
||||
name: "内存消耗"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
// 抽离可公用的工具函数等用于系统管理页面逻辑
|
||||
import { computed } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
|
||||
export function usePublicHooks() {
|
||||
const { isDark } = useDark();
|
||||
|
||||
const switchStyle = computed(() => {
|
||||
return {
|
||||
"--el-switch-on-color": "#6abe39",
|
||||
"--el-switch-off-color": "#e84749"
|
||||
};
|
||||
});
|
||||
|
||||
const tagStyle = computed(() => {
|
||||
return (status: number) => {
|
||||
return status === 1
|
||||
? {
|
||||
"--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
|
||||
"--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
|
||||
"--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
|
||||
}
|
||||
: {
|
||||
"--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
|
||||
"--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
|
||||
"--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
/** 当前网页是否为`dark`模式 */
|
||||
isDark,
|
||||
/** 表现更鲜明的`el-switch`组件 */
|
||||
switchStyle,
|
||||
/** 表现更鲜明的`el-tag`组件 */
|
||||
tagStyle
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "OnlineUser"
|
||||
});
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
getList,
|
||||
handleLogout
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="登录IP：" prop="ipAddress">
|
||||
<el-input
|
||||
v-model="searchFormParams.ipAddress"
|
||||
placeholder="请输入IP地址"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名：" prop="username">
|
||||
<el-input
|
||||
v-model="searchFormParams.username"
|
||||
placeholder="请选择用户名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getList"
|
||||
@page-current-change="getList"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-popconfirm
|
||||
:title="`是否确认强制退出用户${row.username}`"
|
||||
@confirm="handleLogout(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
强制退出
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import {
|
||||
OnlineUserQuery,
|
||||
getOnlineUserListApi,
|
||||
logoutOnlineUserApi
|
||||
} from "@/api/system/monitor";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
export function useHook() {
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = ref([]);
|
||||
|
||||
const searchFormParams = reactive<OnlineUserQuery>({
|
||||
ipAddress: undefined,
|
||||
username: undefined
|
||||
});
|
||||
|
||||
// 该分页使用前端分页 所以需要一个原始数组来保存原有数据
|
||||
let originalDataList = [];
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "会话编号",
|
||||
prop: "tokenId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "deptName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "IP地址",
|
||||
prop: "ipAddress",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "loginLocation",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "operationSystem",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "浏览器",
|
||||
prop: "browser",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
minWidth: 160,
|
||||
prop: "loginTime",
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
|
||||
pageLoading.value = true;
|
||||
|
||||
const { data } = await getOnlineUserListApi(
|
||||
toRaw(searchFormParams)
|
||||
).finally(() => {
|
||||
pageLoading.value = false;
|
||||
});
|
||||
|
||||
originalDataList = data.rows;
|
||||
pagination.total = data.rows.length;
|
||||
|
||||
getList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
tableRef.getTableRef().clearSort();
|
||||
pagination.currentPage = 1;
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
dataList.value = CommonUtils.paginateList(originalDataList, pagination);
|
||||
}
|
||||
|
||||
async function handleLogout(row) {
|
||||
await logoutOnlineUserApi(row.tokenId).then(() => {
|
||||
message(`您强制登出了用户:${row.username}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
timeRange,
|
||||
onSearch,
|
||||
getList,
|
||||
resetForm,
|
||||
handleLogout
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="main" v-loading="loading">
|
||||
<!-- 注意template和div之间 不要加注释 会导致后续的页面渲染空白 -->
|
||||
<!-- v-loading指令 可以直接调用Loading动画 -->
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>CPU</span></template>
|
||||
<el-table
|
||||
:data="cpuInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="field" label="属性" />
|
||||
<el-table-column prop="value" label="值" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>内存</span></template>
|
||||
<el-table
|
||||
:data="memoryInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
:cell-class-name="cellClassName"
|
||||
>
|
||||
<el-table-column prop="field" label="属性" />
|
||||
<el-table-column prop="machine" label="服务器" />
|
||||
<el-table-column prop="jvm" label="JVM" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>服务器信息</span></template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in serverInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>JVM信息</span></template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in jvmInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
:span="item.span"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>磁盘状态</span></template>
|
||||
<el-table
|
||||
:data="diskInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="dirName" label="盘符路径" />
|
||||
<el-table-column prop="sysTypeName" label="文件系统" />
|
||||
<el-table-column prop="typeName" label="盘符类型" />
|
||||
<el-table-column prop="total" label="总大小" />
|
||||
<el-table-column prop="free" label="可用大小" />
|
||||
<el-table-column prop="used" label="已用大小" />
|
||||
<el-table-column
|
||||
prop="usage"
|
||||
label="已用百分比"
|
||||
:formatter="(row, column, cellValue) => cellValue + '%'"
|
||||
width="180"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getServerInfoApi, ServerInfo } from "@/api/system/monitor";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "ServerInfo"
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const cpuInfoTable = ref([]);
|
||||
const memoryInfoTable = ref([]);
|
||||
const serverInfoTable = ref([]);
|
||||
const jvmInfoTable = ref([]);
|
||||
const diskInfoTable = ref([]);
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
const { data } = await getServerInfoApi().finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const serverInfo = data as ServerInfo;
|
||||
|
||||
cpuInfoTable.value = [
|
||||
{
|
||||
field: "核心数",
|
||||
value: serverInfo.cpuInfo.cpuNum
|
||||
},
|
||||
{
|
||||
field: "用户使用率",
|
||||
value: serverInfo.cpuInfo.used + "%"
|
||||
},
|
||||
{
|
||||
field: "系统使用率",
|
||||
value: serverInfo.cpuInfo.sys + "%"
|
||||
},
|
||||
{
|
||||
field: "当前空闲率",
|
||||
value: serverInfo.cpuInfo.free + "%"
|
||||
}
|
||||
];
|
||||
|
||||
memoryInfoTable.value = [
|
||||
{
|
||||
field: "总内存",
|
||||
machine: serverInfo.memoryInfo.total + "G",
|
||||
jvm: serverInfo.jvmInfo.total + "M"
|
||||
},
|
||||
{
|
||||
field: "已用内存",
|
||||
machine: serverInfo.memoryInfo.used + "G",
|
||||
jvm: serverInfo.jvmInfo.used + "M"
|
||||
},
|
||||
{
|
||||
field: "剩余内存",
|
||||
machine: serverInfo.memoryInfo.free + "G",
|
||||
jvm: serverInfo.jvmInfo.free + "M"
|
||||
},
|
||||
{
|
||||
field: "使用率",
|
||||
machine: serverInfo.memoryInfo.usage + "%",
|
||||
jvm: serverInfo.jvmInfo.usage + "%",
|
||||
// 设置warning 页面上会红字显示
|
||||
warning: serverInfo.jvmInfo.usage > 30
|
||||
}
|
||||
];
|
||||
|
||||
serverInfoTable.value = [
|
||||
{
|
||||
field: "服务器名称",
|
||||
value: serverInfo.systemInfo.computerName
|
||||
},
|
||||
{
|
||||
field: "操作系统",
|
||||
value: serverInfo.systemInfo.osName
|
||||
},
|
||||
{
|
||||
field: "服务器IP",
|
||||
value: serverInfo.systemInfo.computerIp
|
||||
},
|
||||
{
|
||||
field: "系统架构",
|
||||
value: serverInfo.systemInfo.osArch
|
||||
}
|
||||
];
|
||||
|
||||
jvmInfoTable.value = [
|
||||
{
|
||||
field: "JDK名称",
|
||||
value: serverInfo.jvmInfo.name,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "JDK版本",
|
||||
value: serverInfo.jvmInfo.version,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "启动时间",
|
||||
value: serverInfo.jvmInfo.startTime,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "运行时长",
|
||||
value: serverInfo.jvmInfo.runTime,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "安装路径",
|
||||
value: serverInfo.jvmInfo.home,
|
||||
span: 2
|
||||
},
|
||||
{
|
||||
field: "项目路径",
|
||||
value: serverInfo.systemInfo.userDir,
|
||||
span: 2
|
||||
},
|
||||
{
|
||||
field: "运行参数",
|
||||
value: serverInfo.jvmInfo.inputArgs,
|
||||
span: 2
|
||||
}
|
||||
];
|
||||
|
||||
diskInfoTable.value = serverInfo.diskInfos;
|
||||
}
|
||||
|
||||
function cellClassName({ row }) {
|
||||
if (row.warning) {
|
||||
return "text-red-500";
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { FormProps } from "./utils/types";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
/** TODO 有其他方式 来换掉这个props 父子组件传值吗？ */
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
noticeTitle: "",
|
||||
noticeType: "",
|
||||
status: "",
|
||||
noticeContent: ""
|
||||
})
|
||||
});
|
||||
|
||||
const noticeData = ref(props.formInline);
|
||||
|
||||
const formRuleRef = ref();
|
||||
|
||||
function getFormRuleRef() {
|
||||
return formRuleRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getFormRuleRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRuleRef"
|
||||
:model="noticeData"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input
|
||||
v-model="noticeData.noticeTitle"
|
||||
clearable
|
||||
placeholder="请输入公告标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-select
|
||||
v-model="noticeData.noticeType"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in useUserStoreHook().dictionaryList[
|
||||
'sysNotice.noticeType'
|
||||
]"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公告类型" prop="status">
|
||||
<el-select
|
||||
v-model="noticeData.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in useUserStoreHook().dictionaryList['sysNotice.status']"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="公告内容" prop="noticeContent">
|
||||
<el-input
|
||||
v-model="noticeData.noticeContent"
|
||||
clearable
|
||||
placeholder="请输入公告内容"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useNoticeHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
// import Database from "@iconify-icons/ri/database-2-line";
|
||||
// import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
/** !!!重要!!! 组件name最好和菜单表中的router_name一致, copy的时候记得更改这个名字*/
|
||||
defineOptions({
|
||||
name: "SystemNotice"
|
||||
});
|
||||
|
||||
const noticeTypeList =
|
||||
useUserStoreHook().dictionaryList["sysNotice.noticeType"];
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete,
|
||||
handleBulkDelete,
|
||||
getNoticeList
|
||||
} = useNoticeHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="公告标题：" prop="noticeTitle">
|
||||
<el-input
|
||||
v-model="searchFormParams.noticeTitle"
|
||||
placeholder="请输入公告标题"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="公告类型：" prop="noticeType">
|
||||
<el-select
|
||||
v-model="searchFormParams.noticeType"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in noticeTypeList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建者：" prop="creatorName">
|
||||
<el-input
|
||||
v-model="searchFormParams.creatorName"
|
||||
placeholder="请输入创建者"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="通知列表" :columns="columns" @refresh="onSearch">
|
||||
<!-- 表格操作栏 -->
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
添加公告
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleBulkDelete(tableRef)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<!-- TODO sort-change 有其他好的处理方式吗？ -->
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:default-sort="defaultSort"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getNoticeList"
|
||||
@page-current-change="getNoticeList"
|
||||
@sort-change="getNoticeList"
|
||||
@selection-change="
|
||||
rows => (multipleSelection = rows.map(item => item.noticeId))
|
||||
"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除编号为${row.noticeId}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { SystemNoticeQuery, getSystemNoticeListApi } from "@/api/system/notice";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { ElMessageBox, Sort } from "element-plus";
|
||||
import { AddNoticeRequest } from "../utils/types";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import {
|
||||
addSystemNoticeApi,
|
||||
updateSystemNoticeApi,
|
||||
deleteSystemNoticeApi,
|
||||
SystemNoticeRequest
|
||||
} from "@/api/system/notice";
|
||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
const noticeTypeMap = useUserStoreHook().dictionaryMap["sysNotice.noticeType"];
|
||||
const noticeStatusMap = useUserStoreHook().dictionaryMap["sysNotice.status"];
|
||||
|
||||
export function useNoticeHook() {
|
||||
const defaultSort: Sort = {
|
||||
prop: "createTime",
|
||||
order: "descending"
|
||||
};
|
||||
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const searchFormParams = reactive<SystemNoticeQuery>({
|
||||
noticeTitle: undefined,
|
||||
noticeType: undefined,
|
||||
creatorName: undefined,
|
||||
orderColumn: defaultSort.prop,
|
||||
orderDirection: defaultSort.order
|
||||
});
|
||||
|
||||
// TODO ******困惑的问题*******
|
||||
// const pagination = reactive<PaginationProps>({
|
||||
// total: 0,
|
||||
// pageSize: 10,
|
||||
// currentPage: 1,
|
||||
// background: true
|
||||
// });
|
||||
// TODO 使用watchEffect会导致 axios请求拦截器中的参数使用的是旧值
|
||||
// watchEffect(() => {
|
||||
// searchFormParams.pageNum = pagination.currentPage;
|
||||
// searchFormParams.pageSize = pagination.pageSize;
|
||||
// });
|
||||
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "通知编号",
|
||||
prop: "noticeId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "通知标题",
|
||||
prop: "noticeTitle",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "通知类型",
|
||||
prop: "noticeType",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={noticeTypeMap[row.noticeType].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{noticeTypeMap[row.noticeType].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={noticeStatusMap[row.status].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{noticeStatusMap[row.status].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "通知详情",
|
||||
prop: "noticeContent",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "创建者",
|
||||
prop: "creatorName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 180,
|
||||
prop: "createTime",
|
||||
sortable: "custom",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
|
||||
getNoticeList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
// 清空排序
|
||||
searchFormParams.orderColumn = undefined;
|
||||
searchFormParams.orderDirection = undefined;
|
||||
tableRef.getTableRef().clearSort();
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getNoticeList(sort: Sort = defaultSort) {
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
|
||||
pageLoading.value = true;
|
||||
const { data } = await getSystemNoticeListApi(
|
||||
toRaw(searchFormParams)
|
||||
).finally(() => {
|
||||
pageLoading.value = false;
|
||||
});
|
||||
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteSystemNoticeApi([row.noticeId]).then(() => {
|
||||
message(`您删除了通知标题为${row.name}的这条数据`, { type: "success" });
|
||||
// 刷新列表
|
||||
getNoticeList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleBulkDelete(tableRef) {
|
||||
if (multipleSelection.value.length === 0) {
|
||||
message("请选择需要删除的数据", { type: "warning" });
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的通知吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await deleteSystemNoticeApi(multipleSelection.value).then(() => {
|
||||
message(`您删除了通知编号为[ ${multipleSelection.value} ]的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getNoticeList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消删除", {
|
||||
type: "info"
|
||||
});
|
||||
// 清空checkbox选择的数据
|
||||
tableRef.getTableRef().clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleAdd(row, done) {
|
||||
await addSystemNoticeApi(row as SystemNoticeRequest).then(() => {
|
||||
message(`您新增了通知标题为${row.noticeTitle}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
getNoticeList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleUpdate(row, done) {
|
||||
await updateSystemNoticeApi(row as SystemNoticeRequest).then(() => {
|
||||
message(`您新增了通知标题为${row.noticeTitle}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
getNoticeList();
|
||||
});
|
||||
}
|
||||
|
||||
function openDialog(title = "新增", row?: AddNoticeRequest) {
|
||||
addDialog({
|
||||
title: `${title}公告`,
|
||||
props: {
|
||||
formInline: {
|
||||
noticeTitle: row?.noticeTitle ?? "",
|
||||
noticeType: row?.noticeType ?? "",
|
||||
status: row?.status ?? "",
|
||||
noticeContent: row?.noticeContent ?? ""
|
||||
}
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const formRuleRef = formRef.value.getFormRuleRef();
|
||||
|
||||
const curData = options.props.formInline as AddNoticeRequest;
|
||||
|
||||
formRuleRef.validate(valid => {
|
||||
if (valid) {
|
||||
console.log("curData", curData);
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
handleAdd(curData, done);
|
||||
} else {
|
||||
curData.noticeId = row.noticeId;
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getNoticeList();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
multipleSelection,
|
||||
getNoticeList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
|
||||
code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
interface AddNoticeRequest {
|
||||
noticeId?: number;
|
||||
/** 公告标题 */
|
||||
noticeTitle: string;
|
||||
/** 角色编号 */
|
||||
noticeType: string;
|
||||
/** 备注 */
|
||||
status: string;
|
||||
/** 备注 */
|
||||
noticeContent: string;
|
||||
}
|
||||
|
||||
interface FormProps {
|
||||
formInline: AddNoticeRequest;
|
||||
}
|
||||
|
||||
export type { AddNoticeRequest, FormProps };
|
||||
@@ -0,0 +1,228 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { usePostHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
// TODO 这个导入声明好长 看看如何优化
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import PostFormModal from "@/views/system/post/post-form-modal.vue";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import { PostPageResponse } from "@/api/system/post";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "Post"
|
||||
});
|
||||
|
||||
const loginLogStatusList = useUserStoreHook().dictionaryList["common.status"];
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
timeRange,
|
||||
defaultSort,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onSortChanged,
|
||||
exportAllExcel,
|
||||
getPostList,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
} = usePostHook();
|
||||
|
||||
const opType = ref<"add" | "update">("add");
|
||||
const modalVisible = ref(false);
|
||||
const opRow = ref<PostPageResponse>();
|
||||
function openDialog(type: "add" | "update", row?: PostPageResponse) {
|
||||
opType.value = type;
|
||||
opRow.value = row;
|
||||
modalVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input
|
||||
v-model="searchFormParams.postCode"
|
||||
placeholder="请输入岗位编码"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input
|
||||
v-model="searchFormParams.postName"
|
||||
placeholder="请选择岗位名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in loginLogStatusList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
class="!w-[240px]"
|
||||
v-model="timeRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch(tableRef)"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="岗位列表" :columns="columns" @refresh="onSearch">
|
||||
<!-- 表格操作栏 -->
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog('add')"
|
||||
>
|
||||
新增岗位
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleBulkDelete(tableRef)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="CommonUtils.exportExcel(columns, dataList, '岗位列表')"
|
||||
>单页导出</el-button
|
||||
>
|
||||
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:default-sort="defaultSort"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getPostList"
|
||||
@page-current-change="getPostList"
|
||||
@sort-change="onSortChanged"
|
||||
@selection-change="
|
||||
rows => (multipleSelection = rows.map(item => item.postId))
|
||||
"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('update', row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除编号为${row.postId}的这个岗位`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
|
||||
<post-form-modal
|
||||
v-model="modalVisible"
|
||||
:type="opType"
|
||||
:row="opRow"
|
||||
@success="onSearch"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import VDialog from "@/components/VDialog/VDialog.vue";
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import {
|
||||
AddPostCommand,
|
||||
PostPageResponse,
|
||||
UpdatePostCommand,
|
||||
addPostApi,
|
||||
updatePostApi
|
||||
} from "@/api/system/post";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
|
||||
interface Props {
|
||||
type: "add" | "update";
|
||||
modelValue: boolean;
|
||||
row?: PostPageResponse;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emits = defineEmits<{
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "success"): void;
|
||||
}>();
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set(v) {
|
||||
emits("update:modelValue", v);
|
||||
}
|
||||
});
|
||||
|
||||
const formData = reactive<AddPostCommand | UpdatePostCommand>({
|
||||
postId: 0,
|
||||
postCode: "",
|
||||
postName: "",
|
||||
postSort: 1,
|
||||
remark: "",
|
||||
status: ""
|
||||
});
|
||||
|
||||
const statusList = useUserStoreHook().dictionaryMap["common.status"];
|
||||
|
||||
const rules: FormRules = {
|
||||
postName: [
|
||||
{
|
||||
required: true,
|
||||
message: "岗位名称不能为空"
|
||||
}
|
||||
],
|
||||
postCode: [
|
||||
{
|
||||
required: true,
|
||||
message: "岗位编码不能为空"
|
||||
}
|
||||
],
|
||||
postSort: [
|
||||
{
|
||||
required: true,
|
||||
message: "岗位序号不能为空"
|
||||
}
|
||||
]
|
||||
};
|
||||
const formRef = ref<FormInstance>();
|
||||
function handleOpened() {
|
||||
if (props.row) {
|
||||
Object.assign(formData, props.row);
|
||||
} else {
|
||||
formRef.value?.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
loading.value = true;
|
||||
if (props.type === "add") {
|
||||
await addPostApi(formData);
|
||||
} else if (props.type === "update") {
|
||||
await updatePostApi(formData as UpdatePostCommand);
|
||||
}
|
||||
ElMessage.info("提交成功");
|
||||
visible.value = false;
|
||||
emits("success");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
ElMessage.error((e as Error)?.message || "提交失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog
|
||||
show-full-screen
|
||||
:fixed-body-height="false"
|
||||
use-body-scrolling
|
||||
:title="type === 'add' ? '新增岗位' : '更新岗位'"
|
||||
v-model="visible"
|
||||
:loading="loading"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="visible = false"
|
||||
@opened="handleOpened"
|
||||
>
|
||||
<el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item prop="postName" label="岗位名称" required inline-message>
|
||||
<el-input v-model="formData.postName" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="postCode" label="岗位编码" required>
|
||||
<el-input v-model="formData.postCode" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="postSort" label="岗位顺序" required>
|
||||
<el-input-number :min="1" v-model="formData.postSort" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="岗位状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="item in Object.keys(statusList)"
|
||||
:key="item"
|
||||
:label="statusList[item].value"
|
||||
>{{ statusList[item].label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="remark" label="备注" style="margin-bottom: 0">
|
||||
<el-input type="textarea" v-model="formData.remark" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,229 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox, Sort } from "element-plus";
|
||||
import { reactive, ref, onMounted, toRaw, computed } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
import {
|
||||
PostListCommand,
|
||||
getPostListApi,
|
||||
exportPostExcelApi,
|
||||
deletePostApi
|
||||
} from "@/api/system/post";
|
||||
|
||||
const statusMap = useUserStoreHook().dictionaryMap["common.status"];
|
||||
|
||||
export function usePostHook() {
|
||||
const defaultSort: Sort = {
|
||||
prop: "postSort",
|
||||
order: "ascending"
|
||||
};
|
||||
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = computed<[string, string] | null>({
|
||||
get() {
|
||||
if (searchFormParams.beginTime && searchFormParams.endTime) {
|
||||
return [searchFormParams.beginTime, searchFormParams.endTime];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
set(v) {
|
||||
if (v?.length === 2) {
|
||||
searchFormParams.beginTime = v[0];
|
||||
searchFormParams.endTime = v[1];
|
||||
} else {
|
||||
searchFormParams.beginTime = undefined;
|
||||
searchFormParams.endTime = undefined;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const searchFormParams = reactive<PostListCommand>({
|
||||
postCode: "",
|
||||
postName: "",
|
||||
status: undefined
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
const sortState = ref<Sort>(defaultSort);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "岗位编号",
|
||||
prop: "postId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "岗位编码",
|
||||
prop: "postCode",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "岗位名称",
|
||||
prop: "postName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "岗位排序",
|
||||
prop: "postSort",
|
||||
sortable: "custom",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={statusMap[row.status].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{statusMap[row.status].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 160,
|
||||
prop: "createTime",
|
||||
sortable: "custom",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function onSortChanged(sort: Sort) {
|
||||
sortState.value = sort;
|
||||
// 表格列的排序变化的时候，需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
getPostList();
|
||||
}
|
||||
|
||||
async function onSearch(tableRef) {
|
||||
// 点击搜索的时候，需要重置排序，重新排序的时候会重置分页并发起查询请求
|
||||
tableRef.getTableRef().sort("postSort", "ascending");
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
|
||||
// Form组件的resetFields方法无法清除datepicker里面的数据。
|
||||
searchFormParams.beginTime = undefined;
|
||||
searchFormParams.endTime = undefined;
|
||||
// 重置分页并查询
|
||||
onSearch(tableRef);
|
||||
}
|
||||
|
||||
async function getPostList() {
|
||||
pageLoading.value = true;
|
||||
CommonUtils.fillSortParams(searchFormParams, sortState.value);
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
|
||||
const { data } = await getPostListApi(toRaw(searchFormParams)).finally(
|
||||
() => {
|
||||
pageLoading.value = false;
|
||||
}
|
||||
);
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function exportAllExcel() {
|
||||
if (sortState.value != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sortState.value);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
exportPostExcelApi(toRaw(searchFormParams), "岗位数据.xlsx");
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deletePostApi([row.postId]).then(() => {
|
||||
message(`您删除了编号为${row.postId}的这条岗位数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getPostList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleBulkDelete(tableRef) {
|
||||
if (multipleSelection.value.length === 0) {
|
||||
message("请选择需要删除的数据", { type: "warning" });
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的岗位数据吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await deletePostApi(multipleSelection.value).then(() => {
|
||||
message(`您删除了编号为[ ${multipleSelection.value} ]的岗位数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getPostList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消删除", {
|
||||
type: "info"
|
||||
});
|
||||
// 清空checkbox选择的数据
|
||||
tableRef.getTableRef().clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(getPostList);
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
timeRange,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
onSortChanged,
|
||||
exportAllExcel,
|
||||
// exportExcel,
|
||||
getPostList,
|
||||
resetForm,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { getRoleInfoApi, RoleDTO } from "@/api/system/role";
|
||||
import RoleFormModal from "@/views/system/role/role-form-modal.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemRole"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
menuTree,
|
||||
getMenuTree,
|
||||
handleDelete
|
||||
} = useRole();
|
||||
|
||||
const opType = ref<"add" | "update">("add");
|
||||
const modalVisible = ref(false);
|
||||
const opRow = ref<RoleDTO>();
|
||||
async function openDialog(type: "add" | "update", row?: RoleDTO) {
|
||||
debugger;
|
||||
try {
|
||||
await getMenuTree();
|
||||
if (row) {
|
||||
const { data } = await getRoleInfoApi(row.roleId);
|
||||
row.selectedMenuList = data.selectedMenuList;
|
||||
row.selectedDeptList = data.selectedDeptList;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
ElMessage.error((e as Error)?.message || "加载菜单失败");
|
||||
}
|
||||
opType.value = type;
|
||||
opRow.value = row;
|
||||
modalVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="角色名称：" prop="name">
|
||||
<el-input
|
||||
v-model="form.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识：" prop="code">
|
||||
<el-input
|
||||
v-model="form.roleKey"
|
||||
placeholder="请输入角色标识"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已启用" value="1" />
|
||||
<el-option label="已停用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="角色列表（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog('add')"
|
||||
>
|
||||
新增角色
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('update', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除角色名称为${row.roleName}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<!-- <el-dropdown>
|
||||
<el-button
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(More)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="handleMenu"
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Database)"
|
||||
@click="handleDatabase"
|
||||
>
|
||||
数据权限
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
|
||||
<role-form-modal
|
||||
v-model="modalVisible"
|
||||
:type="opType"
|
||||
:row="opRow"
|
||||
:menu-options="menuTree"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import VDialog from "@/components/VDialog/VDialog.vue";
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
import {
|
||||
AddRoleCommand,
|
||||
RoleDTO,
|
||||
UpdateRoleCommand,
|
||||
addRoleApi,
|
||||
updateRoleApi
|
||||
} from "@/api/system/role";
|
||||
import { MenuDTO } from "@/api/system/menu";
|
||||
|
||||
interface Props {
|
||||
type: "add" | "update";
|
||||
modelValue: boolean;
|
||||
row?: RoleDTO;
|
||||
menuOptions: MenuDTO[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emits = defineEmits<{
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "success"): void;
|
||||
}>();
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set(v) {
|
||||
emits("update:modelValue", v);
|
||||
}
|
||||
});
|
||||
|
||||
const formData = reactive<AddRoleCommand | UpdateRoleCommand>({
|
||||
roleId: 0,
|
||||
dataScope: "",
|
||||
menuIds: [],
|
||||
remark: "",
|
||||
roleKey: "",
|
||||
roleName: "",
|
||||
roleSort: 1,
|
||||
status: ""
|
||||
});
|
||||
|
||||
const statusList = useUserStoreHook().dictionaryMap["common.status"];
|
||||
|
||||
const rules: FormRules = {
|
||||
roleName: [
|
||||
{
|
||||
required: true,
|
||||
message: "角色名称不能为空"
|
||||
}
|
||||
],
|
||||
roleKey: [
|
||||
{
|
||||
required: true,
|
||||
message: "权限标识不能为空"
|
||||
}
|
||||
],
|
||||
roleSort: [
|
||||
{
|
||||
required: true,
|
||||
message: "角色序号不能为空"
|
||||
}
|
||||
]
|
||||
};
|
||||
const formRef = ref<FormInstance>();
|
||||
function handleOpened() {
|
||||
console.log("opened", props.row);
|
||||
if (props.row) {
|
||||
Object.assign(formData, props.row);
|
||||
formData.menuIds = props.row.selectedMenuList;
|
||||
} else {
|
||||
formRef.value?.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
function handleCheckChange() {
|
||||
formData.menuIds = treeRef.value.getCheckedKeys(false) as number[];
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
loading.value = true;
|
||||
if (props.type === "add") {
|
||||
await addRoleApi(formData);
|
||||
} else if (props.type === "update") {
|
||||
await updateRoleApi(formData as UpdateRoleCommand);
|
||||
}
|
||||
ElMessage.info("提交成功");
|
||||
visible.value = false;
|
||||
emits("success");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
ElMessage.error((e as Error)?.message || "提交失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog
|
||||
show-full-screen
|
||||
fixed-body-height
|
||||
use-body-scrolling
|
||||
:title="type === 'add' ? '新增角色' : '更新角色'"
|
||||
v-model="visible"
|
||||
:loading="loading"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="visible = false"
|
||||
@opened="handleOpened"
|
||||
>
|
||||
<el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item prop="roleName" label="角色名称" required inline-message>
|
||||
<el-input v-model="formData.roleName" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="roleKey" label="权限字符" required>
|
||||
<el-input v-model="formData.roleKey" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="roleSort" label="角色顺序" required>
|
||||
<el-input-number :min="1" v-model="formData.roleSort" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="角色状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="item in Object.keys(statusList)"
|
||||
:key="item"
|
||||
:label="statusList[item].value"
|
||||
>{{ statusList[item].label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单权限" prop="menuIds">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:props="{ label: 'menuName', children: 'children' }"
|
||||
:data="props.menuOptions"
|
||||
node-key="id"
|
||||
check-strictly
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
check-on-click-node
|
||||
:expand-on-click-node="false"
|
||||
:default-checked-keys="formData.menuIds"
|
||||
@check-change="handleCheckChange"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="remark" label="备注" style="margin-bottom: 0">
|
||||
<el-input type="textarea" v-model="formData.remark" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,202 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import {
|
||||
deleteRoleApi,
|
||||
getRoleListApi,
|
||||
RoleDTO,
|
||||
RoleQuery
|
||||
} from "@/api/system/role";
|
||||
import { getMenuListApi, MenuDTO } from "@/api/system/menu";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { onMounted, reactive, ref, toRaw } from "vue";
|
||||
import { toTree } from "@/utils/tree";
|
||||
|
||||
export function useRole() {
|
||||
const form = reactive<RoleQuery>({
|
||||
roleKey: "",
|
||||
roleName: "",
|
||||
status: undefined
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "角色编号",
|
||||
prop: "roleId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "角色名称",
|
||||
prop: "roleName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "角色标识",
|
||||
prop: "roleKey",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
minWidth: 130,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model={scope.row.status}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
active-text="已启用"
|
||||
inactive-text="已停用"
|
||||
inline-prompt
|
||||
style={switchStyle.value}
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
// const buttonClass = computed(() => {
|
||||
// return [
|
||||
// "!h-[20px]",
|
||||
// "reset-margin",
|
||||
// "!text-gray-500",
|
||||
// "dark:!text-white",
|
||||
// "dark:hover:!text-primary"
|
||||
// ];
|
||||
// });
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.roleName
|
||||
}</strong>吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message(`已${row.status === 0 ? "停用" : "启用"}${row.roleName}`, {
|
||||
type: "success"
|
||||
});
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row: RoleDTO) {
|
||||
try {
|
||||
loading.value = true;
|
||||
await deleteRoleApi(row.roleId);
|
||||
message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "info" });
|
||||
onSearch();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
message((e as Error)?.message || "删除失败", { type: "error" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const { data } = await getRoleListApi(toRaw(form));
|
||||
console.log("role list", data);
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
ElMessage.error((e as Error)?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
const menuTree = ref<MenuDTO[]>([]);
|
||||
|
||||
/** 菜单权限 */
|
||||
async function getMenuTree() {
|
||||
if (menuTree.value?.length) {
|
||||
return menuTree.value;
|
||||
}
|
||||
const { data } = await getMenuListApi({ isButton: false });
|
||||
console.log("menu data", data);
|
||||
menuTree.value = toTree(data, "id", "parentId");
|
||||
return menuTree.value;
|
||||
}
|
||||
|
||||
/** 数据权限 可自行开发 */
|
||||
// function handleDatabase() {}
|
||||
|
||||
onMounted(onSearch);
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
menuTree,
|
||||
getMenuTree,
|
||||
handleDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./rule";
|
||||
import { UserRequest } from "@/api/system/user";
|
||||
import { PostPageResponse } from "@/api/system/post";
|
||||
import { RoleDTO } from "@/api/system/role";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
interface FormProps {
|
||||
formInline: UserRequest;
|
||||
deptOptions: any[];
|
||||
postOptions: PostPageResponse[];
|
||||
roleOptions: RoleDTO[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
userId: 0,
|
||||
username: "",
|
||||
nickname: "",
|
||||
deptId: 0,
|
||||
phone: "",
|
||||
email: "",
|
||||
password: "",
|
||||
sex: 0,
|
||||
status: 1,
|
||||
postId: 0,
|
||||
roleId: 0,
|
||||
remark: ""
|
||||
}),
|
||||
deptOptions: () => [],
|
||||
postOptions: () => [],
|
||||
roleOptions: () => []
|
||||
});
|
||||
|
||||
const newFormInline = ref(props.formInline);
|
||||
const deptOptions = ref(props.deptOptions);
|
||||
const roleOptions = ref(props.roleOptions);
|
||||
const postOptions = ref(props.postOptions);
|
||||
|
||||
const formRuleRef = ref();
|
||||
|
||||
function getFormRuleRef() {
|
||||
return formRuleRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getFormRuleRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRuleRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
v-model="newFormInline.username"
|
||||
clearable
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12">
|
||||
<el-form-item label="部门">
|
||||
<el-tree-select
|
||||
class="w-full"
|
||||
v-model="newFormInline.deptId"
|
||||
:data="deptOptions"
|
||||
:show-all-levels="false"
|
||||
value-key="id"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'deptName',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
placeholder="请选择部门"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="newFormInline.phoneNumber"
|
||||
clearable
|
||||
placeholder="请输入手机号码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="newFormInline.email"
|
||||
clearable
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input
|
||||
v-model="newFormInline.nickname"
|
||||
clearable
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select
|
||||
class="w-full"
|
||||
v-model="newFormInline.sex"
|
||||
placeholder="请选择性别"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in useUserStoreHook().dictionaryList['sysUser.sex']"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="岗位" prop="postId">
|
||||
<el-select
|
||||
class="w-full"
|
||||
v-model="newFormInline.postId"
|
||||
placeholder="请选择岗位"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in postOptions"
|
||||
:key="item.postId"
|
||||
:label="item.postName"
|
||||
:value="item.postId"
|
||||
:disabled="item.status == 0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12">
|
||||
<el-form-item label="角色" prop="roleId">
|
||||
<el-select
|
||||
class="w-full"
|
||||
v-model="newFormInline.roleId"
|
||||
placeholder="请选择角色"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.roleId"
|
||||
:label="item.roleName"
|
||||
:value="item.roleId"
|
||||
:disabled="item.status == 0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="newFormInline.status">
|
||||
<el-radio
|
||||
v-for="item in useUserStoreHook().dictionaryList['common.status']"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
>{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" v-if="newFormInline.password !== undefined">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="newFormInline.password"
|
||||
clearable
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
clearable
|
||||
placeholder="请输入备注内容"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,389 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import {
|
||||
UserQuery,
|
||||
getUserListApi,
|
||||
addUserApi,
|
||||
updateUserStatusApi,
|
||||
updateUserApi,
|
||||
exportUserExcelApi,
|
||||
UserRequest,
|
||||
deleteUserApi,
|
||||
PasswordRequest,
|
||||
updateUserPasswordApi
|
||||
} from "@/api/system/user";
|
||||
import editForm from "./form.vue";
|
||||
import passwordForm from "./passwordForm.vue";
|
||||
import uploadForm from "./uploadForm.vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, computed, onMounted, toRaw, h } from "vue";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
|
||||
import { getDeptListApi } from "@/api/system/dept";
|
||||
import { getPostListApi } from "@/api/system/post";
|
||||
import { getRoleListApi } from "@/api/system/role";
|
||||
|
||||
export function useHook() {
|
||||
const searchFormParams = reactive<UserQuery>({
|
||||
deptId: null,
|
||||
phoneNumber: undefined,
|
||||
status: undefined,
|
||||
username: undefined,
|
||||
timeRangeColumn: "createTime"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const timeRange = ref<[string, string]>();
|
||||
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
const deptTreeList = ref([]);
|
||||
const postOptions = ref([]);
|
||||
const roleOptions = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "用户编号",
|
||||
prop: "userId",
|
||||
width: 90,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "昵称",
|
||||
prop: "nickname",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
minWidth: 90,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.sex === 1 ? "" : "danger"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.sex === 1 ? "男" : "女"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "部门ID",
|
||||
prop: "deptId",
|
||||
minWidth: 130,
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "部门",
|
||||
prop: "deptName",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "phoneNumber",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "角色ID",
|
||||
prop: "roleId",
|
||||
minWidth: 90,
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "角色",
|
||||
prop: "roleName",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 90,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model={scope.row.status}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
active-text="正常"
|
||||
inactive-text="停用"
|
||||
inline-prompt
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 70,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 180,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.username
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
switchLoading(index, true);
|
||||
await updateUserStatusApi(row.userId, row.status).finally(() => {
|
||||
switchLoading(index, false);
|
||||
});
|
||||
message("已成功修改用户状态", {
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消操作", {
|
||||
type: "info"
|
||||
});
|
||||
// 如果取消的话 恢复更改前的状态
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
function switchLoading(index: number, loading: boolean) {
|
||||
switchLoadMap.value[index] = Object.assign({}, switchLoadMap.value[index], {
|
||||
loading: loading
|
||||
});
|
||||
}
|
||||
|
||||
async function exportAllExcel() {
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
exportUserExcelApi(toRaw(searchFormParams), "用户列表.xls");
|
||||
}
|
||||
|
||||
async function handleAdd(row, done) {
|
||||
await addUserApi(row as UserRequest).then(() => {
|
||||
message(`您新增了用户${row.username}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleUpdate(row, done) {
|
||||
await updateUserApi(row.userId, row as UserRequest).then(() => {
|
||||
message(`您修改了用户${row.username}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteUserApi(row.userId).then(() => {
|
||||
message(`您删除了用户${row.username}的这条数据`, { type: "success" });
|
||||
// 刷新列表
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleResetPassword(row, request, done) {
|
||||
await updateUserPasswordApi(request).then(() => {
|
||||
message(`您修改了用户${row.username}的密码`, { type: "success" });
|
||||
// 刷新列表
|
||||
done();
|
||||
getList();
|
||||
});
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
async function openDialog(title = "新增", row?: UserRequest) {
|
||||
// TODO 如果是编辑的话 通过获取用户详情接口来获取数据
|
||||
addDialog({
|
||||
title: `${title}用户`,
|
||||
props: {
|
||||
formInline: {
|
||||
userId: row?.userId ?? 0,
|
||||
username: row?.username ?? "",
|
||||
nickname: row?.nickname ?? "",
|
||||
deptId: row?.deptId ?? undefined,
|
||||
phoneNumber: row?.phoneNumber ?? "",
|
||||
email: row?.email ?? "",
|
||||
password: title == "新增" ? "" : undefined,
|
||||
sex: row?.sex ?? undefined,
|
||||
status: row?.status ?? undefined,
|
||||
postId: row?.postId ?? undefined,
|
||||
roleId: row?.roleId ?? undefined,
|
||||
remark: row?.remark ?? ""
|
||||
},
|
||||
deptOptions: deptTreeList,
|
||||
postOptions: postOptions,
|
||||
roleOptions: roleOptions
|
||||
},
|
||||
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const formRuleRef = formRef.value.getFormRuleRef();
|
||||
const curData = options.props.formInline as UserRequest;
|
||||
|
||||
formRuleRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
handleAdd(curData, done);
|
||||
} else {
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function openResetPasswordDialog(row) {
|
||||
const passwordFormRef = ref();
|
||||
addDialog({
|
||||
title: `重置密码`,
|
||||
props: {
|
||||
formInline: {
|
||||
userId: row.userId ?? 0,
|
||||
password: ""
|
||||
}
|
||||
},
|
||||
width: "30%",
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(passwordForm, { ref: passwordFormRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const formRef = passwordFormRef.value.getFormRuleRef();
|
||||
const curData = options.props.formInline as PasswordRequest;
|
||||
|
||||
formRef.validate(valid => {
|
||||
if (valid) {
|
||||
handleResetPassword(row, curData, done);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function openUploadDialog() {
|
||||
const uploadFormRef = ref();
|
||||
addDialog({
|
||||
title: `导入用户`,
|
||||
props: {},
|
||||
width: "30%",
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(uploadForm, { ref: uploadFormRef }),
|
||||
beforeSure: done => {
|
||||
console.log("上传文件");
|
||||
uploadFormRef.value.getFormRef().submit();
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
pageLoading.value = true;
|
||||
const { data } = await getUserListApi(toRaw(searchFormParams)).finally(
|
||||
() => {
|
||||
pageLoading.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
onSearch();
|
||||
const deptResponse = await getDeptListApi();
|
||||
deptTreeList.value = await setDisabledForTreeOptions(
|
||||
handleTree(deptResponse.data),
|
||||
"status"
|
||||
);
|
||||
|
||||
const postResponse = await getPostListApi({});
|
||||
postOptions.value = postResponse.data.rows;
|
||||
|
||||
const roleResponse = await getRoleListApi({});
|
||||
roleOptions.value = roleResponse.data.rows;
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
openDialog,
|
||||
exportAllExcel,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
getList,
|
||||
handleDelete,
|
||||
openResetPasswordDialog,
|
||||
openUploadDialog
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import tree from "./tree.vue";
|
||||
import { useHook } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Password from "@iconify-icons/ri/lock-password-line";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Download from "@iconify-icons/ep/download";
|
||||
import Upload from "@iconify-icons/ep/upload";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemUser"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
exportAllExcel,
|
||||
openResetPasswordDialog,
|
||||
handleDelete,
|
||||
openDialog,
|
||||
getList,
|
||||
openUploadDialog
|
||||
} = useHook();
|
||||
|
||||
watch(
|
||||
() => searchFormParams.deptId,
|
||||
() => {
|
||||
onSearch();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
|
||||
<div class="float-right w-[82%]">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="用户编号：" prop="userId">
|
||||
<el-input
|
||||
v-model="searchFormParams.userId"
|
||||
placeholder="请输入用户编号"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称：" prop="username">
|
||||
<el-input
|
||||
v-model="searchFormParams.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="searchFormParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in useUserStoreHook().dictionaryList['common.status']"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog('新增')"
|
||||
>
|
||||
新增用户
|
||||
</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
:icon="useRenderIcon(Upload)"
|
||||
@click="openUploadDialog"
|
||||
>
|
||||
导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
:icon="useRenderIcon(Download)"
|
||||
@click="exportAllExcel"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
adaptive
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getList"
|
||||
@page-current-change="getList"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="openDialog('编辑', row)"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(More)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Password)"
|
||||
@click="openResetPasswordDialog(row)"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./rule";
|
||||
import { PasswordRequest } from "@/api/system/user";
|
||||
|
||||
interface FormProps {
|
||||
formInline: PasswordRequest;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
userId: 0,
|
||||
password: ""
|
||||
})
|
||||
});
|
||||
|
||||
const newFormInline = ref(props.formInline);
|
||||
|
||||
const formRuleRef = ref();
|
||||
|
||||
function getFormRuleRef() {
|
||||
return formRuleRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getFormRuleRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRuleRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="24">
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input
|
||||
v-model="newFormInline.password"
|
||||
clearable
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import resetPwd from "./resetPwd.vue";
|
||||
import userInfo from "./userInfo.vue";
|
||||
import userAvatar from "./userAvatar.vue";
|
||||
// import userAvatar from "./userAvatar";
|
||||
// import { getUserProfile } from '@/api/system/user';
|
||||
// import * as userApi from "@/api/system/userApi";
|
||||
import { reactive, ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
const activeTab = ref("userinfo");
|
||||
const state = reactive({
|
||||
user: {},
|
||||
roleName: {},
|
||||
postName: {}
|
||||
});
|
||||
|
||||
/** 用户名 */
|
||||
const currentUserInfo = useUserStoreHook()?.currentUserInfo;
|
||||
|
||||
state.user = currentUserInfo;
|
||||
console.log(currentUserInfo);
|
||||
|
||||
function getUser() {
|
||||
// userApi.getUserProfile().then(response => {
|
||||
// state.user = response.user;
|
||||
// state.roleName = response.roleName;
|
||||
// state.postName = response.postName;
|
||||
// });
|
||||
}
|
||||
|
||||
getUser();
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<template v-slot:header>
|
||||
<div class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<userAvatar :user="state.user" />
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-descriptions :column="1">
|
||||
<el-descriptions-item label="用户名称">{{
|
||||
currentUserInfo.username
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号码">{{
|
||||
currentUserInfo.phoneNumber
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户邮箱">{{
|
||||
currentUserInfo.email
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="部门 / 职位">
|
||||
{{ currentUserInfo.deptName }} /
|
||||
{{ currentUserInfo.postName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="角色">
|
||||
{{ currentUserInfo.roleName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建日期">
|
||||
{{
|
||||
dayjs(currentUserInfo.createTime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
)
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
<div class="clearfix">
|
||||
<span>基本资料</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基本资料" name="userinfo">
|
||||
<userInfo :user="state.user" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码" name="resetPwd">
|
||||
<resetPwd :user="state.user" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, toRaw } from "vue";
|
||||
import {
|
||||
updateCurrentUserPasswordApi,
|
||||
ResetPasswordRequest
|
||||
} from "@/api/system/user";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
// const { proxy } = getCurrentInstance();
|
||||
|
||||
const user = reactive<ResetPasswordRequest>({
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
});
|
||||
|
||||
const pwdRef = ref<FormInstance>();
|
||||
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (user.newPassword !== value) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rules = ref({
|
||||
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
|
||||
newPassword: [
|
||||
{ required: true, message: "新密码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern:
|
||||
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/,
|
||||
message: "新密码格式应为8-18位数字、字母、符号的任意两种组合",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: "确认密码不能为空", trigger: "blur" },
|
||||
{ required: true, validator: equalToPassword, trigger: "blur" }
|
||||
]
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
function submit() {
|
||||
console.log(user);
|
||||
pwdRef.value.validate(valid => {
|
||||
if (valid) {
|
||||
updateCurrentUserPasswordApi(toRaw(user)).then(() => {
|
||||
message("修改成功", {
|
||||
type: "success"
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input
|
||||
v-model="user.oldPassword"
|
||||
placeholder="请输入旧密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="user.newPassword"
|
||||
placeholder="请输入新密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="user.confirmPassword"
|
||||
placeholder="请确认密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
import { ref } from "vue";
|
||||
import { uploadUserAvatarApi } from "@/api/system/user";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
// import * as userApi from "@/api/system/userApi";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
const currentUser = useUserStoreHook().currentUserInfo;
|
||||
|
||||
const infos = ref();
|
||||
const imgBlob = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
|
||||
cropperImg.value = import.meta.env.VITE_APP_BASE_API + currentUser.avatar;
|
||||
|
||||
function onCropper({ base64, blob, info }) {
|
||||
console.log(blob);
|
||||
infos.value = info;
|
||||
imgBlob.value = blob;
|
||||
cropperImg.value = base64;
|
||||
}
|
||||
|
||||
const open = ref(false);
|
||||
const visible = ref(false);
|
||||
|
||||
// 图片裁剪数据
|
||||
// const options = reactive({
|
||||
// img: avatarUrl, // 裁剪图片的地址
|
||||
// autoCrop: true, // 是否默认生成截图框
|
||||
// autoCropWidth: 200, // 默认生成截图框宽度
|
||||
// autoCropHeight: 200, // 默认生成截图框高度
|
||||
// fixedBox: true, // 固定截图框大小 不允许改变
|
||||
// previews: {} // 预览数据
|
||||
// });
|
||||
|
||||
/** 上传图片 */
|
||||
function uploadImg() {
|
||||
const formData = new FormData();
|
||||
formData.append("avatarfile", imgBlob.value);
|
||||
uploadUserAvatarApi(formData).then(() => {
|
||||
open.value = false;
|
||||
message("上传图片成功", {
|
||||
type: "success"
|
||||
});
|
||||
visible.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="user-info-head" @click="open = true">
|
||||
<el-avatar :size="120" :src="cropperImg" />
|
||||
</div>
|
||||
<el-dialog
|
||||
title="修改头像"
|
||||
v-model="open"
|
||||
width="900px"
|
||||
append-to-body
|
||||
@opened="visible = true"
|
||||
@close="visible = false"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 右键下面左侧裁剪区开启功能菜单 </span>
|
||||
</div>
|
||||
</template>
|
||||
<el-popover
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="300px"
|
||||
:teleported="false"
|
||||
>
|
||||
<template #reference>
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
class="w-[500px]"
|
||||
:src="cropperImg"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-card>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button @click="open = false">取消</el-button>
|
||||
<el-button type="primary" @click="uploadImg">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.user-info-head:hover::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
line-height: 110px;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
content: "+";
|
||||
background: rgb(0 0 0 / 50%);
|
||||
border-radius: 50%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
// import { updateUserProfile } from '@/api/system/userApi';
|
||||
// import * as userApi from "@/api/system/userApi";
|
||||
import { ref, reactive } from "vue";
|
||||
import { updateUserProfileApi, UserProfileRequest } from "@/api/system/user";
|
||||
import { message } from "@/utils/message";
|
||||
import { FormInstance } from "element-plus";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemUserProfile"
|
||||
});
|
||||
|
||||
const userRef = ref<FormInstance>();
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
|
||||
const userModel = reactive<UserProfileRequest>({
|
||||
nickname: props.user.nickname,
|
||||
phoneNumber: props.user.phoneNumber,
|
||||
email: props.user.email,
|
||||
sex: props.user.sex
|
||||
});
|
||||
|
||||
console.log(userModel);
|
||||
console.log(props.user);
|
||||
|
||||
// const { proxy } = getCurrentInstance();
|
||||
|
||||
const rules = ref({
|
||||
nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
],
|
||||
phoneNumber: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
function submit() {
|
||||
console.log(userRef.value);
|
||||
userRef.value.validate(valid => {
|
||||
if (valid) {
|
||||
updateUserProfileApi(userModel).then(() => {
|
||||
message("修改成功", {
|
||||
type: "success"
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="userRef" :model="userModel" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="userModel.nickname" maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码">
|
||||
<el-input v-model="userModel.phoneNumber" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="userModel.email" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="userModel.sex">
|
||||
<el-radio :label="0">男</el-radio>
|
||||
<el-radio :label="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 163 B |
@@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 166 B |
@@ -0,0 +1,212 @@
|
||||
<script setup lang="ts">
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getDeptListApi } from "@/api/system/dept";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import ExpandIcon from "./svg/expand.svg?component";
|
||||
import UnExpandIcon from "./svg/unexpand.svg?component";
|
||||
|
||||
// TODO 这个类可以抽取作为SideBar TreeSelect组件
|
||||
interface Tree {
|
||||
id: number;
|
||||
deptName: string;
|
||||
highlight?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const treeRef = ref();
|
||||
const treeData = ref([]);
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
};
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
return data.deptName.includes(value);
|
||||
};
|
||||
|
||||
function nodeClick(value) {
|
||||
console.log(value);
|
||||
const nodeId = value.$treeNodeId;
|
||||
console.log(nodeId);
|
||||
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
|
||||
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: false
|
||||
})
|
||||
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: true
|
||||
});
|
||||
Object.values(highlightMap.value).forEach((v: Tree) => {
|
||||
if (v.id !== nodeId) {
|
||||
v.highlight = false;
|
||||
}
|
||||
});
|
||||
|
||||
proxy.$emit("update:modelValue", value.id);
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(status) {
|
||||
isExpand.value = status;
|
||||
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status;
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置状态（选中状态、搜索框值、树初始化） */
|
||||
function onReset() {
|
||||
highlightMap.value = {};
|
||||
searchValue.value = "";
|
||||
toggleRowExpansionAll(true);
|
||||
}
|
||||
|
||||
watch(searchValue, val => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getDeptListApi();
|
||||
treeData.value = handleTree(data);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
:style="{ minHeight: `calc(100vh - 133px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[56px]">
|
||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||
部门列表
|
||||
</p>
|
||||
<el-input
|
||||
style="flex: 2"
|
||||
size="default"
|
||||
v-model="searchValue"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
:icon="Search"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<IconifyIconOffline
|
||||
class="w-[38px] cursor-pointer"
|
||||
width="20px"
|
||||
:icon="More2Fill"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
@click="onReset"
|
||||
>
|
||||
重置状态
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
size="default"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span
|
||||
:class="[
|
||||
'text-base',
|
||||
'flex',
|
||||
'items-center',
|
||||
'tracking-wider',
|
||||
'gap-2',
|
||||
'select-none',
|
||||
searchValue.trim().length > 0 &&
|
||||
node.label.includes(searchValue) &&
|
||||
'text-red-500',
|
||||
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
|
||||
]"
|
||||
:style="{
|
||||
background: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary-light-7)'
|
||||
: 'transparent'
|
||||
}"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.parentId === 0
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { http } from "@/utils/http";
|
||||
import { message } from "@/utils/message";
|
||||
import { useHook } from "./hook";
|
||||
|
||||
const { getList } = useHook();
|
||||
|
||||
/** * 用户导入参数 */
|
||||
const upload = reactive({
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
loading: false,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: `Bearer ${getToken().token}` },
|
||||
// 上传的地址
|
||||
url: `${import.meta.env.VITE_APP_BASE_API}/system/users/excel`
|
||||
});
|
||||
|
||||
/** 下载模板操作 */
|
||||
function downloadTemplate() {
|
||||
http.download(
|
||||
"system/users/excelTemplate",
|
||||
`user_template_${new Date().getTime()}.xls`
|
||||
);
|
||||
}
|
||||
|
||||
/** 文件上传中处理 */
|
||||
const handleFileUploadProgress = () => {
|
||||
upload.loading = true;
|
||||
};
|
||||
|
||||
/** 文件上传成功处理 */
|
||||
const handleFileSuccess = () => {
|
||||
upload.open = false;
|
||||
upload.loading = false;
|
||||
formRef.value.clearFiles();
|
||||
message("导入成功", { type: "success" });
|
||||
getList();
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
function getFormRef() {
|
||||
return formRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getFormRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-upload
|
||||
ref="formRef"
|
||||
:limit="1"
|
||||
accept=".xlsx,.xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.loading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
@click="downloadTemplate"
|
||||
>下载模板</el-link
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</template>
|
||||
@@ -0,0 +1,234 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox, Sort } from "element-plus";
|
||||
import {
|
||||
getLoginLogListApi,
|
||||
deleteLoginLogApi,
|
||||
exportLoginLogExcelApi,
|
||||
LoginLogQuery
|
||||
} from "@/api/system/log";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
|
||||
const loginLogStatusMap =
|
||||
useUserStoreHook().dictionaryMap["sysLoginLog.status"];
|
||||
|
||||
export function useLoginLogHook() {
|
||||
const defaultSort: Sort = {
|
||||
prop: "loginTime",
|
||||
order: "descending"
|
||||
};
|
||||
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = ref([]);
|
||||
|
||||
const searchFormParams = reactive<LoginLogQuery>({
|
||||
ipAddress: undefined,
|
||||
username: undefined,
|
||||
status: undefined,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
timeRangeColumn: defaultSort.prop
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "日志编号",
|
||||
prop: "logId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 120,
|
||||
sortable: "custom"
|
||||
},
|
||||
{
|
||||
label: "IP地址",
|
||||
prop: "ipAddress",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "loginLocation",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "operationSystem",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "浏览器",
|
||||
prop: "browser",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 120,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={loginLogStatusMap[row.status].cssTag}
|
||||
effect="plain"
|
||||
>
|
||||
{loginLogStatusMap[row.status].label}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态名",
|
||||
prop: "statusStr",
|
||||
minWidth: 120,
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
minWidth: 160,
|
||||
prop: "loginTime",
|
||||
sortable: "custom",
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
getLoginLogList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
// 清空排序
|
||||
searchFormParams.orderColumn = undefined;
|
||||
searchFormParams.orderDirection = undefined;
|
||||
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
|
||||
// Form组件的resetFields方法无法清除datepicker里面的数据。
|
||||
timeRange.value = [];
|
||||
searchFormParams.beginTime = undefined;
|
||||
searchFormParams.endTime = undefined;
|
||||
tableRef.getTableRef().clearSort();
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getLoginLogList(sort: Sort = defaultSort) {
|
||||
pageLoading.value = true;
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
|
||||
() => {
|
||||
pageLoading.value = false;
|
||||
}
|
||||
);
|
||||
dataList.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
}
|
||||
|
||||
async function exportAllExcel(sort: Sort = defaultSort) {
|
||||
if (sort != null) {
|
||||
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||
}
|
||||
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||
|
||||
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteLoginLogApi([row.logId]).then(() => {
|
||||
message(`您删除了操作编号为${row.logId}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getLoginLogList();
|
||||
});
|
||||
}
|
||||
|
||||
async function handleBulkDelete(tableRef) {
|
||||
if (multipleSelection.value.length === 0) {
|
||||
message("请选择需要删除的数据", { type: "warning" });
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await deleteLoginLogApi(multipleSelection.value).then(() => {
|
||||
message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
getLoginLogList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
message("取消删除", {
|
||||
type: "info"
|
||||
});
|
||||
// 清空checkbox选择的数据
|
||||
tableRef.getTableRef().clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getLoginLogList();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
defaultSort,
|
||||
timeRange,
|
||||
multipleSelection,
|
||||
onSearch,
|
||||
exportAllExcel,
|
||||
// exportExcel,
|
||||
getLoginLogList,
|
||||
resetForm,
|
||||
handleDelete,
|
||||
handleBulkDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Agileboot前端预览</h1>
|
||||
</template>
|
||||
Reference in New Issue
Block a user