mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
feat: add EpTableProBar component
This commit is contained in:
xiaoxian521
parent
56f9dc85e7
commit
b23066c52b
@ -60,7 +60,7 @@ export default [
|
||||
code: 0,
|
||||
data: [
|
||||
{
|
||||
name: "pure-admin",
|
||||
name: "杭州总公司",
|
||||
parentId: 0,
|
||||
sort: 0,
|
||||
leaderUserId: 1,
|
||||
@ -72,7 +72,7 @@ export default [
|
||||
remark: "备注、备注、备注、备注、备注、备注、备注"
|
||||
},
|
||||
{
|
||||
name: "深圳总公司",
|
||||
name: "郑州分公司",
|
||||
parentId: 100,
|
||||
sort: 1,
|
||||
leaderUserId: 104,
|
||||
@ -108,7 +108,7 @@ export default [
|
||||
remark: "备注、备注、备注、备注、备注、备注、备注"
|
||||
},
|
||||
{
|
||||
name: "长沙分公司",
|
||||
name: "深圳分公司",
|
||||
parentId: 100,
|
||||
sort: 2,
|
||||
leaderUserId: null,
|
||||
|
||||
@ -75,6 +75,7 @@
|
||||
"@iconify-icons/fa": "^1.2.2",
|
||||
"@iconify-icons/fa-solid": "^1.2.2",
|
||||
"@iconify-icons/fluent": "^1.2.5",
|
||||
"@iconify-icons/mdi": "^1.2.8",
|
||||
"@iconify-icons/ri": "^1.2.1",
|
||||
"@iconify-icons/uil": "^1.2.1",
|
||||
"@iconify/vue": "^3.2.1",
|
||||
|
||||
11
pnpm-lock.yaml
generated
11
pnpm-lock.yaml
generated
@ -9,6 +9,7 @@ specifiers:
|
||||
"@iconify-icons/fa": ^1.2.2
|
||||
"@iconify-icons/fa-solid": ^1.2.2
|
||||
"@iconify-icons/fluent": ^1.2.5
|
||||
"@iconify-icons/mdi": ^1.2.8
|
||||
"@iconify-icons/ri": ^1.2.1
|
||||
"@iconify-icons/uil": ^1.2.1
|
||||
"@iconify/vue": ^3.2.1
|
||||
@ -154,6 +155,7 @@ devDependencies:
|
||||
"@iconify-icons/fa": 1.2.2
|
||||
"@iconify-icons/fa-solid": 1.2.2
|
||||
"@iconify-icons/fluent": 1.2.5
|
||||
"@iconify-icons/mdi": 1.2.8
|
||||
"@iconify-icons/ri": 1.2.1
|
||||
"@iconify-icons/uil": 1.2.1
|
||||
"@iconify/vue": 3.2.1_vue@3.2.32
|
||||
@ -997,6 +999,15 @@ packages:
|
||||
"@iconify/types": 1.1.0
|
||||
dev: true
|
||||
|
||||
/@iconify-icons/mdi/1.2.8:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-yG/fH+6PGTTPhqcgdk0NZ465pDIJebdxWDTPPe9P2Fd76bxaoCIcMQSqv/V9g5ADrELdrK1CmHnro+/jd42/0A==
|
||||
}
|
||||
dependencies:
|
||||
"@iconify/types": 1.1.0
|
||||
dev: true
|
||||
|
||||
/@iconify-icons/ri/1.2.1:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@ -112,6 +112,12 @@ import FlUser from "@iconify-icons/fluent/person-12-filled";
|
||||
addIcon("peoples", Peoples);
|
||||
addIcon("flUser", FlUser);
|
||||
|
||||
// Material Design Icons
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
addIcon("expand", Expand);
|
||||
addIcon("unExpand", UnExpand);
|
||||
|
||||
// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
|
||||
export default defineComponent({
|
||||
name: "IconifyIcon",
|
||||
|
||||
16
src/components/ReTable/README.md
Normal file
16
src/components/ReTable/README.md
Normal file
@ -0,0 +1,16 @@
|
||||
## 一款基于`element-plus`表格封装的`table-crud`组件库，采用`tsx`语法编写，通过一些灵活的配置项即可实现增删改查
|
||||
|
||||
### wait todo
|
||||
|
||||
- 搜索组件
|
||||
- 表格组件
|
||||
- 弹框组件
|
||||
- form 组件
|
||||
|
||||
### completed
|
||||
|
||||
- 操作栏组件
|
||||
|
||||
目前只完成了操作栏组件，后续有时间慢慢完善对应组件，因为作者比较忙，暂无具体计划完成时间，忘谅解，当然非常欢迎 pr，等这些组件全部完成后，我会单独抽离成`npm`包的形式发布。
|
||||
|
||||
注意：该组件库为了快速成型，内部依赖了`windicss`。
|
||||
8
src/components/ReTable/index.ts
Normal file
8
src/components/ReTable/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { App } from "vue";
|
||||
import epTableProBar from "./src/bar";
|
||||
|
||||
export const EpTableProBar = Object.assign(epTableProBar, {
|
||||
install(app: App) {
|
||||
app.component(epTableProBar.name, epTableProBar);
|
||||
}
|
||||
});
|
||||
216
src/components/ReTable/src/bar.tsx
Normal file
216
src/components/ReTable/src/bar.tsx
Normal file
@ -0,0 +1,216 @@
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { IconifyIconOffline } from "../../ReIcon";
|
||||
import { defineComponent, ref, computed, PropType } from "vue";
|
||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||
|
||||
export const loadingSvg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
"
|
||||
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
|
||||
/>
|
||||
`;
|
||||
|
||||
const props = {
|
||||
// 头部最左边的标题
|
||||
title: {
|
||||
type: String,
|
||||
default: "列表"
|
||||
},
|
||||
// 表格数据
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可
|
||||
tableRef: {
|
||||
type: Object as PropType<any>,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 是否显示加载动画，默认false 不加载
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: "epTableProBar",
|
||||
props,
|
||||
emits: ["refresh"],
|
||||
setup(props, { emit, slots }) {
|
||||
const buttonRef = ref();
|
||||
const checkList = ref([]);
|
||||
const currentWidth = ref(0);
|
||||
const size = ref("default");
|
||||
const isExpandAll = ref(true);
|
||||
|
||||
const getDropdownItemStyle = computed(() => {
|
||||
return s => {
|
||||
return {
|
||||
background:
|
||||
s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||
color: s === size.value ? "#f4f4f5" : "#000"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
function onExpand() {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
toggleRowExpansionAll(props.dataList, isExpandAll.value);
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(data, isExpansion) {
|
||||
data.forEach(item => {
|
||||
props.tableRef.toggleRowExpansion(item, isExpansion);
|
||||
if (item.children !== undefined && item.children !== null) {
|
||||
toggleRowExpansionAll(item.children, isExpansion);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 监听容器
|
||||
emitter.on("resize", ({ detail }) => {
|
||||
const { width } = detail;
|
||||
currentWidth.value = width;
|
||||
});
|
||||
|
||||
const dropdown = {
|
||||
dropdown: () => (
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
style={getDropdownItemStyle.value("large")}
|
||||
onClick={() => (size.value = "large")}
|
||||
>
|
||||
松散
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
style={getDropdownItemStyle.value("default")}
|
||||
onClick={() => (size.value = "default")}
|
||||
>
|
||||
默认
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
style={getDropdownItemStyle.value("small")}
|
||||
onClick={() => (size.value = "small")}
|
||||
>
|
||||
紧凑
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
)
|
||||
};
|
||||
|
||||
const reference = {
|
||||
reference: () => (
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="setting"
|
||||
width="16"
|
||||
color="#606266"
|
||||
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div
|
||||
v-resize
|
||||
class="w-99/100 mt-6 p-2 bg-white"
|
||||
v-loading={props.loading}
|
||||
element-loading-svg={loadingSvg}
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<div class="flex justify-between w-full h-60px p-4">
|
||||
<p class="font-bold">
|
||||
{currentWidth.value > 390 ? props.title : "列表"}
|
||||
</p>
|
||||
<div class="flex items-center justify-around">
|
||||
<div class="flex mr-4">{slots?.buttons()}</div>
|
||||
{props.tableRef?.size ? (
|
||||
<>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
content={isExpandAll.value ? "折叠" : "展开"}
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon={isExpandAll.value ? "unExpand" : "expand"}
|
||||
width="16"
|
||||
color="#606266"
|
||||
onClick={() => onExpand()}
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
</>
|
||||
) : undefined}
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="refresh-right"
|
||||
width="16"
|
||||
color="#606266"
|
||||
onClick={() => emit("refresh")}
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-tooltip effect="dark" content="密度" placement="top">
|
||||
<el-dropdown v-slots={dropdown} trigger="click">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="density"
|
||||
width="16"
|
||||
color="#606266"
|
||||
/>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-popover v-slots={reference} width="200" trigger="click">
|
||||
<el-checkbox-group v-model={checkList.value}>
|
||||
<el-checkbox label="序号列" />
|
||||
<el-checkbox label="勾选列" />
|
||||
</el-checkbox-group>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<el-tooltip
|
||||
popper-options={{
|
||||
modifiers: [
|
||||
{
|
||||
name: "computeStyles",
|
||||
options: {
|
||||
adaptive: false,
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
placement="top"
|
||||
virtual-ref={buttonRef.value}
|
||||
virtual-triggering
|
||||
trigger="hover"
|
||||
content="列设置"
|
||||
/>
|
||||
</div>
|
||||
{props.dataList.length > 0 ? (
|
||||
slots.default({ size: size.value, checkList: checkList.value })
|
||||
) : (
|
||||
<el-empty description="暂无数据" />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -6,36 +6,22 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import { loadingSvg } from "../load";
|
||||
import { handleTree } from "/@/utils/tree";
|
||||
import { getDeptList } from "/@/api/system";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { reactive, ref, onMounted, computed } from "vue";
|
||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { EpTableProBar } from "/@/components/ReTable";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const form = reactive({
|
||||
user: "",
|
||||
status: ""
|
||||
});
|
||||
const buttonRef = ref();
|
||||
const tooltipRef = ref();
|
||||
let treeData = ref([]);
|
||||
let checkList = ref([]);
|
||||
let dataList = ref([]);
|
||||
let loading = ref(true);
|
||||
let visible = ref(false);
|
||||
let size = ref("default");
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const getDropdownItemStyle = computed(() => {
|
||||
return s => {
|
||||
return {
|
||||
background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||
color: s === size.value ? "#f4f4f5" : "#000"
|
||||
};
|
||||
};
|
||||
});
|
||||
const tableRef = ref();
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
@ -45,10 +31,6 @@ function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function onCheckChange(val) {
|
||||
console.log("onCheckChange", val);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
@ -56,7 +38,7 @@ function handleSelectionChange(val) {
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
let { data } = await getDeptList();
|
||||
treeData.value = handleTree(data);
|
||||
dataList.value = handleTree(data);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
@ -105,166 +87,94 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
class="w-99/100 mt-6 p-2 bg-white"
|
||||
v-loading="loading"
|
||||
:element-loading-svg="loadingSvg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
<EpTableProBar
|
||||
title="部门列表"
|
||||
:loading="loading"
|
||||
:tableRef="tableRef"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<div class="flex justify-between w-full h-60px p-4">
|
||||
<p class="font-bold">部门列表</p>
|
||||
<div class="w-220px flex items-center justify-around">
|
||||
<el-button type="primary" :icon="useRenderIcon('add')"
|
||||
>新增部门</el-button
|
||||
>
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none ml-4"
|
||||
icon="refresh-right"
|
||||
width="20"
|
||||
color="#606266"
|
||||
@click="onSearch"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-tooltip effect="dark" content="密度" placement="top">
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="density"
|
||||
width="20"
|
||||
color="#606266"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('large')"
|
||||
@click="size = 'large'"
|
||||
>
|
||||
松散
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('default')"
|
||||
@click="size = 'default'"
|
||||
>
|
||||
默认
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('small')"
|
||||
@click="size = 'small'"
|
||||
>
|
||||
紧凑
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-popover :width="200" trigger="click">
|
||||
<template #reference>
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="setting"
|
||||
width="20"
|
||||
color="#606266"
|
||||
@mouseover="e => (buttonRef = e.currentTarget)"
|
||||
@mouseenter="visible = true"
|
||||
@mouseleave="visible = false"
|
||||
/>
|
||||
</template>
|
||||
<el-checkbox-group v-model="checkList" @change="onCheckChange">
|
||||
<el-checkbox label="序号列" />
|
||||
<el-checkbox label="勾选列" />
|
||||
</el-checkbox-group>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<el-tooltip
|
||||
ref="tooltipRef"
|
||||
v-model:visible="visible"
|
||||
:popper-options="{
|
||||
modifiers: [
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
adaptive: false,
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}"
|
||||
placement="top"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click"
|
||||
content="列设置"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
border
|
||||
row-key="id"
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:size="size"
|
||||
:data="treeData"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('勾选列')"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('序号列')"
|
||||
type="index"
|
||||
align="center"
|
||||
label="序号"
|
||||
width="60"
|
||||
/>
|
||||
<el-table-column label="部门名称" prop="name" width="180" />
|
||||
<el-table-column label="排序" align="center" prop="sort" width="60" />
|
||||
<el-table-column label="状态" align="center" prop="status" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === 0 ? 'danger' : 'success'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status === 0 ? "关闭" : "开启" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
prop="createTime"
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon('add')">
|
||||
新增部门
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, checkList }">
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
border
|
||||
row-key="id"
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" width="130">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="text" @click="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('勾选列')"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('序号列')"
|
||||
type="index"
|
||||
align="center"
|
||||
label="序号"
|
||||
width="60"
|
||||
/>
|
||||
<el-table-column label="部门名称" prop="name" width="180" />
|
||||
<el-table-column label="排序" align="center" prop="sort" width="60" />
|
||||
<el-table-column label="状态" align="center" prop="status" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === 0 ? 'danger' : 'success'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status === 0 ? "关闭" : "开启" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
prop="createTime"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="备注"
|
||||
align="center"
|
||||
prop="remark"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="text" @click="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</EpTableProBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
export const loadingSvg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`;
|
||||
@ -6,13 +6,12 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import { loadingSvg } from "../load";
|
||||
import { getRoleList } from "/@/api/system";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { EpTableProBar } from "/@/components/ReTable";
|
||||
import { Switch, message } from "@pureadmin/components";
|
||||
import { reactive, ref, onMounted, computed } from "vue";
|
||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const form = reactive({
|
||||
@ -20,28 +19,14 @@ const form = reactive({
|
||||
user: "",
|
||||
status: ""
|
||||
});
|
||||
const buttonRef = ref();
|
||||
const tooltipRef = ref();
|
||||
let roleList = ref([]);
|
||||
let dataList = ref([]);
|
||||
let pageSize = ref(10);
|
||||
let totalPage = ref(0);
|
||||
let checkList = ref([]);
|
||||
let loading = ref(true);
|
||||
let visible = ref(false);
|
||||
let size = ref("default");
|
||||
let switchLoadMap = ref({});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const getDropdownItemStyle = computed(() => {
|
||||
return s => {
|
||||
return {
|
||||
background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||
color: s === size.value ? "#f4f4f5" : "#000"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
@ -58,10 +43,6 @@ function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function onCheckChange(val) {
|
||||
console.log("onCheckChange", val);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
@ -105,7 +86,7 @@ function onChange(checked, { $index, row }) {
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
let { data } = await getRoleList();
|
||||
roleList.value = data.list;
|
||||
dataList.value = data.list;
|
||||
totalPage.value = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
@ -158,186 +139,101 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
class="w-99/100 mt-6 p-2 bg-white"
|
||||
v-loading="loading"
|
||||
:element-loading-svg="loadingSvg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
<EpTableProBar
|
||||
title="角色列表"
|
||||
:loading="loading"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<div class="flex justify-between w-full h-60px p-4">
|
||||
<p class="font-bold">角色列表</p>
|
||||
<div class="w-220px flex items-center justify-around">
|
||||
<el-button type="primary" :icon="useRenderIcon('add')"
|
||||
>新增角色</el-button
|
||||
>
|
||||
<!-- <el-button type="success" :icon="useRenderIcon('import')"
|
||||
>导入</el-button
|
||||
>
|
||||
<el-button type="warning" :icon="useRenderIcon('export')"
|
||||
>导出</el-button
|
||||
> -->
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none ml-4"
|
||||
icon="refresh-right"
|
||||
width="20"
|
||||
color="#606266"
|
||||
@click="onSearch"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-tooltip effect="dark" content="密度" placement="top">
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="density"
|
||||
width="20"
|
||||
color="#606266"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('large')"
|
||||
@click="size = 'large'"
|
||||
>
|
||||
松散
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('default')"
|
||||
@click="size = 'default'"
|
||||
>
|
||||
默认
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('small')"
|
||||
@click="size = 'small'"
|
||||
>
|
||||
紧凑
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-popover :width="200" trigger="click">
|
||||
<template #reference>
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer outline-none"
|
||||
icon="setting"
|
||||
width="20"
|
||||
color="#606266"
|
||||
@mouseover="e => (buttonRef = e.currentTarget)"
|
||||
@mouseenter="visible = true"
|
||||
@mouseleave="visible = false"
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon('add')"
|
||||
>新增角色</el-button
|
||||
>
|
||||
</template>
|
||||
<template v-slot="{ size, checkList }">
|
||||
<el-table
|
||||
border
|
||||
table-layout="auto"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('勾选列')"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('序号列')"
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
width="70"
|
||||
/>
|
||||
<el-table-column label="角色编号" align="center" prop="id" />
|
||||
<el-table-column label="角色编码" align="center" prop="code" />
|
||||
<el-table-column label="角色名称" align="center" prop="name" />
|
||||
<el-table-column label="角色排序" align="center" prop="sort" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<Switch
|
||||
:size="size === 'small' ? 'small' : 'default'"
|
||||
:loading="switchLoadMap[scope.$index]?.loading"
|
||||
v-model:checked="scope.row.status"
|
||||
:checkedValue="1"
|
||||
:unCheckedValue="0"
|
||||
checked-children="已开启"
|
||||
un-checked-children="已关闭"
|
||||
@change="checked => onChange(checked, scope)"
|
||||
/>
|
||||
</template>
|
||||
<el-checkbox-group v-model="checkList" @change="onCheckChange">
|
||||
<el-checkbox label="序号列" />
|
||||
<el-checkbox label="勾选列" />
|
||||
</el-checkbox-group>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<el-tooltip
|
||||
ref="tooltipRef"
|
||||
v-model:visible="visible"
|
||||
:popper-options="{
|
||||
modifiers: [
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
adaptive: false,
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}"
|
||||
placement="top"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click"
|
||||
content="列设置"
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
prop="createTime"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="130"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="text" @click="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="flex justify-end mt-4"
|
||||
:small="size === 'small' ? true : false"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
border
|
||||
table-layout="auto"
|
||||
:size="size"
|
||||
:data="roleList"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('勾选列')"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="checkList.includes('序号列')"
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
width="60"
|
||||
/>
|
||||
<el-table-column label="角色编号" align="center" prop="id" />
|
||||
<el-table-column label="角色编码" align="center" prop="code" />
|
||||
<el-table-column label="角色名称" align="center" prop="name" />
|
||||
<el-table-column label="角色排序" align="center" prop="sort" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<Switch
|
||||
:size="size === 'small' ? 'small' : 'default'"
|
||||
:loading="switchLoadMap[scope.$index]?.loading"
|
||||
v-model:checked="scope.row.status"
|
||||
:checkedValue="1"
|
||||
:unCheckedValue="0"
|
||||
checked-children="已开启"
|
||||
un-checked-children="已关闭"
|
||||
@change="checked => onChange(checked, scope)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
prop="createTime"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="text" @click="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="flex justify-end mt-4"
|
||||
:small="size === 'small' ? true : false"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</EpTableProBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user