解决我的工作项不对齐的问题和团队分页v-model的问题

main
wuyize 2022-07-12 16:30:08 +08:00
parent d58f84d236
commit 48d95b0244
4 changed files with 33 additions and 21 deletions

View File

@ -17,6 +17,7 @@
<el-menu-item index="2" route="/project/closed"> <el-menu-item index="2" route="/project/closed">
<span>已结项项目</span> <span>已结项项目</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container style="background-color: #F2F3F5"> <el-container style="background-color: #F2F3F5">

View File

@ -4,7 +4,7 @@
<div style="margin: 0 40px 0 40px; <div style="margin: 0 40px 0 40px;
display: flex;flex-direction: row;justify-content: space-between"> display: flex;flex-direction: row;justify-content: space-between">
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">在途项目</p> <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">在途项目</p>
<el-button type="primary" @click.native="onCreateProject">新增项目</el-button> <el-button v-if="canCreateProject" type="primary" @click.native="onCreateProject"></el-button>
</div> </div>
<div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px; <div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
display: flex;flex-direction: column;justify-content: space-between"> display: flex;flex-direction: column;justify-content: space-between">
@ -17,15 +17,19 @@
:height="tableHeight" :height="tableHeight"
:data="tableData"> :data="tableData">
<el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/> <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="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"
sortable="custom"/>
<el-table-column prop="projectImportance" label="重要程度" min-width="10%" 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="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%">
<template #default="scope"> <template #default="scope">
<el-progress :text-inside="true" :stroke-width="18" <el-progress
:class="scope.row.completeNum===0 ? 'blackTextProgress' : ''"
:text-inside="true" :stroke-width="18"
:status="(scope.row.totalNum!==0&&scope.row.completeNum===scope.row.totalNum) ? 'success' : ''" :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> :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="operation" min-width="10%" align="right"> <el-table-column prop="operation" min-width="10%" align="right">
@ -59,14 +63,14 @@
<script setup> <script setup>
// table // table
import {getCurrentInstance, onMounted, ref, watch } from "vue"; import {getCurrentInstance, onMounted, ref, watch} from "vue";
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
import request from "../utils/request"; 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() 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;
@ -108,7 +112,7 @@ const getProjects = () => {
}) })
} }
const onSortChange = ( val) => { const onSortChange = (val) => {
console.log(val) console.log(val)
const that = this; const that = this;
request({ request({
@ -117,8 +121,8 @@ const onSortChange = ( val) => {
params: { params: {
pageCurrent: currentPage.value, pageCurrent: currentPage.value,
pageSize: pageSize.value, pageSize: pageSize.value,
sortBy: val.order?val.prop:'projectCreatedTime', sortBy: val.order ? val.prop : 'projectCreatedTime',
asc: val.order==='ascending', asc: val.order === 'ascending',
paramMap: { paramMap: {
completed: false completed: false
} }
@ -180,20 +184,24 @@ export default {
staffId: Number staffId: Number
} }
}, },
computed: { computed: {},
},
mounted() { mounted() {
}, },
methods: { methods: {
canCreateProject() {
if (this.$store && this.$store.state.staff)
return this.$store.state.staff.staffGlobalLevel > 3
else
return false
},
showCloseProjectButton(row) { showCloseProjectButton(row) {
return this.$store.state.staff===null? false:(this.$store.state.staff.staffId===row.projectCreator) return this.$store.state.staff === null ? false : (this.$store.state.staff.staffId === row.projectCreator)
}, },
onRowClick(row, column, event) { onRowClick(row, column, event) {
if (column.property === "operation") if (column.property === "operation")
return return
router.push({path: '/project/'+row.projectId}) router.push({path: '/project/' + row.projectId})
}, },
onCreateProject() { onCreateProject() {
this.getProjectClass() this.getProjectClass()
@ -253,6 +261,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.blackTextProgress >>> .el-progress-bar__innerText {
color: var(--el-table-text-color);
}
.projectTable { .projectTable {
width: 100%; width: 100%;
} }

View File

@ -41,9 +41,9 @@
<el-pagination <el-pagination
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" @size-change="handleSizeChange"
v-model:currentPage="currentPage" :currentPage="currentPage"
:page-sizes="[5, 10, 15, 20]" :page-sizes="[5, 10, 15, 20]"
v-model:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style=" style="

View File

@ -75,7 +75,7 @@
<template #default="scope"> <template #default="scope">
<div style="display: inline-block;"> <div style="display: inline-block;">
<div style="display: flex;align-items: center"> <div style="display: flex;align-items: center">
<div v-if="!scope.row.hasChildren&&scope.row.taskFatherId===0" style="width: 20px"></div> <div v-if="!scope.row.hasChildren&&scope.row.isRoot" style="width: 20px"></div>
<div style="width: 24px;display: flex;justify-content: center"> <div style="width: 24px;display: flex;justify-content: center">
<svg-icon v-if="scope.row.taskType===''" style="width: 20px;height: 20px;" <svg-icon v-if="scope.row.taskType===''" style="width: 20px;height: 20px;"
icon-class="assignment"></svg-icon> icon-class="assignment"></svg-icon>