elementui tabs动态渲染+锚点滚动定位

elementui tabs动态渲染+锚点滚动定位
需求描述：
第一版：tab是固定的，然后点击不同tab定位当前tab下内容进行展示，滚动鼠标滑轮上方tab高亮定位是某个tab下的内容
第二版：tabs是动态渲染，根据制定条件展示tab，锚点效果不变。
出现问题：
因为tab是动态显示隐藏的,所以给tabs的数组对象增加一个 isShow属性，当展示当前页面的时候把每个是否能展示的属性进行赋值，然后dom层通过v-if进行展示。到这里都没问题，滚动和锚点定位出现问题：在视图渲染的时候所有的tab对应下方dom在初始化的时候都进行了创建，也就是上方tab的显示隐藏没有联动下方dom，导致tab无法一个对应的关系，现在锚点出现错乱问题。

我这里解决办法：把对象属性isShow为true（显示）重新组成新数组，组成tabs数组结构，然后下方dom通过上方一个ref属性 找到对应关系进行锚点展示
代码如下

<template><div><!-- <el-row style="margin-bottom: 12px;"><el-button size="small" icon="el-icon-download" type="primary" style="float: right; padding: 3px 0;width: 72px;cursor: pointer;" @click="handleExport()" >导出</el-button></el-row> --><el-tabs v-model="activeName" type="border-card" @tab-click="handleClickTab"><el-tab-pane label="查看详情" name="basic"><!-- {{ activeName }} --><!-- tabs:  {{ tabs }} --><!-- <el-tabs :tab-position="'top'" style="height: 200px;"><el-tab-pane label="作业基本信息">作业基本信息</el-tab-pane><el-tab-pane label="作业相关人员">作业相关人员</el-tab-pane><el-tab-pane label="风险评估">风险评估</el-tab-pane><el-tab-pane label="气体检测">气体检测</el-tab-pane><el-tab-pane label="安全措施确认">安全措施确认</el-tab-pane><el-tab-pane label="安全措施交底">安全措施交底</el-tab-pane><el-tab-pane label="审核与会签">审核与会签</el-tab-pane><el-tab-pane label="作业审批">作业审批</el-tab-pane><el-tab-pane label="完工验收">完工验收</el-tab-pane><el-tab-pane label="检查任务列表">检查任务列表</el-tab-pane><el-tab-pane label="隐患清单列表">隐患清单列表</el-tab-pane><el-tab-pane label="气体检测任务列表">气体检测任务列表</el-tab-pane></el-tabs> --><el-tabsv-model="tabName"class="customer-tab"type="card"@tab-click="jump"><el-tab-panev-for="(tab, index) in tabs"v-if="tab.isShow":name="tab.refName":key="tab.name":label="tab.name"/></el-tabs><!--  'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height --><!--{{ tabName }} --{{ index }} --><div:style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height"class="scroll-content"@scroll="onScroll"><!-- 作业基本信息  tabs.find(item => item.refName === refName) v-if="tabs[index].isShow"  :ref="tabs[index].refName" --><!--    v-if="tabs.find(item => item.refName === 'setOneRef').isShow" --><divv-if="tabs.some(item => item.refName === 'setOneRef'&&item.isShow)":ref="'setOneRef'"class="scroll-item"><PartOne:equipment-form="equipmentForm":work-type-list="workTypeList":ticket="homeworkTicketList"@emitDetail="emitDetail"/></div><!-- 作业相关人员 --><divv-if="tabs.some(item => item.refName === 'setTwoRef'&&item.isShow)":ref="'setTwoRef'"class="scroll-item"><PartTwo :equipment-form="equipmentForm" :work-type-list="workTypeList"/><!-- <div class="line-name"><h2>{{ tabs[1].name }}</h2></div><div><pv-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,]":key="item"style="height: 40px">新能说出的基本功发到你DNF不得发布</p></div> --></div><!-- 风险评估 --><divv-if="tabs.some(item => item.refName === 'setThreeRef'&&item.isShow)":ref="'setThreeRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartThree :equipment-form="equipmentForm" /></div><!-- 气体检测 --><divv-if="tabs.some(item => item.refName === 'setFourRef'&&item.isShow)":ref="'setFourRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartFour :equipment-form="equipmentForm"/></div><!-- 安全措施确认 --><divv-if="tabs.some(item => item.refName === 'setFiveRef'&&item.isShow)":ref="'setFiveRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartFive :equipment-form="equipmentForm" /></div><!-- 安全措施交底 --><divv-if="tabs.some(item => item.refName === 'setSixRef'&&item.isShow)":ref="'setSixRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartSix:equipment-form="equipmentForm" /></div><!-- 审核与会签 --><divv-if="tabs.some(item => item.refName === 'setSevenRef'&&item.isShow)":ref="'setSevenRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartSeven :equipment-form="equipmentForm" /></div><!-- 作业审批 --><divv-if="tabs.some(item => item.refName === 'setEightRef'&&item.isShow)":ref="'setEightRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartEight :equipment-form="equipmentForm" :work-type-list="workTypeList" /></div><!-- 完工验收 --><divv-if="tabs.some(item => item.refName === 'setNineRef'&&item.isShow)":ref="'setNineRef'"class="scroll-item"style="padding-top: 0; top: 5px"><PartNine :equipment-form="equipmentForm" :work-type-list="workTypeList" /></div><!-- 检查任务列表 --><divv-if="tabs.some(item => item.refName === 'setTenRef'&&item.isShow)":ref="'setTenRef'"class="scroll-item"style="padding-top: 0; top: 5px;"><PartTen:equipment-form="equipmentForm":list="checkTaskList":is-have-edit-check-role="isHaveEditCheckRole"/></div><!-- 隐患清单列表 --><divv-if="tabs.some(item => item.refName === 'setElevenRef'&&item.isShow)":ref="'setElevenRef'"class="scroll-item"style="padding-top: 10px; top: 5px;"><!--   :list="hazardList"  --><PartEleven:equipment-form="equipmentForm":list="equipmentForm.checkTaskDetailVoList?equipmentForm.checkTaskDetailVoList:[]"@emit-open-hazard="emitOpenHazard"/></div></div></el-tab-pane><el-tab-pane label="查看历史" name="history"><!-- 查看历史 --><History ref="historyRef" /></el-tab-pane></el-tabs><org-auto-dialog:show-modal="showOrganizationDialog":auto-dialog-data="browseOrganizationData":is-radio="true":checked-org-id="checkedOrgId"@clickConfirm="clickConfirm"@clickCancel="clickCancel"/><org-auto-dialog-post:show-modal="showOrganizationDialogPost":auto-dialog-data="browseOrganizationDataPost":select-root-node="true":is-show-post="true":is-link-selection="true":trees-height="400":select-org-id-node="checkedOrgIdPost"@clickConfirm="clickConfirm"@clickCancel="clickCancel"/><org-auto-dialog:show-modal="showOrganizationDialog2":auto-dialog-data="browseOrganizationData2":is-radio="true":checked-org-id="checkedOrgId2"@clickConfirm="clickConfirm"@clickCancel="clickCancel"/><!-- 查找人员 --><autoDialog:show-modal="showPersonnelDialog":auto-dialog-data="browsePersonnelDialogData":is-footer="false"@closeModal="personSelectClose()"><div v-if="showPersonDialog" slot="content"><TreeSelectPersonnel:select-person="selectPerson":is-one-select="true"@selectPersonnel="selectPersonnel" /><div class="dialog-footer"><el-buttonsize="mini"style="border-color: rgb(64, 158, 255) !important;background:#fff !important;color:#409eff !important;text-align: center;"@click="personSelectClose()">取消</el-button></div></div></autoDialog><!-- 随手拍 隐患详情 --><el-dialog:visible.sync="dialogVisible":append-to-body="true"class="suvi-dialog"custom-class="suvi-dialog"title="隐患详情"width="30%"><el-formref="addEditDanger":model="hazardForm"label-width="120px"class="demo-ruleForm"style="background: rgb(255, 255, 255)"><el-row><el-col :span="23"><el-form-item label="隐患图片:" class="scenarios" prop="scenarios"><!--:preview-src-list="individualFileListForPreview" --><el-imagev-for="item in individualFileList"ref="previewImg":src="fileBrowserUrl + item.filePath":key="item.fileId"style="width:80px;height:80px;margin-right:10px;"/></el-form-item></el-col></el-row><el-row><el-form-item label="隐患描述:" prop="hiddenDangerDesc"><el-inputv-model="hazardForm.hiddenDangerDesc":disabled="true"rows="4"type="textarea"placeholder="请输入隐患描述"/></el-form-item></el-row><el-form-item label="整改建议:" prop="correctiveAdvise"><el-inputv-model="hazardForm.correctiveAdvise":disabled="true"type="textarea"placeholder="请输入整改建议"/></el-form-item><el-row ><el-col :span="23" ><el-form-item label="整改图片:" class="scenarios1" prop="scenarios1"><template><div><!--:preview-src-list="individualFileListForPreview1" --><el-imagev-for="item in individualFileList1"ref="previewImg1":src="fileBrowserUrl + item.filePath":key="item.fileId"style="width:80px;height:80px;margin-right:10px;"/></div></template></el-form-item></el-col><el-col :span="23" ><el-form-item label="整改说明:" prop="correctiveDesc"><el-inputv-model="hazardForm.correctiveDesc":disabled="true"type="textarea"placeholder="请输入整改说明"/></el-form-item></el-col></el-row></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button></span></el-dialog><!-- 详情弹框 --><!-- <autoDialog:show-dialog-type="false":show-modal="showLinkDialog":is-footer="true":auto-dialog-data="LinkDialogData"><divslot="content"style="height:auto;overflowY:''"class="row-custom">详情弹框<Detailref="detailRef":equipment-form="equipmentShowForm":work-type-list="workTypeList"@emit-detail="detailData" /></div><div slot="footer" class="dialog-footer"><el-button id="default-button-style" style="height:32px;padding:0 !important;text-align:center;background:#fff !important;color:#409eff !important;" @click="closeLinkDialog()">取消</el-button></div></autoDialog> --><!-- <el-drawer:visible.sync="showLinkDialog":direction="'rtl'":before-close="LinkDialogData"title="我是标题">详情弹框<Detailref="detailRef":equipment-form="equipmentShowForm":work-type-list="workTypeList"@emit-detail="detailData" /></el-drawer> --></div></template>
<script>const TreeSelectPersonnel = () => import('@/views/base-data-client/common/treeSelectPersonnel/personnelManagement/personnelManagement')import autoDialog from '@/components/dialog/autoDialog'
import orgAutoDialog from '@/views/base-data-client/common/treeSelectOrg/orgManagement/orgAutoDialog'
import orgAutoDialogPost from '@/views/lg-safety-responsibility-client/common/organization/organizationCompanyPostDialog'
import {// addOrUpData,getPersonJobPageList,getPositionByOrgId,publishNotice,getReleOperationPageList// 关联作业票-列表// hazardousOperationCheckTask/getOperationCheckTaskPage
} from './hotTicket.api'import {getCheckTaskList, // 检查任务列表-列表gethdCheckTaskDetail // 隐患清单
} from '@/views/lg-safety-hazardousoperation-client/hazardousoperation/hazardousOperationManage/checkTaskList/api.js'
// import {
//   dataConversion,
//   nameJoin
// } from '@/views/base-data-client/bbway-coding-client/utils/msgReminderEcho'
import { getRecordDetailById } from '@/views/lg-safety-hazardousoperation-client/hazardousoperation/hazardousOperationManage/checkTaskList/api.js'
import AddEditDanger from '@/views/lg-safety-hazardousoperation-client/hazardousoperation/hazardousOperationManage/checkTaskList/common/addDangerByMyTask/index'import PartOne from './basic/one.vue'// 作业基本信息
import PartTwo from './basic/two.vue'// 作业相关人员
import PartThree from './basic/three.vue'// 风险评估
import PartFour from './basic/four.vue' // 气体检测
import PartFive from './basic/five.vue' // 安全措施确认
import PartSix from './basic/six.vue' // 安全措施交底
import PartSeven from './basic/seven.vue' // 审核与会签
import PartEight from './basic/eight.vue' // 作业审批
import PartNine from './basic/nine.vue' // 完工验收
import PartTen from './basic/ten.vue' // 检查任务列表
import PartEleven from './basic/eleven.vue' // 隐患清单
import {getOneDetailApi
} from '@/views/lg-safety-hazardousoperation-client/hazardousoperation/hazardousOperationManage/components/left/hazardousOperationManageLeft.api.js'
import {getCompanyInfo
} from '@/views/base-data-client/common/userInfo/userInfo.api'
import History from './detail/history.vue'
// import Detail from './detail.vue'const options = [{ id: 'subordinateOrgId', title: 'subordinateOrg' },{ id: 'higherOrgId', title: 'higherOrg' }
]
// const rowId = 0
export default {components: {autoDialog,orgAutoDialog,orgAutoDialogPost,TreeSelectPersonnel,History,PartOne,PartTwo,PartThree,PartFour,PartFive,PartSix,PartSeven,PartEight,PartNine,PartTen,PartEleven,AddEditDanger// Detail},props: {equipmentForm: {type: Object,default: () => { return {} }},workTypeList: {type: Array,default: () => { return [] }},selectNode: {type: Object,default: () => { return {} }},meetingType: {type: Array,default: () => { return [] }},flowStatus: {type: Number,default: () => { return 21 }},isGasMonitoring: {type: Number,default: () => { return 1 }}},data() {const validateUserName = (rule, value, callback) => {// console.log('this.dutyForm.:', this.dutyForm)if (this.dutyForm.userName === null || this.dutyForm.userName === '') {callback(new Error('请选择'))} else {callback()}}const validateUserName1 = (rule, value, callback) => {// console.log('this.dutyForm.:', this.dutyForm)if (this.dutyForm.userName1 === null || this.dutyForm.userName1 === '') {callback(new Error('请选择'))} else {callback()}}const validateUserName2 = (rule, value, callback) => {if (this.dutyForm.userName2 === null || this.dutyForm.userName2 === '') {callback(new Error('请选择'))} else {callback()}}return {activeName: 'basic',rules: {meetingTitle: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],meetingType: [{ required: true, message: '请选择会议类型', trigger: 'change' }],stationName: [{ required: true, message: '请选择岗位名称', trigger: 'change' }],stationId: [{ required: true, message: '请选择岗位', trigger: 'change' }],realDate: [{ required: true, message: '请选择', trigger: ['change'] }],sessions: [{ required: true, message: '请输入', trigger: 'blur' }],userName: [{ required: true, validator: validateUserName, trigger: ['change'] }],userName1: [{ required: true, validator: validateUserName1, trigger: ['change'] }],userName2: [{ required: true, validator: validateUserName2, trigger: ['change'] }]// subordinateOrgId: [//   { required: true, message: '请输入岗位部门', trigger: 'blur' }// ]},dutyForm: { },// 选择组织机构弹窗showOrganizationDialog: false,browseOrganizationData: {},// 选择组织机构弹窗showOrganizationDialog2: false,browseOrganizationData2: {},checkedOrgId2: [],// 选择岗位弹窗showOrganizationDialogPost: false,browseOrganizationDataPost: {},checkedOrgId: [],checkedOrgIdPost: '',index: 0,jobList: [],higherJobList: [],showPersonDialog: true,selectPerson: [],showPersonnelDialog: false,browsePersonnelDialogData: {},peopleSelectType: 1, // 选择 人员第几个tabIndex: '0',contentStyleObj: {height: '100px'},tabName: 'setOneRef',tabs: [{name: '作业基本信息',refName: 'setOneRef',offsetTop: 0,isShow: true // true || (props.data.flowStatus > 0)},{name: '作业相关人员',refName: 'setTwoRef',offsetTop: 0,isShow: true // props.data.flowStatus > 0},{name: '风险评估',refName: 'setThreeRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 10// true // props.data.flowStatus > 10},{name: '气体检测',refName: 'setFourRef',offsetTop: 0,// isShow: true,isShow: this.equipmentForm.flowStatus > 10 && this.equipmentForm.isGasMonitoring// isShow: (!!(this.flowStatus >= 20 && this.isGasMonitoring === 1))},{name: '安全措施确认',refName: 'setFiveRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20 && viewData.value?.prepareAffirmList?.length},{name: '安全措施交底',refName: 'setSixRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && !this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20},{name: '审核与会签',refName: 'setSevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 30// isShow: true // props.data.flowStatus > 30 && viewData.value?.countersignList?.length},{name: '作业审批',refName: 'setEightRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 40// isShow: true // props.data.flowStatus > 40},{name: '完工验收',refName: 'setNineRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 50// isShow: true // props.data.flowStatus > 50},{name: '检查任务列表',refName: 'setTenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskList?.length},{name: '隐患清单列表',refName: 'setElevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskDetailList?.length}],isTabMoveFlag: false,homeworkTicketList: [], // 关联作业票checkTaskList: [], // 检查任务数hazardList: [], // 隐患清单列表hazardForm: {},dialogVisible: false,individualFileList: [],individualFileList1: [],fileBrowserUrl: process.env.BASE_API,equipmentShowForm: {}, // 详情showLinkDialog: false,LinkDialogData: {},isHaveEditCheckRole: true// 是否有检查任务按钮权限}},watch: {equipmentForm: {deep: true,immediate: false,handler(val) {this.dutyForm = val}}},created() {getCompanyInfo()this.getHight()window.addEventListener('resize', this.getHight)this.higherJobList = []this.dutyForm = this.equipmentForm// console.log('this.dutyForm :', this.dutyForm)console.log('🚀 ~ file: addEdit.vue:186 ~ created ~ this.dutyForm:', this.dutyForm)// 上级岗位获取if (this.dutyForm.higherOrgId) {getPositionByOrgId({ orgId: this.dutyForm.higherOrgId }).then(res => {this.higherJobList = res.datas})}// 岗位获取const param = {pageNum: 1,pageSize: -1}getPersonJobPageList(param).then(res => {this.jobList = res.datas})// 如果是新增自动增加if (!this.dutyForm.responsibleManagementId) {this.$nextTick(() => {// this.addDuty()})}if (this.dutyForm.id) {// this.$nextTick(() => {// this.addDuty()this.tabs = [{name: '作业基本信息',refName: 'setOneRef',offsetTop: 0,isShow: true // true || (props.data.flowStatus > 0)},{name: '作业相关人员',refName: 'setTwoRef',offsetTop: 0,isShow: true // props.data.flowStatus > 0},{name: '风险评估',refName: 'setThreeRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 10// true // props.data.flowStatus > 10},{name: '气体检测',refName: 'setFourRef',offsetTop: 0,// isShow: true,isShow: this.equipmentForm.flowStatus > 10 && this.equipmentForm.isGasMonitoring// isShow: (!!(this.flowStatus >= 20 && this.isGasMonitoring === 1))},{name: '安全措施确认',refName: 'setFiveRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20 && viewData.value?.prepareAffirmList?.length},{name: '安全措施交底',refName: 'setSixRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && !this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20},{name: '审核与会签',refName: 'setSevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 30// isShow: true // props.data.flowStatus > 30 && viewData.value?.countersignList?.length},{name: '作业审批',refName: 'setEightRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 40// isShow: true // props.data.flowStatus > 40},{name: '完工验收',refName: 'setNineRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 50// isShow: true // props.data.flowStatus > 50},{name: '检查任务列表',refName: 'setTenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskList?.length},{name: '隐患清单列表',refName: 'setElevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskDetailList?.length}]this.tabs = this.tabs.filter(tab => tab.isShow)// 详情关联作业票数据const request1 = getReleOperationPageList({currentOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1}).then((response) => {return response // 解析 JSON 数据})const request2 = getCheckTaskList({hazardousOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1}).then((response) => {return response // 解析 JSON 数据})const request3 = gethdCheckTaskDetail({// hazardousOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1,taskDetailStatus: null}).then((response) => {return response // 解析 JSON 数据})Promise.all([request1, request2, request3]).then(([result1, result2, result3]) => {console.log('关联作业票的结果:', result1)console.log('检查任务的结果:', result2)console.log('隐患列表的结果:', result3)this.homeworkTicketList = result1.datasconsole.log('homeworkTicketList:', this.homeworkTicketList)this.checkTaskList = result2.datas.recordsthis.hazardList = result3.datas// this.hazardList = this.hazardList.map((item) => {//   return {//     ...item//     // attachs: item.hiddenDangerAttach.join(',')//   }// })// 在这里可以对两个接口的结果进行进一步处理})// })}if (this.selectNode) {this.dutyForm.subordinateOrgId = this.selectNode.orgIdthis.dutyForm.subordinateOrg = this.selectNode.fullName}console.log('🚀 ~ file: addEdit.vue:201 ~ created ~ this.dutyForm.jobResponsibilitiesInfoVoList:', this.dutyForm.jobResponsibilitiesInfoVoList)if (this.dutyForm.id) {this.show()}},destroyed() {window.removeEventListener('resize', this.getHight)},mounted() {getCompanyInfo()// this.$refs.equipmentForm.$el.style.opacity = '0'// setTimeout(() => {//   this.$refs.equipmentForm.$el.style.opacity = '1'// }, 500)if (this.dutyForm.id) {this.show()}},methods: {// 获得参数设置getSettingInfo() {// console.log('this.$store.getters.userInfo:', this.$store.getters.userInfo)getBaseSetByCompanyId(this.$store.getters.userInfo.companyInfo.orgId).then(res => {// console.log('getBaseSetByCompanyId:', res)this.formData = res.datasif (this.formData.inspectorInfo) {this.formData.inspectorInfo = this.formData.inspectorInfo.map((item) => {return {...item,name: item.userName}})const foundUser = this.formData.inspectorInfo.find(user => user.userId === this.$store.getters.userInfo.userId)if (foundUser) {console.log('找到用户:', foundUser)this.isHaveEditCheckRole = true} else {console.log('未找到该用户')this.isHaveEditCheckRole = false}}})},// addDuty() {//   rowId++//    this.dutyForm.jobResponsibilitiesInfoVoList.push({ securityDuty: '', accountabilityList: [''], rowId: rowId })// },show() {this.activeName = 'basic'this.getHight()window.addEventListener('resize', this.getHight)this.higherJobList = []this.dutyForm = this.equipmentForm// console.log('this.dutyForm :', this.dutyForm)console.log('🚀 ~ file: addEdit.vue:186 ~ created ~ this.dutyForm:', this.dutyForm)// 上级岗位获取if (this.dutyForm.higherOrgId) {getPositionByOrgId({ orgId: this.dutyForm.higherOrgId }).then(res => {this.higherJobList = res.datas})}// 岗位获取const param = {pageNum: 1,pageSize: -1}getPersonJobPageList(param).then(res => {this.jobList = res.datas})// 如果是新增自动增加if (!this.dutyForm.responsibleManagementId) {this.$nextTick(() => {// this.addDuty()})}if (this.dutyForm.id) {// this.$nextTick(() => {// this.addDuty()this.tabs = [{name: '作业基本信息',refName: 'setOneRef',offsetTop: 0,isShow: true // true || (props.data.flowStatus > 0)},{name: '作业相关人员',refName: 'setTwoRef',offsetTop: 0,isShow: true // props.data.flowStatus > 0},{name: '风险评估',refName: 'setThreeRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 10// true // props.data.flowStatus > 10},{name: '气体检测',refName: 'setFourRef',offsetTop: 0,// isShow: true,isShow: this.equipmentForm.flowStatus > 10 && this.equipmentForm.isGasMonitoring// isShow: (!!(this.flowStatus >= 20 && this.isGasMonitoring === 1))},{name: '安全措施确认',refName: 'setFiveRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20 && viewData.value?.prepareAffirmList?.length},{name: '安全措施交底',refName: 'setSixRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 20 && !this.equipmentForm.isPrepareAffirm// isShow: true // props.data.flowStatus > 20},{name: '审核与会签',refName: 'setSevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 30// isShow: true // props.data.flowStatus > 30 && viewData.value?.countersignList?.length},{name: '作业审批',refName: 'setEightRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 40// isShow: true // props.data.flowStatus > 40},{name: '完工验收',refName: 'setNineRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus > 50// isShow: true // props.data.flowStatus > 50},{name: '检查任务列表',refName: 'setTenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskList?.length},{name: '隐患清单列表',refName: 'setElevenRef',offsetTop: 0,isShow: this.equipmentForm.flowStatus >= 40 && this.equipmentForm.isCreateCheckTask === true// isShow: true // props.data.flowStatus > 40 && viewData.value?.taskDetailList?.length}]this.tabs = this.tabs.filter(tab => tab.isShow)// 详情关联作业票数据const request1 = getReleOperationPageList({currentOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1}).then((response) => {return response // 解析 JSON 数据})const request2 = getCheckTaskList({hazardousOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1}).then((response) => {return response // 解析 JSON 数据})const request3 = gethdCheckTaskDetail({// hazardousOperationId: this.dutyForm.id, // 当前特殊作业IDpageNum: 1,pageSize: -1,taskDetailStatus: null}).then((response) => {return response // 解析 JSON 数据})Promise.all([request1, request2, request3]).then(([result1, result2, result3]) => {this.homeworkTicketList = result1.datasthis.checkTaskList = result2.datas.recordsthis.hazardList = result3.datasthis.hazardList = this.hazardList.map((item) => {return {...item// attachs: item.hiddenDangerAttach.join(',')}})// 在这里可以对两个接口的结果进行进一步处理})// })}if (this.selectNode) {this.dutyForm.subordinateOrgId = this.selectNode.orgIdthis.dutyForm.subordinateOrg = this.selectNode.fullName}console.log('🚀 ~ file: addEdit.vue:201 ~ created ~ this.dutyForm.jobResponsibilitiesInfoVoList:', this.dutyForm.jobResponsibilitiesInfoVoList)},stationChange(val) {const jobObj = this.jobList.find(item => item.jobId === val)this.dutyForm.stationName = jobObj.jobName},deleteRowInput(row) {this.dutyForm.jobResponsibilitiesInfoVoList = this.dutyForm.jobResponsibilitiesInfoVoList.filter(v => {if (row.jobResponsibilitiesId) {return v.jobResponsibilitiesId !== row.jobResponsibilitiesId} else {return v.rowId !== row.rowId}})},async saveEvent() {const vaild = await this.$refs.equipmentForm.validate()if (vaild) {console.log('🚀 ~ file: addEdit.vue:215 ~ mappedArr ~  this.dutyForm.responsibilitySort:', this.dutyForm.responsibilitySort)const res = await publishNotice({...this.dutyForm,meetingConvener: this.dutyForm.userId, // 会议主持人meetingConvenerName: this.dutyForm.userName,comprehensive: this.dutyForm.userId1, // 会议主持人comprehensiveName: this.dutyForm.userName1,recorder: this.dutyForm.userId2, // 会议记录recorderName: this.dutyForm.userName2})if (res.resp_code === 1) {this.$message.error(res.resp_msg)return Promise.reject()}console.log('🚀 ~ file: addEdit.vue:202 ~ saveEvent ~ res:', res)} else {return Promise.reject()}},// 选择组织机构弹窗openOrganizationDialog(i) {this.index = iif (i === 0) {const dialogWidth = { dialogWidth: '30%' }this.showOrganizationDialog = { showAutoDialog: true }const title = { title: '查找组织机构' }this.browseOrganizationData = Object.assign({}, this.showOrganizationDialog, dialogWidth, title)if (this.dutyForm[options[i].id]) {this.checkedOrgId = [this.dutyForm[options[i].id]]} else {this.checkedOrgId = []}} else {const dialogWidth = { dialogWidth: '30%' }this.showOrganizationDialog2 = { showAutoDialog: true }const title = { title: '查找组织机构' }this.browseOrganizationData2 = Object.assign({}, this.showOrganizationDialog2, dialogWidth, title)if (this.dutyForm[options[i].id]) {this.checkedOrgId2 = [this.dutyForm[options[i].id]]} else {this.checkedOrgId2 = []}}},// 确定选择组织机构clickConfirm(e) {// console.log('🚀 ~ file: addEdit.vue:258 ~ clickConfirm ~ e:', e)if (this.index === 0) {this.showOrganizationDialog = { showAutoDialog: false }this.browseOrganizationData = Object.assign({}, this.showOrganizationDialog, '', '')this.dutyForm[options[this.index].title] = e[0].fullNamethis.dutyForm[options[this.index].id] = e[0].orgId} else {this.higherJobList = []this.showOrganizationDialog2 = { showAutoDialog: false }this.browseOrganizationData2 = Object.assign({}, this.showOrganizationDialog2, '', '')this.dutyForm[options[this.index].title] = e[0].fullNamethis.dutyForm[options[this.index].id] = e[0].orgIdgetPositionByOrgId({ orgId: e[0].orgId }).then(res => {this.higherJobList = res.datas})}},// 关闭弹窗clickCancel(value) {if (this.index === 0) {this.showOrganizationDialog = { showAutoDialog: false }this.browseOrganizationData = Object.assign({}, this.showOrganizationDialog, '', '')} else {this.showOrganizationDialog2 = { showAutoDialog: false }this.browseOrganizationData2 = Object.assign({}, this.showOrganizationDialog2, '', '')}},// 添加履责清单文本域addTask(row) {row.accountabilityList.push('') // 向当前行的tasks数组中添加一个空的文本域},// 删除履责清单文本域removeTask(row, index) {row.accountabilityList.splice(index, 1) // 删除当前行中指定索引的履责清单文本域},// 选择人员弹窗openPersonnelDialog(type) {this.peopleSelectType = typeconst dialogWidth = { dialogWidth: '80%' }this.showPersonnelDialog = { showAutoDialog: true }const title = { title: '查找人员' }this.browsePersonnelDialogData = Object.assign({}, this.showPersonnelDialog, dialogWidth, title)if (type === 1) {this.selectPerson = []this.showPersonDialog = trueif (this.dutyForm.hasOwnProperty('userId') && this.dutyForm.userId) {// 将 userId 和 userName 按逗号分割为数组const userIdArray = this.dutyForm.userId.split(',')const userNameArray = this.dutyForm.userName.split(',')// 确保两个数组长度一致（可以加一个校验）if (userIdArray.length !== userNameArray.length) {throw new Error('userId 和 userName 的分割结果长度不一致！')}// 使用 map 方法生成新的数组 personconst person = userIdArray.map((id, index) => ({userId: id.trim(), // 去掉可能存在的空格name: userNameArray[index].trim() // 去掉可能存在的空格}))this.selectPerson = person}} else if (type === 2) {this.selectPerson = []this.showPersonDialog = trueif (this.dutyForm.hasOwnProperty('userId1') && this.dutyForm.userId1) {// // 将 userId 和 userName 按逗号分割为数组const userIdArray = this.dutyForm.userId1.split(',')const userNameArray = this.dutyForm.userName1.split(',')// 确保两个数组长度一致（可以加一个校验）if (userIdArray.length !== userNameArray.length) {throw new Error('userId 和 userName 的分割结果长度不一致！')}// 使用 map 方法生成新的数组 personconst person = userIdArray.map((id, index) => ({userId: id.trim(), // 去掉可能存在的空格name: userNameArray[index].trim() // 去掉可能存在的空格}))this.selectPerson = person}// this.selectPerson.push(person)} else if (type === 3) {this.selectPerson = []this.showPersonDialog = trueif (this.dutyForm.hasOwnProperty('userId2') && this.dutyForm.userId2) {// // 将 userId 和 userName 按逗号分割为数组const userIdArray = this.dutyForm.userId2.split(',')const userNameArray = this.dutyForm.userName2.split(',')// 确保两个数组长度一致（可以加一个校验）if (userIdArray.length !== userNameArray.length) {throw new Error('userId 和 userName 的分割结果长度不一致！')}// 使用 map 方法生成新的数组 personconst person = userIdArray.map((id, index) => ({userId: id.trim(), // 去掉可能存在的空格name: userNameArray[index].trim() // 去掉可能存在的空格}))this.selectPerson = person}}},// 关闭选择人弹窗personSelectClose() {const dialogWidth = { dialogWidth: '80%' }var showPersonnelDialog = falsethis.showPersonnelDialog = { showAutoDialog: showPersonnelDialog }this.browsePersonnelDialogData = Object.assign({}, this.showPersonnelDialog, dialogWidth)setTimeout(() => {this.showPersonDialog = falsethis.selectPerson = []}, 500)},// 选择人方法回调selectPersonnel(_result) {if (this.peopleSelectType === 1) {this.$set(this.dutyForm, 'userName', _result[0].name)this.$set(this.dutyForm, 'userId', _result[0].userId)} else if (this.peopleSelectType === 2) {this.$set(this.dutyForm, 'userName1', _result[0].name)this.$set(this.dutyForm, 'userId1', _result[0].userId)} else if (this.peopleSelectType === 3) {this.$set(this.dutyForm, 'userName2', _result[0].name)this.$set(this.dutyForm, 'userId2', _result[0].userId)}this.personSelectClose()},handleChangeMeetType(param) {this.dutyForm.meetingTypeName = this.meetingType.find(item => item.sessionsTypeId === param).sessionsType},handleClickTab(type) {if (type) {if (this.activeName === 'basic') {// 基本信息} else {// 历史this.$nextTick(() => {this.$refs['historyRef'].handleOpen(this.equipmentForm.id)})}}},// tab clickjump(tab, event) {this.isTabMoveFlag = trueconst target = document.querySelector('.scroll-content')const scrollItems = document.querySelectorAll('.scroll-item')// 判断滚动条是否滚动到底部if (target.scrollHeight <= target.scrollTop + target.clientHeight) {this.tabIndex = tab.index.toString()}const totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次// 计算每一小段的距离let step = totalY / 50if (totalY > distance) {smoothDown(document.querySelector('.scroll-content'))} else {const newTotal = distance - totalYstep = newTotal / 50smoothUp(document.querySelector('.scroll-content'))}// 参数element为滚动区域function smoothDown(element) {if (distance < totalY) {distance += stepelement.scrollTop = distancesetTimeout(smoothDown.bind(this, element), 10)} else {element.scrollTop = totalY}}// 参数element为滚动区域function smoothUp(element) {if (distance > totalY) {distance -= stepelement.scrollTop = distancesetTimeout(smoothUp.bind(this, element), 10)} else {element.scrollTop = totalY}}},// // 滚动条滚动onScroll(e) {console.log('onScroll----e:', e)const scrollItems = document.querySelectorAll('.scroll-item')for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离var judge = 0//   e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - (window.innerHeight - 300) // - 400// console.log('this.isTabMoveFlag:', this.isTabMoveFlag)// if (this.isTabMoveFlag) { // 切换tab 移动//   judge =//   e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 300 // - 400// } else { // 正常鼠标滚动移动//   judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - (window.innerHeight - 300)// }// judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - (window.innerHeight - 300)// judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop// judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 300judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 180// this.tabIndex = iif (judge) {this.tabIndex = i.toString()this.tabName = this.tabs[this.tabIndex].refName ? this.tabs[this.tabIndex].refName : nullbreak}// if (judge) {//   this.tabIndex = i.toString()// /滚动---上方tab定位索引 指向//   // 找对应的tab-name值//   console.log('this.tabIndex :', this.tabIndex)//   this.tabName = this.tabs[this.tabIndex].refName// this.tabIndex = i.toString()-------------------------------------------------//   break// } else {// }}this.isTabMoveFlag = false},handleScroll(e) {const scrollItems = document.querySelectorAll('.scroll-item')for (let i = scrollItems.length - 1; i >= 0; i--) {var curheight = scrollItems[i].getBoundingClientRect().topif (curheight < e.target.scrollTop) {this.tabIndex = i.toString()break}}},getHight() {this.contentStyleObj.height = window.innerHeight - 240 + 'px'},emitOpenHazard(row) {getRecordDetailById(row.id).then((res) => {this.dialogVisible = truethis.$nextTick(() => {this.hazardForm = res.datasif (this.hazardForm.hasOwnProperty('hiddenDangerAttach') && this.hazardForm.hiddenDangerAttach !== null && this.hazardForm.hiddenDangerAttach.length) {this.individualFileList = this.processFiles(this.hazardForm.hiddenDangerAttach, this.fileBrowserUrl)}if (this.hazardForm.hasOwnProperty('correctiveAttach') && this.hazardForm.correctiveAttach !== null && this.hazardForm.correctiveAttach.length) {this.individualFileList1 = this.processFiles(this.hazardForm.correctiveAttach, this.fileBrowserUrl)}})})},processFiles(filePaths, baseUrl) {var formatArr = filePaths.map((filePath, index) => {// 提取文件名const fileName = filePath.split('/').pop()// 拼接完整路径const completeFilePath = `${baseUrl}${filePath}`// 返回新的对象return {fileUrl: completeFilePath,filePath: filePath,fileName: index,name: index,url: completeFilePath}})return formatArr},emitDetail(row) {this.$emit('emit-detail', row)},closeLinkDialog() {const dialogWidth = { dialogWidth: '40%' }var showDialog = falsethis.LinkDialogData = { showAutoDialog: showDialog }const title = { title: '详情' }this.LinkDialogData = Object.assign({}, this.LinkDialogData, dialogWidth, title)},convertStringToArray(str) {return str.split(/(\(\))/) // 按"()"分割字符串.filter(item => item !== '') // 过滤空字符串.flatMap((item, index) => {if (item === '()') {return { type: 'input', text: '' }} else {return { type: 'text', text: item }}})}}
}
</script>
<style lang="less" scoped>
.stationName{
/deep/ .el-input--medium{width: 220px;
}
}.subordinateOrg{
/deep/ .el-input--medium{width: 245px ;
}
}
/deep/  tr th{padding-top: 2px !important;padding-bottom: 2px !important;
}
/deep/ #deleteBtn{
span{color: #f56c6c !important;
}
}
/deep/ #deleteIBtn{span{color: #f56c6c !important;}
}.suvi-input-number{width:200px;/deep/ .el-input-number__decrease{border-bottom: 1px solid #DCDFE6;}/deep/ .el-input__inner{height: 37px !important;}
}.suvi-date-picker{/deep/ .el-input__suffix{right: 22px !important;}
}
</style>
<style lang='less'>
.useFlexHorizontalCconversion{
/deep/  .el-form-item__content{display: flex !important;}
}
</style><style lang="scss" scoped>
::v-deep.el-tabs--card > .el-tabs__header {.el-tabs__nav {background-color:#f5f7fa;.is-active {background-color: #fff;}}
}
</style>

效果如下