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

src/views/Home.vue

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

src/views/OngoingProject.vue

@@ -4,7 +4,7 @@
     <div style="margin: 0 40px 0 40px;
                 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>
-      <el-button type="primary" @click.native="onCreateProject">新增项目</el-button>
+      <el-button v-if="canCreateProject" type="primary" @click.native="onCreateProject">新增项目</el-button>
     </div>
     <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">
@@ -17,15 +17,19 @@
           :height="tableHeight"
           :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="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="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%">
           <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' : ''"
-                         :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>
         </el-table-column>
         <el-table-column prop="operation" min-width="10%" align="right">
@@ -59,14 +63,14 @@
 <script setup>
 
 // 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";
 
 const tableRef = ref(null);
 // table高度
 const tableHeight = ref();
-const { proxy, ctx } = getCurrentInstance()
+const {proxy, ctx} = getCurrentInstance()
 onMounted(() => {
   // 设置表格初始高度为innerHeight-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)
   const that = this;
   request({
@@ -117,8 +121,8 @@ const onSortChange = ( val) => {
     params: {
       pageCurrent: currentPage.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: {
         completed: false
       }
@@ -180,20 +184,24 @@ export default {
       staffId: Number
     }
   },
-  computed: {
+  computed: {},
-
-  },
 
   mounted() {
   },
   methods: {
+    canCreateProject() {
+      if (this.$store && this.$store.state.staff)
+        return this.$store.state.staff.staffGlobalLevel > 3
+      else
+        return false
+    },
     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) {
       if (column.property === "operation")
         return
-      router.push({path: '/project/'+row.projectId})
+      router.push({path: '/project/' + row.projectId})
     },
     onCreateProject() {
       this.getProjectClass()
@@ -253,6 +261,9 @@ export default {
 </script>
 
 <style scoped>
+.blackTextProgress >>> .el-progress-bar__innerText {
+  color: var(--el-table-text-color);
+}
 .projectTable {
   width: 100%;
 }

src/views/ProjectGroup.vue

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

src/views/ProjectWorkitem.vue

@@ -75,7 +75,7 @@
           <template #default="scope">
             <div style="display: inline-block;">
               <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">
                   <svg-icon v-if="scope.row.taskType==='任务'" style="width: 20px;height: 20px;"
                             icon-class="assignment"></svg-icon>