实现项目列表排序

main
wuyize 2022-07-11 14:34:46 +08:00
parent cc7fcc7b71
commit 037bb483ac
3 changed files with 80 additions and 16 deletions

View File

@ -10,10 +10,11 @@
ref="tableRef"
class="projectTable"
:height="tableHeight"
@sort-change="onSortChange"
:data="tableData">
<el-table-column prop="projectName" label="项目名称" min-width="15%"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
<el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter" sortable="custom"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%" sortable="custom"/>
<el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
<el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
<el-table-column label="项目进度" min-width="35%" >
@ -74,8 +75,33 @@ const getClosedProjects = () => {
params: {
pageCurrent: currentPage.value,
pageSize: pageSize.value,
// sortBy: 'projectClosedDate',
// asc: false,
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 onSortChange = ( val) => {
console.log(val)
const that = this;
request({
url: 'project',
method: 'get',
params: {
pageCurrent: currentPage.value,
pageSize: pageSize.value,
sortBy: val.order?val.prop:'projectClosedDate',
asc: val.order==='ascending',
paramMap: {
completed: true
}

View File

@ -5,7 +5,7 @@
<el-menu
router
style="height: 100%"
default-active="1">
:default-active="menuDefaultActive">
<div
style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
<svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
@ -55,6 +55,7 @@
<script setup>
import LogoutButton from "../components/LogoutButton";
</script>
<script>
// @ is an alias to /src
@ -68,10 +69,19 @@ export default {
name: 'Home',
components: {},
data() {
return {}
return {
menuDefaultActive: 1,
}
},
mounted() {
created() {
switch (this.$route.path.split('/').pop()) {
case 'closed':
this.menuDefaultActive = '2';
break
default:
this.menuDefaultActive = '1';
break
}
},
methods: {
getStaffFullname() {

View File

@ -13,13 +13,14 @@
ref="tableRef"
class="projectTable"
@row-click="onRowClick"
@sort-change="onSortChange"
:height="tableHeight"
:data="tableData">
<el-table-column prop="projectName" label="项目名称" min-width="15%"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
<el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
<el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
<el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter" sortable="custom"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%" sortable="custom"/>
<el-table-column prop="projectClassName" label="项目分类" min-width="10%" />
<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"
@ -90,8 +91,8 @@ const getProjects = () => {
params: {
pageCurrent: currentPage.value,
pageSize: pageSize.value,
// sortBy: 'projectCreatedTime',
// asc: false,
sortBy: 'projectCreatedTime',
asc: false,
paramMap: {
completed: false
}
@ -107,6 +108,33 @@ const getProjects = () => {
})
}
const onSortChange = ( val) => {
console.log(val)
const that = this;
request({
url: 'project',
method: 'get',
params: {
pageCurrent: currentPage.value,
pageSize: pageSize.value,
sortBy: val.order?val.prop:'projectCreatedTime',
asc: val.order==='ascending',
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()