read_opc/reado-app/pages/reportForm/report-detail/index.vue

<template>
	<view class="content">
		<Nav :title="title" isBack isRight @goBack="handelBack" />
		<view id="luckysheet"
			style="margin:0px;padding:0px;position:absolute;width:100%;height:87%;left: 0px;top: 80rpx;">
		</view>
		<view class="btn">
			<u-button type="primary" size="middle" text="运行记录" @click="openRecord" hoverStayTime="0"></u-button>
		</view> -->
		<!-- 运行记录弹框 -->
		<u-popup :show="show" mode="center" :customStyle="{'padding':'10rpx','width':'80%'}">
			<uni-table stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">运行记录</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<view v-for="item in recordList" :key="item.id" @click="recordDetail(item.id)">
					<uni-tr>
						<uni-td class="uni-td" align="center">{{item.reportTableName}}</uni-td>
					</uni-tr>
				</view>
			</uni-table>
			<u-button size="middle" type="primary" text="关闭" @click="show=false" style="margin-top:10rpx"
				hoverStayTime="0">
			</u-button>
		</u-popup>
		<u-empty mode="data" icon="../../../static/data.png" v-if="!option">
		</u-empty>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				id: null,
				title: null,
				option: {},
				show: false,
				page: 1,
				limit: 10,
				recordList: [],
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			if (this.id) {
				this.getReportDetail()
			}
		},
		methods: {
			//返回按钮
			handelBack() {
				uni.switchTab({
					url: '/pages/reportForm/index'
				});
			},
			//表格详情接口
			getReportDetail() {
				uni.$http.get('/reportTable/getReportTableById/' + this.id).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.title = data.data.reportTableName
						const tableData = JSON.parse(data.data.reportTableData)
						this.option = tableData.option
						if (this.option) {
							tableData.option.allowEdit = false
							this.showToolbar(tableData)
							luckysheet.create(this.option)
						}
					}
				})
			},
			showToolbar(tableData) {
				tableData.showtoolbar = false
				this.option.enableAddRow = false
				this.option.enableAddBackTop = false
				let data = tableData.option.showtoolbarConfig
				for (let item in data) {
					data[item] = false
				}
			},
			//查看记录按钮
			openRecord() {
				this.show = true
				this.getRecord()
			},
			//获取运行记录接口
			getRecord() {
				uni.$http.get('/reportTable/getAutoChReportTable', {
					page: this.page,
					limit: this.limit,
					autoTableId: this.id
				}).then(({
					data
				}) => {
					if (data.code === 200) {
						this.recordList = data.data.reportTableList
					}
				})
			},
			//运行记录详情
			recordDetail(id) {
				uni.navigateTo({
					url: '/pages/reportForm/report-detail/recordDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .luckysheet_info_detail_back {
		display: none !important;
	}

	::v-deep .u-button {
		width: 160rpx;
		height: 60rpx
	}

	.btn {
		position: absolute;
		left: 50%;
		bottom: 2%;
		margin-left: -80rpx;
	}

	.uni-td {
		width: 600rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>