mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 17:37:24 +08:00
Merge branch 'main' of github.com:pure-admin/vue-pure-admin into gitee
This commit is contained in:
xiaoxian521
commit
b1ada2f1ae
@ -40,7 +40,7 @@ menus:
|
||||
hsmessage: 消息提示组件
|
||||
hsvideo: 视频组件
|
||||
hssegmented: 分段控制器组件
|
||||
hswaterfall: 瀑布流组件
|
||||
hswaterfall: 瀑布流无限滚动组件
|
||||
hsmap: 地图组件
|
||||
hsdraggable: 拖拽组件
|
||||
hssplitPane: 切割面板
|
||||
|
||||
223
mock/system.ts
223
mock/system.ts
@ -1,9 +1,9 @@
|
||||
import { MockMethod } from "vite-plugin-mock";
|
||||
|
||||
export default [
|
||||
// 角色
|
||||
// 用户
|
||||
{
|
||||
url: "/role",
|
||||
url: "/user",
|
||||
method: "post",
|
||||
response: () => {
|
||||
return {
|
||||
@ -11,58 +11,114 @@ export default [
|
||||
data: {
|
||||
list: [
|
||||
{
|
||||
createTime: 1605456000000,
|
||||
updateTime: 1645477701000,
|
||||
creator: "admin",
|
||||
updater: "",
|
||||
deleted: false,
|
||||
tenantId: 1,
|
||||
username: "admin",
|
||||
nickname: "admin",
|
||||
remark: "管理员",
|
||||
deptId: 103,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 1,
|
||||
name: "超级管理员",
|
||||
code: "super_admin",
|
||||
sort: 1,
|
||||
status: 0,
|
||||
type: 1,
|
||||
remark: "超级管理员",
|
||||
dataScope: 1,
|
||||
dataScopeDeptIds: null
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 103,
|
||||
name: "研发部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "pure",
|
||||
nickname: "pure",
|
||||
remark: "不要吓我",
|
||||
deptId: 104,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 100,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
updateTime: 1645477700000,
|
||||
creator: "admin",
|
||||
updater: "",
|
||||
deleted: false,
|
||||
tenantId: 1,
|
||||
id: 2,
|
||||
name: "普通角色",
|
||||
code: "common",
|
||||
sort: 2,
|
||||
status: 0,
|
||||
type: 1,
|
||||
remark: "普通角色",
|
||||
dataScope: 2,
|
||||
dataScopeDeptIds: null
|
||||
dept: {
|
||||
id: 104,
|
||||
name: "市场部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小姐姐",
|
||||
nickname: "girl",
|
||||
remark: null,
|
||||
deptId: 106,
|
||||
postIds: null,
|
||||
mobile: "15888888888",
|
||||
sex: 1,
|
||||
id: 103,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
updateTime: 1647698441000,
|
||||
creator: "",
|
||||
updater: "1",
|
||||
deleted: false,
|
||||
tenantId: 1,
|
||||
id: 101,
|
||||
name: "测试账号",
|
||||
code: "test",
|
||||
sort: 0,
|
||||
dept: {
|
||||
id: 106,
|
||||
name: "财务部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小哥哥",
|
||||
nickname: "boy",
|
||||
remark: null,
|
||||
deptId: 107,
|
||||
postIds: [],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 104,
|
||||
status: 0,
|
||||
type: 2,
|
||||
remark: "132",
|
||||
dataScope: 1,
|
||||
dataScopeDeptIds: []
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 107,
|
||||
name: "运维部门"
|
||||
}
|
||||
}
|
||||
],
|
||||
total: 3
|
||||
total: 4
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// 角色
|
||||
{
|
||||
url: "/role",
|
||||
method: "post",
|
||||
response: ({ body }) => {
|
||||
let list = [
|
||||
{
|
||||
createTime: 1605456000000, // 时间戳（毫秒ms）
|
||||
updateTime: 1684512000000,
|
||||
creator: "admin",
|
||||
id: 1,
|
||||
name: "超级管理员",
|
||||
code: "admin",
|
||||
status: 1, // 状态 1 启用 0 停用
|
||||
remark: "超级管理员拥有最高权限"
|
||||
},
|
||||
{
|
||||
createTime: 1605456000000,
|
||||
updateTime: 1684512000000,
|
||||
creator: "admin",
|
||||
id: 2,
|
||||
name: "普通角色",
|
||||
code: "common",
|
||||
status: 1,
|
||||
remark: "普通角色拥有部分权限"
|
||||
}
|
||||
];
|
||||
list = list.filter(item => item.name.includes(body?.name));
|
||||
list = list.filter(item =>
|
||||
String(item.status).includes(String(body?.status))
|
||||
);
|
||||
if (body.code) list = list.filter(item => item.code === body.code);
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
list,
|
||||
total: list.length, // 总条目数
|
||||
pageSize: 10, // 每页显示条目个数
|
||||
currentPage: 1 // 当前页数
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -83,7 +139,7 @@ export default [
|
||||
phone: "15888888888",
|
||||
principal: "@cname()",
|
||||
email: "@email",
|
||||
status: 1,
|
||||
status: 1, // 状态 1 启用 0 停用
|
||||
type: 1, // 1 公司 2 分公司 3 部门
|
||||
createTime: 1605456000000,
|
||||
remark: "@cparagraph(1, 3)"
|
||||
@ -208,84 +264,5 @@ export default [
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
// 用户
|
||||
{
|
||||
url: "/user",
|
||||
method: "post",
|
||||
response: () => {
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
list: [
|
||||
{
|
||||
username: "admin",
|
||||
nickname: "admin",
|
||||
remark: "管理员",
|
||||
deptId: 103,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 1,
|
||||
status: 0,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 103,
|
||||
name: "研发部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "pure",
|
||||
nickname: "pure",
|
||||
remark: "不要吓我",
|
||||
deptId: 104,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 100,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 104,
|
||||
name: "市场部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小姐姐",
|
||||
nickname: "girl",
|
||||
remark: null,
|
||||
deptId: 106,
|
||||
postIds: null,
|
||||
mobile: "15888888888",
|
||||
sex: 1,
|
||||
id: 103,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 106,
|
||||
name: "财务部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小哥哥",
|
||||
nickname: "boy",
|
||||
remark: null,
|
||||
deptId: 107,
|
||||
postIds: [],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 104,
|
||||
status: 0,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 107,
|
||||
name: "运维部门"
|
||||
}
|
||||
}
|
||||
],
|
||||
total: 4
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
] as MockMethod[];
|
||||
|
||||
26
package.json
26
package.json
@ -30,8 +30,8 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@howdyjs/mouse-menu": "^2.0.7",
|
||||
"@logicflow/core": "^1.2.6",
|
||||
"@logicflow/extension": "^1.2.6",
|
||||
"@logicflow/core": "^1.2.7",
|
||||
"@logicflow/extension": "^1.2.7",
|
||||
"@pureadmin/descriptions": "^1.1.1",
|
||||
"@pureadmin/table": "^2.1.0",
|
||||
"@pureadmin/utils": "^1.8.9",
|
||||
@ -56,20 +56,21 @@
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.0.36",
|
||||
"pinia": "^2.1.1",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.1",
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"swiper": "^9.3.1",
|
||||
"swiper": "^9.3.2",
|
||||
"typeit": "^8.7.1",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"vue": "^3.3.2",
|
||||
"v3-infinite-loading": "^1.2.2",
|
||||
"vue": "^3.3.4",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-json-pretty": "^2.2.4",
|
||||
"vue-pdf-embed": "^1.1.6",
|
||||
"vue-router": "^4.2.0",
|
||||
"vue-types": "^5.0.2",
|
||||
"vue-types": "^5.0.3",
|
||||
"vue-virtual-scroller": "2.0.0-beta.7",
|
||||
"vue-waterfall-plugin-next": "^2.2.1",
|
||||
"vue3-danmaku": "1.4.0-beta.1",
|
||||
@ -94,8 +95,8 @@
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/sortablejs": "^1.15.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||
"@typescript-eslint/parser": "^5.59.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
||||
"@typescript-eslint/parser": "^5.59.6",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
@ -105,7 +106,7 @@
|
||||
"cssnano": "^6.0.1",
|
||||
"eslint": "^8.40.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.12.0",
|
||||
"eslint-plugin-vue": "^9.13.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.2",
|
||||
"picocolors": "^1.0.0",
|
||||
@ -119,7 +120,7 @@
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"sass": "^1.62.1",
|
||||
"sass-loader": "^13.2.2",
|
||||
"stylelint": "^15.6.1",
|
||||
"stylelint": "^15.6.2",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^4.0.0",
|
||||
"stylelint-config-recommended": "^12.0.0",
|
||||
@ -132,9 +133,9 @@
|
||||
"stylelint-scss": "^5.0.0",
|
||||
"svgo": "^3.0.2",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"terser": "^5.17.3",
|
||||
"terser": "^5.17.4",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.5",
|
||||
"vite": "^4.3.7",
|
||||
"vite-plugin-cdn-import": "^0.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
@ -153,6 +154,7 @@
|
||||
},
|
||||
"allowedDeprecatedVersions": {
|
||||
"sourcemap-codec": "*",
|
||||
"w3c-hr-time": "*",
|
||||
"stable": "*"
|
||||
}
|
||||
},
|
||||
|
||||
735
pnpm-lock.yaml
generated
735
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -5,8 +5,12 @@ type Result = {
|
||||
data?: {
|
||||
/** 列表数据 */
|
||||
list: Array<any>;
|
||||
/** 总数 */
|
||||
/** 总条目数 */
|
||||
total?: number;
|
||||
/** 每页显示条目个数 */
|
||||
pageSize?: number;
|
||||
/** 当前页数 */
|
||||
currentPage?: number;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -228,7 +228,7 @@ watch(
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
position: static;
|
||||
margin: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
:deep(.el-tabs__content) {
|
||||
|
||||
@ -200,7 +200,7 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
|
||||
<div {...attrs} class="w-[99/100] mt-4 px-2 pb-2 bg-bg_color">
|
||||
<div class="flex justify-between w-full h-[60px] p-4">
|
||||
<p class="font-bold truncate">{props.title}</p>
|
||||
<div class="flex items-center justify-around">
|
||||
@ -245,6 +245,7 @@ export default defineComponent({
|
||||
|
||||
<el-popover
|
||||
v-slots={reference}
|
||||
placement="bottom-start"
|
||||
popper-style={{ padding: 0 }}
|
||||
width="160"
|
||||
trigger="click"
|
||||
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
children: [
|
||||
{
|
||||
path: "/components/dialog",
|
||||
name: "Dialog",
|
||||
name: "DialogPage",
|
||||
component: () => import("@/views/components/dialog/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsdialog"),
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
{
|
||||
path: "/components/video",
|
||||
name: "Video",
|
||||
name: "VideoPage",
|
||||
component: () => import("@/views/components/video/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsvideo")
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
},
|
||||
{
|
||||
path: "/components/map",
|
||||
name: "Map",
|
||||
name: "MapPage",
|
||||
component: () => import("@/views/components/map/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsmap"),
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
},
|
||||
{
|
||||
path: "/components/button",
|
||||
name: "Button",
|
||||
name: "ButtonPage",
|
||||
component: () => import("@/views/components/button/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsbutton")
|
||||
|
||||
@ -63,7 +63,7 @@ class PureHttp {
|
||||
async (config: PureHttpRequestConfig): Promise<any> => {
|
||||
// 开启进度条动画
|
||||
NProgress.start();
|
||||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
||||
// 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
|
||||
if (typeof config.beforeRequestCallback === "function") {
|
||||
config.beforeRequestCallback(config);
|
||||
return config;
|
||||
@ -123,7 +123,7 @@ class PureHttp {
|
||||
const $config = response.config;
|
||||
// 关闭进度条动画
|
||||
NProgress.done();
|
||||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
||||
// 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
|
||||
if (typeof $config.beforeResponseCallback === "function") {
|
||||
$config.beforeResponseCallback(response);
|
||||
return response.data;
|
||||
@ -159,7 +159,7 @@ class PureHttp {
|
||||
...axiosConfig
|
||||
} as PureHttpRequestConfig;
|
||||
|
||||
// 单独处理自定义请求/响应回掉
|
||||
// 单独处理自定义请求/响应回调
|
||||
return new Promise((resolve, reject) => {
|
||||
PureHttp.axiosInstance
|
||||
.request(config)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Button"
|
||||
name: "ButtonPage"
|
||||
});
|
||||
|
||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||
|
||||
@ -7,7 +7,7 @@ import forms, { type FormProps } from "./form.vue";
|
||||
import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
|
||||
|
||||
defineOptions({
|
||||
name: "Dialog"
|
||||
name: "DialogPage"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { Amap } from "@/components/ReMap";
|
||||
|
||||
defineOptions({
|
||||
name: "Map"
|
||||
name: "MapPage"
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import Player from "xgplayer";
|
||||
import "xgplayer/dist/index.min.css";
|
||||
|
||||
defineOptions({
|
||||
name: "Video"
|
||||
name: "VideoPage"
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
import { getList } from "./api";
|
||||
import error from "./error.png";
|
||||
import loading from "./loading.png";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElLoading } from "element-plus";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
import InfiniteLoading from "v3-infinite-loading";
|
||||
import { onMounted, reactive, ref, nextTick } from "vue";
|
||||
import backTop from "@/assets/svg/back_top.svg?component";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
|
||||
@ -31,8 +33,8 @@ const options = reactive({
|
||||
rowPerView: 2
|
||||
}
|
||||
},
|
||||
// 动画效果
|
||||
animationEffect: "animate__fadeInUp",
|
||||
// 动画效果 https://animate.style/
|
||||
animationEffect: "animate__zoomInUp",
|
||||
// 动画时间
|
||||
animationDuration: 1000,
|
||||
// 动画延迟
|
||||
@ -53,15 +55,26 @@ const options = reactive({
|
||||
const page = ref(1);
|
||||
const list = ref([]);
|
||||
const pageSize = ref();
|
||||
const loadingInstance = ref();
|
||||
|
||||
/** 加载更多 */
|
||||
function handleLoadMore() {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
target: ".content",
|
||||
background: "transparent",
|
||||
text: "加载中"
|
||||
});
|
||||
getList({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value
|
||||
}).then(res => {
|
||||
list.value.push(...res);
|
||||
page.value += 1;
|
||||
setTimeout(() => {
|
||||
list.value.push(...res);
|
||||
page.value += 1;
|
||||
nextTick(() => {
|
||||
loadingInstance.value.close();
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
@ -79,73 +92,60 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" class="!h-[85vh]">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
瀑布流组件，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/heikaimu/vue3-waterfall-plugin"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue-waterfall-plugin-next
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar height="78vh" class="content">
|
||||
<Waterfall :list="list" v-bind="options">
|
||||
<template #item="{ item, url, index }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
|
||||
{{ item.name }}
|
||||
</h4>
|
||||
<div
|
||||
class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="text-gray-50">$ {{ item.price }}</div>
|
||||
<div>
|
||||
<button
|
||||
class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
|
||||
@click.stop="handleDelete(item, index)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
<el-scrollbar height="87vh" class="content">
|
||||
<Waterfall :list="list" v-bind="options">
|
||||
<template #item="{ item, url, index }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
|
||||
{{ item.name }}
|
||||
</h4>
|
||||
<div
|
||||
class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="text-gray-50">$ {{ item.price }}</div>
|
||||
<div>
|
||||
<button
|
||||
class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
|
||||
@click.stop="handleDelete(item, index)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<div class="flex justify-center py-10">
|
||||
<!-- <div class="flex justify-center py-10">
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
|
||||
@click="handleLoadMore"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
:right="35"
|
||||
:visibility-height="400"
|
||||
target=".content .el-scrollbar__wrap"
|
||||
>
|
||||
<backTop />
|
||||
</el-backtop>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
:right="35"
|
||||
:visibility-height="400"
|
||||
target=".content .el-scrollbar__wrap"
|
||||
>
|
||||
<backTop />
|
||||
</el-backtop>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { formRules } from "./rule";
|
||||
import { FormProps } from "./types";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { FormProps } from "./utils/types";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useDept } from "./hook";
|
||||
import { useDept } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
@ -35,7 +35,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="name">
|
||||
<el-input
|
||||
@ -138,3 +138,11 @@ const {
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "./form.vue";
|
||||
import editForm from "../form.vue";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
import { message } from "@/utils/message";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { type FormItemProps } from "./types";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h } from "vue";
|
||||
import { type FormItemProps } from "../utils/types";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
|
||||
export function useDept() {
|
||||
55
src/views/system/role/form.vue
Normal file
55
src/views/system/role/form.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { FormProps } from "./utils/types";
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
name: "",
|
||||
code: "",
|
||||
remark: ""
|
||||
})
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const newFormInline = ref(props.formInline);
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input
|
||||
v-model="newFormInline.name"
|
||||
clearable
|
||||
placeholder="请输入角色名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色标识" prop="code">
|
||||
<el-input
|
||||
v-model="newFormInline.code"
|
||||
clearable
|
||||
placeholder="请输入角色标识"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
placeholder="请输入备注信息"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { useRole } 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 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";
|
||||
@ -24,11 +24,13 @@ const {
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
// buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
openDialog,
|
||||
handleMenu,
|
||||
handleDelete,
|
||||
// handleDatabase,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
@ -41,7 +43,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="角色名称：" prop="name">
|
||||
<el-input
|
||||
@ -66,8 +68,8 @@ const {
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
<el-option label="已启用" value="1" />
|
||||
<el-option label="已停用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -85,9 +87,17 @@ const {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
|
||||
<PureTableBar
|
||||
title="角色列表（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增角色
|
||||
</el-button>
|
||||
</template>
|
||||
@ -118,11 +128,24 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="handleUpdate(row)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="handleMenu"
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除角色名称为${row.name}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
@ -130,20 +153,18 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<!-- <el-dropdown>
|
||||
<el-button
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(More)"
|
||||
@click="handleUpdate(row)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@ -154,6 +175,7 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="handleMenu"
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
@ -165,13 +187,14 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Database)"
|
||||
@click="handleDatabase"
|
||||
>
|
||||
数据权限
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
@ -183,4 +206,10 @@ const {
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { getRoleList } from "@/api/system";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { type FormItemProps } from "../utils/types";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, computed, onMounted } from "vue";
|
||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||
|
||||
export function useRole() {
|
||||
const form = reactive({
|
||||
@ -11,9 +15,11 @@ export function useRole() {
|
||||
code: "",
|
||||
status: ""
|
||||
});
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
@ -21,19 +27,6 @@ export function useRole() {
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
// {
|
||||
// label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||
// type: "selection",
|
||||
// width: 55,
|
||||
// align: "left",
|
||||
// fixed: "left"
|
||||
// },
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 70,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
label: "角色编号",
|
||||
prop: "id",
|
||||
@ -49,25 +42,6 @@ export function useRole() {
|
||||
prop: "code",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "角色类型",
|
||||
prop: "type",
|
||||
minWidth: 150,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.type === 1 ? "danger" : ""}
|
||||
effect="plain"
|
||||
>
|
||||
{row.type === 1 ? "内置" : "自定义"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "显示顺序",
|
||||
prop: "sort",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
minWidth: 130,
|
||||
@ -78,13 +52,19 @@ export function useRole() {
|
||||
v-model={scope.row.status}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
active-text="已开启"
|
||||
inactive-text="已关闭"
|
||||
active-text="已启用"
|
||||
inactive-text="已停用"
|
||||
inline-prompt
|
||||
style={switchStyle.value}
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 180,
|
||||
@ -95,19 +75,19 @@ export function useRole() {
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 180,
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
// const buttonClass = computed(() => {
|
||||
// return [
|
||||
// "!h-[20px]",
|
||||
// "reset-margin",
|
||||
// "!text-gray-500",
|
||||
// "dark:!text-white",
|
||||
// "dark:hover:!text-primary"
|
||||
// ];
|
||||
// });
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
@ -115,7 +95,7 @@ export function useRole() {
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.name
|
||||
}</strong>角色吗?`,
|
||||
}</strong>吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
@ -141,7 +121,7 @@ export function useRole() {
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message("已成功修改角色状态", {
|
||||
message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
|
||||
type: "success"
|
||||
});
|
||||
}, 300);
|
||||
@ -151,12 +131,9 @@ export function useRole() {
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
@ -173,9 +150,12 @@ export function useRole() {
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getRoleList();
|
||||
const { data } = await getRoleList(toRaw(form));
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
pagination.pageSize = data.pageSize;
|
||||
pagination.currentPage = data.currentPage;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
@ -187,6 +167,56 @@ export function useRole() {
|
||||
onSearch();
|
||||
};
|
||||
|
||||
function openDialog(title = "新增", row?: FormItemProps) {
|
||||
addDialog({
|
||||
title: `${title}角色`,
|
||||
props: {
|
||||
formInline: {
|
||||
name: row?.name ?? "",
|
||||
code: row?.code ?? "",
|
||||
remark: row?.remark ?? ""
|
||||
}
|
||||
},
|
||||
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 FormItemProps;
|
||||
function chores() {
|
||||
message(`您${title}了角色名称为${curData.name}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
console.log("curData", curData);
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
chores();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 菜单权限 */
|
||||
function handleMenu() {
|
||||
message("等菜单管理页面开发后完善");
|
||||
}
|
||||
|
||||
/** 数据权限 可自行开发 */
|
||||
// function handleDatabase() {}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
@ -197,11 +227,13 @@ export function useRole() {
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
// buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
openDialog,
|
||||
handleMenu,
|
||||
handleDelete,
|
||||
// handleDatabase,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
8
src/views/system/role/utils/rule.ts
Normal file
8
src/views/system/role/utils/rule.ts
Normal file
@ -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" }]
|
||||
});
|
||||
15
src/views/system/role/utils/types.ts
Normal file
15
src/views/system/role/utils/types.ts
Normal file
@ -0,0 +1,15 @@
|
||||
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
|
||||
|
||||
interface FormItemProps {
|
||||
/** 角色名称 */
|
||||
name: string;
|
||||
/** 角色编号 */
|
||||
code: string;
|
||||
/** 备注 */
|
||||
remark: string;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
|
||||
export type { FormItemProps, FormProps };
|
||||
@ -44,7 +44,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="用户名称：" prop="username">
|
||||
<el-input
|
||||
@ -186,4 +186,10 @@ const {
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user