初始化本地仓库
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
<!-- 基础表格 -->
|
||||
<template>
|
||||
<div class="user-page art-full-height">
|
||||
<ElCard class="art-table-card" shadow="never" style="margin-top: 0">
|
||||
<!-- 表格 -->
|
||||
<ArtTable
|
||||
rowKey="id"
|
||||
:show-table-header="false"
|
||||
:loading="loading"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
@pagination:size-change="handleSizeChange"
|
||||
@pagination:current-change="handleCurrentChange"
|
||||
>
|
||||
</ArtTable>
|
||||
</ElCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTable } from '@/hooks/core/useTable'
|
||||
import { fetchGetUserList } from '@/apps/demo/api/system-manage'
|
||||
|
||||
defineOptions({ name: 'UserMixedUsageExample' })
|
||||
|
||||
const { data, columns, loading, pagination, handleSizeChange, handleCurrentChange } = useTable({
|
||||
core: {
|
||||
apiFn: fetchGetUserList,
|
||||
apiParams: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
userName: '',
|
||||
userPhone: '',
|
||||
userEmail: ''
|
||||
},
|
||||
columnsFactory: () => [
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'ID'
|
||||
},
|
||||
{
|
||||
prop: 'nickName',
|
||||
label: '昵称'
|
||||
},
|
||||
{
|
||||
prop: 'userGender',
|
||||
label: '性别',
|
||||
sortable: true,
|
||||
formatter: (row) => row.userGender || '未知'
|
||||
},
|
||||
{
|
||||
prop: 'userPhone',
|
||||
label: '手机号'
|
||||
},
|
||||
{
|
||||
prop: 'userEmail',
|
||||
label: '邮箱'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,245 @@
|
||||
<!-- 左树右表示例页面 -->
|
||||
<template>
|
||||
<div class="art-full-height">
|
||||
<div class="box-border flex gap-4 h-full max-md:block max-md:gap-0 max-md:h-auto">
|
||||
<div class="flex-shrink-0 w-58 h-full max-md:w-full max-md:h-auto max-md:mb-5">
|
||||
<ElCard class="tree-card art-card-xs flex flex-col h-full mt-0" shadow="never">
|
||||
<template #header>
|
||||
<b>分类树</b>
|
||||
</template>
|
||||
<ElScrollbar>
|
||||
<ElTree
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</ElScrollbar>
|
||||
</ElCard>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-grow min-w-0">
|
||||
<UserSearch v-model="defaultFilter" />
|
||||
|
||||
<ElCard class="flex flex-col flex-1 min-h-0 art-table-card" shadow="never">
|
||||
<ArtTableHeader
|
||||
v-model:columns="columnChecks"
|
||||
:loading="loading"
|
||||
@refresh="refreshData"
|
||||
>
|
||||
<template #left>
|
||||
<ElSpace wrap>
|
||||
<ElButton
|
||||
@click="showButtons = !showButtons"
|
||||
v-ripple
|
||||
type="primary"
|
||||
plain
|
||||
>{{ showButtons ? "收起" : "展开" }}按钮组</ElButton
|
||||
>
|
||||
<ElButton v-show="showButtons" v-ripple v-for="value in 12" :key="value"
|
||||
>表格自适应</ElButton
|
||||
>
|
||||
</ElSpace>
|
||||
</template>
|
||||
</ArtTableHeader>
|
||||
|
||||
<ArtTable
|
||||
rowKey="id"
|
||||
:loading="loading"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
@pagination:size-change="handleSizeChange"
|
||||
@pagination:current-change="handleCurrentChange"
|
||||
>
|
||||
</ArtTable>
|
||||
</ElCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTable } from "@/hooks/core/useTable";
|
||||
import { UserService } from "@/api/system/user";
|
||||
import UserSearch from "@apps/demo/views/system/user/modules/user-search.vue";
|
||||
|
||||
defineOptions({ name: "TreeTable" });
|
||||
|
||||
const showButtons = ref(false);
|
||||
|
||||
// 树形数据 - 组织架构示例
|
||||
const treeData = ref([
|
||||
{
|
||||
id: 1,
|
||||
label: "技术部",
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: "前端开发组",
|
||||
children: [
|
||||
{ id: 111, label: "React 团队" },
|
||||
{ id: 112, label: "Vue 团队" },
|
||||
{ id: 113, label: "移动端团队" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: "后端开发组",
|
||||
children: [
|
||||
{ id: 121, label: "Java 团队" },
|
||||
{ id: 122, label: "Node.js 团队" },
|
||||
{ id: 123, label: "Python 团队" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: "测试组",
|
||||
children: [
|
||||
{ id: 131, label: "功能测试" },
|
||||
{ id: 132, label: "自动化测试" },
|
||||
{ id: 133, label: "性能测试" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: "运维组",
|
||||
children: [
|
||||
{ id: 141, label: "系统运维" },
|
||||
{ id: 142, label: "DevOps" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "产品部",
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: "产品设计组",
|
||||
children: [
|
||||
{ id: 211, label: "UI 设计" },
|
||||
{ id: 212, label: "UX 设计" },
|
||||
{ id: 213, label: "交互设计" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: "产品运营组",
|
||||
children: [
|
||||
{ id: 221, label: "用户运营" },
|
||||
{ id: 222, label: "内容运营" },
|
||||
{ id: 223, label: "活动运营" },
|
||||
],
|
||||
},
|
||||
{ id: 23, label: "数据分析组" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "市场部",
|
||||
children: [
|
||||
{ id: 31, label: "品牌推广组" },
|
||||
{ id: 32, label: "渠道拓展组" },
|
||||
{
|
||||
id: 33,
|
||||
label: "销售组",
|
||||
children: [
|
||||
{ id: 331, label: "企业客户" },
|
||||
{ id: 332, label: "个人客户" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "行政部",
|
||||
children: [
|
||||
{ id: 41, label: "人力资源组" },
|
||||
{ id: 42, label: "财务组" },
|
||||
{ id: 43, label: "行政后勤组" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "客服部",
|
||||
children: [
|
||||
{ id: 51, label: "售前咨询" },
|
||||
{ id: 52, label: "售后支持" },
|
||||
{ id: 53, label: "客户成功" },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const treeProps = {
|
||||
children: "children",
|
||||
label: "label",
|
||||
};
|
||||
|
||||
const handleNodeClick = (data: any) => {
|
||||
console.log("选中节点:", data);
|
||||
// 可以根据选中的节点更新右侧表格数据
|
||||
};
|
||||
|
||||
// 表单搜索初始值
|
||||
const defaultFilter = ref({
|
||||
name: undefined,
|
||||
});
|
||||
|
||||
const {
|
||||
data,
|
||||
columns,
|
||||
columnChecks,
|
||||
loading,
|
||||
pagination,
|
||||
refreshData,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
} = useTable({
|
||||
core: {
|
||||
apiFn: fetchGetUserList,
|
||||
apiParams: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
userName: "",
|
||||
userPhone: "",
|
||||
userEmail: "",
|
||||
},
|
||||
columnsFactory: () => [
|
||||
{
|
||||
prop: "id",
|
||||
label: "ID",
|
||||
},
|
||||
{
|
||||
prop: "nickName",
|
||||
label: "昵称",
|
||||
},
|
||||
{
|
||||
prop: "userGender",
|
||||
label: "性别",
|
||||
sortable: true,
|
||||
formatter: (row) => row.userGender || "未知",
|
||||
},
|
||||
{
|
||||
prop: "userPhone",
|
||||
label: "手机号",
|
||||
},
|
||||
{
|
||||
prop: "userEmail",
|
||||
label: "邮箱",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tree-card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 10px 2px 10px 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user