You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.6 KiB
132 lines
3.6 KiB
<template>
|
|
<el-dialog title="test" top="3vh" :visible.sync="visible" append-to-body>
|
|
<div class="exam-info-container clearfix">
|
|
<div class="exam-title">{{ examName }}</div>
|
|
<div class="exam-date-time-list">
|
|
<el-select
|
|
ref="select"
|
|
v-model="activeRecId"
|
|
placeholder="请选择"
|
|
size="small"
|
|
popper-class="c-el-select-popper"
|
|
:popper-append-to-body="false"
|
|
@visible-change="selectVisibleHandle"
|
|
>
|
|
<el-option
|
|
v-for="item in list"
|
|
:key="item.recId"
|
|
:label="item.time"
|
|
:value="item.recId"
|
|
@mouseover.native="preview(item)"
|
|
@mouseout.native="restore()"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dialog-container">
|
|
<el-table :data="activeObj.data" :span-method="arraySpanMethod" border style="width: 100%">
|
|
<el-table-column align="center" show-overflow-tooltip label="" prop="name" width="180" />
|
|
<el-table-column align="center" show-overflow-tooltip label="OD">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.both||scope.row.od }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" show-overflow-tooltip label="OS">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.both||scope.row.os }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<template slot="footer">
|
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
examName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
activeRecId: '',
|
|
activeObj: {
|
|
type: '',
|
|
time: null,
|
|
recId: '',
|
|
data: []
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
activeRecId(val) {
|
|
this.activeObj = this.list.find((item, index, array) => item.recId === val)
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.visible = true
|
|
this.activeRecId = this.list[0].recId
|
|
},
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (row.both && column.property !== 'name') {
|
|
// od列1,os列2.(合并od，隐藏os)
|
|
if (columnIndex === 1) {
|
|
return [1, 2]
|
|
} else if (columnIndex === 2) {
|
|
return [0, 0]
|
|
}
|
|
}
|
|
},
|
|
preview(item) {
|
|
this.activeObj = item
|
|
},
|
|
restore() {
|
|
this.activeObj = this.list.find((item, index, array) => item.recId === this.activeRecId)
|
|
},
|
|
selectVisibleHandle(val) {
|
|
if (val) {
|
|
const selectInputDom = this.$refs.select.$el
|
|
const width = selectInputDom.offsetWidth
|
|
const selectPoper = selectInputDom.getElementsByClassName('c-el-select-popper')[0]
|
|
const arrowDom = selectInputDom.getElementsByClassName('popper__arrow')[0]
|
|
this.$nextTick(function() {
|
|
const left = parseInt(selectPoper.style.left)
|
|
selectPoper.style.left = (left + width - 25) + 'px'
|
|
arrowDom.style.left = '10px'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.exam-info-container {
|
|
margin-bottom: 5px;
|
|
|
|
.exam-title {
|
|
float: left;
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.exam-date-time-list {
|
|
float: right;
|
|
}
|
|
}
|
|
</style>
|