实现项目列表排序

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

View File

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

View File

@ -13,11 +13,12 @@
ref="tableRef" ref="tableRef"
class="projectTable" class="projectTable"
@row-click="onRowClick" @row-click="onRowClick"
@sort-change="onSortChange"
:height="tableHeight" :height="tableHeight"
:data="tableData"> :data="tableData">
<el-table-column prop="projectName" label="项目名称" min-width="15%"/> <el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/>
<el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/> <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter" sortable="custom"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%"/> <el-table-column prop="projectImportance" label="重要程度" min-width="10%" sortable="custom"/>
<el-table-column prop="projectClassName" 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="projectSubclassName" label="项目类型" min-width="10%" />
<el-table-column label="项目进度" min-width="35%"> <el-table-column label="项目进度" min-width="35%">
@ -90,8 +91,8 @@ const getProjects = () => {
params: { params: {
pageCurrent: currentPage.value, pageCurrent: currentPage.value,
pageSize: pageSize.value, pageSize: pageSize.value,
// sortBy: 'projectCreatedTime', sortBy: 'projectCreatedTime',
// asc: false, asc: false,
paramMap: { paramMap: {
completed: false 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) => { const handleSizeChange = (val) => {
redirect() redirect()