feat: 文件库
This commit is contained in:
wf
parent
2316f71dda
commit
ec23b51e1d
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="container-page">
|
||||
<a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="name" label="姓名">
|
||||
<a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="phone" label="手机号">
|
||||
<a-input v-model="formData.form.phone" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="email" label="邮箱">
|
||||
<a-input v-model="formData.form.email" placeholder="请输入邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-space>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>查询</template>
|
||||
</a-button>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
<a-button type="text" @click="formData.search = !formData.search">
|
||||
<template #icon>
|
||||
<icon-up v-if="formData.search" />
|
||||
<icon-down v-else />
|
||||
</template>
|
||||
<template #default>{{ formData.search ? "收起" : "展开" }}</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16" v-if="formData.search">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="address" label="地址">
|
||||
<a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="status" label="用户状态">
|
||||
<a-select v-model="formData.form.status" placeholder="请选择用户状态" allow-clear>
|
||||
<a-option value="1">停用</a-option>
|
||||
<a-option value="2">启用</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-table
|
||||
row-key="key"
|
||||
size="small"
|
||||
:bordered="{
|
||||
cell: true
|
||||
}"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:row-selection="rowSelection"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:pagination="pagination"
|
||||
@page-change="pageChange"
|
||||
@page-size-change="pageSizeChange"
|
||||
>
|
||||
<template #avatar="{ record }">
|
||||
<a-avatar
|
||||
auto-fix-font-size
|
||||
:size="30"
|
||||
:style="{
|
||||
backgroundColor: '#14a9f8'
|
||||
}"
|
||||
>
|
||||
{{ record.avatar }}
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-space>
|
||||
<a-tag size="small" color="green" v-if="record.status == 1">启用</a-tag>
|
||||
<a-tag size="small" color="red" v-else>停用</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #optional>
|
||||
<a-space>
|
||||
<a-button size="mini" type="primary">编辑</a-button>
|
||||
<a-popconfirm content="确定删除这条数据吗?" type="warning">
|
||||
<a-button size="mini">删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button size="mini" type="primary" status="danger">修改</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const formData = reactive({
|
||||
form: {
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
address: "",
|
||||
status: null
|
||||
},
|
||||
search: false
|
||||
});
|
||||
const selectedKeys = ref([]);
|
||||
const rowSelection = reactive({
|
||||
type: "checkbox",
|
||||
showCheckedAll: true,
|
||||
onlyCurrent: false
|
||||
});
|
||||
const pagination = ref({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
|
||||
const pageChange = (page: number) => {
|
||||
pagination.value.current = page;
|
||||
};
|
||||
const pageSizeChange = (pageSize: number) => {
|
||||
pagination.value.pageSize = pageSize;
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "name"
|
||||
},
|
||||
{
|
||||
title: "头像",
|
||||
dataIndex: "avatar",
|
||||
slotName: "avatar",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: "phone"
|
||||
},
|
||||
{
|
||||
title: "Email",
|
||||
dataIndex: "email"
|
||||
},
|
||||
{
|
||||
title: "居住地址",
|
||||
dataIndex: "address"
|
||||
},
|
||||
{
|
||||
title: "用户状态",
|
||||
dataIndex: "status",
|
||||
align: "center",
|
||||
slotName: "status"
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "createTime"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
slotName: "optional",
|
||||
align: "center"
|
||||
}
|
||||
];
|
||||
const data = reactive([
|
||||
{
|
||||
key: "1",
|
||||
name: "陈思源",
|
||||
avatar: "陈",
|
||||
phone: "13812345678",
|
||||
email: "zhangsan@example.com",
|
||||
address: "北京市朝阳区",
|
||||
status: 1,
|
||||
createTime: "2024-05-27 09:00:00"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "李婉娴",
|
||||
avatar: "李",
|
||||
phone: "13987654321",
|
||||
email: "lisi@example.com",
|
||||
address: "上海市浦东新区",
|
||||
status: 0,
|
||||
createTime: "2024-05-26 15:30:00"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "王雨菲",
|
||||
avatar: "王",
|
||||
phone: "13666666666",
|
||||
email: "wangwu@example.com",
|
||||
address: "广州市天河区",
|
||||
status: 1,
|
||||
createTime: "2024-05-25 12:45:00"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "张晨曦",
|
||||
avatar: "张",
|
||||
phone: "13788888888",
|
||||
email: "zhaoliu@example.com",
|
||||
address: "深圳市福田区",
|
||||
status: 0,
|
||||
createTime: "2024-05-24 11:20:00"
|
||||
},
|
||||
{
|
||||
key: "5",
|
||||
name: "赵梦琪",
|
||||
avatar: "赵",
|
||||
phone: "13599999999",
|
||||
email: "qianqi@example.com",
|
||||
address: "成都市锦江区",
|
||||
status: 1,
|
||||
createTime: "2024-05-23 14:10:00"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "刘昊然",
|
||||
avatar: "刘",
|
||||
phone: "13377777777",
|
||||
email: "sunba@example.com",
|
||||
address: "杭州市西湖区",
|
||||
status: 0,
|
||||
createTime: "2024-05-22 10:05:00"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "孙梦洁",
|
||||
avatar: "孙",
|
||||
phone: "13266666666",
|
||||
email: "zhoujiu@example.com",
|
||||
address: "南京市鼓楼区",
|
||||
status: 1,
|
||||
createTime: "2024-05-21 08:45:00"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "黄俊杰",
|
||||
avatar: "黄",
|
||||
phone: "13155555555",
|
||||
email: "wushi@example.com",
|
||||
address: "重庆市渝中区",
|
||||
status: 0,
|
||||
createTime: "2024-05-20 16:30:00"
|
||||
},
|
||||
{
|
||||
key: "9",
|
||||
name: "周雨萱",
|
||||
avatar: "周",
|
||||
phone: "13044444444",
|
||||
email: "zhengshiyi@example.com",
|
||||
address: "武汉市江汉区",
|
||||
status: 1,
|
||||
createTime: "2024-05-19 09:20:00"
|
||||
},
|
||||
{
|
||||
key: "10",
|
||||
name: "韩雪儿",
|
||||
avatar: "韩",
|
||||
phone: "13933333333",
|
||||
email: "kongshier@example.com",
|
||||
address: "西安市雁塔区",
|
||||
status: 0,
|
||||
createTime: "2024-05-18 13:55:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-page {
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
}
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
class fileTreeData {
|
||||
static tree: any = [
|
||||
{
|
||||
title: "三国地域分布",
|
||||
key: "0-0",
|
||||
children: [
|
||||
{
|
||||
title: "魏国",
|
||||
key: "0-0-0",
|
||||
children: [
|
||||
{ title: "司隶", key: "0-0-0-0" },
|
||||
{ title: "徐州", key: "0-0-0-1" },
|
||||
{ title: "青州", key: "0-0-0-2" },
|
||||
{ title: "豫州", key: "0-0-0-3" },
|
||||
{ title: "冀州", key: "0-0-0-4" },
|
||||
{ title: "并州", key: "0-0-0-5" },
|
||||
{ title: "幽州", key: "0-0-0-6" },
|
||||
{ title: "兖州", key: "0-0-0-7" },
|
||||
{ title: "凉州", key: "0-0-0-8" },
|
||||
{ title: "雍州", key: "0-0-0-9" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "吴国",
|
||||
key: "0-0-1",
|
||||
children: [
|
||||
{ title: "荆州", key: "0-0-1-0" },
|
||||
{ title: "扬州", key: "0-0-1-1" },
|
||||
{ title: "交州", key: "0-0-1-2" },
|
||||
{ title: "广州", key: "0-0-1-3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "蜀国",
|
||||
key: "0-0-2",
|
||||
children: [
|
||||
{ title: "益州", key: "0-0-2-0" },
|
||||
{ title: "汉中", key: "0-0-2-1" },
|
||||
{ title: "云南", key: "0-0-2-2" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
export { fileTreeData };
|
||||
|
||||
// 三国（220年－280年）是上承东汉下启西晋的一段历史时期，分为曹魏、蜀汉、东吴三个政权。赤壁之战时，曹操被孙刘联军击败，奠定了三国鼎立的雏型。这三国大致继承东汉的疆域及政区制度，为州、郡、县三级制。州设刺史或州牧。郡设太守。县大者置令，小者置长。
|
||||
|
||||
// 魏国领地
|
||||
// 曹魏的疆域主要在曹操时即大幅发展，至曹丕称帝建国后定型，约占有整个华北地区。大致上北至山西、河北及辽东，与南匈奴、鲜卑及高句丽相邻；东至黄海。东南与孙吴对峙于长江淮河一带及汉江长江一带，以寿春、襄阳为重镇；西至甘肃，与河西鲜卑、羌及氐相邻。西南与蜀汉对峙于秦岭、河西一带，以长安为重镇。在立国后原有87郡及十二州，有：司隶、徐州、青州、豫州、冀州、并州、幽州、兖州、凉州、雍州、荆州（占荆州北部）、扬州（占扬州北部）。于西域设置管辖海头（今新疆罗布泊西）的西域长史和管辖高昌的戊己校尉。221年孙权称藩后，曹魏让孙权领有荆州牧，将荆扬等孙权势力则定为荆州，曹魏原直辖的荆州北部改称为郢州。双方决裂后曹魏复改郢州为荆州。220年至226年，分陇右置秦州，最后并入雍州。
|
||||
|
||||
// 吴国领地
|
||||
// 孙吴的疆域在孙策时即拥有大部分的扬州。孙权在赤壁之战后陆续获得荆州西部、交州，并在击败关羽后获得整个荆州南部。至孙权称帝后疆域方稳定下来。孙吴北与曹魏对峙在长江淮河一带及汉江长江一带，以建业、江陵为重镇；西与蜀汉相邻于三峡，西陵为重镇；东及南至东海南海，其中最南达现在越南的中部。孙吴原有32郡及三州：荆州、扬州、交州。于226年设置广州，后并入交州。至264年复设，共增加一州。
|
||||
|
||||
// 蜀国领地
|
||||
// 蜀汉疆域仅有益州。其创建者刘备直到赤壁之战后才在诸葛亮协助下，由荆州南部开始发展。其势力一度涵盖荆州（占荆州西部）、益州及汉中。立国前后与孙吴发生多次战争并损失荆州，于诸葛亮南定南中后获得云南一带疆域，至此渐渐稳定。疆域范围：北方与曹魏对峙于秦岭，汉中为重镇；东与孙吴相邻于三峡，巴西为重镇；西南至岷江、南中，与羌、氐及南蛮相邻。蜀汉共有22郡、仅益州一州。于益州下设庲降都督，治味县（今云南曲靖），专辖益州南部。
|
||||
@ -16,7 +16,7 @@ class fileTreeData {
|
||||
{
|
||||
title: "财务部",
|
||||
key: "0-0-0-1",
|
||||
children: [{ title: "行政费用预算分析-第一季度", key: "0-0-0-0-1" }]
|
||||
children: [{ title: "行政费用预算分析", key: "0-0-0-0-1" }]
|
||||
},
|
||||
{
|
||||
title: "法务部",
|
||||
|
||||
@ -81,4 +81,9 @@ const sourceTree = ref(fileTreeData.tree);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改底部横向滚动条高度
|
||||
:deep(.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar) {
|
||||
height: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,9 +3,21 @@
|
||||
<div class="container">
|
||||
<div class="container-main">
|
||||
<div class="left-box">
|
||||
<FileTree />
|
||||
<div class="box-title">文件库</div>
|
||||
<a-divider margin="0" />
|
||||
<FileTree class="file-tree-style" />
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="box-title">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>总公司</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>行政部</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>人力资源部</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
<a-divider margin="0" />
|
||||
<FileTable class="file-table-style" />
|
||||
</div>
|
||||
<div class="right-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</FillPage>
|
||||
@ -13,6 +25,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import FileTree from "@/views/file-management/document-library/components/file-tree.vue";
|
||||
import FileTable from "@/views/file-management/document-library/components/file-table.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -30,12 +43,27 @@ import FileTree from "@/views/file-management/document-library/components/file-t
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: $color-bg-1;
|
||||
|
||||
.file-tree-style {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
margin-left: $padding;
|
||||
width: calc(100% - 220px - $padding);
|
||||
height: 100%;
|
||||
background: $color-bg-1;
|
||||
.file-table-style {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: $font-size-title-1;
|
||||
text-align: left;
|
||||
padding: 0 $margin;
|
||||
}
|
||||
</style>
|
||||
|
||||
117
vite.config.ts.timestamp-1720068577529-9b5356585b569.mjs
Normal file
117
vite.config.ts.timestamp-1720068577529-9b5356585b569.mjs
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user