滚动条的宽度
bug图
通过这个方法可以知道滚动条的宽度
// 滚动条的宽度
export function getScrollbarWidth() {
const scrollDiv = document.createElement('div')
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'
document.body.appendChild(scrollDiv)
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
document.body.removeChild(scrollDiv)
return scrollbarWidth
}
因为这个方法我是写在公共方法里面的
所以要在使用这个方法的文件中引用该方法
然后在methods中，操作dom并调用引进的方法，获取不同浏览器滚动条的宽度
testWidth() {
document.querySelector('.el-table__header-wrapper').style.paddingRight = getScrollbarWidth() + 'px'
console.log('1038', document.querySelector('.el-table__header-wrapper'))
}
然后，在数据获取的地方调用testWidth()这个方法
注意这里会出现一个bug，页面并未产生效果
原因操作是要异步操作的，你需要在调用testWidth方法的地方使用this.$nextTick或者使用setTime()的异步函数。
这里顺便参考了网上Vue中的nextTick作用和几个简单的使用场景
nextTick的作用
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
我想各位都知道或了解 Vue 的渲染流程，Vue 在监听到数据变化后会重新渲染，配合 VDOM 更新真实的 DOM，而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后。
初始化绑定或操作 DOM
比如在 created 和 mounted 回调中，需要操作渲染好的 DOM，则需要在 nextTick 中执行相关逻辑，这在必须使用一些老的需要绑定 DOM 的库时很有用。
<template>
<script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script>
</template>
<script>
export default {
mounted() {
this.nextTick(() => {
var ue = UE.getEditor('container');
});
}
}
获取元素宽度
在 Vue 中获取元素宽度有两种方式，第一种是通过 $refs[ref名称].style.width，第二种可以使用传统操作 DOM 的方式获取，但这两者要获取到准确的元素宽度，则需要在 DOM 渲染完毕后执行
<template>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">获取p元素宽度</button>
</template>
<script>
export default {
data() {
return {
message: "Hello world!",
showMe: false,
},
methods: {
getMyWidth() {
this.showMe = true;
//this.message = this.refs.myWidth.offsetWidth; //报错 TypeError: this.refs.myWidth is undefined
this.nextTick(()=>{
//dom元素更新后执行，此时能拿到p元素的属性 this.message = this.refs.myWidth.offsetWidth; })
}
}
}
}
</script>
在二级页面是没有问题的因为二级页面只有一个（.el-table__header-wrapper’）的类，但是在三级页面不止一个（.el-table__header-wrapper’），因为三级页面是在二级页面的基础上跳转的，所有他就有两个.
所有，我们先在三级页面种引进获取滚动条宽度的长度
然后，通过这句代码获取所有这个类名的元素
console.log('1111', document.querySelectorAll('.el-table__header-wrapper'))
有两个，第二个才是三级页面的
将代码改为
三级页面这时候也可以正常显示
上面的代码可以在谷歌浏览器正常显示，但是在火狐和360浏览器不能正常显示，
我们打开浏览器的控制台。
发现浏览器他们控制的类名是不同的
火狐浏览器的页面
所在，相同的代码哪里加上
document.querySelector('.el-table__header').style.paddingRight = getScrollbarWidth() + 'px'
火狐浏览器显示图
二级页面代码
<template>
<div>
<div class="oneFirst2">
<div class="firstContent">
<label @click="study">{{ title }}</label>
<div @click="fatherF"><label>关闭</label></div>
</div>
<div class="secondContent">
<el-form ref="formRef" :model="form" :inline="true">
<el-form-item v-if="nowA.pageStatus" label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入" />
</el-form-item>
<el-form-item v-if="nowA.pageStatus && nowA.status !== 'task'" label="任务专题" prop="task">
<el-select v-model="form.task" placeholder="请选择">
<el-option
v-for="item in topicList"
:key="item.code"
:label="item.topic"
:value="item.code"
show-opear
/>
</el-select>
</el-form-item>
<el-form-item v-if="nowA.pageStatus && (nowA.status === 'task' || nowA.status === 'unit')" label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择">
<el-option
v-for="item in statusList"
:key="item.label"
:label="item.title"
:value="item.label"
show-opear
/>
</el-select>
</el-form-item>
<el-form-item v-if="!nowA.pageStatus" label="责任单位" prop="post">
<el-select v-model="value" placeholder="请选择" @change="selectPost(value)">
<el-option
v-for="item in options"
:key="item.id"
:label="item.unitName"
:value="item.unitUid"
show-opear
/>
</el-select>
</el-form-item>
<el-form-item v-if="!nowA.pageStatus" label="关键字" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getHandleDataDetail">查询</el-button>
<el-button plain @click="resetForm('formRef')">重置</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="nowA.status === 'unit' || nowA.status === 'task'" class="statistical">
<span v-if="nowA.status === 'unit'">任务总数 {{ nowA.total }}</span>
<span>逾期反馈数 {{ nowA.overduefeedback }}</span>
<span>未反馈数 {{ nowA.unfeedback }}</span>
<span>按时反馈数 {{ nowA.normalfeedback }}</span>
</div>
<div class="thirdContent" :style="{'height' : nowA.pageStatus ? 'calc(96vh - 48px - 72px - 40px)' : 'calc(96vh - 48px - 72px)'}">
<table-list
v-if="!nowA.pageStatus"
ref="table"
:stripe="true"
:table-data="detailsData"
:columns="changeArr"
:show-index="true"
:set-table-h="true"
:page-data="pageData"
@changeSize="changeSize"
@changePage="changePage"
/>
<!-- flag是控制获取所有数据,才渲染到页面上 -->
<!-- <table-list
v-if="flag"
ref="table"
:stripe="true"
:table-data="detailsData"
:columns="nowA.display === 'one' ? columns : nowA.display === 'two' ? columns1 : [] "
:show-index="true"
:set-table-h="true"
:page-data="pageData"
@changeSize="changeSize"
@changePage="changePage"
/> -->
<!-- <table-list
v-if="flag && nowA.display === 'two'"
ref="table"
:stripe="true"
:table-data="detailsData"
:columns="columns1"
:show-index="true"
:set-table-h="true"
:page-data="pageData"
@changeSize="changeSize"
@changePage="changePage"
/> -->
<table-list
v-if="nowA.pageStatus"
:stripe="true"
:show-index="true"
:columns="overviewTableHead"
:table-data="overviewTableData"
:page-data="pageData"
:set-table-h="true"
@changeSize="changeSize"
@changePage="changePage"
>
<template #title="{ row }">
<div class="table-title" @click="openTask(row)">{{ row.title }}</div>
<!-- 通过这里点击可以跳转到第三级页面 -->
</template>
</table-list>
</div>
</div>
<div class="thirdPage">
<el-dialog
v-if="close1"
:visible.sync="dialogVisible1"
width="98%"
:modal="false"
:before-close="handleClose1"
:append-to-body="false"
>
<details-3 :id="taskid" :type="taskType" />
</el-dialog>
</div>
</div>
</template>
<script>
import details3 from '@/views/details3.vue'
import {
getUnitCode,
getHandleDataDetail
} from '@/api/instructions'
import { getSecondDataView, getTopicList } from '@/api/overview'
import TableList from '@/components/TableList/index.vue'
import dayjs from 'dayjs'
import { getScrollbarWidth } from '@/utils/utils'
export default {
components: {
'table-list': TableList,
'details-3': details3
},
props: {
nowA: { // 需要禁用的选择框的数据
type: Object,
default: () => {
return {}
}
},
fatherMethod: {
type: Function,
default: null
}
},
data() {
return {
close1: true,
dialogVisible1: false,
form: {
name: '',
post: '',
title: '',
task: '',
status: ''
},
options: {},
value: '',
detailsData: [],
// 表头
columns: [
// 文件标题
{
title: '文件标题',
label: 'taskName',
slot: 'taskName',
isImportData: true
},
{ title: '批示时间',
label: 'disposalTime',
slot: 'disposalTime',
width: 150
},
{ title: '来文单位',
label: 'source',
slot: 'source',
width: 150
},
{ title: '批示内容',
label: 'taskContent',
slot: 'taskContent',
width: 150
},
{ title: '落实情况及下一步打算',
label: 'finishContent',
slot: 'finishContent',
width: 360
},
{ title: '责任厅局及处室',
label: 'dutyDept',
slot: 'dutyDept',
width: 120
},
{ title: '密级',
label: 'secretLevel',
slot: 'secretLevel',
width: 50
},
{ title: '任务办结时间',
label: 'finishTime',
slot: 'finishTime',
width: 150
},
{ title: '任务完成情况',
label: 'finishState',
slot: 'finishState',
width: 100
},
{ title: '存在困难及问题',
label: 'exitProblem',
slot: 'exitProblem',
width: 180
},
{ title: '需要省领导协调推动的事项',
label: 'needHandleWork',
slot: 'needHandleWork',
width: 200
},
{ title: '责任单位',
label: 'dutyUnit',
slot: 'dutyUnit'
}
],
columns1: [
// 责任单位
{ title: '责任单位',
label: 'dutyUnit',
slot: 'dutyUnit',
width: 120
},
// 标题
{
title: '标题',
label: 'title',
slot: 'title',
width: 120
},
{ title: '批示时间',
label: 'disposalTime',
slot: 'disposalTime',
width: 150
},
{ title: '来文单位',
label: 'source',
slot: 'source',
width: 180
},
{
title: '文件标题',
label: 'taskName',
width: 120
},
{ title: '批示内容',
label: 'taskContent',
slot: 'taskContent',
width: 150
},
{ title: '落实情况及下一步打算',
label: 'finishContent',
slot: 'finishContent',
width: 360
},
{ title: '责任厅局及处室',
label: 'dutyDept',
slot: 'dutyDept',
width: 180
},
{ title: '密级',
label: 'secretLevel',
slot: 'secretLevel',
width: 50
},
{ title: '任务办结时间',
label: 'finishTime',
slot: 'finishTime',
width: 120
},
{ title: '任务完成情况',
label: 'finishState',
slot: 'finishState',
width: 100
},
{ title: '存在困难及问题',
label: 'exitProblem',
slot: 'exitProblem',
width: 150
},
{ title: '需要省领导协调推动的事项',
label: 'needHandleWork',
slot: 'needHandleWork',
width: 240
}
],
flag: false,
pageData: { // 关于分页的数据
// pageSize: 10, // 每页条数
// pageSizes: [10, 20, 30, 40, 50], // 每页条数可选列表
// currentPage: 1, // 当前页数
// total: 0, // 总数
jumpPage: '',
page: 1,
// 第几页
rows: 10,
// 一页显示几条数据
pageSize: [10, 20, 30, 40, 50],
total: 0
},
dutyUnitAb: '',
overviewTableData: [],
overviewTableHead: [],
allTaskTableHead: [{
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}],
unfeedbackTableHead: [{
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}, {
title: '未反馈单位',
label: 'dutyUnits'
}],
overtimeTableHead: [{
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}, {
title: '逾期反馈单位',
label: 'dutyUnits'
}],
ontimeTableHead: [{
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}],
unitTableHead: [{
title: '责任单位',
label: 'unitName'
}, {
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}],
taskTableHead: [{
title: '责任单位',
label: 'unitName'
}, {
title: '标题',
label: 'title',
slot: 'title'
}, {
title: '任务专题',
label: 'topic'
}, {
title: '办结期限',
label: 'limitDate'
}, {
title: '创建时间',
label: 'createTime'
}],
topicList: [],
statusList: [{
title: '所有',
label: ''
}, {
title: '未反馈',
label: 1
}, {
title: '逾期反馈',
label: 2
}, {
title: '按期反馈',
label: 3
}],
taskid: '',
taskType: ''
}
},
computed: {
changeArr() {
let changeArr = []
console.log('1650', this.nowA)
if (this.nowA.display === 'one') {
changeArr = this.columns
} else if (this.nowA.display === 'two') {
changeArr = this.columns1
}
return changeArr
},
title() {
console.log('val', this.nowA)
// let status = this.nowA.status
let title = ''
if (this.nowA.pageStatus) {
switch (this.nowA.status) {
case 'all':
title = '下发任务总数'
break
case 'unfeedback':
title = '未反馈任务情况'
break
case 'overtime':
title = '逾期反馈任务情况'
break
case 'ontime':
title = '按期反馈任务情况'
break
case 'unit':
title = `${this.nowA.unitName}任务情况`
break
case 'task':
title = `${this.nowA.topic}任务情况`
break
}
} else {
if (this.nowA.display === 'one') {
// title = (this.nowA.status === 2 ? '在办逾期' : this.nowA.status === 1 ? '其他在办' : '存在困难') + '任务情况'
title = `${this.nowA.status === 2 ? '在办逾期' : this.nowA.status === 1 ? '其他在办' : '存在困难'}任务情况`
} else if (this.nowA.display === 'two') {
// title = (this.dutyUnitAb ? this.dutyUnitAb : '暂无') + '任务情况'
title = `${this.dutyUnitAb ? this.dutyUnitAb : '暂无'}任务情况`
}
}
return title
}
},
watch: {
// nowA(val) {
// console.log('val', val)
// }
},
created() {
},
mounted() {
console.log('子组件触发 mounted 钩子函数 ...')
if (this.nowA.status === 'unit' || this.nowA.status === 'task') {
this.form.status = this.nowA.lightStatus ? Number(this.nowA.lightStatus) : ''
}
this.getUnitCode()
this.getTopicList()
this.getHandleDataDetail()
this.test1()
},
methods: {
study() {
// this.$parent.$parent.test()
// this.$emit('fatherMethod')
this.test()
},
test1() {
console.log('1726', this.nowA)
// console.log('1502', this.fatherMethod())
// this.fatherMethod()
},
open() {
this.dialogVisible1 = true
// console.log('1832')
},
openTask(data) {
// console.log('id', id)
this.dialogVisible1 = true
this.close1 = true
this.taskid = data.id
this.taskType = data.topicId
},
// 关闭三级页面
handleClose1() {
this.close1 = false
this.dialogVisible1 = false
},
// 关闭
fatherF() {
this.$parent.handleClose()
// this.$parent.$parent.test()
},
// 重置表单
resetForm(formName) {
console.log('重置', this.$refs[formName])
this.$refs[formName].resetFields()
this.value = ''
},
// 选择职位查找
selectPost(item) {
this.form.post = item
console.log('关键字', this.form.name)
console.log('post', this.form.post)
},
// 分页
changeSize(size) {
console.log(size)
this.pageData.rows = size
this.getHandleDataDetail()
},
changePage(page1) {
this.pageData.page = page1
this.getHandleDataDetail()
},
getUnitCode() {
getUnitCode().then((res) => {
this.options = res.data.childDeptList.map((item) => {
return item
})
console.log('单位', this.options)
})
},
getHandleDataDetail() {
// this.nowA = this.$route.query
console.log('now', this.nowA)
console.log('1213', this.nowA.lightStatus)
console.log('45', this.form.name)
// this.nowA.pageStatus存在就执行
if (this.nowA.pageStatus) {
this.getSecondDataView()
} else {
// one代表是批示落实总数下面的框跳转，two代表是在办任务逾期排名率
if (this.nowA.display === 'one') {
const data = {
topicCode: 'instructions',
lightStatus: this.nowA.status,
pageSize: this.pageData.rows,
pageNum: this.pageData.page,
dutyUnitId: this.form.post,
taskName: this.form.name
}
getHandleDataDetail(data).then((res) => {
console.log('143', res)
this.detailsData = res.data.data
this.detailsData1 = JSON.parse(JSON.stringify(this.detailsData))
console.log('test', this.detailsData[0].id)
this.pageData.total = res.data.total
console.log('total', this.pageData)
this.$nextTick(() => {
this.testWidth()
})
// setTimeout(() => {
// this.testWidth()
// }, 800)
this.flag = true
}).catch((err) => {
console.log('err', err)
})
} else if (this.nowA.display === 'two') {
const data = {
topicCode: 'instructions',
lightStatus: this.nowA.lightStatus,
pageSize: this.pageData.rows,
pageNum: this.pageData.page,
dutyUnitId: this.form.post ? this.form.post : this.nowA.dutyUnitId,
taskName: this.form.name
}
getHandleDataDetail(data).then((res) => {
console.log('1433', res)
this.detailsData = res.data.data
this.dutyUnitAb = res.data.data[0].dutyUnit
this.detailsData1 = JSON.parse(JSON.stringify(this.detailsData))
console.log('test', this.detailsData[0].id)
this.pageData.total = res.data.total
console.log('total', this.pageData)
this.$nextTick(() => {
this.testWidth()
})
this.flag = true
}).catch((err) => {
console.log('err', err)
})
}
}
},
getSecondDataView() {
let lightStatus = ''
let topicCode = ''
console.log('1611', this.nowA)
switch (this.nowA.status) {
case 'unfeedback':
lightStatus = 1
this.overviewTableHead = this.unfeedbackTableHead
topicCode = this.form.task
break
case 'overtime':
lightStatus = 2
this.overviewTableHead = this.overtimeTableHead
topicCode = this.form.task
break
case 'ontime':
lightStatus = 3
this.overviewTableHead = this.ontimeTableHead
topicCode = this.form.task
break
case 'unit':
// lightStatus = this.form.status ? this.form.status : this.nowA.pageStatus
lightStatus = this.form.status ? this.form.status : this.nowA.lightStatus
this.overviewTableHead = this.unitTableHead
topicCode = this.form.task
break
case 'task':
lightStatus = this.form.status
this.overviewTableHead = this.taskTableHead
topicCode = this.nowA.topicCode
break
default:
lightStatus = ''
this.overviewTableHead = this.allTaskTableHead
topicCode = this.form.task
break
}
const params = {
lightStatus,
title: this.form.title,
topicCode: topicCode,
unitId: this.nowA.id,
pageNum: this.pageData.page,
pageSize: this.pageData.rows,
createStartTime: this.nowA.createStartTime ? dayjs(this.nowA.createStartTime).format('YYYY-MM-DD') : '',
createEndTime: this.nowA.createEndTime ? dayjs(this.nowA.createEndTime).format('YYYY-MM-DD') : ''
}
console.log('1750', params)
getSecondDataView(params).then(res => {
this.overviewTableData = res.data.data.data
this.pageData.total = res.data.data.total
console.log('getdata', res.data.data)
this.$nextTick(() => {
this.testWidth()
})
// setTimeout(() => {
// this.testWidth()
// }, 800)
})
},
getTopicList() {
getTopicList().then(res => {
this.topicList = res.data.rows
this.topicList.unshift({
code: '',
topic: '所有'
})
})
},
testWidth() {
document.querySelector('.el-table__header-wrapper').style.paddingRight = getScrollbarWidth() + 'px'
document.querySelector('.el-table__header').style.paddingRight = getScrollbarWidth() + 'px'
console.log('1038', document.querySelector('.el-table__header-wrapper'))
}
}
}
</script>
<style lang="scss" scoped>
.oneFirst2 {
background: #FFFFFF;
border: 1px solid #DAE0E5;
border-radius: 4px 4px NaNpx;
min-height: 92vh;
padding: 0;
.firstContent {
height: 48px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
border-bottom: 1px solid #DAE0E5;
label {
font-weight: 600;
margin-bottom: 2px;
}
div {
height: 40px;
width: 72px;
background-image: linear-gradient(179deg, #FFFFFF 0%, #FDFDFE 0%, #F9FAFB 100%);
border: 1px solid rgba(196,205,213,1);
border-radius: 4px;
text-align: center;
line-height: 40px;
margin-right: 10px;
margin-bottom: 2px;
label {
font-weight: 400;
}
}
}
.secondContent {
height: 72px;
border-bottom: 1px solid #DAE0E5;
.el-form {
padding-top: 17px;
padding-left: 24px;
.el-form-item {
.el-form-item__content {
.el-select {
width: 20vw;
height: 36px;
}
.el-input {
width: 20vw;
height: 40px;
}
.el-button {
height: 40px;
// line-height: 36px;
}
}
}
}
}
.thirdContent {
height: calc(96vh - 48px - 72px);
::v-deep .tableHead {
th {
background-color: #FAFAFA;
}
}
.table-title {
color: #0166D0;
cursor: pointer;
}
}
.statistical {
height: 40px;
line-height: 40px;
padding: 0 24px;
background-color: rgba($color: #0166D0, $alpha: 0.08);
font-size: 14px;
span {
margin-right: 32px;
}
}
}
</style>
三及页面
<template>
<div>
<div class="page3">
<div class="firstContent">
<label>任务详情</label>
<div @click="closePage3()"><label>关闭</label></div>
</div>
<div class="secondContent">
<div class="secondTxt1">
<label>{{ currentObj.title ? currentObj.title : '暂无' }}</label>
</div>
<div class="secondTxt2">
<label>任务专题：{{ currentObj.topic ? currentObj.topic : '暂无' }} </label>
<label>办结时间：{{ currentObj.limitDate ? currentObj.limitDate : '暂无' }}</label>
<label>创建人：{{ currentObj.creator ? currentObj.creator : '暂无' }} </label>
<label>创建时间：{{ currentObj.createTime ? currentObj.createTime : '暂无' }}</label>
</div>
</div>
<div class="thirdContent">
<table-list
ref="table"
:stripe="true"
:table-data="details3Data"
:columns="tableHead"
:show-index="true"
:set-table-h="true"
:page-data="pageData"
@changeSize="changeSize"
@changePage="changePage"
/>
</div>
</div>
</div>
</template>
<script>
import { getScrollbarWidth } from '@/utils/utils'
import TableList from '@/components/TableList/index.vue'
import {
getThreeDetails
} from '@/api/instructions'
export default {
components: {
'table-list': TableList
},
props: {
id: {
type: String,
default: null
},
type: {
type: String,
default: null
}
},
data() {
return {
details3Data: [],
currentObj: {},
pageData: { // 关于分页的数据
// pageSize: 10, // 每页条数
// pageSizes: [10, 20, 30, 40, 50], // 每页条数可选列表
// currentPage: 1, // 当前页数
// total: 0, // 总数
jumpPage: '',
page: 1,
// 第几页
rows: 10,
// 一页显示几条数据
pageSize: [10, 20, 30, 40, 50],
total: 0
},
tableHead: [],
important: [
// 文件标题
{
title: '任务名称',
label: 'taskName',
slot: 'taskName'
// width: 100
},
{ title: '任务内容',
label: 'taskContent',
slot: 'taskContent',
width: 300
},
{ title: '阶段任务名称',
label: 'finishContent',
slot: 'finishContent',
width: 400
},
{ title: '阶段任务办结时间',
label: 'finishTime',
slot: 'finishTime',
width: 150
},
{ title: '阶段任务完成情况',
label: 'finishState',
slot: 'finishState',
width: 100
},
{ title: '存在问题及困难',
label: 'exitProblem',
slot: 'exitProblem',
width: 180
},
{ title: '需要省领导协调推动的事项',
label: 'needHandleWork',
slot: 'needHandleWork',
width: 200
},
{ title: '任务来源',
label: 'source',
slot: 'source',
width: 180
},
{ title: '分管领导',
label: 'unitLeader',
slot: 'unitLeader'
// width: 80
},
{ title: '责任处室',
label: 'dutyDept',
slot: 'dutyDept',
width: 120
},
{ title: '责任单位',
label: 'dutyUnit',
slot: 'dutyUnit',
width: 120
}
],
nums: 5,
instruction: [
{ title: '批示时间',
label: 'disposalTime',
width: 120
},
{ title: '来文单位',
label: 'source',
width: 120
},
{ title: '文件标题',
label: 'taskName',
width: 120
},
{ title: '批示内容',
label: 'taskContent'
// width: 120
},
{ title: '落实情况及下一步打算',
label: 'finishContent',
width: 360
},
{ title: '责任厅局及处室',
label: 'dutyDept',
width: 180
},
{ title: '密级',
label: 'secretLevel',
width: 50
},
{ title: '存在困难及问题',
label: 'exitProblem',
width: 150
},
{ title: '需要省领导协调推动',
label: 'needHandleWork',
width: 240
},
{ title: '任务办结时间',
label: 'finishTime',
width: 120
},
{ title: '任务完成情况',
label: 'finishState',
width: 100
},
{ title: '责任单位',
label: 'dutyUnit'
// width: 120
}
],
affair: [
{ title: '类别',
label: 'category'
},
{ title: '会议（活动）名称',
label: 'taskName'
},
{ title: '有关情况',
label: 'taskContent'
},
{ title: '可开会（调研）时间',
label: 'surveyDate'
},
{ title: '承办部门',
label: 'dutyDept'
},
{ title: '备注',
label: 'remark'
},
{ title: '责任单位',
label: 'dutyUnit'
}
],
other: [
{ title: '附件标题',
label: 'taskName'
},
{ title: '责任单位',
label: 'dutyUnit'
}
]
}
},
watch: {
// type(val) {
// console.log('val', val)
// console.log('id', this.id)
// switch (val) {
// case 'affairs':
// this.tableHead = this.affair
// break
// case 'instructions':
// this.tableHead = this.instruction
// break
// case 'keywork':
// this.tableHead = this.important
// break
// case 'other':
// this.tableHead = this.other
// break
// }
// }
},
mounted() {
console.log('val', this.type)
console.log('id', this.id)
switch (this.type) {
case 'affairs':
console.log('a')
this.tableHead = this.affair
break
case 'instructions':
this.tableHead = this.instruction
break
case 'keywork':
this.tableHead = this.important
break
case 'other':
this.tableHead = this.other
break
}
this.getThreeDetails()
},
methods: {
getThreeDetails() {
const params = {
taskId: this.id,
pageSize: this.pageData.rows,
pageNum: this.pageData.page
}
getThreeDetails(params).then((res) => {
console.log('1543', res)
this.details3Data = res.data.data.data
this.currentObj = res.data.data.task
this.pageData.total = res.data.data.total
this.$nextTick(() => {
document.querySelectorAll('.el-table__header-wrapper')[1].style.paddingRight = getScrollbarWidth() + 'px'
document.querySelectorAll('.el-table__header')[1].style.paddingRight = getScrollbarWidth() + 'px'
console.log('1111', document.querySelectorAll('.el-table__header-wrapper'))
})
console.log('1539', this.currentObj)
})
},
closePage3() {
// this.$parent.$parent.test()
this.$parent.$parent.handleClose1()
},
// 分页
changeSize(size) {
console.log(size)
this.pageData.rows = size
this.getThreeDetails()
},
changePage(page1) {
this.pageData.page = page1
this.getThreeDetails()
}
}
}
</script>
<style lang="scss" scoped>
.page3 {
background: #FFFFFF;
border: 1px solid #DAE0E5;
border-radius: 4px 4px NaNpx;
min-height: 92vh;
//margin: 0;
padding: 0;
.firstContent {
height: 48px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
border-bottom: 1px solid #DAE0E5;
label {
font-weight: 600;
}
div {
height: 36px;
width: 72px;
background-image: linear-gradient(179deg, #FFFFFF 0%, #FDFDFE 0%, #F9FAFB 100%);
border: 1px solid rgba(196,205,213,1);
border-radius: 4px;
text-align: center;
line-height: 36px;
margin-right: 10px;
label {
font-weight: 400;
}
}
}
.secondContent {
border-bottom: 1px solid #DAE0E5;
.secondTxt1 {
padding-top: 24px;
text-align: center;
padding-bottom: 14px;
label {
font-weight: 600;
font-size: 18px;
}
}
.secondTxt2 {
text-align: center;
padding-bottom: 24px;
label {
padding-right: 20px;
color: #637381;
font-size: 14px;
font-weight: 400;
}
}
}
.thirdContent {
height: calc(92vh - 56px - 72px);
}
}
</style>