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-tabs
v-model="tabName"
class="customer-tab"
type="card"
@tab-click="jump"
>
<el-tab-pane
v-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" -->
<div
v-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>
<!-- 作业相关人员 -->
<div
v-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>
<p
v-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>
<!-- 风险评估 -->
<div
v-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>
<!-- 气体检测 -->
<div
v-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>
<!-- 安全措施确认 -->
<div
v-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>
<!-- 安全措施交底 -->
<div
v-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>
<!-- 审核与会签 -->
<div
v-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>
<!-- 作业审批 -->
<div
v-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>
<!-- 完工验收 -->
<div
v-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>
<!-- 检查任务列表 -->
<div
v-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>
<!-- 隐患清单列表 -->
<div
v-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-button
size="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-form
ref="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-image
v-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-input
v-model="hazardForm.hiddenDangerDesc"
:disabled="true"
rows="4"
type="textarea"
placeholder="请输入隐患描述"/>
</el-form-item>
</el-row>
<el-form-item label="整改建议:" prop="correctiveAdvise">
<el-input
v-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-image
v-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-input
v-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">
<div
slot="content"
style="height:auto;overflowY:''"
class="row-custom">
详情弹框
<Detail
ref="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="我是标题">
详情弹框
<Detail
ref="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, // 当前特殊作业ID
pageNum: 1,
pageSize: -1
}).then((response) => {
return response // 解析 JSON 数据
})
const request2 = getCheckTaskList({
hazardousOperationId: this.dutyForm.id, // 当前特殊作业ID
pageNum: 1,
pageSize: -1
}).then((response) => {
return response // 解析 JSON 数据
})
const request3 = gethdCheckTaskDetail({
// hazardousOperationId: this.dutyForm.id, // 当前特殊作业ID
pageNum: 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.datas
console.log('homeworkTicketList:', this.homeworkTicketList)
this.checkTaskList = result2.datas.records
this.hazardList = result3.datas
// this.hazardList = this.hazardList.map((item) => {
// return {
// ...item
// // attachs: item.hiddenDangerAttach.join(',')
// }
// })
// 在这里可以对两个接口的结果进行进一步处理
})
// })
}
if (this.selectNode) {
this.dutyForm.subordinateOrgId = this.selectNode.orgId
this.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.datas
if (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, // 当前特殊作业ID
pageNum: 1,
pageSize: -1
}).then((response) => {
return response // 解析 JSON 数据
})
const request2 = getCheckTaskList({
hazardousOperationId: this.dutyForm.id, // 当前特殊作业ID
pageNum: 1,
pageSize: -1
}).then((response) => {
return response // 解析 JSON 数据
})
const request3 = gethdCheckTaskDetail({
// hazardousOperationId: this.dutyForm.id, // 当前特殊作业ID
pageNum: 1,
pageSize: -1,
taskDetailStatus: null
}).then((response) => {
return response // 解析 JSON 数据
})
Promise.all([request1, request2, request3])
.then(([result1, result2, result3]) => {
this.homeworkTicketList = result1.datas
this.checkTaskList = result2.datas.records
this.hazardList = result3.datas
this.hazardList = this.hazardList.map((item) => {
return {
...item
// attachs: item.hiddenDangerAttach.join(',')
}
})
// 在这里可以对两个接口的结果进行进一步处理
})
// })
}
if (this.selectNode) {
this.dutyForm.subordinateOrgId = this.selectNode.orgId
this.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 = i
if (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].fullName
this.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].fullName
this.dutyForm[options[this.index].id] = e[0].orgId
getPositionByOrgId({ 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 = type
const 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 = true
if (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 方法生成新的数组 person
const person = userIdArray.map((id, index) => ({
userId: id.trim(), // 去掉可能存在的空格
name: userNameArray[index].trim() // 去掉可能存在的空格
}))
this.selectPerson = person
}
} else if (type === 2) {
this.selectPerson = []
this.showPersonDialog = true
if (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 方法生成新的数组 person
const 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 = true
if (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 方法生成新的数组 person
const person = userIdArray.map((id, index) => ({
userId: id.trim(), // 去掉可能存在的空格
name: userNameArray[index].trim() // 去掉可能存在的空格
}))
this.selectPerson = person
}
}
},
// 关闭选择人弹窗
personSelectClose() {
const dialogWidth = { dialogWidth: '80%' }
var showPersonnelDialog = false
this.showPersonnelDialog = { showAutoDialog: showPersonnelDialog }
this.browsePersonnelDialogData = Object.assign({}, this.showPersonnelDialog, dialogWidth)
setTimeout(() => {
this.showPersonDialog = false
this.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 click
jump(tab, event) {
this.isTabMoveFlag = true
const 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 / 50
if (totalY > distance) {
smoothDown(document.querySelector('.scroll-content'))
} else {
const newTotal = distance - totalY
step = newTotal / 50
smoothUp(document.querySelector('.scroll-content'))
}
// 参数element为滚动区域
function smoothDown(element) {
if (distance < totalY) {
distance += step
element.scrollTop = distance
setTimeout(smoothDown.bind(this, element), 10)
} else {
element.scrollTop = totalY
}
}
// 参数element为滚动区域
function smoothUp(element) {
if (distance > totalY) {
distance -= step
element.scrollTop = distance
setTimeout(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 - 300
judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 180
// this.tabIndex = i
if (judge) {
this.tabIndex = i.toString()
this.tabName = this.tabs[this.tabIndex].refName ? this.tabs[this.tabIndex].refName : null
break
}
// 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().top
if (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 = true
this.$nextTick(() => {
this.hazardForm = res.datas
if (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 = false
this.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>
效果如下
