mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 22:06:45 +08:00
467 lines
10 KiB
Vue
467 lines
10 KiB
Vue
<template>
|
|
<!-- 项目! -->
|
|
<div class="project">
|
|
<!-- 以下为顶部搜索框 -->
|
|
<div class="filter">
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入项目名称"
|
|
allowClear
|
|
showSearch
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div class="select">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择归属组织"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="select">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="项目状态"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入创建者"
|
|
allowClear
|
|
showSearch
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div class="select addTimeBox">
|
|
<a-range-picker
|
|
style="width: 100%"
|
|
format="YYYY-MM-DD"
|
|
separator="至"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
/>
|
|
</div>
|
|
<div style="display: flex; margin-bottom: 20px">
|
|
<div class="btnn btn1">
|
|
<div class="search"></div>
|
|
<div class="btnText">搜索</div>
|
|
</div>
|
|
<div class="btn btn2">
|
|
<div class="search"></div>
|
|
<div class="btnText">重置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为导出按钮 -->
|
|
<div class="btns">
|
|
<div class="btn btn3">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出列表信息</div>
|
|
</div>
|
|
<div class="btn btn3" style="margin-left: 20px">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出详细信息</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为table表格 -->
|
|
<div class="tableBox">
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:loading="tableLoading"
|
|
:scroll="{ x: 700 }"
|
|
:pagination="false"
|
|
>
|
|
</a-table>
|
|
<div class="tableBox">
|
|
<div class="pa">
|
|
<a-pagination
|
|
v-if="tableDataTotal > 10"
|
|
:showSizeChanger="false"
|
|
showQuickJumper="true"
|
|
hideOnSinglePage="true"
|
|
:pageSize="pageSize"
|
|
v-model:current="pageNo"
|
|
:total="tableDataTotal"
|
|
class="pagination"
|
|
@change="changePagination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, toRefs, reactive } from "vue";
|
|
export default {
|
|
name: "ProjecT",
|
|
setup() {
|
|
const state = reactive({
|
|
tableLoading: false, // table加载图标
|
|
tableDataTotal: 12, // 数据总条数
|
|
pageSize: 10, // 每页条数
|
|
pageNo: 1, //当前页码
|
|
});
|
|
// 表格数据
|
|
// 表格数据
|
|
let tableData = ref([
|
|
{
|
|
key: 1,
|
|
name: "John Brown sr.",
|
|
age: 60,
|
|
address: "New York No. 1 Lake Park",
|
|
children: [
|
|
{
|
|
key: 11,
|
|
name: "John Brown",
|
|
age: 42,
|
|
address: "New York No. 2 Lake Park",
|
|
},
|
|
{
|
|
key: 12,
|
|
name: "John Brown jr.",
|
|
age: 30,
|
|
address: "New York No. 3 Lake Park",
|
|
children: [
|
|
{
|
|
key: 121,
|
|
name: "Jimmy Brown",
|
|
age: 16,
|
|
address: "New York No. 3 Lake Park",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 13,
|
|
name: "Jim Green sr.",
|
|
age: 72,
|
|
address: "London No. 1 Lake Park",
|
|
children: [
|
|
{
|
|
key: 131,
|
|
name: "Jim Green",
|
|
age: 42,
|
|
address: "London No. 2 Lake Park",
|
|
children: [
|
|
{
|
|
key: 1311,
|
|
name: "Jim Green jr.",
|
|
age: 25,
|
|
address: "London No. 3 Lake Park",
|
|
},
|
|
{
|
|
key: 1312,
|
|
name: "Jimmy Green sr.",
|
|
age: 18,
|
|
address: "London No. 4 Lake Park",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 2,
|
|
name: "Joe Black",
|
|
age: 32,
|
|
address: "Sidney No. 1 Lake Park",
|
|
},
|
|
]);
|
|
// cloumns 表头
|
|
const columns = ref([
|
|
{
|
|
title: "项目名称",
|
|
dataIndex: "name",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "left",
|
|
},
|
|
{
|
|
title: "编号",
|
|
dataIndex: "age",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "项目分类",
|
|
dataIndex: "age",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "资源归属",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "阶段总数",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "任务总数",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "参加人数",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "完成人数",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "发布时间",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "项目状态",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "创建人",
|
|
dataIndex: "manager",
|
|
ellipsis: true,
|
|
key: "manager",
|
|
align: "center",
|
|
},
|
|
]);
|
|
//table 分页事件
|
|
const changePagination = (page) => {
|
|
state.pageNo = page;
|
|
};
|
|
|
|
return {
|
|
...toRefs(state),
|
|
tableData,
|
|
columns,
|
|
changePagination,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.project {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.filter {
|
|
margin-left: 38px;
|
|
margin-right: 20px;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.select {
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
width: calc((100% - 76px - 370px) / 5);
|
|
}
|
|
|
|
.addTimeBox {
|
|
width: calc((100% - 76px - 360px) / 5 + 120px) !important;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.addTime {
|
|
position: absolute;
|
|
z-index: 10;
|
|
margin-left: 10px;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
// .ant-picker {
|
|
// padding-left: 85px;
|
|
// }
|
|
|
|
.ant-picker-range .ant-picker-active-bar {
|
|
margin-left: 85px;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: rgba(64, 158, 255, 0);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(64, 158, 255, 1);
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: #4ea6ff;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn1 {
|
|
.search {
|
|
width: 15px;
|
|
height: 17px;
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
}
|
|
|
|
.btn2 {
|
|
margin-right: 0px !important;
|
|
.search {
|
|
width: 16px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/reset1.png");
|
|
}
|
|
}
|
|
|
|
.btn1:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
|
|
.search {
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
|
|
.btnText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.btn1:active {
|
|
background: #0982ff;
|
|
}
|
|
|
|
.btn2:hover {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
}
|
|
|
|
.btn2:active {
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
margin-left: 38px;
|
|
// flex-wrap: wrap;
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #4ea6ff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn3 {
|
|
margin-right: 0px;
|
|
|
|
.search {
|
|
width: 17px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/add0.png");
|
|
}
|
|
}
|
|
|
|
.btn3:hover {
|
|
// background: rgba(64, 158, 255, 0.76);
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
// .btn3:active {
|
|
// background: #0982ff;
|
|
// }
|
|
}
|
|
.tableBox {
|
|
margin: 20px 38px 30px;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: #eff4fc;
|
|
}
|
|
}
|
|
.tableBox {
|
|
padding-bottom: 20px;
|
|
|
|
.pa {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|