添加执行实现虚拟渲染

fhKeeper/formulahousekeeper/timesheet/src/components/taskComponent.vue

@@ -66,46 +66,52 @@
                 :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" @change="DateChange()"></el-date-picker>
             </el-form-item>
             <div style="border: 1px solid #ddd;margin:5px 0;padding:5px 0;">
-            <el-form-item :label="$t('zhi-hang-ren') + (index+1)" v-for="(executorItem, index) in addForm.executorListFront" :key="index">
-                <div class="editingTask">
-                    <div style="margin-right: 30px">
-                        <el-select v-if="user.userNameNeedTranslate != 1" v-model="executorItem.executorId" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" size="small" filterable clearable :placeholder="$t('pleaseselectanexecutor')" style="width: 150px" @change="$forceUpdate()">
-                            <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
-                                <span style="float: left">{{ item.name }}</span>
-                                <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 20px" v-if="item.jobNumber">{{ item.jobNumber }}</span>
-                            </el-option>
-                        </el-select>
-                        <selectCat v-if="user.userNameNeedTranslate == 1" :size="'mini'" :filterable="true" :subject="users" :subjectId="executorItem.executorId" :distinction="'1'" @selectCal="selectCal" :index="index" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)"></selectCat>
-                    </div>
-                    <!-- 项目服务 -->
-                    <div v-if="user.companyId==3092">
-                        <span style="margin-left:30px;margin-right:10px;">{{'项目服务'}}</span>
-                        <el-select  clearable collapse-tags  filterable  v-model="executorItem.serviceId" size="small" placeholder="请选择项目服务" style="width: 300px" @change="serviceIdChange()" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)">
-                            <el-option
-                            v-for="item in sapServiceList"
-                            :key="item.id"
-                            :label="item.serviceName+'-'+item.serviceCode"
-                            :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </div>
-                    <!-- 计划工时 -->
-                    <div>
-                        <span style="margin-right:10px;">{{ $t('plantime') }}</span>
-                        <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" v-model="gstimday[index]" style="width:120px;" :min="1" :max="100"  :placeholder="$t('danweitian')" @change="chggstim(0,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.day') }}</span>
-                        <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" v-model="gstimhour[index]" style="width:120px;" :min="1" :max="999"  :placeholder="$t('pleaseentertheplannedworking')" @change="chggstim(1,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.hour') }}</span>
+            <div class="container" :style="{ height: containerHeight }" @scroll="handleScroll" ref="container">
+                <div class="list" :style="{ top: listTop }">
+                    <el-form-item :label="$t('zhi-hang-ren') + (executorItem.indexList + 1)" v-for="(executorItem, index) in showData" :key="index">
+                        <div class="editingTask">
+                            <div style="margin-right: 30px">
+                                <el-select v-if="user.userNameNeedTranslate != 1" v-model="executorItem.executorId" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" size="small" filterable clearable :placeholder="$t('pleaseselectanexecutor')" style="width: 150px" @change="$forceUpdate()">
+                                    <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
+                                        <span style="float: left">{{ item.name }}</span>
+                                        <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 20px" v-if="item.jobNumber">{{ item.jobNumber }}</span>
+                                    </el-option>
+                                </el-select>
+                                <selectCat v-if="user.userNameNeedTranslate == 1" :size="'mini'" :filterable="true" :subject="users" :subjectId="executorItem.executorId" :distinction="'1'" @selectCal="selectCal" :index="index" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)"></selectCat>
+                            </div>
+                            <!-- 项目服务 -->
+                            <div v-if="user.companyId==3092">
+                                <span style="margin-left:30px;margin-right:10px;">{{'项目服务'}}</span>
+                                <el-select  clearable collapse-tags  filterable  v-model="executorItem.serviceId" size="small" placeholder="请选择项目服务" style="width: 300px" @change="serviceIdChange()" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)">
+                                    <el-option
+                                    v-for="item in sapServiceList"
+                                    :key="item.id"
+                                    :label="item.serviceName+'-'+item.serviceCode"
+                                    :value="item.id">
+                                    </el-option>
+                                </el-select>
+                            </div>
+                            <!-- 计划工时 -->
+                            <div>
+                                <span style="margin-right:10px;">{{ $t('plantime') }}</span>
+                                <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" v-model="gstimday[index]" style="width:120px;" :min="1" :max="100"  :placeholder="$t('danweitian')" @change="chggstim(0,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.day') }}</span>
+                                <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !permissions.editAnyTask && !(groupResponsibleId == user.id)" v-model="gstimhour[index]" style="width:120px;" :min="1" :max="999"  :placeholder="$t('pleaseentertheplannedworking')" @change="chggstim(1,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.hour') }}</span>
 
-                        <!-- <el-input-number v-model="numnnumnum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->
+                                <!-- <el-input-number v-model="numnnumnum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->
 
-                        <!-- 移除执行人 -->
-                        <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement || permissions.editAnyTask|| groupResponsibleId == user.id)" style="margin-left:5px" @click="removeExecutorLine(index)"></i>
-                    </div>
+                                <!-- 移除执行人 -->
+                                <!-- <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement || permissions.editAnyTask|| groupResponsibleId == user.id)" style="margin-left:5px" @click="removeExecutorLine(index)"></i> -->
+                                <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement || permissions.editAnyTask|| groupResponsibleId == user.id)" style="margin-left:5px" @click="removeExecutorLineNew(executorItem)"></i>
+                            </div>
+                        </div>
+                    </el-form-item>
                 </div>
