解决build环境项目列表分页问题

main
wuyize 2022-07-09 10:42:42 +08:00
parent 2ae6aadd38
commit 7710ac1377
2 changed files with 133 additions and 125 deletions

View File

@ -18,11 +18,12 @@
<el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/> <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
<el-table-column label="项目进度" min-width="35%" > <el-table-column label="项目进度" min-width="35%" >
<template #default="scope"> <template #default="scope">
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''" <el-progress :text-inside="true" :stroke-width="18"
:percentage="scope.row.completeNum*100/scope.row.totalNum"></el-progress> :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> </template>
</el-table-column> </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> </el-table>
<!-- 分页 --> <!-- 分页 -->
@ -40,25 +41,82 @@
</div> </div>
</template> </template>
<script setup> <script setup>
// table // 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); const tableRef = ref(null);
// table // table
const tableHeight = ref(); const tableHeight = ref();
const { proxy, ctx } = getCurrentInstance()
onMounted(() => { onMounted(() => {
// innerHeight-offsetTop-85 // innerHeight-offsetTop-110
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110; tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
//
window.onresize = () => { window.onresize = () => {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110; 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>
<script> <script>
import request from "../utils/request";
import moment from "moment"; import moment from "moment";
import router from "../router"; import router from "../router";
@ -66,66 +124,12 @@ export default {
name: "ClosedProject", name: "ClosedProject",
data() { data() {
return { 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: { 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) { priceFormatter(row, column) {
return row[column.property]/10000 + '万'; return row[column.property]/10000 + '万';
}, },

View File

@ -58,12 +58,14 @@
<script setup> <script setup>
// table // 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); const tableRef = ref(null);
// table // table
const tableHeight = ref(); const tableHeight = ref();
const { proxy, ctx } = getCurrentInstance()
onMounted(() => { onMounted(() => {
// innerHeight-offsetTop-110 // innerHeight-offsetTop-110
tableHeight.value = window.innerHeight - tableRef.value.$el.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; 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>
<script> <script>
import router from "../router";
import request from "../utils/request";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import CreateProjectDialog from "../components/CreateProjectDialog" import CreateProjectDialog from "../components/CreateProjectDialog"
import router from "../router";
export default { export default {
name: "OngoingProject", name: "OngoingProject",
@ -88,14 +146,8 @@ export default {
return { return {
dialogFormVisible: false, dialogFormVisible: false,
total: 0,
currentPage: 1,
pageSize: 10,
projectClasses: [], projectClasses: [],
projectSubClasses: [], projectSubClasses: [],
tableData: [],
staffId: Number staffId: Number
} }
@ -103,24 +155,7 @@ export default {
computed: { 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() { mounted() {
}, },
methods: { methods: {
@ -134,14 +169,7 @@ export default {
this.getProjectClass() this.getProjectClass()
this.dialogFormVisible = true this.dialogFormVisible = true
}, },
//
handleSizeChange(val) {
this.redirect()
},
//
handleCurrentChange(val) {
this.redirect()
},
onCloseProject(row) { onCloseProject(row) {
request({ request({
url: 'project/complete', url: 'project/complete',
@ -162,32 +190,8 @@ export default {
console.log(error) 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() { getProjectClass() {
const that = this; const that = this;
request({ request({