Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4d230e87 by yangwei
Options

证书样式修改

1 parent 4dd258b7
Inline Side-by-side
Showing 5 changed files with 262 additions and 161 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-09-05 14:28:25 4 * @LastEditTime: 2023-09-08 15:59:07
5 --> 5 -->
6 <template> 6 <template>
7 <div class="szxx"> 7 <div class="szxx">
8 <el-card :class="item.szcs == 0 ? 'box-card':'box-card bg-red'" v-for="(item, index) in tableData" :key="index"> 8 <el-card
9 :class="classJudge(item)"
10 v-for="(item, index) in tableData"
11 :key="index"
12 >
9 <div slot="header" class="szxx_header"> 13 <div slot="header" class="szxx_header">
10 <span class="header_type">{{ 14 <span class="header_type">{{
11 item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明" 15 item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明"
12 }}</span> 16 }}</span>
13 <div class="header_text">{{ item.bdcqzh }}</div> 17 <div class="header_text">{{ item.bdcqzh }}</div>
14 </div> 18 </div>
...@@ -17,7 +21,7 @@ ...@@ -17,7 +21,7 @@
17 <span>{{ item.qllx }}</span> 21 <span>{{ item.qllx }}</span>
18 </div> 22 </div>
19 <div class="text color_red"> 23 <div class="text color_red">
20 <span>{{ item.qlr }}</span> 24 <span>{{ item.qlr }}</span><span class="color_iray">({{ item.qllx }})</span>
21 </div> 25 </div>
22 <div class="text color_iray"> 26 <div class="text color_iray">
23 <span>{{ item.gyqk }}</span> 27 <span>{{ item.gyqk }}</span>
...@@ -43,15 +47,33 @@ ...@@ -43,15 +47,33 @@
43 </div> 47 </div>
44 <div class="card_padding" v-if="viewEdit"> 48 <div class="card_padding" v-if="viewEdit">
45 <div class="top_line middle_margin"></div> 49 <div class="top_line middle_margin"></div>
46 <div class="text" v-if="item.ysxlh"> 50 <div class="text tac" v-if="item.ysxlh">
47 <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs 51 <el-button
48 }})</el-button> 52 class="operation_button"
49 <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button> 53 type="text"
54 @click="openInvalidDiglog(item)"
55 >再次打印（{{ item.szcs }})</el-button
56 >
57 <el-button
58 class="operation_button"
59 type="text"
60 @click="openRecordPop(item)"
61 >缮证记录</el-button
62 >
50 </div> 63 </div>
51 <div class="text" v-else> 64 <div class="text tac" v-else>
52 <el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs 65 <el-button
53 }}）</el-button> 66 class="operation_button"
54 <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button> 67 type="text"
68 @click="openZsylDialog(item, 2)"
69 >证书打印（{{ item.szcs }}）</el-button
70 >
71 <el-button
72 class="operation_button"
73 type="text"
74 @click="openRecordPop(item)"
75 >缮证记录</el-button
76 >
55 </div> 77 </div>
56 </div> 78 </div>
57 </el-card> 79 </el-card>
...@@ -60,178 +82,257 @@ ...@@ -60,178 +82,257 @@
60 </div> 82 </div>
61 </template> 83 </template>
62 <script> 84 <script>
63 import { mapGetters } from 'vuex' 85 import { mapGetters } from "vuex";
64 import store from '@/store/index.js' 86 import store from "@/store/index.js";
65 import { getSlsqBdcqzList } from "@/api/bdcqz.js"; 87 import { getSlsqBdcqzList } from "@/api/bdcqz.js";
66 export default { 88 export default {
67 props: {}, 89 props: {},
68 data () { 90 data() {
69 return { 91 return {
70 //表单是否可操作 92 //表单是否可操作
71 viewEdit: false, 93 viewEdit: false,
72 dialog: false, 94 dialog: false,
73 tableData: [], 95 tableData: [],
74 bdcqzlx: 1, 96 bdcqzlx: 1,
75 bdcqz: {} 97 bdcqz: {},
76 } 98 };
99 },
100 computed: {
101 ...mapGetters(["workFresh"]),
102 },
103 watch: {
104 workFresh: {
105 handler(newVal, oldVal) {
106 console.log(newVal, "newVal");
107 if (newVal) this.list();
108 },
77 }, 109 },
78 computed: { 110 },
79 ...mapGetters(['workFresh']) 111 created() {
112 this.list();
113 this.viewEdit = this.$parent.currentSelectTab.ableOperation;
114 },
115 methods: {
116 /**
117 * @description: 初始化列表
118 * @author: renchao
119 */
120 list() {
121 return new Promise((resolve, reject) => {
122 var bsmSlsq = this.$route.query.bsmSlsq;
123 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
124 resolve(res.code);
125 if (res.code === 200) {
126 this.tableData = res.result;
127 if (res.result) {
128 this.bdcqz = res.result[0];
129 }
130 }
131 });
132 });
80 }, 133 },
81 watch: { 134 /**
82 workFresh: { 135 * @description: 打开证书预览弹窗
83 handler (newVal, oldVal) { 136 * @param {*} item
84 console.log(newVal, 'newVal'); 137 * @param {*} type
85 if (newVal) this.list() 138 * @author: renchao
86 } 139 */
140 openZsylDialog(item, type) {
141 store.dispatch("user/reWorkFresh", false);
142 if (type == 1) {
143 //证书证明预览
144 this.$popupDialog(
145 "证书证明预览",
146 "workflow/components/dialog/zsyl",
147 { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq },
148 "76%",
149 true
150 );
151 } else {
152 this.$popupDialog(
153 "证书证明打印",
154 "workflow/components/dialog/zsdy",
155 { ...item },
156 "76%",
157 true
158 );
87 } 159 }
88 }, 160 },
89 created () { 161 /**
90 this.list() 162 * @description: 再次打印
91 this.viewEdit = this.$parent.currentSelectTab.ableOperation 163 * @param {*} item
164 * @author: renchao
165 */
166 openInvalidDiglog(item) {
167 this.$popupDialog(
168 "证书证明打印",
169 "workflow/components/dialog/zsdy",
170 { ...item },
171 "76%",
172 true
173 );
92 }, 174 },
93 methods: { 175 /**
94 /** 176 * @description: openRecordPop
95 * @description: 初始化列表 177 * @param {*} item
96 * @author: renchao 178 * @author: renchao
97 */ 179 */
98 list () { 180 openRecordPop(item) {
99 return new Promise((resolve, reject) => { 181 this.$popupDialog(
100 var bsmSlsq = this.$route.query.bsmSlsq; 182 "缮证记录",
101 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => { 183 "workflow/components/dialog/szRecord",
102 resolve(res.code); 184 { bsmBdcqz: item.bsmBdcqz },
103 if (res.code === 200) { 185 "60%",
104 this.tableData = res.result; 186 true
105 if (res.result) { 187 );
106 this.bdcqz = res.result[0]; 188 },
107 } 189 /**
108 } 190 * @description: classJudge 判断class
109 }) 191 * @param {*} item
110 }) 192 * @author: renchao
111 }, 193 */
112 /** 194 classJudge(item) {
113 * @description: 打开证书预览弹窗 195 let className = "box-card";
114 * @param {*} item 196 if (item.bdcqzlx == 1) {
115 * @param {*} type 197 className += " zs-card";
116 * @author: renchao 198 }else{
117 */ 199 className += " zm-card";
118 openZsylDialog (item, type) { 200 }
119 store.dispatch('user/reWorkFresh', false) 201 if (item.szcs == 0) {
120 if (type == 1) { 202 className += " no-print";
121 //证书证明预览
122 this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "76%", true);
123 } else {
124 this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
125 }
126 },
127 /**
128 * @description: 再次打印
129 * @param {*} item
130 * @author: renchao
131 */
132 openInvalidDiglog (item) {
133 this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
134 },
135 /**
136 * @description: openRecordPop
137 * @param {*} item
138 * @author: renchao
139 */
140 openRecordPop (item) {
141 this.$popupDialog("缮证记录", "workflow/components/dialog/szRecord", { bsmBdcqz: item.bsmBdcqz }, '60%', true)
142 } 203 }
204 return className;
143 }, 205 },
144 }; 206 },
207 };
145 </script> 208 </script>
146 <style scoped lang='scss'> 209 <style scoped lang="scss">
147 @import "~@/styles/public.scss"; 210 @import "~@/styles/public.scss";
148 .szxx { 211 .szxx {
149 box-sizing: border-box; 212 box-sizing: border-box;
150 padding-right: 15px; 213 padding-right: 15px;
151 width: 100%; 214 width: 100%;
152 height: 100%; 215 height: 100%;
153 overflow-y: scroll; 216 overflow-y: scroll;
154 padding-bottom: 55px; 217 padding-bottom: 55px;
155 218
156 .box-card { 219 .box-card {
157 float: left; 220 float: left;
158 width: 300px; 221 width: 350px;
159 margin-top: 10px; 222 margin: 10px;
160 margin-right: 10px; 223 box-shadow: none;
161 // .szxx_body { 224 background-image: url("~@/image/zm-bg.png");
162 // height: 240px; 225 background-size: 100% 100%;;
163 // } 226 border: 0;
227 /deep/ .el-card__header {
228 padding: 12px 66px;
229 background-size: auto;
230 border-bottom:0;
231 position: relative;
232 }
233 .szxx_header {
234 color: #8B4534;
235 }
236 .szxx_body {
237 height: 280px;
164 } 238 }
165 } 239 }
166 240 .zs-card {
167 .szxx_header { 241 border: 1px solid #a6b0be;
168 // color: #ffffff; 242 background-image: none;
169 font-weight: bolder; 243 /deep/ .el-card__header {
170 font-size: 16px; 244 background-image: url("~@/image/zs-red.png");
171 245 .szxx_header {
172 .header_type { 246 color: #ffe47c;
173 display: flex; 247 }
174 justify-content: center;
175 align-content: center;
176 } 248 }
177 249 .top_line {
178 .header_text { 250 border-top: 1px solid #d3dbe5;
179 text-align: center; 251 width: 330px;
180 margin-top: 10px; 252 margin: 0 auto 10px ;
181 line-height: 30px;
182 } 253 }
183 } 254 }
184 255 .zm-card{
185 .top_line { 256 /deep/ .el-card__header {
186 border-top: 2px solid rgb(222, 222, 222); 257 &:after{
258 content: "";
259 display: inline-block;
260 width: 330px;
261 height: 1px;
262 background-color: #B28676;
263 position: absolute;
264 left: 10px;
265 }
266 }
187 } 267 }
188 268 .zm-card.no-print {
189 .text { 269 background-image: url("~@/image/zm-gray.png");
190 margin-bottom: 10px; 270 .szxx_header {
191 text-align: center; 271 color: #6D7278;
272 }
192 } 273 }
193 274 .zs-card.no-print {
194 .color_iray { 275 /deep/ .el-card__header {
195 color: rgb(153, 153, 153); 276 background-image: url("~@/image/zs-gray.png");
277 .szxx_header {
278 color: #ffffff;
279 }
280 }
196 } 281 }
282 }
197 283
198 .color_red { 284 .szxx_header {
199 color: rgb(255, 89, 24); 285 // color: #ffffff;
200 } 286 // font-weight: bolder;
287 font-size: 16px;
201 288
202 .middle_margin { 289 .header_type {
203 margin-bottom: 10px; 290 display: flex;
291 justify-content: center;
292 align-content: center;
204 } 293 }
205 294
206 .operation_button { 295 .header_text {
207 border: 1px solid rgb(0, 121, 254);
208 padding: 5px;
209 text-align: center; 296 text-align: center;
297 margin-top: 2px;
298 line-height: 22px;
210 } 299 }
300 }
211 301
212 .card_padding {
213 padding-top: 8px;
214 font-size: 16px;
215 }
216 .box-card {
217 .szxx_header {
218 color: #303133;
219 }
220 // 证书背景色
221 /deep/.el-card__header {
222 background-color: #e2dfe0;
223 }
224 }
225 .bg-red {
226 .szxx_header {
227 color: #fff;
228 }
229 /deep/.el-card__header {
230 background-color: rgb(198, 67, 83);
231 }
232 }
233 302
234 /deep/.el-card__body { 303 .text {
235 padding: 0px; 304 margin-bottom: 8px;
236 } 305 text-align: left;
306 text-indent: 16px;
307 }
308 .text.tac{
309 text-align: center;
310 }
311
312 .color_iray {
313 color: #6D7278;
314 }
315
316 .color_red {
317 color: #AB0C0C;
318 }
319
320 .middle_margin {
321 margin-bottom: 10px;
322 }
323
324 .operation_button {
325 border: 1px solid #5c95e5;
326 padding: 5px;
327 text-align: center;
328 }
329
330 .card_padding {
331 padding-top: 8px;
332 font-size: 14px;
333 line-height: 22px;
334 }
335 /deep/.el-card__body {
336 padding: 0px;
337 }
237 </style> 338 </style>
......