Show.vue

<template>
	<el-dialog v-dialogDrag width="80%" title="保留合约清单" v-if="dialogTableVisible" :visible.sync="dialogTableVisible" @close="handleClose" :destroy-on-close=true>
		<div style="height: 100%;">
			<!-- 头部文本域 -->
			<c-input 
				readonly 
				type="textarea" 
				maxlength="300" 
				rows="6" 
				show-word-limit 
				:value="content"
			></c-input>
			<!-- 中部表格 -->
			<el-table :data="tableData" border style="width: 100%;margin: 20px 0;">
				<el-table-column prop="reference" label="编号" width="200">
				</el-table-column>
				<el-table-column prop="notes" label="注释">
				</el-table-column>
			</el-table>
			<!-- 底部输入框 -->
			<c-input type="text" readonly :value="bottomContent"></c-input>
		</div>
	</el-dialog>
</template>

<script>
import event from '../event'
export default {
	name: "Show",
  props:['model', 'dialogTable', 'tableData'],
  mixins: ['event'],
  data() {
    return {
			dialogTableVisible: false,
    };
	},
	watch: {
		dialogTable(newValue,oldValue) {
			if(newValue) {
				this.dialogTableVisible = true
			}
		}
	},
	computed: {
		content () {
			return `Selected Business Sector: ${this.model.sector}\nFor Party: ${this.model.pta.nam}\nRole in Contract: ${this.model.rol}\n# reserved References: ${this.model.concnt}`
		},
		bottomContent () {
			return `Printed by ${this.model.sector} on ${this.model.rol}`
		}
	},
	methods: {
		handleClose () {
			this.dialogTableVisible = false
			this.$emit('close')
		}
	}
};
</script>
<style scoped lang="less">
.el-table th {
	background: #fff;
}
</style>