123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <div class='zhsx-log'>
- <el-dialog title='综合记录事项' width='70%' :visible.sync='visible'>
- <div class='top'></div>
- <div class='bottom'>
- <p>1.各级政府部门在广场检查中口头及书面提出的工作要求,整改事项</p>
- <p>2.广场消防安全培训、消防演习</p>
- <p>3.相关政府强制性检测的按时完成情况及检测中提出的问题</p>
- <p>4.广场安全质量第三方检测过程中列出的整改事项</p>
- <div class='bottom-table' :style='`height:${height}`'>
- <el-table
- :data='tableData'
- :height='tableHeight'
- style='width:100%;'
- :span-method='objectSpanMethod'
- border
- v-if='tableData.length>0'
- >
- <el-table-column label='序号' type='index' width='60'></el-table-column>
- <el-table-column prop='jcsx' label='检测事项' :show-overflow-tooltip='true' width='400'></el-table-column>
- <el-table-column prop='zgbm' label='主管部门' :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop='jlsx' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
- </el-table>
- </div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- props: ['tableData'],
- data() {
- return {
- visible: false
- }
- },
- computed: {
- tableHeight() {
- if (window.screen.height <= 768) {
- return 350
- } else {
- return 440
- }
- },
- height() {
- if (window.screen.height <= 768) {
- return 300
- } else {
- return 400
- }
- }
- },
- methods: {
- open() {
- this.visible = true
- },
- /**
- * @name objectSpanMethod
- * @param { Object } row 当前行
- * @param { Object } column 当前列
- * @param { Number } rowIndex 当前行号
- * @param { Number } columnIndex 当前列号
- * @return { Array,Object }
- * @description 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,
- * 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
- * 该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,
- * 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
- */
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- // 取出 tableData的长度, 合并记录事项 表格 使用
- let { length } = this.tableData || 1
- if (columnIndex === 2) {
- if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {
- return {
- rowspan: 0,
- colspan: 0
- }
- } else {
- let rows = 1
- for (let i = rowIndex; i < this.tableData.length - 1; i++) {
- if (row[column.property] === this.tableData[i + 1][column.property]) {
- rows++
- }
- }
- return {
- rowspan: rows,
- colspan: 1
- }
- }
- } else if (columnIndex === 3) {
- // 记录事项表格合并
- return { rowspan: length, colspan: 1 }
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .top {
- width: 100%;
- height: 1px;
- background: rgba(0, 0, 0, 0.06);
- margin-bottom: 20px;
- }
- .bottom {
- padding: 0 30px 14px 30px;
- p {
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(96, 106, 120, 1);
- line-height: 22px;
- }
- .bottom-table {
- margin-top: 12px;
- // element-ui table 组件 记录事项样式修改, 换行,fixed到页面中部
- /deep/ .el-table__row:first-child {
- td:last-child {
- div {
- white-space: pre-wrap;
- word-wrap: break-word;
- word-break: break-all;
- position: fixed;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- }
- }
- }
- </style>
- <style lang="less">
- .zhsx-log {
- .el-dialog {
- margin-top: 10vh !important;
- }
- .el-dialog__wrapper {
- overflow: hidden;
- }
- }
- </style>
|