任务管理模块，分类显示修改，创建任务时分类不可选择，项目视图渲染慢问题修改（滑动滑块加载剩下任务）

package.json

@@ -18,8 +18,9 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "0.18.1",
-    "core-js": "3.6.5",
+    "core-js": "^3.36.1",
     "dhtmlx-gantt": "^8.0.6",
+    "el-table-infinite-scroll": "^2.0.0",
     "element-ui": "2.15.14",
     "js-cookie": "2.2.0",
     "moment": "^2.30.1",
@@ -56,8 +57,8 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
-    "vue-template-compiler": "2.6.14",
-    "vue-direction-key": "^1.0.5"
+    "vue-direction-key": "^1.0.5",
+    "vue-template-compiler": "2.6.14"
   },
   "browserslist": [
     "> 1%",

src/assets/styles/index.scss

@@ -121,7 +121,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 10px;
 }
 
 .query-container {

src/main.js

@@ -37,6 +37,7 @@ import {
 } from "@/utils/common";
 //时间转换主键
 import * as moment from 'moment'
+import ElTableInfiniteScroll from 'el-table-infinite-scroll'
 
 Vue.prototype.getDicts = getDictData
 
@@ -64,6 +65,7 @@ Vue.use(ElementUI, {
 // 如果想要中文版 element-ui，按如下方式声明
 // Vue.use(ElementUI, {locale: zh})
 Vue.use(directive)
+Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);
 Vue.use(auth)
 DictData.install()
 

src/styles/index.scss

@@ -61,5 +61,20 @@ div:focus {
 
 // main-container global css
 .app-container {
-  padding: 20px;
+  padding: 10px;
+}
+
+.of-style::-webkit-scrollbar {
+  width: 8px;
+  height: 1px;
+}
+.of-style::-webkit-scrollbar-thumb { //滑块部分
+  border-radius: 3px;
+  background-color: #c1c1c1;
+}
+.of-style::-webkit-scrollbar-track { //轨道部分
+  //box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: #f1f1f1;
+  border-radius: 3px;
+
 }

src/views/task/components/project.vue

@@ -13,26 +13,31 @@
         prefix-icon="el-icon-search"
         style="margin-left: 20px"/>
     </div>
-    <div class="head-container">
-      <div style="height:calc(100vh - 158px);overflow: auto">
-        <el-tree
-          :data="projectData"
-          :props="defaultProps"
-          :expand-on-click-node="false"
-          :check-on-click-node="true"
-          :filter-node-method="filterNode"
-          default-expand-all
-          ref="projectTree"
-          node-key="id"
-          :highlight-current="true"
-          @node-click="handleNodeClick">
+    <div style="height:calc(100vh - 148px);overflow: auto">
+      <el-tree
+        :data="projectData"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        :check-on-click-node="true"
+        :filter-node-method="filterNode"
+        default-expand-all
+        :indent="10"
+        ref="projectTree"
+        class="custom-tree"
+        node-key="id"
+        :highlight-current="true"
+        @node-click="handleNodeClick">
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <div>{{ node.label }}</div>
+              <el-tooltip class="item" effect="dark" :content="node.label" :disabled="node.label&&node.label.length<11"
+                          placement="top-end">
+                  <div>{{ node.label | ellipsis }}</div>
+              </el-tooltip>
+
               <div v-if="data.type!='模块'" style="font-size: 12px;color: #1c84c6">({{ data.type }})</div>
               <el-popover
                 placement="right"
                 trigger="hover">
-                <el-button size="mini" type="primary" @click="handleAdd(data)"
+                <el-button size="mini" type="primary" @click="handleAdd(data)" v-if="data.type==='分类'"
                            v-hasPermi="['task:project:add']">新增</el-button>
                 <el-button size="mini" @click="handleUpdate(data)" v-hasPermi="['task:project:edit']">修改</el-button>
                 <el-button size="mini" type="danger" @click="handleDelete(data)"
@@ -43,8 +48,7 @@
                    v-hasPermi="['task:project:add','task:project:edit','task:project:delete','task:project:table']"></i>
                </el-popover>
             </span>
-        </el-tree>
-      </div>
+      </el-tree>
     </div>
 
     <!-- 添加或修改项目配置对话框 -->
@@ -136,6 +140,17 @@ export default {
       this.$refs.projectTree.filter(val)
     }
   },
+  filters: {
+    ellipsis(val) {
+      if (!val) {
+        return ''
+      }
+      if (val.length > 10) {
+        return val.slice(0, 10) + '...'
+      }
+      return val
+    }
+  },
   created() {
     this.getProjectTree();
   },
@@ -214,7 +229,7 @@ export default {
 
       this.open = true;
       this.title = "添加项目";
-      listProject().then(response => {
+      listProject({type: '1'}).then(response => {
         this.projectOptions = this.handleTree(response.data, "id");
       });
       getDeptUserTree('1').then(res => {
@@ -229,7 +244,7 @@ export default {
       this.reset();
       let arr = []
       if (row.parentId != '0') {
-        arr.push(listProject().then(response => {
+        arr.push(listProject({type: '1'}).then(response => {
           this.projectOptions = this.handleTree(response.data, "id");
         }))
       }
@@ -316,4 +331,6 @@ export default {
 .add-dialog ::v-deep .el-dialog__body {
   padding: 0 20px 10px 20px;
 }
+
+
 </style>

src/views/task/projectView.vue

@@ -49,7 +49,10 @@
 
     <el-table
       class="view-table"
+      v-loading="loading"
       :data="tableData"
+      v-el-table-infinite-scroll="loadData"
+      :infinite-scroll-disabled="disabled"
       size="mini"
       @cell-mouse-enter="cellMouseEnter"
       @cell-mouse-leave="cellMouseLeave"
@@ -57,7 +60,7 @@
       @cell-click="cellClick"
       @cell-dblclick="cellDbClick"
       @row-click="rowClick"
-      height="calc(100vh - 140px)"
+      height="calc(100vh - 110px)"
       border>
       <el-table-column fixed prop="id" label="编号" align="center" width="50"/>
       <el-table-column fixed prop="taskName" label="任务名称" align="center" class="task-name-cell" width="180"/>
@@ -74,10 +77,10 @@
           <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
-          <el-tag v-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
+          <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
-          <el-tag v-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
+          <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
           <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
@@ -203,6 +206,7 @@ import DeptUserTree from "@/components/DeptUserTree"
 import RichTextEditor from "@/components/RichTextEditor"
 import {getDeptUserTree} from "@/api/system/user";
 import task from "@/views/mixins/task";
+import elTableInfiniteScroll from 'el-table-infinite-scroll'
 
 const statusMap = {
   '0': {name: '待查看', type: 'info'},
@@ -217,6 +221,9 @@ const statusMap = {
 export default {
   components: {TaskDetail, FileUpload, DeptUserTree, RichTextEditor},
   dicts: ['task_status', 'task_priority'],
+  directives: {
+    'el-table-infinite-scroll': elTableInfiniteScroll
+  },
   mixins: [task],
   data() {
     return {
@@ -226,10 +233,16 @@ export default {
         endDate: undefined,
         status: '0'
       },
+      loading: true,
       projectTree: [],
       userList: [],
       tableHeaders: [],
+      totalData: [],
+      disabled: false,
       tableData: [],
+      page: 0,
+      total: 0,
+
       open: false,
       form: {},
       feedbacks: [],
@@ -277,11 +290,28 @@ export default {
         this.$message.warning("时间跨度不可超过一年")
         return
       }
+      this.loading = true
       listView(this.queryParams).then(res => {
+        this.tableData = []
+        this.page = 0
+        this.disabled = false
         this.tableHeaders = res.data.headers
-        this.tableData = res.data.data
+        this.totalData = res.data.data
+        this.total = Number.parseInt(this.totalData.length / 15) + 1
+        this.loading = false
       })
     },
+    loadData() {
+      if (this.disabled) return;
+      if (this.page < this.total) {
+        let temp = this.totalData.slice(this.page * 15, (this.page + 1) * 15)
+        this.tableData = this.tableData.concat(temp);
+      }
+      this.page++;
+      if (this.page === this.total) {
+        this.disabled = true;
+      }
+    },
 
     cellMouseEnter(row, column, cell, event) {
       if (column.property != 'taskName') {

src/views/task/task.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="5" :xs="24">
+    <el-row :gutter="10">
+      <el-col :span="5" style="position:relative;z-index: 20">
         <project ref="pjTree" @selectProject="selectProject"></project>
       </el-col>
-      <el-col :span="19" :xs="24">
+      <el-col :span="19">
         <div class="query-container">
           <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
             <el-form-item label="执行（负责）人" prop="executors">
@@ -67,7 +67,7 @@
 
         <el-table :data="taskList"
                   ref="taskList"
-                  height="calc(100vh - 180px)"
+                  height="calc(100vh - 150px)"
                   @row-click="rowClick"
                   row-key="id"
                   :indent="10"
@@ -80,7 +80,7 @@
               <span>{{ (scope.row.progressValue ? scope.row.progressValue : 0) + '%' }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="状态" width="80">
+          <el-table-column label="状态" align="center" width="80">
             <template slot-scope="scope">
               <el-tag size="mini" :type="statusMap[scope.row.status].type">{{
                   statusMap[scope.row.status].name
@@ -88,12 +88,21 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="优先级" prop="priority" width="110">
+          <el-table-column label="优先级" prop="priority" align="center" width="110">
             <template slot-scope="scope">
-              <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
-              <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
-              <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
-              <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
+              <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">
+                {{ getTaskPriority(scope.row.priority) }}
+              </el-tag>
+              <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
+                {{ getTaskPriority(scope.row.priority) }}
+              </el-tag>
+              <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
+                {{ getTaskPriority(scope.row.priority) }}
+              </el-tag>
+              <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{
+                  getTaskPriority(scope.row.priority)
+                }}
+              </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="任务起止时间" width="170">
@@ -126,12 +135,10 @@
                   >分解
                   </el-dropdown-item>
                   <el-dropdown-item command="handleUpdate" icon="el-icon-edit-outline"
-                                    v-if="userId===scope.row.createBy"
                                     v-hasPermi="['task:task:edit']"
                   >终止
                   </el-dropdown-item>
                   <el-dropdown-item command="handleEdit" icon="el-icon-edit"
-                                    v-if="userId==='1'||userId===scope.row.createBy"
                                     v-hasPermi="['task:task:edit']"
                   >修改
                   </el-dropdown-item>
@@ -171,7 +178,9 @@
           <el-col :span="12">
             <el-form-item label="所属项目" prop="projectId" class="mini-treeselect">
               <treeselect v-model="form.projectId" :options="projectOptions"
+                          :open-on-click="true"
                           :normalizer="normalizer"
+                          :flat="true"
                           style="width: 220px"
                           placeholder="请选择"/>
             </el-form-item>
@@ -572,11 +581,14 @@ export default {
       if (node.children && !node.children.length) {
         delete node.children;
       }
-      return {
+      let newVar = {
         id: node.id,
         label: node.projectName,
-        children: node.children
+        children: node.children,
+        isDisabled: node.type === '1'
       };
+      console.log(node);
+      return newVar;
     },
 
     /** 新增按钮操作 */

src/views/task/view.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
-      <el-row>
+      <el-row type="flex" justify="space-between">
         <el-col :span="22">
           <el-form-item label="日期" prop="startDate">
             <el-date-picker
@@ -60,7 +60,7 @@
       @cell-click="cellClick"
       @cell-dblclick="cellDbClick"
       @row-click="rowClick"
-      height="calc(100vh - 140px)"
+      height="calc(100vh - 120px)"
       border>
       <el-table-column fixed prop="id" label="编号" align="center" width="50"/>
       <el-table-column fixed prop="taskName" label="任务名称" align="center" class="task-name-cell" width="180"/>
@@ -77,10 +77,10 @@
           <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
-          <el-tag v-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
+          <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
-          <el-tag v-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
+          <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
             {{ getTaskPriority(scope.row.priority) }}
           </el-tag>
           <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{ getTaskPriority(scope.row.priority) }}</el-tag>
@@ -175,7 +175,7 @@
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="计划工时">
+            <el-form-item label="计划工时" prop="planHours">
               <el-input-number v-model="form.planHours" @change="hoursChange" :min="1" :step-strictly="true"
                                :controls="false"></el-input-number>
               <span style="margin-left: 5px">小时</span>
@@ -350,12 +350,12 @@ export default {
   },
   data() {
     let validateValue = (rule, value, callback) => {
+      if (value === null || value === undefined) {
+        return callback(new Error('进度不能为空'));
+      }
       if (!Number.isInteger(value) || value < 0 || value > 100) {
         return callback(new Error('进度值必须为0到100的整数'));
       }
-      if (!value) {
-        return callback(new Error('进度不能为空'));
-      }
       return callback();
     };
     let validateHours = (rule, value, callback) => {
@@ -399,6 +399,9 @@ export default {
         value: [
           {required: true, validator: validateValue, trigger: 'blur'}
         ],
+        planHours: [
+          {required: true, message: "计划工时不能为空", trigger: "blur"}
+        ],
         hours: [
           {required: true, validator: validateHours, trigger: 'blur'}
         ],
@@ -619,7 +622,8 @@ export default {
       if (planHours && hours) {
         let feedbackHours = Number.parseFloat(this.form.feedbackHours)
         let percent = (hours + feedbackHours) / planHours * 100;
-        this.form.value = Number.parseInt(percent > 100 ? 100 : percent)
+        let value = Number.parseInt(percent > 100 ? 100 : percent);
+        this.form.value = value === 0 ? 1 : value
       }
     },