-            </el-form-item>
+                <div class="bar" :style="{ height: barHeight }"></div>
+            </div>
             <el-link type="primary" v-if="(((addForm.executorListFront == null || addForm.executorListFront.length<100) && 
             (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id || permissions.projectManagement || permissions.editAnyTask)) || 
             groupResponsibleId == user.id)" 
-            style="margin-left:35px;" @click="addExecutorLine">{{ $t('addinganexecutor') }}</el-link>
+            style="margin:0 0 10px 35px;position: relative;z-index: 999;" @click.stop="addExecutorLine">添加执行人</el-link>
             </div>
             <el-form-item :label="$t('priority')">
                 <el-select v-model="addForm.taskLevel" style="width:100%;" >
@@ -637,6 +643,7 @@ import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 // 导入富文本
 import { quillEditor } from 'vue-quill-editor'
+
 export default {
   props: {
     integrationTask:{
@@ -651,10 +658,14 @@ export default {
   },
   components: {
     quillEditor, // 富文本
-    selectCat
+    selectCat,
   },
   data() {
     return {
+        startNum: 0,
+        endNum: 5,
+        shownumber: 5,
+        sizeNum: JSON.parse(sessionStorage.getItem("user")).companyId == '3092' ? 105 : 65,
         meeting: false,
         numnnumnum: 2,
         componentFlg: false,
@@ -864,7 +875,29 @@ export default {
         sapServiceList:[]
     };
   },
-  computed: {},
+  computed: {
+    showData() {
+        // return this.addForm.executorListFront.slice(this.startNum, this.endNum)
+        let newList = this.addForm.executorListFront
+        newList.forEach((item, index) => {
+            item.indexList = index
+        })
+        return newList.slice(this.startNum, this.endNum)
+    },
+    containerHeight() {
+        if(this.addForm.executorListFront.length < this.shownumber) {
+            return this.sizeNum * this.addForm.executorListFront.length + 'px'
+        } else {
+            return (this.sizeNum * this.shownumber) - 20 + 'px'
+        }
+    },
+    barHeight() {
+        return this.sizeNum * (this.addForm.executorListFront || []).length + 'px'
+    },
+    listTop() {
+        return this.startNum * this.sizeNum + 'px'
+    }
+  },
   watch: {},
   created() {},
   mounted() {
@@ -878,6 +911,21 @@ export default {
     
   },
   methods: {
+    // 容器的滚动事件
+    handleScroll() {
+        const scrollTop = this.$refs.container.scrollTop
+        this.startNum = Math.floor(scrollTop / this.sizeNum)
+        console.log(this.startNum, this.shownumber, '<==== 计算')
+        this.endNum = this.startNum + this.shownumber
+    },
+    bottomScrollClick(val) {
+        this.$nextTick(() => {
+            let scrollEl = this.$refs.container;
+            let bum = scrollEl.scrollHeight
+            let current = scrollEl.scrollTop + 1
+            scrollEl.scrollTo({ top: val ? current : bum, behavior: 'smooth' });
+        });
+    },
     // 刷新数据
     refreshData() {
         this.$forceUpdate()
@@ -1042,7 +1090,24 @@ export default {
             this.gstimhour.splice(index,1)
             this.$forceUpdate();
         }
-        
+    },
+    removeExecutorLineNew(item, e) {
+        let index = item.indexList
+        if(e == 1){
+            this.relationItemData.executorList.splice(index,1);
+            this.gstimday.splice(index,1)
+            this.gstimhour.splice(index,1)
+            this.$forceUpdate();
+        }else{
+            this.addForm.executorListFront.splice(index,1);
+            this.gstimday.splice(index,1)
+            this.gstimhour.splice(index,1)
+            this.$forceUpdate();
+        }
+        this.replacementResult()
+        setTimeout(() => {
+            this.bottomScrollClick(true)
+        }, 100)
     },
     addExecutorLine(e) {
         if(e == 1){
@@ -1061,8 +1126,22 @@ export default {
             this.gstimday.push(1)
             this.gstimhour.push(this.user.timeType.allday)
             this.$forceUpdate();
-            }
-        
+            this.replacementResult()
+            setTimeout(() => {
+                this.bottomScrollClick()
+            }, 100)
+        }
+    },
+    replacementResult() {
+        let lengths = (this.addForm.executorListFront || []).length
+        if(lengths > this.shownumber) {
+            this.startNum = lengths - this.shownumber
+            this.endNum = lengths
+        } else {
+            this.startNum = 0
+            this.endNum = lengths
+        }
+        this.sizeNum = typeof this.sizeNum == 'number' ? this.sizeNum+'' : +this.sizeNum
     },
     getTaskDetail(id) {
         this.http.post('/task/getTask',{id: id},
@@ -1505,6 +1584,9 @@ export default {
     // 获得焦点时触发
     onEditorBlur(){
         let theEle = this.$refs.text; // 获取元素
+        if(!theEle.value) {
+            return
+        }
         var img = theEle.value.match(/<img[^>]+>/g); // 赛选 img 标签
         var arrImg = ''
         for (var j = 0; j < img.length; j++) {
@@ -2239,4 +2321,13 @@ export default {
     display: inline-block;
     padding: 2px 5px;
 }
+.container {
+    position: relative;
+    overflow-y: scroll;
+}
+.list {
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
 </style>