修改证书预览及打印问题
Showing
7 changed files
with
223 additions
and
144 deletions
src/image/bdcqz/bdcdjzm.jpg
0 → 100644
592 KB
src/image/bdcqz/bdcqzs1.jpg
0 → 100644
240 KB
src/image/bdcqz/bdcqzs2.jpg
0 → 100644
201 KB
src/image/bdcqz/bdcqzs3.jpg
0 → 100644
183 KB
... | @@ -9,33 +9,32 @@ | ... | @@ -9,33 +9,32 @@ |
9 | </div> | 9 | </div> |
10 | <div class="szxx_body card_padding"> | 10 | <div class="szxx_body card_padding"> |
11 | <div class="text color_iray"> | 11 | <div class="text color_iray"> |
12 | <span>{{ item.qllxmc }}</span> | 12 | <span>{{ item.qllx }}</span> |
13 | </div> | 13 | </div> |
14 | <div class="text color_red"> | 14 | <div class="text color_red"> |
15 | <span>{{ item.qlr }}</span> | 15 | <span>{{ item.qlr }}</span> |
16 | </div> | 16 | </div> |
17 | <div class="text color_iray"> | 17 | <div class="text color_iray"> |
18 | <span>{{ | 18 | <span>{{ item.gyqk }}</span> |
19 | item.gyqk | ||
20 | }}</span> | ||
21 | </div> | 19 | </div> |
22 | <div class="text color_red"> | 20 | <div class="text color_red"> |
23 | <span>{{ item.bdcdyh }}</span> | 21 | <span>{{ item.bdcdyh }}</span> |
24 | </div> | 22 | </div> |
25 | <div class="text color_iray"> | 23 | <div class="text color_iray"> |
26 | <span>{{ item.yt }}</span> | 24 | <span>{{ item.zl }}</span> |
27 | </div> | 25 | </div> |
28 | <div class="text color_red"> | 26 | <div class="text color_red"> |
29 | <span>{{ item.mj }}</span> | 27 | <span>{{ item.yt }}</span> |
30 | </div> | 28 | </div> |
31 | <div class="text color_iray"> | 29 | <div class="text color_iray"> |
30 | <span>{{ item.mj }}</span> | ||
31 | </div> | ||
32 | <div class="text color_red"> | ||
32 | <span>{{ item.syqx }}</span> | 33 | <span>{{ item.syqx }}</span> |
33 | </div> | 34 | </div> |
34 | <div v-if="item.ysxlh"> | 35 | <div class="top_line middle_margin"></div> |
35 | <div class="top_line middle_margin"></div> | 36 | <div class="text color_iray"> |
36 | <div class="text color_iray"> | 37 | <span>印刷序列号:{{ item.ysxlh }}</span> |
37 | <span>印刷序列号:{{ item.ysxlh }}</span> | ||
38 | </div> | ||
39 | </div> | 38 | </div> |
40 | </div> | 39 | </div> |
41 | <div class="card_padding"> | 40 | <div class="card_padding"> |
... | @@ -44,14 +43,14 @@ | ... | @@ -44,14 +43,14 @@ |
44 | <el-button | 43 | <el-button |
45 | class="operation_button" | 44 | class="operation_button" |
46 | type="text" | 45 | type="text" |
47 | @click="openZsylDialog(item, 1)" | 46 | @click="openInvalidDiglog(item)" |
48 | >证书预览</el-button | 47 | >再次打印({{ item.szcs }})</el-button |
49 | > | 48 | > |
50 | <el-button | 49 | <el-button |
51 | class="operation_button" | 50 | class="operation_button" |
52 | type="text" | 51 | type="text" |
53 | @click="openInvalidDiglog(item)" | 52 | @click="openZsylDialog(item, 1)" |
54 | >再次打印({{ item.szcs }})</el-button | 53 | >缮证记录</el-button |
55 | > | 54 | > |
56 | </div> | 55 | </div> |
57 | <div class="text" v-else> | 56 | <div class="text" v-else> |
... | @@ -87,10 +86,9 @@ | ... | @@ -87,10 +86,9 @@ |
87 | <el-button @click="closeInvalidDiglog()">取 消</el-button> | 86 | <el-button @click="closeInvalidDiglog()">取 消</el-button> |
88 | <el-button type="primary" @click="confirmInvalid()">确 定</el-button> | 87 | <el-button type="primary" @click="confirmInvalid()">确 定</el-button> |
89 | </div> | 88 | </div> |
90 | |||
91 | <bdcqzPrint v-model="bdcqz" /> | ||
92 | </div> | 89 | </div> |
93 | </el-dialog> | 90 | </el-dialog> |
91 | <bdcqzPrint v-model="dialog" :bdcqz="bdcqz" /> | ||
94 | <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty> | 92 | <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty> |
95 | </div> | 93 | </div> |
96 | </template> | 94 | </template> |
... | @@ -98,10 +96,11 @@ | ... | @@ -98,10 +96,11 @@ |
98 | import { getSlsqBdcqzList, invalidCertificate } from "@/api/bdcqz.js"; | 96 | import { getSlsqBdcqzList, invalidCertificate } from "@/api/bdcqz.js"; |
99 | import bdcqzPrint from "./zsdy.vue"; | 97 | import bdcqzPrint from "./zsdy.vue"; |
100 | export default { | 98 | export default { |
101 | components: {}, | 99 | components: { bdcqzPrint }, |
102 | props: {}, | 100 | props: {}, |
103 | data() { | 101 | data() { |
104 | return { | 102 | return { |
103 | dialog: false, | ||
105 | tableData: [], | 104 | tableData: [], |
106 | bdcqzlx: 1, | 105 | bdcqzlx: 1, |
107 | bdcqz: {}, | 106 | bdcqz: {}, |
... | @@ -146,6 +145,8 @@ export default { | ... | @@ -146,6 +145,8 @@ export default { |
146 | }, | 145 | }, |
147 | }); | 146 | }); |
148 | } else { | 147 | } else { |
148 | this.dialog = true; | ||
149 | this.bdcqz = item; | ||
149 | //证书打印 | 150 | //证书打印 |
150 | // this.$popup("证书打印", "workflow/components/zsdy", { | 151 | // this.$popup("证书打印", "workflow/components/zsdy", { |
151 | // height: "700px", | 152 | // height: "700px", | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="from-clues"> | 2 | <dialogBox |
3 | title="不动产权证书" | ||
4 | width="60%" | ||
5 | isMain | ||
6 | v-model="myValue" | ||
7 | @closeDialog="closeDialog" | ||
8 | @submitForm="handleSubmit" | ||
9 | > | ||
10 | <div> | ||
3 | <div class="middle_padding"> | 11 | <div class="middle_padding"> |
4 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"> | 12 | <el-form |
13 | :model="ruleForm" | ||
14 | :rules="rules" | ||
15 | ref="ruleForm" | ||
16 | label-width="120px" | ||
17 | > | ||
5 | <el-form-item label="印刷序列号:" prop="ysxlh"> | 18 | <el-form-item label="印刷序列号:" prop="ysxlh"> |
6 | <el-select v-model="ruleForm.ysxlh" placeholder="请选择"> | 19 | <el-select v-model="ruleForm.ysxlh" placeholder="请选择"> |
7 | <el-option | 20 | <el-option |
8 | v-for="item in ysxlh" | 21 | v-for="item in ysxlh" |
9 | :key="item.ysxlh" | 22 | :key="item.ysxlh" |
10 | :label="item.ysxlh" | 23 | :label="item.ysxlh" |
11 | :value="item.ysxlh"> | 24 | :value="item.ysxlh" |
25 | > | ||
12 | </el-option> | 26 | </el-option> |
13 | </el-select> | 27 | </el-select> |
14 | </el-form-item> | 28 | </el-form-item> |
15 | </el-form> | 29 | </el-form> |
16 | </div> | 30 | </div> |
17 | <div class="aaaa">{{bdcqz.bdcqzlx == '1' ? '不动产权证书' : '不动产权证明'}}</div> | 31 | <div |
18 | <div class="zsyl-box"> | 32 | class="aaaa" |
19 | <div class="zsyl-left"> | 33 | :style="{ |
20 | <div class="zsyl-title"> | 34 | backgroundImage: 'url(' + require('@/image/bdcqz/bdcqzs2.jpg') + ')', |
21 | <span v-if="bdcqz.bdcqzh">{{bdcqz.bdcqzh}}</span> | 35 | }" |
22 | <span v-else>____( )________不动产权第 号</span> | 36 | > |
23 | </div> | 37 | <div> |
24 | <table class="table-column"> | 38 | <span>{{ bdcqz.bdcqzh }}</span> |
25 | <tr v-for="(item, colindex) in columns" :key="colindex"> | ||
26 | <td> | ||
27 | <span>{{ item.label }}</span> | ||
28 | </td> | ||
29 | <td> | ||
30 | <span> | ||
31 | {{ getRowValue(item.prop) }} | ||
32 | </span> | ||
33 | </td> | ||
34 | </tr> | ||
35 | </table> | ||
36 | </div> | 39 | </div> |
37 | <div class="zsyl-right"> | 40 | <div class="zsyl-box"> |
38 | <div class="zsyl-title">附记</div> | 41 | <div class="zsyl-left"> |
39 | <div class="zsyl-text"> {{ bdcqz.fj }}</div> | 42 | <div class="qlr"> |
43 | {{ bdcqz.qlr }} | ||
44 | </div> | ||
45 | <div class="gyqk"> | ||
46 | {{ bdcqz.gyqk }} | ||
47 | </div> | ||
48 | <div class="zl"> | ||
49 | {{ bdcqz.zl }} | ||
50 | </div> | ||
51 | <div class="bdcdyh"> | ||
52 | {{ bdcqz.bdcdyh }} | ||
53 | </div> | ||
54 | <div class="qllx"> | ||
55 | {{ bdcqz.qllx }} | ||
56 | </div> | ||
57 | <div class="qlxz"> | ||
58 | {{ bdcqz.qlxz }} | ||
59 | </div> | ||
60 | <div class="yt"> | ||
61 | {{ bdcqz.yt }} | ||
62 | </div> | ||
63 | <div class="mj"> | ||
64 | {{ bdcqz.mj }} | ||
65 | </div> | ||
66 | <div class="syqx"> | ||
67 | {{ bdcqz.syqx }} | ||
68 | </div> | ||
69 | <div class="qt"> | ||
70 | {{ bdcqz.qt }} | ||
71 | </div> | ||
72 | </div> | ||
73 | <div class="zsyl-right"> | ||
74 | |||
75 | <div class="fj">{{ bdcqz.fj }}</div> | ||
76 | </div> | ||
40 | </div> | 77 | </div> |
41 | </div> | 78 | </div> |
42 | </div> | 79 | </div> |
80 | </dialogBox> | ||
43 | </template> | 81 | </template> |
44 | 82 | ||
45 | <script> | 83 | <script> |
46 | import { datas } from "../javascript/zsyl.js"; | 84 | import { datas } from "../javascript/zsyl.js"; |
47 | import { readYsxlh,certificate,getSlsqBdcqzList} from "@/api/bdcqz.js" | 85 | import { readYsxlh, certificate, getSlsqBdcqzList } from "@/api/bdcqz.js"; |
48 | export default { | 86 | export default { |
49 | components: { | 87 | components: {}, |
50 | }, | ||
51 | props: { | 88 | props: { |
52 | formData: { | 89 | value: { type: Boolean, default: false }, |
53 | type: Object, | 90 | bdcqz: { type: Object, default: {} }, |
54 | default: {} | ||
55 | } | ||
56 | }, | 91 | }, |
57 | data () { | 92 | data() { |
58 | return { | 93 | return { |
94 | myValue: this.value, | ||
59 | //印刷序列号集合 | 95 | //印刷序列号集合 |
60 | ysxlh: [], | 96 | ysxlh: [], |
61 | //列名称对象 | 97 | //列名称对象 |
62 | columns: [], | 98 | columns: [], |
63 | //选择的不动产权证文件 | 99 | //选择的不动产权证文件 |
64 | bdcqz: '', | 100 | bdcqz: this.bdcqz, |
65 | ruleForm: { | 101 | ruleForm: { |
66 | bsmBdcqz: '', | 102 | bsmBdcqz: "", |
67 | szmc: '不动产权证书', | 103 | szmc: "不动产权证书", |
68 | bdcqzlx: '', | 104 | bdcqzlx: "", |
69 | szzh: '', | 105 | szzh: "", |
70 | ysxlh: '', | 106 | ysxlh: "", |
71 | }, | 107 | }, |
72 | rules: { | 108 | rules: { |
73 | ysxlh: [ | 109 | ysxlh: [ |
74 | { required: true, message: '请选择印刷序列号', trigger: 'change' } | 110 | { required: true, message: "请选择印刷序列号", trigger: "change" }, |
75 | ], | 111 | ], |
76 | }, | 112 | }, |
77 | } | 113 | }; |
78 | }, | 114 | }, |
79 | mounted(){ | 115 | watch: { |
80 | }, | 116 | value(val) { |
81 | created() { | 117 | this.myValue = val; |
82 | this.columns = datas.columns(); | 118 | this.columns = datas.columns(); |
83 | this.bdcqz = this.formData.bdcqz | 119 | }, |
84 | this.ysxlhList(); | ||
85 | }, | 120 | }, |
121 | created() {}, | ||
86 | methods: { | 122 | methods: { |
87 | //获取印刷序列号列表 | 123 | //获取印刷序列号列表 |
88 | ysxlhList() { | 124 | ysxlhList() { |
89 | readYsxlh({zslx:this.bdcqz.bdcqzlx}).then(res => { | 125 | readYsxlh({ zslx: this.bdcqz.bdcqzlx }).then((res) => { |
90 | if (res.code === 200) { | 126 | if (res.code === 200) { |
91 | this.ysxlh = res.result | 127 | this.ysxlh = res.result; |
92 | } | 128 | } |
93 | }) | 129 | }); |
130 | }, | ||
131 | closeDialog() { | ||
132 | this.$emit("input", false); | ||
133 | }, | ||
134 | handleSubmit() { | ||
135 | this.$emit("input", false); | ||
94 | }, | 136 | }, |
95 | //获取证书内容 | 137 | //获取证书内容 |
96 | getRowValue(code){ | 138 | getRowValue(code) { |
97 | var value = this.bdcqz[code]; | 139 | var value = this.bdcqz[code]; |
98 | return value; | 140 | return value; |
99 | }, | 141 | }, |
100 | //打印证书 | 142 | //打印证书 |
101 | childFn() { | 143 | childFn() { |
102 | this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz | 144 | this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz; |
103 | this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx | 145 | this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx; |
104 | this.ruleForm.szzh = this.bdcqz.bdcqzh | 146 | this.ruleForm.szzh = this.bdcqz.bdcqzh; |
105 | certificate(this.ruleForm).then(res => { | 147 | certificate(this.ruleForm).then((res) => { |
106 | if (res.code === 200) { | 148 | if (res.code === 200) { |
107 | this.$message.success('打印成功'); | 149 | this.$message.success("打印成功"); |
108 | }else{ | 150 | } else { |
109 | this.$message.error(res.message); | 151 | this.$message.error(res.message); |
110 | } | 152 | } |
111 | }) | 153 | }); |
112 | }, | 154 | }, |
113 | } | 155 | }, |
114 | } | 156 | }; |
115 | </script> | 157 | </script> |
116 | <style scoped lang="scss"> | 158 | <style scoped lang="scss"> |
117 | @import "~@/styles/mixin.scss"; | 159 | @import "~@/styles/mixin.scss"; |
118 | .zsyl-box{ | 160 | |
161 | .aaaa { | ||
162 | width: 1024px; | ||
163 | height: 739px; | ||
164 | font-family: KaiTi; | ||
165 | font-size: 16px; | ||
166 | } | ||
167 | .zsyl-box { | ||
119 | display: flex; | 168 | display: flex; |
120 | justify-content: space-between; | 169 | justify-content: space-between; |
121 | padding: 20px; | 170 | padding: 20px; |
122 | background: #FAFBE5; | 171 | height: 100%; |
123 | .zsyl-left{ | 172 | $left: 131px; |
124 | width: 330px; | 173 | font-weight: 700; |
125 | .zsyl-title{ | 174 | .zsyl-left { |
126 | font-size: 18px; | 175 | width: 540px; |
127 | text-align: center; | 176 | position: relative; |
177 | .qlr { | ||
178 | position: absolute; | ||
179 | top: 40px; | ||
180 | left: $left; | ||
128 | } | 181 | } |
129 | } | 182 | .gyqk { |
130 | .zsyl-right{ | 183 | position: absolute; |
131 | width: 330px; | 184 | top: 80px; |
132 | .zsyl-title{ | 185 | left: $left; |
133 | letter-spacing: 50px; | 186 | } |
134 | text-align: center; | 187 | .zl { |
135 | text-indent: 50px; | 188 | position: absolute; |
189 | top: 120px; | ||
190 | left: $left; | ||
191 | } | ||
192 | .bdcdyh { | ||
193 | position: absolute; | ||
194 | top: 160px; | ||
195 | left: $left; | ||
196 | } | ||
197 | .qllx { | ||
198 | position: absolute; | ||
199 | top: 205px; | ||
200 | left: $left; | ||
201 | } | ||
202 | .qlxz { | ||
203 | position: absolute; | ||
204 | top: 250px; | ||
205 | left: $left; | ||
206 | } | ||
207 | .yt { | ||
208 | position: absolute; | ||
209 | top: 290px; | ||
210 | left: $left; | ||
136 | } | 211 | } |
137 | .zsyl-text{ | 212 | .mj { |
138 | border: 1px solid #ccc; | 213 | position: absolute; |
139 | height: 90%; | 214 | top: 330px; |
215 | left: $left; | ||
216 | } | ||
217 | .syqx { | ||
218 | position: absolute; | ||
219 | top: 370px; | ||
220 | left: $left; | ||
221 | } | ||
222 | .qt { | ||
223 | position: absolute; | ||
224 | top: 420px; | ||
225 | left: $left; | ||
226 | } | ||
227 | } | ||
228 | .zsyl-right { | ||
229 | flex: 1; | ||
230 | text-align: left; | ||
231 | position: relative; | ||
232 | .fj { | ||
233 | position: absolute; | ||
234 | left:180px; | ||
235 | top: 0; | ||
140 | } | 236 | } |
141 | } | 237 | } |
142 | .zsyl-title{ | 238 | .zsyl-title { |
143 | margin-bottom: 12px; | 239 | margin-bottom: 12px; |
144 | } | 240 | } |
145 | /deep/.el-table__row{ | 241 | /deep/.el-table__row { |
146 | background: #FAFBE5!important; | 242 | background: #fafbe5 !important; |
147 | } | 243 | } |
148 | } | 244 | } |
149 | .middle_padding { | 245 | .middle_padding { |
150 | padding-bottom: 10px; | 246 | padding-bottom: 10px; |
151 | } | 247 | } |
152 | .zsyl-button{ | 248 | .zsyl-button { |
153 | text-align: center; | 249 | text-align: center; |
154 | margin-top: 20px; | 250 | margin-top: 20px; |
155 | .operation_button{ | 251 | .operation_button { |
156 | width: 100px; | 252 | width: 100px; |
157 | border: 1px solid rgb(0,121,254); | 253 | border: 1px solid rgb(0, 121, 254); |
158 | } | 254 | } |
159 | .dy-button { | 255 | .dy-button { |
160 | color: white; | 256 | color: white; |
161 | background-color: rgb(0,121,254); | 257 | background-color: rgb(0, 121, 254); |
162 | } | 258 | } |
163 | } | 259 | } |
164 | .table-column { | ||
165 | border-spacing: 1px; | ||
166 | width: 100%; | ||
167 | tr td { | ||
168 | border: 1px solid #ccc; | ||
169 | text-align: center; | ||
170 | height: 40px; | ||
171 | padding: 4px; | ||
172 | font-size: 13px; | ||
173 | background: rgb(251,249,229); | ||
174 | } | ||
175 | } | ||
176 | .aaaa{ | ||
177 | background: #FAFBE5; | ||
178 | text-align: center; | ||
179 | padding-top: 10px; | ||
180 | font-size: 20px; | ||
181 | } | ||
182 | </style> | 260 | </style> | ... | ... |
... | @@ -20,13 +20,13 @@ class data extends filter { | ... | @@ -20,13 +20,13 @@ class data extends filter { |
20 | { | 20 | { |
21 | prop: "bdcqzlx", | 21 | prop: "bdcqzlx", |
22 | label: "不动产权证类型", | 22 | label: "不动产权证类型", |
23 | render: (h, scope) => { | 23 | // render: (h, scope) => { |
24 | if (scope.row.bdcqzlx == "1") { | 24 | // if (scope.row.bdcqzlx == "1") { |
25 | return (<div>不动产权证书</div>) | 25 | // return (<div>不动产权证书</div>) |
26 | } else { | 26 | // } else { |
27 | return (<div>不动产登记证明</div>) | 27 | // return (<div>不动产登记证明</div>) |
28 | } | 28 | // } |
29 | } | 29 | // } |
30 | }, | 30 | }, |
31 | { | 31 | { |
32 | prop: "qllxmc", | 32 | prop: "qllxmc", |
... | @@ -82,13 +82,13 @@ class data extends filter { | ... | @@ -82,13 +82,13 @@ class data extends filter { |
82 | prop: "bdcqzlx", | 82 | prop: "bdcqzlx", |
83 | label: "不动产权证类型", | 83 | label: "不动产权证类型", |
84 | width: '120', | 84 | width: '120', |
85 | render: (h, scope) => { | 85 | // render: (h, scope) => { |
86 | if (scope.row.bdcqzlx == "1") { | 86 | // if (scope.row.bdcqzlx == "1") { |
87 | return (<div>不动产权证书</div>) | 87 | // return (<div>不动产权证书</div>) |
88 | } else { | 88 | // } else { |
89 | return (<div>不动产登记证明</div>) | 89 | // return (<div>不动产登记证明</div>) |
90 | } | 90 | // } |
91 | } | 91 | // } |
92 | }, | 92 | }, |
93 | { | 93 | { |
94 | prop: "qllx", | 94 | prop: "qllx", | ... | ... |
-
Please register or sign in to post a comment