hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-16 06:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:增加项目列表Pagation

Browse Source
This commit is contained in:
wuyx
2022-11-01 18:37:33 +08:00
parent d72116fec0
commit cbad8c7124
1 changed files with 3512 additions and 3701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
src/views/projectcenter/ProjectManage.vue
View File

@@ -5,45 +5,19 @@
<div class="filter">
<div class="filterItems">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请输入项目名称"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目名称" :options="projectNameList"
@change="selectProjectName" allowClear showSearch></a-select>
</div>
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请输入项目经理"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目经理" :options="projectNameList"
@change="selectProjectName" allowClear showSearch></a-select>
</div>
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请选择状态"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
<a-select v-model:value="projectName" style="width: 270px" placeholder="请选择状态" :options="projectNameList"
@change="selectProjectName" allowClear showSearch></a-select>
</div>
<div class="select">
<a-date-picker
v-model="selectTime"
type="date"
placeholder="创建时间"
style="width: 270px"
/>
<a-date-picker v-model="selectTime" type="date" placeholder="创建时间" style="width: 270px" />
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btnn btn1">
@@ -66,25 +40,8 @@
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
<a-table
:columns="columns"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="{
showSizeChanger: true,
showQuickJumper: true,
hideOnSinglePage: true,
pageSizeOptions: [],
pageSize: pageSize,
current: currentPage,
total: tableDataTotal,
onChange: (page, pageSize) => {
currentPage = page;
},
}"
>
<a-table :columns="columns" :data-source="tableData" :loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }" @expand="expandTable" :pagination="false">
<!-- <template #bodyCell="{ column }">
<template v-if="column.key === 'operation'">
<div class="operation">
@@ -100,15 +57,18 @@
</template>
</template> -->
</a-table>
<div class="tableBox">
<div class="pa">
<a-pagination v-if="tableDataTotal > 10" showSizeChanger="true" showQuickJumper="true" hideOnSinglePage="true"
:pageSize="pageSize" v-model:current="currentPage" :total="tableDataTotal" class="pagination"
@change="changePagination" />
</div>
</div>
</div>
<!-- 表格 -->
<!-- 无项目 -->
<div class="tableBox" style="display: none">
<div
class="taskbox"
@click="showModal1"
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
>
<div class="taskbox" @click="showModal1" style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)">
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
@@ -126,47 +86,27 @@
</div>
<!-- 创建子项目弹窗 -->
<div>
<a-modal
v-model:visible="sonproject"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="sonproject"
width="764px"
height="356px"
>
<div
class="modalHeader"
style="
<a-modal v-model:visible="sonproject" :title="null" @ok="closeModal" :footer="null" :closable="false"
wrapClassName="sonproject" width="764px" height="356px">
<div class="modalHeader" style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
">
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px"
>请选择项目类别</span
>
<span class="headerLeftText" style="font-size: 16px">请选择项目类别</span>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
<img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
</div>
</div>
<div class="modalMain">
<router-link
to="/sonproject"
class="taskbox"
style="
<router-link to="/sonproject" class="taskbox" style="
margin-right: 24px;
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
"
>
">
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
@@ -180,13 +120,9 @@
单层子项目
</div>
</router-link>
<div
class="taskbox"
@click="showModal3"
style="
<div class="taskbox" @click="showModal3" style="
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
"
>
">
<div class="leftt">
<img src="../../assets/images/taskpage/left1.png" />
</div>
@@ -207,49 +143,27 @@
<!-- 创建项目弹窗 -->
<div>
<div>
<a-modal
v-model:visible="estabish"
:title="null"
@ok="closeModal1"
:footer="null"
:closable="false"
wrapClassName="estabish"
width="638px"
height="468px"
>
<div
class="modalHeader"
style="
<a-modal v-model:visible="estabish" :title="null" @ok="closeModal1" :footer="null" :closable="false"
wrapClassName="estabish" width="638px" height="468px">
<div class="modalHeader" style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
">
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px"
>请选择项目类别</span
>
<span class="headerLeftText" style="font-size: 16px">请选择项目类别</span>
</div>
<div
style="cursor: pointer; margin-right: 32px"
@click="closeModal1"
>
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal1">
<img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
</div>
</div>
<div class="modalMain">
<router-link to="/projectadd">
<div
class="taskbox"
style="
<div class="taskbox" style="
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
"
>
">
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
@@ -267,14 +181,10 @@
</div>
</div>
</router-link>
<div
class="taskbox"
@click="showModal2"
style="
<div class="taskbox" @click="showModal2" style="
margin-bottom: 40px;
background: linear-gradient(180deg, #e5f6ec 0%, #eef9f3 100%);
"
>
">
<div class="leftt">
<img src="../../assets/images/taskpage/left3.png" />
</div>
@@ -298,113 +208,65 @@
<!-- 创建项目弹窗 -->
<!-- 创建多层项目弹窗 -->
<div>
<a-modal
v-model:visible="doublepro"
:title="null"
@ok="closeModal2"
:footer="null"
:closable="false"
wrapClassName="doublepro"
width="624px"
height="476px"
>
<div
class="modalHeader"
style="
<a-modal v-model:visible="doublepro" :title="null" @ok="closeModal2" :footer="null" :closable="false"
wrapClassName="doublepro" width="624px" height="476px">
<div class="modalHeader" style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
">
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px"
>创建多层项目</span
>
<span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
<img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
</div>
</div>
<div class="modalMain">
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">项目名称:</div>
<div class="in">
<a-input
v-model:value="value1"
show-count
:maxlength="30"
placeholder="请输入项目名称"
style="border-radius: 8px"
/>
<a-input v-model:value="value1" show-count :maxlength="30" placeholder="请输入项目名称"
style="border-radius: 8px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">分类:</div>
<div class="in">
<a-select
v-model:value="value2"
placeholder="四个养成"
:options="classifyList"
@change="classificationChange"
style="border-radius: 8px; height: 40px"
/>
<a-select v-model:value="value2" placeholder="四个养成" :options="classifyList" @change="classificationChange"
style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">项目经理:</div>
<div class="in">
<a-select
v-model:value="value3"
placeholder="请选择项目经理"
:options="classifyList1"
@change="classificationChange1"
style="border-radius: 8px; height: 40px"
/>
<a-select v-model:value="value3" placeholder="请选择项目经理" :options="classifyList1"
@change="classificationChange1" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">资源归属:</div>
<div class="in">
<a-input
v-model:value="value5"
style="border-radius: 8px; height: 40px"
/>
<a-input v-model:value="value5" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
<a-button class="pubtn2" @click="createStoreyProject"
>确定</a-button
>
<a-button class="pubtn2" @click="createStoreyProject">确定</a-button>
</div>
</div>
</a-modal>
@@ -412,106 +274,61 @@
<!-- 创建多层项目弹窗 -->
<!-- 创建多层子项目弹窗 -->
<div>
<a-modal
v-model:visible="doublesonpro"
:title="null"
@ok="closeModal3"
:footer="null"
:closable="false"
wrapClassName="doublesonpro"
width="624px"
height="476px"
>
<div
class="modalHeader"
style="
<a-modal v-model:visible="doublesonpro" :title="null" @ok="closeModal3" :footer="null" :closable="false"
wrapClassName="doublesonpro" width="624px" height="476px">
<div class="modalHeader" style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
">
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px"
>创建多层子项目</span
>
<span class="headerLeftText" style="font-size: 16px">创建多层子项目</span>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal3">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
<img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
</div>
</div>
<div class="modalMain">
<div style="margin-left: 40px; margin-top: 40px">
<span style="color: #000000; font-size: 14px">项目归属：</span>
<span style="color: #999999; font-size: 14px; margin-left: 10px"
>管理者进阶</span
>
<span style="color: #999999; font-size: 14px; margin-left: 10px">管理者进阶</span>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">子项目名称:</div>
<div class="in">
<a-input
v-model:value="value5"
placeholder="请输入项目名称"
style="border-radius: 8px; height: 40px"
/>
<a-input v-model:value="value5" placeholder="请输入项目名称" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">分类:</div>
<div class="in">
<a-select
v-model:value="value6"
placeholder="四个养成"
style="border-radius: 8px; height: 40px"
/>
<a-select v-model:value="value6" placeholder="四个养成" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">子项目经理:</div>
<div class="in">
<a-input
v-model:value="value7"
placeholder="自动带出 可编辑"
style="border-radius: 8px; height: 40px"
/>
<a-input v-model:value="value7" placeholder="自动带出 可编辑" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
</div>
<div class="inname">资源归属:</div>
<div class="in">
<a-input
v-model:value="value8"
style="border-radius: 8px; height: 40px"
/>
<a-input v-model:value="value8" style="border-radius: 8px; height: 40px" />
</div>
</div>
<div class="pubtn">
@@ -523,13 +340,7 @@
</div>
<!-- 创建多层子项目弹窗 -->
<!-- 复制路径弹窗 -->
<a-modal
v-model:visible="copyModal"
:footer="null"
:closable="closeCopy"
wrapClassName="CopyModal"
centered="true"
>
<a-modal v-model:visible="copyModal" :footer="null" :closable="closeCopy" wrapClassName="CopyModal" centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
@@ -553,13 +364,7 @@
</div>
</a-modal>
<!-- 结束项目弹窗 -->
<a-modal
v-model:visible="stopModal"
:footer="null"
:closable="closeStop"
wrapClassName="CopyModal"
centered="true"
>
<a-modal v-model:visible="stopModal" :footer="null" :closable="closeStop" wrapClassName="CopyModal" centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
@@ -586,13 +391,8 @@
</div>
</a-modal>
<!-- 删除项目弹窗 -->
<a-modal
v-model:visible="deleteModal"
:footer="null"
:closable="closeDelete"
wrapClassName="CopyModal"
centered="true"
>
<a-modal v-model:visible="deleteModal" :footer="null" :closable="closeDelete" wrapClassName="CopyModal"
centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
@@ -616,13 +416,8 @@
</div>
</a-modal>
<!-- 存为模板弹窗 -->
<a-modal
v-model:visible="startModal"
:footer="null"
:closable="closeStart"
wrapClassName="CopyModal"
centered="true"
>
<a-modal v-model:visible="startModal" :footer="null" :closable="closeStart" wrapClassName="CopyModal"
centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
@@ -646,13 +441,7 @@
</div>
</a-modal>
<!-- 撤回路径弹窗 -->
<a-modal
v-model:visible="backModal"
:footer="null"
:closable="closeBack"
wrapClassName="CopyModal"
centered="true"
>
<a-modal v-model:visible="backModal" :footer="null" :closable="closeBack" wrapClassName="CopyModal" centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
@@ -693,6 +482,7 @@ import ProjPowerList from "../../components/drawers/ProjPowerList";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
import ProjManageShip from "../../components/drawers/ProjManagePower";
import * as api from "../../api/index";
import { toDate } from "../../api/method";
export default {
name: "projectManage",
@@ -814,7 +604,7 @@ export default {
// 获取项目列表信息
let tableData = ref([]);
let currentPage = ref(1);
let tableDataTotal = ref(1);
let tableDataTotal = ref('');
let pageSize = ref(10);
const columns = ref([
@@ -860,6 +650,11 @@ export default {
key: "createTime",
width: 180,
align: "center",
customRender: (value) => {
return (
<div>{toDate(value.record.createTime, "Y-M-D h:m:s")}</div>
)
}
},
{
title: "操作",
@@ -1528,7 +1323,7 @@ export default {
.then((res) => {
console.log(res);
if (res.status == 200 && res.data.code == 200) {
tableDataTotal = Math.ceil(Number(res.data.data.total) / 10);
tableDataTotal.value = Number(res.data.data.total);
let data = res.data.data.rows;
// let data = state.tableData;
console.log("1266", data);
@@ -3042,6 +2837,13 @@ export default {
};
getTableDate();
// 翻页
const changePagination = (page) => {
console.log(page)
currentPage.value = page;
// getLearnPath();
};
const showModal = () => {
state.sonproject = true;
};
@@ -3151,6 +2953,7 @@ export default {
classifyList1,
classificationChange,
classificationChange1,
changePagination,
value1,
value2,
value3,
@@ -3330,7 +3133,7 @@ export default {
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead > tr > th {
.ant-table-thead>tr>th {
font-size: 14px;
font-weight: 400;
color: #999ba3;
@@ -3340,6 +3143,24 @@ export default {
}
}
.tableBox {
padding-bottom: 20px;
.pa {
// position: absolute;
// bottom: 20px;
// left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// margin-bottom: 10px;
// position: absolute;
// bottom: -40px;
}
}
.operation {
font-size: 14px;
font-weight: 400;
@@ -3407,11 +3228,9 @@ export default {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
rgba(78, 166, 255, 0.2) 100%);
}
padding: 0;
@@ -3507,11 +3326,9 @@ export default {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
rgba(78, 166, 255, 0.2) 100%);
}
padding: 0;
@@ -3608,11 +3425,9 @@ export default {
padding: 0 !important;
.modalHeader {
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
rgba(78, 166, 255, 0.2) 100%);
}
.modalMain {
@@ -3675,11 +3490,9 @@ export default {
padding: 0 !important;
.modalHeader {
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
rgba(78, 166, 255, 0.2) 100%);
}
.modalMain {
@@ -3788,10 +3601,8 @@ export default {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
}
.del_main {