mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 08:27:54 +08:00
perf: use @pureadmin/table replace el-table
This commit is contained in:
xiaoxian521
parent
1dfc67802a
commit
9fa1d9d2ea
66
src/views/system/dept/columns.tsx
Normal file
66
src/views/system/dept/columns.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export function useColumns() {
|
||||
const columns = ref([
|
||||
{
|
||||
type: "selection",
|
||||
width: 55,
|
||||
align: "left",
|
||||
hide: ({ checkList }) => !checkList.includes("勾选列")
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "left",
|
||||
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
|
||||
};
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import { useColumns } from "./columns";
|
||||
import { handleTree } from "/@/utils/tree";
|
||||
import { getDeptList } from "/@/api/system";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { PureTable } from "@pureadmin/table";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { EpTableProBar } from "/@/components/ReTable";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
@ -17,6 +18,7 @@ const form = reactive({
|
||||
});
|
||||
let dataList = ref([]);
|
||||
let loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const tableRef = ref();
|
||||
@ -88,7 +90,7 @@ onMounted(() => {
|
||||
<EpTableProBar
|
||||
title="部门列表"
|
||||
:loading="loading"
|
||||
:tableRef="tableRef"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
@ -98,94 +100,47 @@ onMounted(() => {
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, checkList }">
|
||||
<el-table
|
||||
<PureTable
|
||||
ref="tableRef"
|
||||
border
|
||||
align="center"
|
||||
row-key="id"
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:checkList="checkList"
|
||||
: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
|
||||
:size="size"
|
||||
: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"
|
||||
:formatter="
|
||||
({ createTime }) => {
|
||||
return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<el-table-column
|
||||
label="备注"
|
||||
align="center"
|
||||
prop="remark"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</PureTable>
|
||||
</template>
|
||||
</EpTableProBar>
|
||||
</div>
|
||||
|
||||
@ -66,7 +66,7 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: "180",
|
||||
width: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
@ -74,7 +74,7 @@ export function useColumns() {
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: "180",
|
||||
width: 180,
|
||||
slot: "operation"
|
||||
}
|
||||
]);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="tsx">
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import { getRoleList } from "/@/api/system";
|
||||
import { PureTable } from "@pureadmin/table";
|
||||
|
||||
130
src/views/system/user/columns.tsx
Normal file
130
src/views/system/user/columns.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { Switch, message } from "@pureadmin/components";
|
||||
|
||||
export function useColumns() {
|
||||
const switchLoadMap = ref({});
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
type: "selection",
|
||||
width: 55,
|
||||
hide: ({ checkList }) => !checkList.includes("勾选列")
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 70,
|
||||
hide: ({ checkList }) => !checkList.includes("序号列")
|
||||
},
|
||||
{
|
||||
label: "用户编号",
|
||||
prop: "id"
|
||||
},
|
||||
{
|
||||
label: "用户名称",
|
||||
prop: "username"
|
||||
},
|
||||
{
|
||||
label: "用户昵称",
|
||||
prop: "nickname"
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.sex === 1 ? "danger" : ""}
|
||||
effect="plain"
|
||||
>
|
||||
{row.sex === 1 ? "女" : "男"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "部门",
|
||||
prop: "dept",
|
||||
formatter: ({ dept }) => dept.name
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 130,
|
||||
cellRenderer: scope => (
|
||||
<Switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model:checked={scope.row.status}
|
||||
checkedValue={1}
|
||||
unCheckedValue={0}
|
||||
checked-children="已开启"
|
||||
un-checked-children="已关闭"
|
||||
onChange={() => onChange(scope)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 180,
|
||||
slot: "operation"
|
||||
}
|
||||
]);
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.username
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message.success("已成功修改用户状态");
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
columns
|
||||
};
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import tree from "./tree.vue";
|
||||
import { useColumns } from "./columns";
|
||||
import { getUserList } from "/@/api/system";
|
||||
import { PureTable } from "@pureadmin/table";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { EpTableProBar } from "/@/components/ReTable";
|
||||
import { Switch, message } from "@pureadmin/components";
|
||||
import { ElMessageBox, type FormInstance } from "element-plus";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
@ -21,7 +21,7 @@ let dataList = ref([]);
|
||||
let pageSize = ref(10);
|
||||
let totalPage = ref(0);
|
||||
let loading = ref(true);
|
||||
let switchLoadMap = ref({});
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
@ -45,46 +45,6 @@ function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
function onChange(checked, { $index, row }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.username
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[$index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[$index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[$index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[$index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message.success("已成功修改用户状态");
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
let { data } = await getUserList();
|
||||
@ -166,152 +126,80 @@ onMounted(() => {
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, checkList }">
|
||||
<el-table
|
||||
<PureTable
|
||||
border
|
||||
align="center"
|
||||
table-layout="auto"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:checkList="checkList"
|
||||
: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="username" />
|
||||
<el-table-column label="用户昵称" align="center" prop="nickname" />
|
||||
<el-table-column label="性别" align="center" prop="sex">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:size="size"
|
||||
:type="scope.row.sex === 1 ? 'danger' : ''"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.sex === 1 ? "女" : "男" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="部门"
|
||||
align="center"
|
||||
prop="dept"
|
||||
:formatter="
|
||||
({ dept }) => {
|
||||
return dept.name;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<el-table-column label="手机号码" align="center" prop="mobile" />
|
||||
<el-table-column
|
||||
label="状态"
|
||||
align="center"
|
||||
width="130"
|
||||
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"
|
||||
:formatter="
|
||||
({ createTime }) => {
|
||||
return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="180"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('password')"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('role')"
|
||||
>
|
||||
分配角色
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('password')"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('role')"
|
||||
>
|
||||
分配角色
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</PureTable>
|
||||
<el-pagination
|
||||
class="flex justify-end mt-4"
|
||||
:small="size === 'small' ? true : false"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user