|
@@ -1,141 +1,179 @@
|
|
|
<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>
|
|
|
+ <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
|
|
|
- }
|
|
|
+ props: ["tableData"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ if (window.screen.height <= 768) {
|
|
|
+ return 350;
|
|
|
+ } else {
|
|
|
+ return 440;
|
|
|
+ }
|
|
|
},
|
|
|
- computed: {
|
|
|
- tableHeight() {
|
|
|
- if (window.screen.height <= 768) {
|
|
|
- return 350
|
|
|
- } else {
|
|
|
- return 440
|
|
|
- }
|
|
|
- },
|
|
|
- height() {
|
|
|
- if (window.screen.height <= 768) {
|
|
|
- return 300
|
|
|
- } else {
|
|
|
- return 400
|
|
|
- }
|
|
|
- }
|
|
|
+ height() {
|
|
|
+ if (window.screen.height <= 768) {
|
|
|
+ return 300;
|
|
|
+ } else {
|
|
|
+ return 400;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // tableDataNumber() {
|
|
|
+ // let arr = [];
|
|
|
+ // let num = 1;
|
|
|
+ // this.tableData.forEach((item, index) => {
|
|
|
+ // arr.push(num)
|
|
|
+ // const text = this.tableData[index]['jcsx'];
|
|
|
+ // for(var i=arr.length;i<=this.tableData.length;i++){
|
|
|
+
|
|
|
+ // if(this.tableData[i]['jcsx'] && (this.tableData[i]['jcsx'] == text)){
|
|
|
+ // arr.push(num)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // num = num + 1;
|
|
|
+ // });
|
|
|
+ // console.log("arr", arr);
|
|
|
+ // return arr;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open() {
|
|
|
+ this.visible = true;
|
|
|
},
|
|
|
- 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 }
|
|
|
+ /**
|
|
|
+ * @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 };
|
|
|
+ } else if (columnIndex === 1) {
|
|
|
+ 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 === 0) {
|
|
|
+ let rows = 1;
|
|
|
+ for (let i = rowIndex; i < this.tableData.length - 1; i++) {
|
|
|
+ if (row["jcsx"] == this.tableData[i + 1]["jcsx"]) {
|
|
|
+ rows++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return { rowspan: rows, colspan: 1 };
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.top {
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- background: rgba(0, 0, 0, 0.06);
|
|
|
- margin-bottom: 20px;
|
|
|
+ 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%);
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .el-dialog {
|
|
|
+ margin-top: 10vh !important;
|
|
|
+ }
|
|
|
+ .el-dialog__wrapper {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|