后台管理-能力统计-明细-添加分页功能

This commit is contained in:
guoyue 2022-10-19 13:41:02 +08:00
parent 2af92a6f8f
commit 4d59133942
1 changed files with 125 additions and 171 deletions

View File

@ -26,25 +26,14 @@
<!--起始日期 @keyup.enter.native="getDataList()"-->
<el-form-item>
<span>日期</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
>
<el-date-picker v-model="value1" type="datetimerange" range-separator="" start-placeholder="开始日期"
end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<!--审核状态-->
<el-form-item>
<span>审核状态</span>
<el-select
v-model="examineStatus"
placeholder="请选审核状态"
clearable
>
<el-select v-model="examineStatus" placeholder="请选审核状态" clearable>
<el-option label="全部" value="-1"></el-option>
<el-option label="审核中" value="0"></el-option>
<el-option label="通过" value="1"></el-option>
@ -55,17 +44,9 @@
<!--部门-->
<el-form-item>
<span>部门名称</span>
<el-select
v-model="abilityDepartment"
placeholder="请选择部门"
clearable
>
<el-select v-model="abilityDepartment" placeholder="请选择部门" clearable>
<el-option label="全部" value=""></el-option>
<el-option
v-for="item in departmentSelects"
:key="item.label"
v-bind="item"
></el-option>
<el-option v-for="item in departmentSelects" :key="item.label" v-bind="item"></el-option>
</el-select>
</el-form-item>
@ -74,13 +55,8 @@
<span>类型</span>
<el-select v-model="abilityType" placeholder="请选择类型" clearable>
<el-option label="全部" value=""></el-option>
<el-option
v-for="item in typeOptions"
:key="item.name"
:label="item.name"
:value="item.name"
v-bind="item"
></el-option>
<el-option v-for="item in typeOptions" :key="item.name" :label="item.name" :value="item.name" v-bind="item">
</el-option>
</el-select>
</el-form-item>
@ -112,25 +88,18 @@
</div> -->
<div class="second-title">
<span
style="margin-right: 30px"
:class="[
<span style="margin-right: 30px" :class="[
departmentId === 1 || departmentId === 3
? 'departmentStyle'
: ''
]"
@click="handleChose(3)"
>
]" @click="handleChose(3)">
能力上架统计
</span>
<span
:class="[
<span :class="[
departmentId === 2 || departmentId === 4
? 'departmentStyle'
: ''
]"
@click="handleChose(4)"
>
]" @click="handleChose(4)">
能力使用统计
</span>
<!-- <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']" @click="handleChose(3)">
@ -146,14 +115,8 @@
</div>
<div class="line-style"></div>
<!--统计表-->
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
border
style="width: 100%"
v-show="this.departmentId === 1"
>
<el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
border style="width: 100%" v-show="this.departmentId === 1">
<el-table-column prop="name" label="上架部门" min-width="100%">
</el-table-column>
<el-table-column label="组件">
@ -161,17 +124,9 @@
</el-table-column>
<el-table-column prop="tcfw" label="图层服务" min-width="100%">
</el-table-column>
<el-table-column
prop="kfzj"
label="通用开发组件"
min-width="100%"
>
<el-table-column prop="kfzj" label="通用开发组件" min-width="100%">
</el-table-column>
<el-table-column
prop="ywzj"
label="业务能力组件"
min-width="100%"
>
<el-table-column prop="ywzj" label="业务能力组件" min-width="100%">
</el-table-column>
</el-table-column>
<el-table-column prop="yyzy" label="应用资源" min-width="100%">
@ -179,14 +134,8 @@
<el-table-column prop="zj" label="总计" min-width="100%">
</el-table-column>
</el-table>
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
border
style="width: 100%"
v-show="this.departmentId === 2"
>
<el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
border style="width: 100%" v-show="this.departmentId === 2">
<el-table-column prop="name" label="申请部门" min-width="100%">
</el-table-column>
<el-table-column label="组件">
@ -194,17 +143,9 @@
</el-table-column>
<el-table-column prop="tcfw" label="图层服务" min-width="100%">
</el-table-column>
<el-table-column
prop="kfzj"
label="通用开发组件"
min-width="100%"
>
<el-table-column prop="kfzj" label="通用开发组件" min-width="100%">
</el-table-column>
<el-table-column
prop="ywzj"
label="业务能力组件"
min-width="100%"
>
<el-table-column prop="ywzj" label="业务能力组件" min-width="100%">
</el-table-column>
</el-table-column>
<el-table-column prop="yyzy" label="应用资源" min-width="100%">
@ -216,11 +157,7 @@
</el-table>
<!--明细表-->
<el-table
:data="tableData"
style="width: 100%"
v-show="this.departmentId === 3 || this.departmentId === 4"
>
<el-table :data="tableData" style="width: 100%" v-show="this.departmentId === 3 || this.departmentId === 4">
<el-table-column v-if="this.departmentId === 3" prop="deptName" label="上架部门" min-width="100%">
</el-table-column>
<el-table-column v-if="this.departmentId === 4" prop="deptName" label="申请部门" min-width="100%">
@ -240,39 +177,22 @@
</template>
</el-table-column>
</el-table>
<!-- <div class="block">
<el-pagination
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="total"
:page-size="5"
:current-page="currentPage"
>
<div class="block">
<el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
:total="total" :page-size="pageSize" :current-page="currentPage">
</el-pagination>
</div> -->
</div>
</div>
</el-card>
</div>
<component-used
v-if="UsedIsShow"
:tableId="tableId"
:fatherId="fatherId"
@closeChild2="closeChild2"
></component-used>
<component-services
v-if="servicesIsShow"
:tableId="tableId"
:fatherId="fatherId"
@closeChild="closeChild"
></component-services>
<application-resources
v-if="resourcesIsShow"
:tableId="tableId"
:fatherId="fatherId"
@closeApplication="closeApplication"
></application-resources>
<ability-detail v-if="detailsVisible"
:detailsVisible="detailsVisible" :detailParamss="detailParamss" :detailType="detailType" @closeModal="closeModal">
<component-used v-if="UsedIsShow" :tableId="tableId" :fatherId="fatherId" @closeChild2="closeChild2">
</component-used>
<component-services v-if="servicesIsShow" :tableId="tableId" :fatherId="fatherId" @closeChild="closeChild">
</component-services>
<application-resources v-if="resourcesIsShow" :tableId="tableId" :fatherId="fatherId"
@closeApplication="closeApplication"></application-resources>
<ability-detail v-if="detailsVisible" :detailsVisible="detailsVisible" :detailParamss="detailParamss"
:detailType="detailType" @closeModal="closeModal">
</ability-detail>
</div>
@ -373,6 +293,7 @@ export default {
choseId: 0,
departmentId: 1,
currentPage: 1,
pageSize: 10,
homeIsShow: true,
servicesIsShow: false,
resourcesIsShow: false,
@ -449,11 +370,21 @@ export default {
this.detailsVisible = false
},
handleCurrentChange(val) {
if (this.choseId === 0) {
this.getFirstTree(val)
} else if (this.choseId === 1) {
this.getReleaseTree(val)
console.log('val------------>', val);
this.currentPage = val;
// todo
if(this.departmentId === 3) {
this.getOneDetail(val)
}
if(this.departmentId === 4) {
this.getTwoDetail(val)
}
// if (this.choseId === 0) {
// this.getFirstTree(val)
// } else if (this.choseId === 1) {
// this.getReleaseTree(val)
// }
},
getTreeName(data) {
this.$http
@ -564,8 +495,8 @@ export default {
this.$http
.get('/census/center/selectApplyDeptDetailTypeCountList', {
params: {
// page: page || 1,
// limit: 5,
page: page || 1,
limit: this.pageSize,
approveStatus: this.status,
deptId: this.abilityDepartment,
params: '',
@ -654,7 +585,7 @@ export default {
})
}
},
//
//
getOneDetail(page) {
var passAndReview = '' // ""
if (this.examineStatus == '-1') {
@ -671,8 +602,8 @@ export default {
this.$http
.get('/census/center/selectCensusResourceTable', {
params: {
// limit: 5,
// page: page || 1,
limit: this.pageSize,
page: this.currentPage,
approveStatus: this.status,
deptId: this.abilityDepartment,
type: this.abilityType,
@ -682,7 +613,7 @@ export default {
})
.then((res) => {
console.log('111111', this.tableData, res.data.data)
this.tableData = res.data.data
this.tableData = res.data.data.list
this.total = res.data.data.total
this.exportExcelCondition = qs.stringify({
approveStatus: this.status,
@ -692,7 +623,7 @@ export default {
})
})
},
// 使
// 使 使
getTwoDetail(page) {
var passAndReview = '' // ""
if (this.examineStatus == '-1') {
@ -709,8 +640,8 @@ export default {
this.$http
.get('/census/center/selectCensusApplyTable', {
params: {
// limit: 5,
// page: page || 1,
limit: this.pageSize,
page: this.currentPage,
approveStatus: this.status,
deptId: this.abilityDepartment,
type: this.abilityType,
@ -719,7 +650,7 @@ export default {
}
})
.then((res) => {
this.tableData = res.data.data
this.tableData = res.data.data.list
this.total = res.data.data.total
this.exportExcelCondition = qs.stringify({
approveStatus: this.status,
@ -827,6 +758,7 @@ export default {
// },
// or使
handleChose(index) {
this.currentPage = 1;
this.departmentId = index
if (index === 1) {
if (this.choseId === 0) {
@ -1019,6 +951,7 @@ export default {
display: flex;
flex-direction: column;
}
.container-left {
width: 250px;
height: 1000px;
@ -1026,11 +959,13 @@ export default {
// background-color: #ffffff;
margin-right: 10px;
}
.left-search {
width: 250px;
height: 76px;
background-color: #ffffff;
}
.input-style {
width: 210px;
height: 36px;
@ -1040,11 +975,13 @@ export default {
border: 1px solid transparent;
background-color: #f2f4fa;
}
input::placeholder {
font-weight: 400;
font-size: 14px;
color: #b0b3ca;
}
.input-search {
width: 44px;
height: 30px;
@ -1054,10 +991,12 @@ input::placeholder {
top: 38px;
left: 196px;
}
::v-deep.tree-style {
.el-tree-node__label {
font-size: 16px;
}
.el-tree-node__content {
width: 240px;
overflow: hidden;
@ -1073,6 +1012,7 @@ input::placeholder {
background-color: #fafafc;
display: inline-block;
}
.title {
display: flex;
font-size: 20px;
@ -1081,10 +1021,12 @@ input::placeholder {
padding-left: 15px;
padding-top: 10px;
}
.title-list-style {
display: flex;
margin-top: 10px;
}
.title-single {
font-size: 14px;
width: 90px;
@ -1095,6 +1037,7 @@ input::placeholder {
border-radius: 12px;
cursor: pointer;
}
.box-style {
width: 90px;
height: 24px;
@ -1103,11 +1046,13 @@ input::placeholder {
align-items: center;
padding-bottom: 2px;
}
.second-title {
margin-top: 20px;
font-size: 14px;
color: #979eb9;
cursor: pointer;
.detail-button {
width: 60px;
height: 30px;
@ -1121,6 +1066,7 @@ input::placeholder {
color: #fff;
}
}
.line-style {
width: 100%;
height: 1px;
@ -1128,23 +1074,28 @@ input::placeholder {
margin-top: 15px;
margin-bottom: 15px;
}
.aui-card--fill {
width: 100% !important;
padding: 0px !important;
}
.choseStyle {
color: #526aff;
border: 1px solid #526aff;
}
.departmentStyle {
color: #526aff;
}
::v-deep .tree-text-styleJ {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.export {
display: inline-block;
width: 70px;
@ -1156,18 +1107,21 @@ input::placeholder {
border: 1px solid #dcdfe6;
color: #000;
}
.export:hover {
border-color: #c5ddfd;
background-color: #ecf4fe;
color: #0058e1;
text-decoration: none;
}
.export:active {
border-color: #c5ddfd;
background-color: #ecf4fe;
color: #0058e1;
text-decoration: none;
}
.export:visited {
color: #fff;
text-decoration: none;