TemplateHtmlEdit.vue
3.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
<el-dialog
title="编辑模板"
v-if="dialogVisible"
:visible.sync="dialogVisible"
width="65%"
appendToBody
:close-on-click-modal="false"
top="8vh"
:before-close="handleClose">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="pc端模版" name="pc"></el-tab-pane>
<el-tab-pane label="移动端模版" name="mobile"></el-tab-pane>
</el-tabs>
<el-form v-model="dataTemplate" data-vv-scope="editTemplateHtmlForm">
<ht-form-item label="报表别名" prop="alias" label-width="180px">
<ht-input
v-model="dataTemplate.alias"
disabled
:validate="{required:true}"
></ht-input>
</ht-form-item>
<ht-form-item label="报表模板" prop="name" label-width="180px" v-if="dialogVisible">
<codemirror
v-show="activeName ==='pc'"
ref="template"
:value="dataTemplate.templateHtml"
:options="cmOptions"
class="code">
</codemirror>
<codemirror
v-show="activeName ==='mobile'"
ref="mobileTemplate"
:value="dataTemplate.mobileTemplateHtml"
:options="cmOptions"
class="code">
</codemirror>
</ht-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import form from "@/api/form.js";
import { codemirror } from 'vue-codemirror';
import "codemirror/theme/ambiance.css";
require("codemirror/mode/javascript/javascript");
export default {
name: "template-html-edit",
props: ["data"],
components: { codemirror },
data() {
return {
activeName:'pc',
dataTemplate: {},
dialogVisible: false,
cmOptions:{
value: '',
mode: 'vue',
readOnly: false,
smartIndent: true,
tabSize: 2,
theme: 'base16-light',
lineNumbers: true,
line: true,
lineWrapping: true,
autoRefresh: true
},
};
},
computed: {
codemirror() {
return this.$refs.template.codemirror;
},
mobileCodemirror(){
return this.$refs.mobileTemplate.codemirror
}
},
watch:{
data:{
handler(newVal, oldVal) {
if ( newVal != oldVal) {
this.dataTemplate = newVal;
}
},
immediate: true,
deep: true
}
},
methods: {
onConfirm(selection) {
this.dataTemplate.templateHtml = this.codemirror.getValue();
this.dataTemplate.mobileTemplateHtml = this.mobileCodemirror.getValue()
form.saveTemplateHtml(this.dataTemplate).then(response => {
if(response.state){
this.dialogVisible = false;
this.$message.success(response.message);
}else{
this.$message.error(response.message);
}
});
},
handleClose(){
this.dialogVisible = false;
},
showDialog(){
this.dialogVisible = true;
},
handleClick(){
}
},
};
</script>
<style scoped>
</style>