Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
db5e9829 by xiaomiao
Options

mask-content

1 parent 6450e472
Inline Side-by-side
Showing 4 changed files with 493 additions and 489 deletions
1 /* 1 /*
2 * @Description: 引入公共组件 2 * @Description: 引入公共组件
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-04-10 11:16:54 4 * @LastEditTime: 2023-04-25 15:18:20
5 */ 5 */
6 import dialogBox from '@/components/DialogBox/dialogBox.vue' 6 import dialogBox from '@/components/dialogBox/dialogBox.vue'
7 import LbTable from '@/components/LbTable/lb-table.vue' 7 import LbTable from '@/components/LbTable/lb-table.vue'
8 import Theme from '@/components/Theme/theme.vue' 8 import Theme from '@/components/Theme/theme.vue'
9 import Popup from '@/components/Popup/index' 9 import Popup from '@/components/Popup/index'
......
...@@ -53,215 +53,214 @@ ...@@ -53,215 +53,214 @@
53 </el-select> 53 </el-select>
54 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray"> 54 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
55 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" /> 55 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
56 <el-table-column label="候选办理" prop="candidate" minWidth="150px" align="center" /> 56 <el-table-column label="环节名称" prop="candidate" minWidth="150px" align="center" />
57 <el-table-column label="实际办理" prop="assigneeName" minWidth="100px" align="center" /> 57 <el-table-column label="办理人" prop="assigneeName" minWidth="100px" align="center" />
58 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" /> 58 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
59 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" /> 59 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
60 <el-table-column label="耗时" prop="duration" minWidth="100px" align="center" /> 60 <el-table-column label="操作方式" align="center">
61 <el-table-column label="操作类型" align="center">
62 </el-table-column> 61 </el-table-column>
63 </el-table> 62 </el-table>
64 </div> 63 </div>
65 </div> 64 </div>
66 </template> 65 </template>
67 <script> 66 <script>
68 import '@/styles/package/theme/index.scss' 67 import '@/styles/package/theme/index.scss'
69 import BpmnViewer from 'bpmn-js/lib/Viewer' 68 import BpmnViewer from 'bpmn-js/lib/Viewer'
70 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas' 69 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
71 export default { 70 export default {
72 props: { 71 props: {
73 formData: { 72 formData: {
74 type: Object, 73 type: Object,
75 default: {} 74 default: {}
76 }
77 },
78 data () {
79 return {
80 dlgTitle: undefined,
81 defaultZoom: 1,
82 // 是否正在加载流程图
83 isLoading: true,
84 bpmnViewer: undefined,
85 // 已完成流程元素
86 processNodeInfo: undefined,
87 // 当前任务id
88 selectTaskId: undefined,
89 // 任务节点审批记录
90 taskCommentList: [],
91 // 已完成任务悬浮延迟Timer
92 hoverTimer: null,
93 // 下拉
94 selectValue: '',
95 selectOptions: []
96 }
97 },
98 created () {
99 this.$nextTick(() => {
100 this.importXML(this.formData.xml)
101 this.setProcessStatus(this.formData.finishedInfo);
102 })
103 },
104 destroyed () {
105 this.clearViewer()
106 },
107 methods: {
108 processReZoom () {
109 this.defaultZoom = 1
110 this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
111 },
112 processZoomIn (zoomStep = 0.1) {
113 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100
114 if (newZoom > 4) {
115 throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
116 } 75 }
117 this.defaultZoom = newZoom
118 this.bpmnViewer.get('canvas').zoom(this.defaultZoom)
119 }, 76 },
120 processZoomOut (zoomStep = 0.1) { 77 data () {
121 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100 78 return {
122 if (newZoom < 0.2) { 79 dlgTitle: undefined,
123 throw new Error('[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2') 80 defaultZoom: 1,
81 // 是否正在加载流程图
82 isLoading: true,
83 bpmnViewer: undefined,
84 // 已完成流程元素
85 processNodeInfo: undefined,
86 // 当前任务id
87 selectTaskId: undefined,
88 // 任务节点审批记录
89 taskCommentList: [],
90 // 已完成任务悬浮延迟Timer
91 hoverTimer: null,
92 // 下拉
93 selectValue: '',
94 selectOptions: []
124 } 95 }
125 this.defaultZoom = newZoom
126 this.bpmnViewer.get('canvas').zoom(this.defaultZoom)
127 }, 96 },
128 getOperationTagType (type) { 97 created () {
129 return 'success' 98 this.$nextTick(() => {
130 }, 99 this.importXML(this.formData.xml)
131 // 流程图预览清空 100 this.setProcessStatus(this.formData.finishedInfo);
132 clearViewer (a) { 101 })
133 if (this.$refs.processCanvas) {
134 this.$refs.processCanvas.innerHTML = ''
135 }
136 if (this.bpmnViewer) {
137 this.bpmnViewer.destroy()
138 }
139 this.bpmnViewer = null
140 }, 102 },
141 // 添加自定义箭头 103 destroyed () {
142 addCustomDefs () { 104 this.clearViewer()
143 const canvas = this.bpmnViewer.get('canvas')
144 const svg = canvas._svg
145 const customSuccessDefs = this.$refs.customSuccessDefs
146 const customFailDefs = this.$refs.customFailDefs
147 svg.appendChild(customSuccessDefs)
148 svg.appendChild(customFailDefs)
149 }, 105 },
150 // 任务悬浮弹窗 106 methods: {
151 onSelectElement (element) { 107 processReZoom () {
152 this.selectTaskId = undefined 108 this.defaultZoom = 1
153 this.dlgTitle = undefined 109 this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
110 },
111 processZoomIn (zoomStep = 0.1) {
112 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100
113 if (newZoom > 4) {
114 throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
115 }
116 this.defaultZoom = newZoom
117 this.bpmnViewer.get('canvas').zoom(this.defaultZoom)
118 },
119 processZoomOut (zoomStep = 0.1) {
120 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100
121 if (newZoom < 0.2) {
122 throw new Error('[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2')
123 }
124 this.defaultZoom = newZoom
125 this.bpmnViewer.get('canvas').zoom(this.defaultZoom)
126 },
127 getOperationTagType (type) {
128 return 'success'
129 },
130 // 流程图预览清空
131 clearViewer (a) {
132 if (this.$refs.processCanvas) {
133 this.$refs.processCanvas.innerHTML = ''
134 }
135 if (this.bpmnViewer) {
136 this.bpmnViewer.destroy()
137 }
138 this.bpmnViewer = null
139 },
140 // 添加自定义箭头
141 addCustomDefs () {
142 const canvas = this.bpmnViewer.get('canvas')
143 const svg = canvas._svg
144 const customSuccessDefs = this.$refs.customSuccessDefs
145 const customFailDefs = this.$refs.customFailDefs
146 svg.appendChild(customSuccessDefs)
147 svg.appendChild(customFailDefs)
148 },
149 // 任务悬浮弹窗
150 onSelectElement (element) {
151 this.selectTaskId = undefined
152 this.dlgTitle = undefined
154 153
155 if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return 154 if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return
156 155
157 if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) { 156 if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) {
158 return 157 return
159 } 158 }
160 159
161 this.selectTaskId = element.id 160 this.selectTaskId = element.id
162 this.dlgTitle = element.businessObject ? element.businessObject.name : undefined 161 this.dlgTitle = element.businessObject ? element.businessObject.name : undefined
163 // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 162 // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
164 this.taskCommentList = (this.formData.allCommentList || []).filter(item => { 163 this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
165 return item.taskDefKey === this.selectTaskId 164 return item.taskDefKey === this.selectTaskId
166 }) 165 })
167 }, 166 },
168 // 下拉列表切换 167 // 下拉列表切换
169 handleSelect (val) { 168 handleSelect (val) {
170 this.taskCommentList = (this.formData.allCommentList || []).filter(item => { 169 this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
171 return item.taskDefKey === val 170 return item.taskDefKey === val
172 }) 171 })
173 }, 172 },
174 // 显示流程图 173 // 显示流程图
175 async importXML (xml) { 174 async importXML (xml) {
176 let xmlData = this.$x2js.xml2js(xml).definitions.process; 175 let xmlData = this.$x2js.xml2js(xml).definitions.process;
177 this.selectOptions = xmlData.userTask.map(item => { 176 this.selectOptions = xmlData.userTask.map(item => {
178 return { value: item._id, label: item._name } 177 return { value: item._id, label: item._name }
179 }) 178 })
180 this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions] 179 this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions]
181 this.selectOptions = this.selectOptions.map(item => { 180 this.selectOptions = this.selectOptions.map(item => {
182 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { 181 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
183 return item 182 return item
183 }
184 }).filter(Boolean);
185 this.selectValue = xmlData.startEvent._id
186 this.clearViewer('a')
187 if (xml != null && xml !== '') {
188 try {
189 this.bpmnViewer = new BpmnViewer({
190 additionalModules: [
191 // 移动整个画布
192 MoveCanvasModule
193 ],
194 container: this.$refs.processCanvas
195 })
196 // 任务节点悬浮事件
197 this.bpmnViewer.on('element.click', ({ element }) => {
198 this.onSelectElement(element)
199 })
200 await this.bpmnViewer.importXML(xml)
201 this.isLoading = true
202 this.addCustomDefs()
203 } catch (e) {
204 this.clearViewer('b')
205 } finally {
206 this.isLoading = false
207 this.setProcessStatus(this.processNodeInfo)
208 this.$nextTick(() => {
209 this.processReZoom()
210 })
211 }
184 } 212 }
185 }).filter(Boolean); 213 },
186 this.selectValue = xmlData.startEvent._id 214 // 设置流程图元素状态
187 this.clearViewer('a') 215 setProcessStatus (processNodeInfo) {
188 if (xml != null && xml !== '') { 216 this.processNodeInfo = processNodeInfo
189 try { 217 if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return
190 this.bpmnViewer = new BpmnViewer({ 218 const { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo
191 additionalModules: [ 219 const canvas = this.bpmnViewer.get('canvas')
192 // 移动整个画布 220 const elementRegistry = this.bpmnViewer.get('elementRegistry')
193 MoveCanvasModule 221 if (Array.isArray(finishedSequenceFlowSet)) {
194 ], 222 finishedSequenceFlowSet.forEach(item => {
195 container: this.$refs.processCanvas 223 if (item != null) {
196 }) 224 canvas.addMarker(item, 'success')
197 // 任务节点悬浮事件 225 const element = elementRegistry.get(item)
198 this.bpmnViewer.on('element.click', ({ element }) => { 226 const conditionExpression = element.businessObject.conditionExpression
199 this.onSelectElement(element) 227 if (conditionExpression) {
200 }) 228 canvas.addMarker(item, 'condition-expression')
201 await this.bpmnViewer.importXML(xml) 229 }
202 this.isLoading = true 230 }
203 this.addCustomDefs()
204 } catch (e) {
205 this.clearViewer('b')
206 } finally {
207 this.isLoading = false
208 this.setProcessStatus(this.processNodeInfo)
209 this.$nextTick(() => {
210 this.processReZoom()
211 }) 231 })
212 } 232 }
213 } 233 if (Array.isArray(finishedTaskSet)) {
214 }, 234 finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'))
215 // 设置流程图元素状态 235 console.log(finishedTaskSet, 'finishedTaskSet');
216 setProcessStatus (processNodeInfo) { 236 }
217 this.processNodeInfo = processNodeInfo 237 if (Array.isArray(unfinishedTaskSet)) {
218 if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return 238 unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'))
219 const { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo 239 }
220 const canvas = this.bpmnViewer.get('canvas') 240 if (Array.isArray(rejectedTaskSet)) {
221 const elementRegistry = this.bpmnViewer.get('elementRegistry') 241 rejectedTaskSet.forEach(item => {
222 if (Array.isArray(finishedSequenceFlowSet)) { 242 if (item != null) {
223 finishedSequenceFlowSet.forEach(item => { 243 const element = elementRegistry.get(item)
224 if (item != null) { 244 if (element.type.includes('Task')) {
225 canvas.addMarker(item, 'success') 245 canvas.addMarker(item, 'danger')
226 const element = elementRegistry.get(item) 246 } else {
227 const conditionExpression = element.businessObject.conditionExpression 247 canvas.addMarker(item, 'warning')
228 if (conditionExpression) { 248 }
229 canvas.addMarker(item, 'condition-expression')
230 }
231 }
232 })
233 }
234 if (Array.isArray(finishedTaskSet)) {
235 finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'))
236 console.log(finishedTaskSet, 'finishedTaskSet');
237 }
238 if (Array.isArray(unfinishedTaskSet)) {
239 unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'))
240 }
241 if (Array.isArray(rejectedTaskSet)) {
242 rejectedTaskSet.forEach(item => {
243 if (item != null) {
244 const element = elementRegistry.get(item)
245 if (element.type.includes('Task')) {
246 canvas.addMarker(item, 'danger')
247 } else {
248 canvas.addMarker(item, 'warning')
249 } 249 }
250 } 250 })
251 }) 251 }
252 } 252 }
253 } 253 }
254 } 254 }
255 }
256 </script> 255 </script>
257 <style scoped lang="scss"> 256 <style scoped lang="scss">
258 .information-list { 257 .information-list {
259 height: 150px; 258 height: 150px;
260 margin-top: 10px; 259 margin-top: 10px;
261 260
262 p { 261 p {
263 font-size: 16px; 262 font-size: 16px;
264 line-height: 24px; 263 line-height: 24px;
264 }
265 } 265 }
266 }
267 </style>
...\ No newline at end of file ...\ No newline at end of file
266 </style>
......
...@@ -70,214 +70,216 @@ ...@@ -70,214 +70,216 @@
70 </div> 70 </div>
71 </template> 71 </template>
72 <script> 72 <script>
73 import { getSlsqBdcqzList, invalidCertificate, getSzRecordList } from "@/api/bdcqz.js"; 73 import { getSlsqBdcqzList, invalidCertificate, getSzRecordList } from "@/api/bdcqz.js";
74 import bdcqzPrint from "./zsdy.vue"; 74 import bdcqzPrint from "./zsdy.vue";
75 import { popupDialog } from "@/utils/popup.js"; 75 import { popupDialog } from "@/utils/popup.js";
76 export default { 76 export default {
77 components: { bdcqzPrint }, 77 components: { bdcqzPrint },
78 props: {}, 78 props: {},
79 data () { 79 data () {
80 return { 80 return {
81 dialog: false, 81 dialog: false,
82 tableData: [], 82 tableData: [],
83 bdcqzlx: 1, 83 bdcqzlx: 1,
84 bdcqz: {}, 84 bdcqz: {},
85 zfyy: "", 85 zfyy: "",
86 invalidDiglog: false, 86 invalidDiglog: false,
87 bsmSz: "", 87 bsmSz: "",
88 }; 88 bsmBdcqz: ""
89 }, 89 };
90 created () { 90 },
91 this.list(); 91 created () {
92 }, 92 this.list();
93 methods: {
94 //初始化列表
95 list () {
96 var bsmSlsq = this.$route.query.bsmSlsq;
97 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
98 if (res.code === 200) {
99 this.tableData = res.result;
100 if (res.result) {
101 this.bdcqz = res.result[0];
102 }
103 }
104 });
105 }, 93 },
106 //打开证书预览弹窗 94 methods: {
107 openZsylDialog (item, type) { 95 //初始化列表
108 let that = this; 96 list () {
109 if (type == 1) { 97 var bsmSlsq = this.$route.query.bsmSlsq;
110 //证书预览 98 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
111 this.$popup("证书预览", "workflow/components/zsyl", { 99 if (res.code === 200) {
112 height: "630px", 100 this.tableData = res.result;
113 width: "800px", 101 if (res.result) {
114 formData: { 102 this.bdcqz = res.result[0];
115 bdcqz: item, 103 }
116 } 104 }
117 }); 105 });
118 } else { 106 },
119 this.$nextTick(() => { 107 //打开证书预览弹窗
120 this.dialog = true; 108 openZsylDialog (item, type) {
121 this.bdcqz = item; 109 let that = this;
122 this.$refs.bdcqzPrint.getBdcqzPreview(); 110 if (type == 1) {
123 }) 111 //证书预览
124 //证书打印 112 this.$popup("证书预览", "workflow/components/zsyl", {
125 // this.$popup("证书打印", "workflow/components/zsdy", { 113 height: "630px",
126 // height: "700px", 114 width: "800px",
127 // width: "800px", 115 formData: {
128 // formData: { 116 bdcqz: item,
129 // bsmSlsq: this.bsmSlsq, 117 }
130 // bdcqz: item, 118 });
131 // },
132 // btnShow: true,
133 // confirmText: "打印证书",
134 // cancel: () => {
135 // console.log("取消回调");
136 // },
137 // confirm: () => {
138 // that.list();
139 // },
140 // });
141 }
142 },
143 //再次打印
144 openInvalidDiglog (item) {
145 this.bsmSz = item.bsmSz;
146 this.invalidDiglog = true;
147 },
148 closeInvalidDiglog () {
149 this.invalidDiglog = false;
150 this.bsmSz = "";
151 this.zfyy = "";
152 },
153 //作废缮证信息
154 confirmInvalid () {
155 invalidCertificate({ bsmSz: this.bsmSz, zfyy: this.zfyy }).then((res) => {
156 if (res.code === 200) {
157 this.list();
158 this.$message.success("作废成功");
159 this.invalidDiglog = false;
160 this.openZsylDialog(this.bdcqz);
161 } else { 119 } else {
162 this.$message.error(res.message); 120 this.$nextTick(() => {
121 this.dialog = true;
122 this.bdcqz = item;
123 this.$refs.bdcqzPrint.getBdcqzPreview();
124 })
125 //证书打印
126 // this.$popup("证书打印", "workflow/components/zsdy", {
127 // height: "700px",
128 // width: "800px",
129 // formData: {
130 // bsmSlsq: this.bsmSlsq,
131 // bdcqz: item,
132 // },
133 // btnShow: true,
134 // confirmText: "打印证书",
135 // cancel: () => {
136 // console.log("取消回调");
137 // },
138 // confirm: () => {
139 // that.list();
140 // },
141 // });
163 } 142 }
164 }); 143 },
144 //再次打印
145 openInvalidDiglog (item) {
146 this.bsmSz = item.bsmSz;
147 this.invalidDiglog = true;
148 this.bsmBdcqz = item.bsmBdcqz
149 },
150 closeInvalidDiglog () {
151 this.invalidDiglog = false;
152 this.bsmSz = "";
153 this.zfyy = "";
154 },
155 //作废缮证信息
156 confirmInvalid () {
157 invalidCertificate({ bsmbdcqz: this.bsmBdcqz, zfyy: this.zfyy }).then((res) => {
158 if (res.code === 200) {
159 this.list();
160 this.$message.success("作废成功");
161 this.invalidDiglog = false;
162 this.openZsylDialog(this.bdcqz);
163 } else {
164 this.$message.error(res.message);
165 }
166 });
167 },
168 openRecordPop (item) {
169 popupDialog("缮证记录", "workflow/components/szRecord", { bsmBdcqz: item.bsmBdcqz }, '50%')
170 }
165 }, 171 },
166 openRecordPop (item) { 172 };
167 popupDialog("缮证记录", "workflow/components/szRecord", { bsmBdcqz: item.bsmBdcqz }, '50%')
168 }
169 },
170 };
171 </script> 173 </script>
172 <style scoped lang='scss'> 174 <style scoped lang='scss'>
173 @import "~@/styles/public.scss"; 175 @import "~@/styles/public.scss";
174 176
175 .szxx { 177 .szxx {
176 box-sizing: border-box; 178 box-sizing: border-box;
177 padding-right: 15px; 179 padding-right: 15px;
178 width: 100%; 180 width: 100%;
179 height: 600px; 181 height: 600px;
180 overflow-y: scroll; 182 overflow-y: scroll;
181 183
182 .box-card { 184 .box-card {
183 float: left; 185 float: left;
184 width: 300px; 186 width: 300px;
185 margin-top: 10px; 187 margin-top: 10px;
186 margin-right: 10px; 188 margin-right: 10px;
187 189
188 .szxx_body { 190 .szxx_body {
189 height: 240px; 191 height: 240px;
192 }
190 } 193 }
191 } 194 }
192 }
193 195
194 .szxx_header { 196 .szxx_header {
195 color: #ffffff; 197 color: #ffffff;
196 font-weight: bolder; 198 font-weight: bolder;
197 font-size: 16px; 199 font-size: 16px;
198 200
199 .header_type { 201 .header_type {
200 display: flex; 202 display: flex;
201 justify-content: center; 203 justify-content: center;
202 align-content: center; 204 align-content: center;
205 }
206
207 .header_text {
208 text-align: center;
209 margin-top: 10px;
210 line-height: 30px;
211 }
203 } 212 }
204 213
205 .header_text { 214 .top_line {
206 text-align: center; 215 border-top: 2px solid rgb(222, 222, 222);
207 margin-top: 10px;
208 line-height: 30px;
209 } 216 }
210 }
211 217
212 .top_line { 218 .text {
213 border-top: 2px solid rgb(222, 222, 222); 219 margin-bottom: 10px;
214 } 220 text-align: center;
221 }
215 222
216 .text { 223 .color_iray {
217 margin-bottom: 10px; 224 color: rgb(153, 153, 153);
218 text-align: center; 225 }
219 }
220 226
221 .color_iray { 227 .color_red {
222 color: rgb(153, 153, 153); 228 color: rgb(255, 89, 24);
223 } 229 }
224 230
225 .color_red { 231 .middle_margin {
226 color: rgb(255, 89, 24); 232 margin-bottom: 10px;
227 } 233 }
228 234
229 .middle_margin { 235 .operation_button {
230 margin-bottom: 10px; 236 border: 1px solid rgb(0, 121, 254);
231 } 237 padding: 5px;
238 text-align: center;
239 }
232 240
233 .operation_button { 241 .card_padding {
234 border: 1px solid rgb(0, 121, 254); 242 padding-top: 8px;
235 padding: 5px; 243 }
236 text-align: center;
237 }
238 244
239 .card_padding { 245 .invalid-diglog {
240 padding-top: 8px; 246 padding-bottom: 20px;
241 } 247 font-size: 16px;
248 font-weight: bold;
249 color: rgb(99, 99, 99);
242 250
243 .invalid-diglog { 251 .invalid-title {
244 padding-bottom: 20px; 252 display: flex;
245 font-size: 16px; 253 align-content: center;
246 font-weight: bold;
247 color: rgb(99, 99, 99);
248 254
249 .invalid-title { 255 .invalid-icon {
250 display: flex; 256 color: rgb(254, 148, 0);
251 align-content: center; 257 font-size: 34px;
258 margin-right: 10px;
259 }
252 260
253 .invalid-icon { 261 .invalid-body {
254 color: rgb(254, 148, 0); 262 line-height: 40px;
255 font-size: 34px; 263 margin-bottom: 10px;
256 margin-right: 10px; 264 }
257 } 265 }
258 266
259 .invalid-body { 267 .invalid-reson {
260 line-height: 40px;
261 margin-bottom: 10px; 268 margin-bottom: 10px;
262 } 269 }
263 }
264 270
265 .invalid-reson { 271 .dialog-footer {
266 margin-bottom: 10px; 272 margin-top: 10px;
273 display: flex;
274 justify-content: flex-end;
275 }
267 } 276 }
268 277
269 .dialog-footer { 278 /deep/.el-card__header {
270 margin-top: 10px; 279 background-color: rgb(198, 67, 83);
271 display: flex;
272 justify-content: flex-end;
273 } 280 }
274 }
275 281
276 /deep/.el-card__header {
277 background-color: rgb(198, 67, 83);
278 }
279
280 /deep/.el-card__body {
281 padding: 0px;
282 }
283 </style>
...\ No newline at end of file ...\ No newline at end of file
282 /deep/.el-card__body {
283 padding: 0px;
284 }
285 </style>
......
1 <template> 1 <template>
2 <dialogBox title="不动产权证领取" width="85%" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="value" > 2 <dialogBox title="不动产权证领取" width="85%" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="value">
3 <div class="zslq"> 3 <div class="zslq">
4 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> 4 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
5 <el-row> 5 <el-row>
6 <el-col :span="8"> 6 <el-col :span="8">
7 <el-form-item label="发证人姓名"> 7 <el-form-item label="发证人姓名">
8 <el-input v-model="ruleForm.fzrxm" disabled></el-input> 8 <el-input v-model="ruleForm.fzrmc" disabled></el-input>
9 </el-form-item> 9 </el-form-item>
10 </el-col> 10 </el-col>
11 <el-col :span="8"> 11 <el-col :span="8">
12 <el-form-item label="发证时间"> 12 <el-form-item label="发证时间">
13 <el-input v-model="ruleForm.fzrxm" disabled></el-input> 13 <el-input v-model="ruleForm.fzsj" disabled></el-input>
14 </el-form-item> 14 </el-form-item>
15 </el-col> 15 </el-col>
16 <el-col :span="8"> 16 <el-col :span="8">
17 <el-form-item label="发证数量"> 17 <el-form-item label="发证数量">
18 <el-input v-model="ruleForm.fzsl" disabled></el-input> 18 <el-input v-model="ruleForm.fzsl" disabled></el-input>
19 </el-form-item> 19 </el-form-item>
20 </el-col> 20 </el-col>
21 </el-row> 21 </el-row>
22 22
23 <lb-table border :column="tableData.columns" :data="tableData.data" :pagination="false" :heightNum="600"> 23 <lb-table border :column="tableData.columns" :data="tableData.data" :pagination="false" :heightNum="600">
24 </lb-table> 24 </lb-table>
25 <el-row> 25 <el-row>
26 <el-col :span="6"> 26 <el-col :span="6">
27 <el-form-item label="领证人" prop="lzrxm"> 27 <el-form-item label="领证人" prop="lzrxm">
28 <el-input v-model="ruleForm.lzrxm"></el-input> 28 <el-input v-model="ruleForm.lzrxm"></el-input>
29 </el-form-item> 29 </el-form-item>
30 </el-col> 30 </el-col>
31 <el-col :span="6"> 31 <el-col :span="6">
32 <el-form-item label="证件类型" prop="lzrzjlb"> 32 <el-form-item label="证件类型" prop="lzrzjlb">
33 <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择"> 33 <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
34 <el-option v-for="item in zjzlData" :key="item.dcode" :label="item.dname" :value="item.dcode"> 34 <el-option v-for="item in zjzlData" :key="item.dcode" :label="item.dname" :value="item.dcode">
35 </el-option> 35 </el-option>
36 </el-select> 36 </el-select>
37 </el-form-item> 37 </el-form-item>
38 </el-col> 38 </el-col>
39 <el-col :span="6"> 39 <el-col :span="6">
40 <el-form-item label="证件号" prop="lzrzjh"> 40 <el-form-item label="证件号" prop="lzrzjh">
41 <el-input v-model="ruleForm.lzrzjh"></el-input> 41 <el-input v-model="ruleForm.lzrzjh"></el-input>
42 </el-form-item> 42 </el-form-item>
43 </el-col> 43 </el-col>
44 <el-col :span="6"> 44 <el-col :span="6">
45 <el-form-item label="领证人电话" prop="lzrdh"> 45 <el-form-item label="领证人电话" prop="lzrdh">
46 <el-input v-model="ruleForm.lzrdh"></el-input> 46 <el-input v-model="ruleForm.lzrdh"></el-input>
47 </el-form-item> 47 </el-form-item>
48 </el-col> 48 </el-col>
49 </el-row> 49 </el-row>
50 </el-form> 50 </el-form>
51 </div> 51 </div>
52 </dialogBox> 52 </dialogBox>
53 </template> 53 </template>
54 54
55 <script> 55 <script>
56 import store from '@/store/index.js' 56 import store from '@/store/index.js'
57 import table from "@/utils/mixin/table"; 57 import table from "@/utils/mixin/table";
58 import { getUnclaimedBdcqz, issueCertificate } from "@/api/bdcqz.js"; 58 import { getUnclaimedBdcqz, issueCertificate } from "@/api/bdcqz.js";
59 import { datas } from "../javascript/fzxxdata"; 59 import { datas } from "../javascript/fzxxdata";
60 export default { 60 export default {
61 props: { 61 props: {
62 value: { type: Boolean, default: true } 62 value: { type: Boolean, default: true }
63 },
64 mixins: [table],
65 data () {
66 return {
67 zjzlData: store.getters.dictData['A30'],
68 ruleForm: {
69 fzrxm: '',
70 fzsj: '',
71 fzsl: '',
72 bdcqzList: [],
73 lzrxm: '',
74 lzrzjlb: '',
75 lzrzjh: '',
76 lzrdh: ''
77 },
78 rules: {
79 lzrxm: [
80 { required: true, message: '请输入领证人', trigger: 'blur' }
81 ],
82 lzrzjlb: [
83 { required: true, message: '请选择证件类型', trigger: 'change' }
84 ],
85 lzrzjh: [
86 { required: true, message: '请输入证件号', trigger: 'blur' }
87 ],
88 lzrdh: [
89 { required: true, message: '请输入电话号码', trigger: 'blur' }
90 ],
91 },
92 tableData: {
93 total: 0,
94 columns: datas.columns().lzgrid,
95 data: [],
96 },
97 }
98 },
99 watch: {
100 value (val) {
101 if (val) {
102 this.loadGrid();
103 }
104 }, 63 },
105 }, 64 mixins: [table],
106 methods: { 65 data () {
107 //列表初始化 66 return {
108 loadGrid () { 67 zjzlData: store.getters.dictData['A30'],
109 getUnclaimedBdcqz({ bsmSlsq: this.$route.query.bsmSlsq }).then(res => { 68 ruleForm: {
110 if (res.code === 200) { 69 fzrmc: '',
111 this.tableData.data = res.result; 70 fzsj: '',
112 this.ruleForm.bdcqzList = res.result; 71 fzsl: '',
113 } 72 bdcqzList: [],
114 }) 73 lzrxm: '',
74 lzrzjlb: '',
75 lzrzjh: '',
76 lzrdh: ''
77 },
78 rules: {
79 lzrxm: [
80 { required: true, message: '请输入领证人', trigger: 'blur' }
81 ],
82 lzrzjlb: [
83 { required: true, message: '请选择证件类型', trigger: 'change' }
84 ],
85 lzrzjh: [
86 { required: true, message: '请输入证件号', trigger: 'blur' }
87 ],
88 lzrdh: [
89 { required: true, message: '请输入电话号码', trigger: 'blur' }
90 ],
91 },
92 tableData: {
93 total: 0,
94 columns: datas.columns().lzgrid,
95 data: [],
96 },
97 }
115 }, 98 },
116 handleSubmit () { 99 watch: {
117 this.$refs.ruleForm.validate(valid => { 100 value (val) {
118 if (valid) { 101 if (val) {
119 issueCertificate(this.ruleForm).then(res => { 102 this.loadGrid();
120 if (res.code == 200) {
121 this.$message.success('保存成功');
122 this.$parent.queryClick();
123 this.$emit("input", false);
124 } else {
125 this.$message.error(res.message)
126 }
127 })
128 } else {
129 this.$message.error("请填写领取人信息！")
130 return false;
131 } 103 }
132 }); 104 },
133 },
134 closeDialog () {
135 this.$emit("input", false);
136 }, 105 },
106 methods: {
107 //列表初始化
108 loadGrid () {
109 getUnclaimedBdcqz({ bsmSlsq: this.$route.query.bsmSlsq }).then(res => {
110 if (res.code === 200) {
111 this.tableData.data = res.result.list;
112 this.ruleForm.fzrmc = res.result.fzrmc
113 this.ruleForm.fzsj = res.result.fzsj
114 this.ruleForm.fzsl = res.result.fzsl
115
116 }
117 })
118 },
119 handleSubmit () {
120 this.$refs.ruleForm.validate(valid => {
121 if (valid) {
122 issueCertificate(this.ruleForm).then(res => {
123 if (res.code == 200) {
124 this.$message.success('保存成功');
125 this.$parent.queryClick();
126 this.$emit("input", false);
127 } else {
128 this.$message.error(res.message)
129 }
130 })
131 } else {
132 this.$message.error("请填写领取人信息！")
133 return false;
134 }
135 });
136 },
137 closeDialog () {
138 this.$emit("input", false);
139 },
140 }
137 } 141 }
138 }
139 </script> 142 </script>
140 <style scoped lang="scss"> 143 <style scoped lang="scss">
141 @import "~@/styles/mixin.scss"; 144 @import "~@/styles/mixin.scss";
142 </style> 145 </style>
......