mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
refactor: system pages (#399)
* refactor: system pages * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
This commit is contained in:
RealityBoy
GitHub
@@ -1,4 +1,3 @@
|
||||
import { IconifyIconOffline } from "@/components/ReIcon";
|
||||
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||
import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
|
||||
|
||||
@@ -8,7 +7,7 @@ export function useColumns() {
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-6">
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
@@ -21,7 +20,7 @@ export function useColumns() {
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即解冻
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
@@ -36,7 +35,7 @@ export function useColumns() {
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-8">
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
@@ -49,7 +48,7 @@ export function useColumns() {
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即升级
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export function useColumns() {
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
width: 55,
|
||||
align: "left",
|
||||
hide: ({ checkList }) => !checkList.includes("勾选列")
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 60,
|
||||
hide: ({ checkList }) => !checkList.includes("序号列")
|
||||
},
|
||||
{
|
||||
label: "部门名称",
|
||||
prop: "name",
|
||||
width: 180,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.status === 1 ? "danger" : "success"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.status === 0 ? "关闭" : "开启"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
return {
|
||||
columns
|
||||
};
|
||||
}
|
||||
114
src/views/system/dept/hook.tsx
Normal file
114
src/views/system/dept/hook.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import dayjs from "dayjs";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
|
||||
export function useDept() {
|
||||
const form = reactive({
|
||||
user: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
width: 55,
|
||||
align: "left",
|
||||
hide: ({ checkList }) => !checkList.includes("勾选列")
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
minWidth: 70,
|
||||
hide: ({ checkList }) => !checkList.includes("序号列")
|
||||
},
|
||||
{
|
||||
label: "部门名称",
|
||||
prop: "name",
|
||||
width: 180,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.status === 1 ? "danger" : "success"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.status === 0 ? "关闭" : "开启"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 200,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 160,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
function resetForm(formEl) {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getDeptList();
|
||||
dataList.value = handleTree(data);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { ref } from "vue";
|
||||
import { useDept } from "./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";
|
||||
@@ -16,47 +14,19 @@ defineOptions({
|
||||
name: "Dept"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
user: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getDeptList();
|
||||
dataList.value = handleTree(data as any);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSelectionChange
|
||||
} = useDept();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -68,10 +38,20 @@ onMounted(() => {
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="user">
|
||||
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />
|
||||
<el-input
|
||||
v-model="form.user"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="开启" value="1" />
|
||||
<el-option label="关闭" value="0" />
|
||||
</el-select>
|
||||
@@ -91,11 +71,9 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
<PureTableBar
|
||||
title="部门列表"
|
||||
:loading="loading"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
@@ -112,6 +90,7 @@ onMounted(() => {
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@@ -150,6 +129,6 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getRoleList } from "@/api/system";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, computed, onMounted } from "vue";
|
||||
|
||||
export function useColumns() {
|
||||
export function useRole() {
|
||||
const form = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
@@ -21,19 +35,23 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "角色编号",
|
||||
prop: "id"
|
||||
prop: "id",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "角色名称",
|
||||
prop: "name"
|
||||
prop: "name",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "角色标识",
|
||||
prop: "code"
|
||||
prop: "code",
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
label: "角色类型",
|
||||
prop: "type",
|
||||
minWidth: 150,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
@@ -46,12 +64,12 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "显示顺序",
|
||||
prop: "sort"
|
||||
prop: "sort",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 130,
|
||||
minWidth: 130,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
@@ -68,7 +86,7 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
@@ -80,6 +98,15 @@ export function useColumns() {
|
||||
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(
|
||||
@@ -123,7 +150,59 @@ export function useColumns() {
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getRoleList();
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
columns
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import { getRoleList } from "@/api/system";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./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";
|
||||
@@ -19,64 +17,22 @@ defineOptions({
|
||||
name: "Role"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
status: ""
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getRoleList();
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -88,13 +44,28 @@ onMounted(() => {
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
>
|
||||
<el-form-item label="角色名称：" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识：" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入角色标识" clearable />
|
||||
<el-input
|
||||
v-model="form.code"
|
||||
placeholder="请输入角色标识"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
</el-select>
|
||||
@@ -114,12 +85,7 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
title="角色列表"
|
||||
:loading="loading"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<PureTableBar title="角色列表" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增角色
|
||||
@@ -131,6 +97,7 @@ onMounted(() => {
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@@ -151,8 +118,8 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@@ -172,18 +139,18 @@ onMounted(() => {
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(More)"
|
||||
@click="handleUpdate(row)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@@ -194,7 +161,7 @@ onMounted(() => {
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@@ -209,7 +176,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getUserList } from "@/api/system";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, computed, onMounted } from "vue";
|
||||
|
||||
export function useColumns() {
|
||||
export function useUser() {
|
||||
const form = reactive({
|
||||
username: "",
|
||||
mobile: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
@@ -21,19 +35,23 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "用户编号",
|
||||
prop: "id"
|
||||
prop: "id",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "用户名称",
|
||||
prop: "username"
|
||||
prop: "username",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "用户昵称",
|
||||
prop: "nickname"
|
||||
prop: "nickname",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
minWidth: 90,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
@@ -47,16 +65,18 @@ export function useColumns() {
|
||||
{
|
||||
label: "部门",
|
||||
prop: "dept",
|
||||
minWidth: 90,
|
||||
formatter: ({ dept }) => dept.name
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile"
|
||||
prop: "mobile",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 130,
|
||||
minWidth: 90,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
@@ -73,7 +93,7 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
minWidth: 90,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
@@ -85,6 +105,15 @@ export function useColumns() {
|
||||
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(
|
||||
@@ -128,7 +157,59 @@ export function useColumns() {
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getUserList();
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
columns
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
@@ -1,11 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import tree from "./tree.vue";
|
||||
import { useColumns } from "./columns";
|
||||
import { getUserList } from "@/api/system";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { useUser } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Role from "@iconify-icons/ri/admin-line";
|
||||
@@ -21,69 +18,28 @@ defineOptions({
|
||||
name: "User"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
username: "",
|
||||
mobile: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getUserList();
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useUser();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main flex">
|
||||
<tree />
|
||||
<div class="flex-1 ml-4">
|
||||
<div class="main">
|
||||
<tree class="w-[17%] float-left" />
|
||||
<div class="float-right w-[81%]">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
@@ -95,6 +51,7 @@ onMounted(() => {
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="mobile">
|
||||
@@ -102,10 +59,16 @@ onMounted(() => {
|
||||
v-model="form.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
</el-select>
|
||||
@@ -125,12 +88,7 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
title="用户管理"
|
||||
:loading="loading"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<PureTableBar title="用户管理" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增用户
|
||||
@@ -141,6 +99,7 @@ onMounted(() => {
|
||||
border
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@@ -182,7 +141,7 @@ onMounted(() => {
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@@ -193,7 +152,7 @@ onMounted(() => {
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@@ -204,7 +163,7 @@ onMounted(() => {
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@@ -219,7 +178,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
1
src/views/system/user/svg/expand.svg
Normal file
1
src/views/system/user/svg/expand.svg
Normal file
@@ -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 |
1
src/views/system/user/svg/unexpand.svg
Normal file
1
src/views/system/user/svg/unexpand.svg
Normal file
@@ -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 |
@@ -1,18 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import type { ElTree } from "element-plus";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, watch, onMounted, getCurrentInstance } from "vue";
|
||||
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
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";
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
@@ -20,17 +19,26 @@ interface Tree {
|
||||
highlight?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
const treeRef = ref();
|
||||
const treeData = ref([]);
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name"
|
||||
};
|
||||
|
||||
const treeData = ref([]);
|
||||
const searchValue = ref("");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
const highlightMap = ref({});
|
||||
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;
|
||||
@@ -54,13 +62,14 @@ function nodeClick(value) {
|
||||
}
|
||||
|
||||
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 = "";
|
||||
@@ -73,12 +82,12 @@ watch(searchValue, val => {
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getDeptList();
|
||||
treeData.value = handleTree(data as any);
|
||||
treeData.value = handleTree(data);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
|
||||
<div class="h-full min-h-[780px] bg-bg_color overflow-auto">
|
||||
<div class="flex items-center h-[34px]">
|
||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||
部门列表
|
||||
@@ -99,7 +108,7 @@ onMounted(async () => {
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown>
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<IconifyIconOffline
|
||||
class="w-[28px] cursor-pointer"
|
||||
width="18px"
|
||||
@@ -109,29 +118,18 @@ onMounted(async () => {
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Expand)"
|
||||
@click="toggleRowExpansionAll(true)"
|
||||
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
展开全部
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(UnExpand)"
|
||||
@click="toggleRowExpansionAll(false)"
|
||||
>
|
||||
折叠全部
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { IconifyIconOffline } from "@/components/ReIcon";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Tickets from "@iconify-icons/ep/tickets";
|
||||
@@ -21,7 +20,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={User} />
|
||||
<iconify-icon-offline icon={User} />
|
||||
</el-icon>
|
||||
用户名
|
||||
</div>
|
||||
@@ -32,7 +31,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Iphone} />
|
||||
<iconify-icon-offline icon={Iphone} />
|
||||
</el-icon>
|
||||
手机号
|
||||
</div>
|
||||
@@ -43,7 +42,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Location} />
|
||||
<iconify-icon-offline icon={Location} />
|
||||
</el-icon>
|
||||
居住地
|
||||
</div>
|
||||
@@ -57,7 +56,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Tickets} />
|
||||
<iconify-icon-offline icon={Tickets} />
|
||||
</el-icon>
|
||||
标签
|
||||
</div>
|
||||
@@ -76,7 +75,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={OfficeBuilding} />
|
||||
<iconify-icon-offline icon={OfficeBuilding} />
|
||||
</el-icon>
|
||||
联系地址
|
||||
</div>
|
||||
@@ -90,7 +89,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Notebook} />
|
||||
<iconify-icon-offline icon={Notebook} />
|
||||
</el-icon>
|
||||
好好学习，天天向上
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user