解决build环境项目列表分页问题
parent
2ae6aadd38
commit
7710ac1377
|
|
@ -18,11 +18,12 @@
|
|||
<el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
|
||||
<el-table-column label="项目进度" min-width="35%" >
|
||||
<template #default="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
|
||||
:percentage="scope.row.completeNum*100/scope.row.totalNum"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18"
|
||||
:status="(scope.row.totalNum!==0&&scope.row.completeNum===scope.row.totalNum) ? 'success' : ''"
|
||||
:percentage="scope.row.totalNum===0?0:Math.round(scope.row.completeNum*100/scope.row.totalNum)"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="projectCloseTime" label="结项日期" min-width="10%" align="right" :formatter="dateFormatter"/>
|
||||
<el-table-column prop="projectClosedDate" label="结项日期" min-width="10%" align="right" :formatter="dateFormatter"/>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
|
|
@ -40,25 +41,82 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
// table元素
|
||||
import {onMounted, ref} from "vue";
|
||||
import {getCurrentInstance, onMounted, ref, watch } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
import request from "../utils/request";
|
||||
|
||||
const tableRef = ref(null);
|
||||
// table高度
|
||||
const tableHeight = ref();
|
||||
|
||||
const { proxy, ctx } = getCurrentInstance()
|
||||
onMounted(() => {
|
||||
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
|
||||
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
// 监听浏览器高度变化
|
||||
window.onresize = () => {
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
};
|
||||
});
|
||||
const router = useRouter()
|
||||
const tableData = ref([])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const redirect = () => {
|
||||
router.push({path: '/project/closed', query: {currentPage: currentPage.value, pageSize: pageSize.value}})
|
||||
}
|
||||
const getClosedProjects = () => {
|
||||
const that = this;
|
||||
request({
|
||||
url: 'project',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageCurrent: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
// sortBy: 'projectClosedDate',
|
||||
// asc: false,
|
||||
paramMap: {
|
||||
completed: true
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
//console.log(response.data.data.records)
|
||||
total.value = response.data.data.total
|
||||
tableData.value = response.data.data.records
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
// 选择一页显示多少条数据
|
||||
const handleSizeChange = (val) => {
|
||||
redirect()
|
||||
}
|
||||
// 选择当前的是第几页
|
||||
const handleCurrentChange = (val) => {
|
||||
redirect()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.query,
|
||||
() => {
|
||||
if (router.currentRoute.value.query.currentPage)
|
||||
currentPage.value = parseInt(router.currentRoute.value.query.currentPage)
|
||||
if (router.currentRoute.value.query.pageSize)
|
||||
pageSize.value = parseInt(router.currentRoute.value.query.pageSize)
|
||||
|
||||
getClosedProjects()
|
||||
},
|
||||
// 组件创建完后获取数据，
|
||||
// 此时 data 已经被 observed 了
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
</script>
|
||||
<script>
|
||||
import request from "../utils/request";
|
||||
import moment from "moment";
|
||||
import router from "../router";
|
||||
|
||||
|
|
@ -66,66 +124,12 @@ export default {
|
|||
name: "ClosedProject",
|
||||
data() {
|
||||
return {
|
||||
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// watch 路由的参数，以便再次获取数据
|
||||
this.$watch(
|
||||
() => this.$route.query,
|
||||
() => {
|
||||
if(this.$route.query.currentPage)
|
||||
this.currentPage = parseInt(this.$route.query.currentPage)
|
||||
if(this.$route.query.pageSize)
|
||||
this.pageSize = parseInt(this.$route.query.pageSize)
|
||||
|
||||
this.getClosedProjects()
|
||||
},
|
||||
// 组件创建完后获取数据，
|
||||
// 此时 data 已经被 observed 了
|
||||
{ immediate: true }
|
||||
)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
this.redirect()
|
||||
},
|
||||
// 选择当前的是第几页
|
||||
handleCurrentChange(val) {
|
||||
this.redirect()
|
||||
},
|
||||
redirect() {
|
||||
router.push({path: '/ClosedProject', query: { currentPage: this.currentPage, pageSize: this.pageSize }})
|
||||
},
|
||||
getClosedProjects() {
|
||||
const that = this;
|
||||
request({
|
||||
url: 'project',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageCurrent: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
paramMap: {
|
||||
completed: true
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
if(response.data.code===200) {
|
||||
//console.log(response.data.data.records)
|
||||
that.total = response.data.data.total
|
||||
that.tableData = response.data.data.records
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
priceFormatter(row, column) {
|
||||
return row[column.property]/10000 + '万';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -58,12 +58,14 @@
|
|||
<script setup>
|
||||
|
||||
// table元素
|
||||
import {onMounted, ref} from "vue";
|
||||
import {getCurrentInstance, onMounted, ref, watch } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
import request from "../utils/request";
|
||||
|
||||
const tableRef = ref(null);
|
||||
// table高度
|
||||
const tableHeight = ref();
|
||||
|
||||
const { proxy, ctx } = getCurrentInstance()
|
||||
onMounted(() => {
|
||||
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
|
||||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
|
|
@ -71,13 +73,69 @@ onMounted(() => {
|
|||
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
|
||||
};
|
||||
});
|
||||
const router = useRouter()
|
||||
const tableData = ref([])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const redirect = () => {
|
||||
router.push({path: '/', query: {currentPage: currentPage.value, pageSize: pageSize.value}})
|
||||
}
|
||||
const getProjects = () => {
|
||||
proxy.dialogFormVisible = false
|
||||
const that = this;
|
||||
request({
|
||||
url: 'project',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageCurrent: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
// sortBy: 'projectCreatedTime',
|
||||
// asc: false,
|
||||
paramMap: {
|
||||
completed: false
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
//console.log(response.data.data.records)
|
||||
total.value = response.data.data.total
|
||||
tableData.value = response.data.data.records
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
// 选择一页显示多少条数据
|
||||
const handleSizeChange = (val) => {
|
||||
redirect()
|
||||
}
|
||||
// 选择当前的是第几页
|
||||
const handleCurrentChange = (val) => {
|
||||
redirect()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.query,
|
||||
() => {
|
||||
if (router.currentRoute.value.query.currentPage)
|
||||
currentPage.value = parseInt(router.currentRoute.value.query.currentPage)
|
||||
if (router.currentRoute.value.query.pageSize)
|
||||
pageSize.value = parseInt(router.currentRoute.value.query.pageSize)
|
||||
|
||||
getProjects()
|
||||
},
|
||||
// 组件创建完后获取数据，
|
||||
// 此时 data 已经被 observed 了
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
</script>
|
||||
<script>
|
||||
import router from "../router";
|
||||
import request from "../utils/request";
|
||||
import {ElMessage} from "element-plus";
|
||||
import CreateProjectDialog from "../components/CreateProjectDialog"
|
||||
import router from "../router";
|
||||
|
||||
export default {
|
||||
name: "OngoingProject",
|
||||
|
|
@ -88,14 +146,8 @@ export default {
|
|||
return {
|
||||
dialogFormVisible: false,
|
||||
|
||||
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
|
||||
projectClasses: [],
|
||||
projectSubClasses: [],
|
||||
tableData: [],
|
||||
|
||||
staffId: Number
|
||||
}
|
||||
|
|
@ -103,24 +155,7 @@ export default {
|
|||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
const that = this
|
||||
// watch 路由的参数，以便再次获取数据
|
||||
this.$watch(
|
||||
() => that.$route.query,
|
||||
() => {
|
||||
if (that.$route.query.currentPage)
|
||||
that.currentPage = parseInt(that.$route.query.currentPage)
|
||||
if (that.$route.query.pageSize)
|
||||
that.pageSize = parseInt(that.$route.query.pageSize)
|
||||
|
||||
that.getProjects()
|
||||
},
|
||||
// 组件创建完后获取数据，
|
||||
// 此时 data 已经被 observed 了
|
||||
{immediate: true}
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -134,14 +169,7 @@ export default {
|
|||
this.getProjectClass()
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
this.redirect()
|
||||
},
|
||||
// 选择当前的是第几页
|
||||
handleCurrentChange(val) {
|
||||
this.redirect()
|
||||
},
|
||||
|
||||
onCloseProject(row) {
|
||||
request({
|
||||
url: 'project/complete',
|
||||
|
|
@ -162,32 +190,8 @@ export default {
|
|||
console.log(error)
|
||||
})
|
||||
},
|
||||
redirect() {
|
||||
router.push({path: '/', query: {currentPage: this.currentPage, pageSize: this.pageSize}})
|
||||
},
|
||||
getProjects() {
|
||||
this.dialogFormVisible = false
|
||||
const that = this;
|
||||
request({
|
||||
url: 'project',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageCurrent: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
paramMap: {
|
||||
completed: false
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
//console.log(response.data.data.records)
|
||||
that.total = response.data.data.total
|
||||
that.tableData = response.data.data.records
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
getProjectClass() {
|
||||
const that = this;
|
||||
request({
|
||||
|
|
|
|||
Loading…
Reference in New Issue