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

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 >
<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%">
@ -234,46 +171,29 @@
<el-table-column prop="approveStatus" label="状态" min-width="100%">
</el-table-column>
<el-table-column label="操作" min-width="100%">
<template slot-scope="scope" >
<template slot-scope="scope">
<el-link type="primary" v-if="scope.row.applyNumber" v-on:click="detailClick(scope.row)">查看详情</el-link>
<el-link type="info" v-else disabled>后台挂接无详情</el-link>
</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">
</ability-detail>
<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>
</template>
@ -295,7 +215,7 @@ import { mapState } from 'vuex'
// })
export default {
components: { componentServices, applicationResources, ComponentUsed, AbilityDetail },
data () {
data() {
return {
exportExcel: CONFIGITEM.configData[CONFIGITEM.version].apiURL + '/census/center/export',
exportExcelCondition: '',
@ -373,6 +293,7 @@ export default {
choseId: 0,
departmentId: 1,
currentPage: 1,
pageSize: 10,
homeIsShow: true,
servicesIsShow: false,
resourcesIsShow: false,
@ -416,7 +337,7 @@ export default {
endDate: '' //
}
},
created () {
created() {
//
// const d = new Date()
// let year1, month1, day1
@ -430,7 +351,7 @@ export default {
// const date2 = new Date(year2, month2, day2, 7)
// this.value1.unshift(date2)
},
mounted () {
mounted() {
// this.getFirstTree()
if (this.departmentId === 1) {
this.handleChose(3)
@ -445,17 +366,27 @@ export default {
...mapState(['departmentSelects'])
},
methods: {
closeModal () {
closeModal() {
this.detailsVisible = false
},
handleCurrentChange (val) {
if (this.choseId === 0) {
this.getFirstTree(val)
} else if (this.choseId === 1) {
this.getReleaseTree(val)
handleCurrentChange(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) {
getTreeName(data) {
this.$http
.get('/census/center/v3/treeList/', {
params: {
@ -485,7 +416,7 @@ export default {
// },
// --
getFirstTree (page) {
getFirstTree(page) {
if (this.examineStatus == '-1') {
this.status = ''
} else if (this.examineStatus == '0') {
@ -549,7 +480,7 @@ export default {
})
},
// 使-使
getSecondTree () {
getSecondTree() {
if (this.examineStatus == '-1') {
this.status = ''
} else if (this.examineStatus == '0') {
@ -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: '',
@ -613,7 +544,7 @@ export default {
})
},
//
detailClick (row) {
detailClick(row) {
this.detailParamss = {}
const applyNumber = row.applyNumber
if (this.departmentId == 3) { //
@ -654,8 +585,8 @@ export default {
})
}
},
//
getOneDetail (page) {
//
getOneDetail(page) {
var passAndReview = '' // ""
if (this.examineStatus == '-1') {
this.status = ''
@ -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,8 +623,8 @@ export default {
})
})
},
// 使
getTwoDetail (page) {
// 使 使
getTwoDetail(page) {
var passAndReview = '' // ""
if (this.examineStatus == '-1') {
this.status = ''
@ -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,
@ -729,7 +660,7 @@ export default {
})
})
},
getReleaseTree (page) {
getReleaseTree(page) {
this.$http
.get('/census/center/selectApplyDeptDetailTypeCountList/', {
params: {
@ -775,7 +706,7 @@ export default {
})
},
// 使
getUsedTree () {
getUsedTree() {
this.$http
.get('/census/center/v3/resourceReleaseDetails/', {
params: {
@ -789,7 +720,7 @@ export default {
this.tableData = res.data.data.list
})
},
handleClick (row) {
handleClick(row) {
if (this.choseId === 0) {
if (this.departmentId === 1) {
this.homeIsShow = false
@ -810,7 +741,7 @@ export default {
}
},
//
choseBtn (index) {
choseBtn(index) {
this.choseId = index
this.handleChose(1)
},
@ -826,7 +757,8 @@ export default {
// }
// },
// or使
handleChose (index) {
handleChose(index) {
this.currentPage = 1;
this.departmentId = index
if (index === 1) {
if (this.choseId === 0) {
@ -867,26 +799,26 @@ export default {
}
},
//
handleSizeChange (val) {
handleSizeChange(val) {
console.log(`每页 ${val}`)
},
closeChild () {
closeChild() {
this.homeIsShow = true
this.servicesIsShow = false
this.handleCurrentChange(1)
},
closeChild2 () {
closeChild2() {
this.homeIsShow = true
this.UsedIsShow = false
this.handleCurrentChange(1)
},
closeApplication () {
closeApplication() {
this.homeIsShow = true
this.resourcesIsShow = false
this.handleCurrentChange(1)
},
// //////////
goToDetail () {
goToDetail() {
this.detailFlag = !this.detailFlag
if (this.departmentId === 1) {
this.handleChose(3)
@ -898,7 +830,7 @@ export default {
}
},
//
goToBack () {
goToBack() {
// departmentId 13 24
this.detailFlag = !this.detailFlag
if (this.departmentId === 3) {
@ -911,7 +843,7 @@ export default {
}
},
//
getDataList () {
getDataList() {
if (this.value1 && this.value1.length > 0) {
this.startDate = this.handleTime(this.value1[0], 'yyyy-MM-dd HH:mm:ss')
this.endDate = this.handleTime(this.value1[1], 'yyyy-MM-dd HH:mm:ss')
@ -942,7 +874,7 @@ export default {
}
},
//
resetDataList () {
resetDataList() {
this.value1 = []
this.startDate = ''
this.endDate = ''
@ -980,7 +912,7 @@ export default {
}
},
//
handleTime (time, format) {
handleTime(time, format) {
if (time == null || time == undefined || time == '') {
return ''
}
@ -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;