FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化table数据过多造成卡顿问题

Browse Source
This commit is contained in:
shenyanpei
2021-09-26 11:30:29 +08:00
parent acaf5437b7
commit 138557770b
1 changed files with 104 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/processCenter/pages/creatProcess/xmpg2/step6.vue
+104 -75
View File
@@ -49,11 +49,12 @@
</div>
</div>
<el-table
:data="dataList"
style="width: 100%; border: 1px solid #cccccc"
:data="dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize ) "
style="width: 100%; border: 1px solid #cccccc;height: 400px"
row-key="standId"
height="70%"
border
highlight-current-row
@selection-change="selectStandChange"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold'}"
@@ -72,7 +73,8 @@
>
<template slot-scope="scope">
<a v-if="scope.row.standYear" class="table-jump"
@click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber
@click="handlePreview(scope.row)">{{ scope.row.standSort }} {{
scope.row.standNumber
}}-{{ scope.row.standYear }}</a>
<a v-else @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.standSort }}
{{ scope.row.standNumber }}</a>
@@ -243,18 +245,26 @@
</el-table-column>
</el-table-column>
</el-table-column>
<!-- 以后全选可能用-->
<!-- <el-table-column-->
<!-- prop="productionCompletionTime"-->
<!-- align="center"-->
<!-- fixed="right"-->
<!-- width="160"-->
<!-- label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button style="width: 98%" size="small" type="primary" @click="">{{ "批量编辑" }}</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- 以后全选可能用-->
<!-- <el-table-column-->
<!-- prop="productionCompletionTime"-->
<!-- align="center"-->
<!-- fixed="right"-->
<!-- width="160"-->
<!-- label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button style="width: 98%" size="small" type="primary" @click="">{{ "批量编辑" }}</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<el-pagination
layout="total,sizes, prev, pager, next"
background
:page-sizes="[20, 40, 60]"
:total="total"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div>
<el-collapse accordion>
@@ -353,77 +363,80 @@
</ProcessFooter>
<!-- 福田全公司选人解决方案 -->
<Role-tree
check-box
:is-title="drawerTitle"
:is-visible.sync="drawerModal"
@checkedRole="checkedTransferRole"
:nodeList="nodeList"
check-box
:is-title="drawerTitle"
:is-visible.sync="drawerModal"
@checkedRole="checkedTransferRole"
:nodeList="nodeList"
></Role-tree>
<el-drawer
title="批量填写"
:visible.sync="modalshowflag"
:wrapperClosable="false"
size="800px">
title="批量填写"
:visible.sync="modalshowflag"
:wrapperClosable="false"
size="800px">
<div class="demo-drawer-content">
<el-form :model="batchEditForm" class="label-input-form" ref="projectComplianceForm" label-width="150">
<el-divider><span><b>在研产品</b></span></el-divider>
<el-formItem label="合规原因" class="add-form-item" >
<el-formItem label="合规原因" class="add-form-item">
<el-input
v-model="batchEditForm.complianceReasons"
placeholder="请输入合规原因"
v-model="batchEditForm.complianceReasons"
placeholder="请输入合规原因"
></el-input>
</el-formItem>
<el-form-item label="不合规项目" class="add-form-item" >
<el-form-item label="不合规项目" class="add-form-item">
<el-input
v-model="batchEditForm.noCompliance"
placeholder="请输入不合规项目"
v-model="batchEditForm.noCompliance"
placeholder="请输入不合规项目"
></el-input>
</el-form-item>
<el-form-item label="不合规应对措施" class="add-form-item" >
<el-form-item label="不合规应对措施" class="add-form-item">
<el-input
v-model="batchEditForm.countermeasures"
placeholder="请输入不合规应对措施"
v-model="batchEditForm.countermeasures"
placeholder="请输入不合规应对措施"
></el-input>
</el-form-item>
<el-form-item label="完成时间" class="add-form-item" >
<el-form-item label="完成时间" class="add-form-item">
<el-date-picker
v-model="batchEditForm.completionTime"
type="date"
placeholder="选择日期">
v-model="batchEditForm.completionTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<br>
<el-divider><span><b>在产产品</b></span></el-divider>
<el-formItem label="合规原因" class="add-form-item" >
<el-formItem label="合规原因" class="add-form-item">
<el-input
v-model="batchEditForm.zcComplianceReasons"
placeholder="请输入合规原因"
v-model="batchEditForm.zcComplianceReasons"
placeholder="请输入合规原因"
></el-input>
</el-formItem>
<el-form-item label="不合规项目" class="add-form-item" >
<el-form-item label="不合规项目" class="add-form-item">
<el-input
v-model="batchEditForm.zcNoCompliance"
placeholder="请输入不合规项目"
v-model="batchEditForm.zcNoCompliance"
placeholder="请输入不合规项目"
></el-input>
</el-form-item>
<el-form-item label="不合规应对措施" class="add-form-item" >
<el-form-item label="不合规应对措施" class="add-form-item">
<el-input
v-model="batchEditForm.zcCountermeasures"
placeholder="请输入不合规应对措施"
v-model="batchEditForm.zcCountermeasures"
placeholder="请输入不合规应对措施"
></el-input>
</el-form-item>
<el-form-item label="完成时间" class="add-form-item" >
<el-form-item label="完成时间" class="add-form-item">
<el-date-picker
v-model="batchEditForm.zcCompletionTime"
type="date"
placeholder="选择日期">
v-model="batchEditForm.zcCompletionTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
<div class="demo-drawer-footer">
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveBatchEditForm">确定</el-button>
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelBatchEditForm">取消</el-button>
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveBatchEditForm">
确定
</el-button>
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelBatchEditForm">取消
</el-button>
</div>
</el-drawer>
</div>
@@ -433,7 +446,7 @@
import ProcessHeader from "../../components/ProcessHeader";
import ProcessFooter from "../../components/ProcessFooter";
import ProcessTitle from "../../components/ProcessTitle";
import { inboundLiaisonDetail, saveTaskForPub ,changeAssigneeNew } from "api/process";
import {inboundLiaisonDetail, saveTaskForPub, changeAssigneeNew} from "api/process";
export default {
name: "xmpg2Step6",
@@ -444,30 +457,33 @@ export default {
},
data() {
return {
nodeList:[],
total: 0,
currentPage: 1,
pageSize: 20,
nodeList: [],
isTransfer: false,
// 调整处理人抽屉状态
drawerModal: false,
batchEditForm: {
// 在研产品
// 合规
complianceReasons :'',
complianceReasons: '',
// 不合规
noCompliance :'',
noCompliance: '',
// 应对措施
countermeasures :'',
countermeasures: '',
// 完成时间
completionTime :'',
completionTime: '',
// 在产产品
// 合规
zcComplianceReasons :'',
zcComplianceReasons: '',
// 不合规
zcNoCompliance:'',
zcNoCompliance: '',
// 应对措施
zcCountermeasures:'',
zcCountermeasures: '',
// 完成时间
zcCompletionTime:''
zcCompletionTime: ''
},
hasChildren: true,
active: "1",
@@ -519,7 +535,7 @@ export default {
},
methods: {
//确认转办
checkedTransferRole (data) {
checkedTransferRole(data) {
this.assigneeNewLoading = true
changeAssigneeNew({
taskId: this.$route.query.taskIds, // 任务id
@@ -539,7 +555,7 @@ export default {
})
},
// 请求转换流程图
processNum (row) {
processNum(row) {
axios.request({
url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
responseType: 'blob',
@@ -554,7 +570,7 @@ export default {
})
},
//转办事件
handleTransfer(){
handleTransfer() {
this.drawerModal = true
this.drawerTitle = '转办处理人'
this.selectPeople = row
@@ -563,8 +579,8 @@ export default {
saveBatchEditForm() {
// console.log(this.selectList)
for( let a = 0; a < this.dataList.length; a++) {
for ( let b = 0; b < this.selectList.length; b++) {
for (let a = 0; a < this.dataList.length; a++) {
for (let b = 0; b < this.selectList.length; b++) {
if (this.dataList[a].id === this.selectList[b]) {
//合规
this.dataList[a].complianceReasons = this.batchEditForm.complianceReasons
@@ -582,9 +598,9 @@ export default {
this.dataList[a].zcCountermeasures = this.batchEditForm.zcCountermeasures
//完成时间
this.dataList[a].zcCompletionTime = this.batchEditForm.zcCompletionTime
}else {
for (let i=0;i<this.dataList[a].children.length;i++){
if (this.dataList[a].children[i].id === this.selectList[b]){
} else {
for (let i = 0; i < this.dataList[a].children.length; i++) {
if (this.dataList[a].children[i].id === this.selectList[b]) {
//合规
this.dataList[a].children[i].complianceReasons = this.batchEditForm.complianceReasons
//不合规
@@ -696,7 +712,6 @@ export default {
pId: this.pId
}).then(res => {
if (res) {
console.log(res.mesg);
const processForm = JSON.parse(res.mesg);
this.getFormFieldList(processForm);
}
@@ -713,15 +728,27 @@ export default {
this.listForm.prcName = this.prcName;
this.listForm["id"] = item.id;
// this.listForm.dataList = item.dataList;
this.dataList = this.listForm.dataList;
console.log(this.dataList);
this.dataList = this.listForm.dataList[0].children
this.dataList.map(item => {
this.$set(item, 'standName', this.listForm.dataList[0].standName)
this.$set(item, 'standEnName', this.listForm.dataList[0].standEnName)
this.$set(item, 'standYear', this.listForm.dataList[0].standYear)
this.$set(item, 'standSort', this.listForm.dataList[0].standSort)
this.$set(item, 'standNumber', this.listForm.dataList[0].standNumber)
})
this.total = this.listForm.dataList[0].children.length;
} else {
this.listForm = item.form;
this.dataList = item.form.dataList;
this.dataList = item.form.dataList[0].children
this.total = item.form.dataList[0].children.length;
}
});
},
// 分页
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
//保存事件
handleSave() {
this.saveLoading = true;
@@ -874,10 +901,12 @@ export default {
.demo-drawer-content {
margin-top: 10px;
}
/deep/.el-table th > .cell{
/deep/ .el-table th > .cell {
font-size: 12px;
}
/deep/.el-table thead.is-group th{
/deep/ .el-table thead.is-group th {
padding: 0px;
}
}