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.
129 lines
3.1 KiB
129 lines
3.1 KiB
<template>
|
|
<el-dialog title="查看" :visible.sync="visible" append-to-body class="dialog-crf" top="4vh" width="280mm">
|
|
<hm-preview v-if="content" ref="ecrf" :value="content" class="hmPreview" />
|
|
|
|
<!-- 工具 -->
|
|
<div class="tool-bar">
|
|
<el-button v-if="print" icon="el-icon-printer" circle title="打印" @click="btnPrintClick" />
|
|
<el-button v-if="edit" icon="el-icon-edit-outline" circle title="编辑" @click="btnEditClick" />
|
|
<el-button v-if="remove" icon="el-icon-delete" circle title="删除" @click="btnDeleteClick" />
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import hmPreview from '@/components/hm-crf/load-content'
|
|
const Base64 = require('js-base64').Base64
|
|
|
|
export default {
|
|
components: { hmPreview },
|
|
props: {
|
|
height: { type: String, default: '100%' },
|
|
type: { type: String, default: 'load' },
|
|
print: { type: Boolean, default: false },
|
|
edit: { type: Boolean, default: false },
|
|
remove: { type: Boolean, default: false }
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
id: '',
|
|
content: ''
|
|
}
|
|
},
|
|
watch: {
|
|
id(val) { console.log(val) }
|
|
},
|
|
mounted() { },
|
|
methods: {
|
|
init() {
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
this.content = ''
|
|
this.getInfo()
|
|
})
|
|
},
|
|
// 获取信息
|
|
getInfo() {
|
|
if (this.type === 'load') {
|
|
// 加载
|
|
this.$http.get('/crf/form', { params: { id: this.id }}).then(({ data: res }) => {
|
|
if (res.data) {
|
|
this.content = Base64.decode(res.data.content)
|
|
}
|
|
})
|
|
} else {
|
|
// 预览模板
|
|
this.$http.get('/project/crf/template/' + this.id).then(({ data: res }) => {
|
|
if (res.data) {
|
|
this.content = Base64.decode(res.data.content)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
btnPrintClick() {
|
|
this.$refs.ecrf.print()
|
|
},
|
|
btnEditClick() {
|
|
this.$emit('edit', this.id)
|
|
},
|
|
btnDeleteClick() {
|
|
this.$confirm(this.$t('prompt.info', { handle: this.$t('delete') }), this.$t('prompt.title'), {
|
|
confirmButtonText: this.$t('confirm'),
|
|
cancelButtonText: this.$t('cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$http.delete('/crf/form/' + this.id).then(({ data: res }) => {
|
|
this.$message.success('删除成功!')
|
|
this.visible = false
|
|
this.$emit('remove', this.id)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dialog-crf {
|
|
::v-deep .el-dialog {
|
|
margin-bottom: 10px;
|
|
|
|
.el-dialog__header {
|
|
padding: 10px 20px;
|
|
|
|
.el-dialog__headerbtn {
|
|
top: 10px;
|
|
font-size: 20px;
|
|
|
|
.el-dialog__close {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
}
|
|
.el-dialog__body {
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
background: rgba(193, 193, 193, 0.2);
|
|
|
|
height: calc(96vh - 55px);
|
|
|
|
.hmPreview {
|
|
background: #fff;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool-bar {
|
|
position: absolute;
|
|
width: 50px;
|
|
bottom: 20px;
|
|
right: 5px;
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|