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