ProjectManagement_frontend/src/views/ClosedProject.vue

<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch">

    <p style="margin-left: 40px;font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">
      已结项项目</p>

    <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">

      <el-table
          ref="tableRef"
          class="projectTable"
          :height="tableHeight"
          @sort-change="onSortChange"
          @row-click="onRowClick"
          :data="tableData">
        <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
                :class="scope.row.completeNum===0 ? 'blackTextProgress' : ''"
                :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)"/>
          </template>
        </el-table-column>
        <el-table-column prop="projectClosedDate" label="结项日期" min-width="10%" align="right"
                         :formatter="dateFormatter"/>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float: right;margin-top: 20px;">
      </el-pagination>
    </div>
  </div>
</template>
<script setup>

// table元素
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*/ - 400;
  window.onresize = () => {
    tableHeight.value = window.innerHeight /*- tableRef.value.$el.offsetTop*/ - 400;
  };
});
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 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
      }
    }
  }).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 moment from "moment";
import router from "../router";

export default {
  name: "ClosedProject",
  data() {
    return {}
  },

  methods: {

    onRowClick(row, column, event) {
      router.push({path: '/project/' + row.projectId})
    },
    priceFormatter(row, column) {
      return row[column.property] / 10000 + '万';
    },
    dateFormatter(row, column) {
      const moment = require('moment');
      const date = row[column.property];
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date * 1000).format("yyyy-MM-DD")
    },
  }
}
</script>

<style scoped>
.blackTextProgress >>> .el-progress-bar__innerText {
  color: var(--el-table-text-color);
}

.projectTable {
  width: 100%;
}

</style>