修改证书预览及打印问题
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