Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
5091d01f by 田浩浩
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents eabb9c85 e4e913ac
Expand all
Inline Side-by-side
Showing 13 changed files with 898 additions and 129 deletions
...@@ -78,3 +78,21 @@ export function clmlDelete (params) { ...@@ -78,3 +78,21 @@ export function clmlDelete (params) {
78 params: params 78 params: params
79 }) 79 })
80 } 80 }
81
82 // 获取下一环节信息
83 export function getNextLinkInfo (params) {
84 return request({
85 url: '/business/workFlow/getNextLinkInfo',
86 method: 'get',
87 params: params
88 })
89 }
90
91 // 环节扩展信息
92 export function stepExpandInfo (data) {
93 return request({
94 url: '/business/workFlow/stepExpandInfo',
95 method: 'post',
96 data
97 })
98 }
......
...@@ -12,14 +12,14 @@ ...@@ -12,14 +12,14 @@
12 <div :class="['lb-table', customClass]"> 12 <div :class="['lb-table', customClass]">
13 <el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border' 13 <el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border'
14 :row-class-name="tableRowClassName" :show-header='showHeader' 14 :row-class-name="tableRowClassName" :show-header='showHeader'
15 :header-cell-style="{ background: 'rgb(217, 236, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners" 15 :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
16 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod"> 16 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
17 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item"> 17 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
18 </lb-column> 18 </lb-column>
19 </el-table> 19 </el-table>
20 20
21 <el-table v-else ref="elTable" class="table-fixed" :border='border' :row-class-name="tableRowClassName" 21 <el-table v-else ref="elTable" class="table-fixed" :border='border' :row-class-name="tableRowClassName"
22 :show-header='showHeader' :header-cell-style="{ background: 'rgb(217, 236, 255)' }" v-bind="$attrs" 22 :show-header='showHeader' :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs"
23 :max-height="maxHeight" v-on="$listeners" :data="data" style="width: 100%" 23 :max-height="maxHeight" v-on="$listeners" :data="data" style="width: 100%"
24 :span-method="this.merge ? this.mergeMethod : this.spanMethod"> 24 :span-method="this.merge ? this.mergeMethod : this.spanMethod">
25 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item"> 25 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
......
1 <template>
2 <div style="width: 100%;height: 100%">
3 <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType"
4 :overlayStyle="overlayStyle">
5 </vue-photo-zoom-pro>
6 </div>
7 </template>
8
9 <script>
10 import vuePhotoZoomPro from '@/components/photo-zoom/vue-photo-zoom-pro'
11 export default {
12 name: 'PicZoom',
13 components: { vuePhotoZoomPro },
14 data() {
15 return {
16 type: "square",
17 showType: false,
18 }
19 },
20 props: {
21 url: {
22 type: String,
23 required: true,
24 // default: require('@/assets/vehicle_img/blank_vehicle.jpg')
25 },
26 bigWidth: {
27 type: Number,
28 required: true,
29 default: 168
30 },
31 scale: {
32 type: Number,
33 required: true,
34 default: 2
35 },
36 overlayStyle: {
37 type: String,
38 default: 'width:100%;height:100%'
39 }
40 },
41 }
42 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="pic-img">
3 <div class="img-container">
4 <img ref="img" @load="imgLoaded" :src="url" :style="overlayStyle" @error="imgerrorfun" />
5 <div class="overlay" @mousemove.stop="!moveEvent && mouseMove($event)"
6 @mouseout.stop="!leaveEvent && mouseLeave($event)" :style="overlayStyle">
7 </div>
8 <div v-if="!hideZoom && imgLoadedFlag &&!hideSelector" :class="['img-selector', {'circle': type === 'circle'}]"
9 :style="[imgSelectorStyle, imgSelectorSize, imgSelectorPosition, !outShow && imgBg, !outShow && imgBgSize, !outShow && imgBgPosition]">
10 <slot></slot>
11 </div>
12 <div v-if="outShow" v-show="!hideOutShow" :class="['img-out-show', {'base-line': baseline}]"
13 :style="[imgOutShowSize, imgOutShowPosition, imgBg, imgBgSize, imgBgPosition]">
14 <div v-if="pointer" class="img-selector-point"></div>
15 </div>
16 </div>
17 </div>
18
19 </template>
20
21 <script>
22 export default {
23 name: "vue-photo-zoom-pro",
24 props: {
25 url: {
26 type: String,
27 },
28 highUrl: String,
29 width: {
30 type: Number,
31 default: 168
32 },
33 type: {
34 type: String,
35 default: "square",
36 validator: function (value) {
37 return ["circle", "square"].indexOf(value) !== -1;
38 }
39 },
40 selectorStyle: {
41 type: Object,
42 default () {
43 return {};
44 }
45 },
46 outShowStyle: {},
47 scale: {
48 type: Number,
49 default: 3
50 },
51 moveEvent: {
52 type: [Object, MouseEvent],
53 default: null
54 },
55 leaveEvent: {
56 type: [Object, MouseEvent],
57 default: null
58 },
59 hideZoom: {
60 type: Boolean,
61 default: false
62 },
63 outShow: {
64 type: Boolean,
65 default: false
66 },
67 pointer: {
68 type: Boolean,
69 default: false
70 },
71 baseline: {
72 type: Boolean,
73 default: false
74 },
75 overlayStyle: {
76 type: String,
77 default: 'width:100%;height:100%'
78 },
79 },
80 data () {
81 return {
82 selector: {
83 width: this.width,
84 top: 0,
85 left: 0,
86 bgTop: 0,
87 bgLeft: 0,
88 rightBound: 0,
89 bottomBound: 0,
90 absoluteLeft: 0,
91 absoluteTop: 0
92 },
93 imgInfo: {},
94 $img: null,
95 screenWidth: document.body.clientWidth,
96 outShowInitTop: 0,
97 outShowTop: 0,
98 hideOutShow: true,
99 imgLoadedFlag: false,
100 hideSelector: false,
101 timer: null
102 };
103 },
104 watch: {
105 moveEvent (e) {
106 this.mouseMove(e);
107 },
108 leaveEvent (e) {
109 this.mouseLeave(e);
110 },
111 url (n) {
112 this.imgLoadedFlag = false;
113 },
114 width (n) {
115 this.initSelectorProperty(n);
116 },
117 screenWidth (val) {
118 if (!this.timer) {
119 this.screenWidth = val;
120 this.timer = setTimeout(() => {
121 this.imgLoaded();
122 clearTimeout(this.timer);
123 this.timer = null;
124 }, 400);
125 }
126 }
127 },
128 computed: {
129 addWidth () {
130 return !this.outShow ? (this.width / 2) * (1 - this.scale) : 0;
131 },
132 imgSelectorPosition () {
133 let { top, left } = this.selector;
134 return {
135 top: `${top}px`,
136 left: `${left}px`
137 };
138 },
139 imgSelectorSize () {
140 let width = this.selector.width;
141 return {
142 width: `${width}px`,
143 height: `${width}px`,
144 borderRadius: '50%'
145 };
146 },
147 imgSelectorStyle () {
148 return this.selectorStyle;
149 },
150 imgOutShowSize () {
151 let {
152 scale,
153 selector: { width }
154 } = this;
155 return {
156 width: `${width * scale}px`,
157 height: `${width * scale}px`
158 };
159 },
160 imgOutShowPosition () {
161 return {
162 top: `${this.outShowTop}px`,
163 right: `${-8}px`
164 };
165 },
166 imgBg () {
167 return {
168 backgroundImage: `url(${this.highUrl || this.url})`
169 };
170 },
171 imgBgSize () {
172 let {
173 scale,
174 imgInfo: { height, width }
175 } = this;
176 return {
177 backgroundSize: `${width * scale}px ${height * scale}px`
178 };
179 },
180 imgBgPosition () {
181 let { bgLeft, bgTop } = this.selector;
182 return {
183 backgroundPosition: `${bgLeft}px ${bgTop}px`
184 };
185 },
186 },
187 mounted () {
188 this.$img = this.$refs["img"];
189 },
190 methods: {
191 imgLoaded () {
192 let imgInfo = this.$img.getBoundingClientRect();
193 if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
194 this.imgInfo = imgInfo;
195 this.initSelectorProperty(this.width);
196 this.resetOutShowInitPosition();
197 }
198 if (!this.imgLoadedFlag) {
199 this.imgLoadedFlag = true;
200 this.$emit("created", imgInfo);
201 }
202 },
203 mouseMove (e) {
204 if (!this.hideZoom && this.imgLoadedFlag) {
205 this.imgLoaded();
206 const { pageX, pageY, clientY } = e;
207 const { scale, selector, outShow, addWidth, outShowAutoScroll } = this;
208 let { outShowInitTop } = this;
209 const scrollTop = pageY - clientY;
210 const { absoluteLeft, absoluteTop, rightBound, bottomBound } = selector;
211 const x = pageX - absoluteLeft; // 选择器的x坐标 相对于图片
212 const y = pageY - absoluteTop; // 选择器的y坐标
213 if (outShow) {
214 if (!outShowInitTop) {
215 outShowInitTop = this.outShowInitTop = scrollTop + this.imgInfo.top;
216 }
217 this.hideOutShow && (this.hideOutShow = false);
218 this.outShowTop =
219 scrollTop > outShowInitTop ? scrollTop - outShowInitTop : 0;
220 }
221 this.hideSelector && (this.hideSelector = false);
222 selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0;
223 selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0;
224 selector.bgLeft = addWidth - x * scale; // 选择器图片的坐标位置
225 selector.bgTop = addWidth - y * scale;
226 }
227 },
228 initSelectorProperty (selectorWidth) {
229 const selectorHalfWidth = selectorWidth / 2;
230 const selector = this.selector;
231 const { width, height, left, top } = this.imgInfo;
232 const { scrollLeft, scrollTop } = document.documentElement;
233 selector.width = selectorWidth;
234 selector.rightBound = width - selectorWidth;
235 selector.bottomBound = height - selectorWidth;
236 selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
237 selector.absoluteTop = top + selectorHalfWidth + scrollTop;
238 },
239 mouseLeave () {
240 this.hideSelector = true;
241 if (this.outShow) {
242 this.hideOutShow = true;
243 }
244 },
245 reset () {
246 Object.assign(this.selector, {
247 top: 0,
248 left: 0,
249 bgLeft: 0,
250 bgTop: 0
251 });
252 this.resetOutShowInitPosition();
253 },
254 resetOutShowInitPosition () {
255 this.outShowInitTop = 0;
256 },
257 imgerrorfun (e) {
258 // let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
259 // this.url = img
260 // e.target.src = img
261 // e.target.onerror= null
262 }
263 }
264 };
265 </script>
266
267 <style scoped>
268 .img-container {
269 position: relative;
270 max-width: 82%;
271 margin: 0 auto;
272 }
273 .overlay {
274 cursor: crosshair;
275 position: absolute;
276 top: 0;
277 left: 0;
278 opacity: 0.5;
279 z-index: 3;
280 }
281 .img-selector {
282 position: absolute;
283 cursor: crosshair;
284 border: 1px solid rgba(0, 0, 0, 0.1);
285 background-repeat: no-repeat;
286 background-color: rgba(64, 64, 64, 0.6);
287 }
288 .img-selector.circle {
289 border-radius: 50%;
290 }
291 .img-out-show {
292 z-index: 5000;
293 position: absolute;
294 background-repeat: no-repeat;
295 -webkit-background-size: cover;
296 background-color: white;
297 transform: translate(100%, 0);
298 }
299 .img-selector-point {
300 position: absolute;
301 width: 4px;
302 height: 4px;
303 top: 50%;
304 left: 50%;
305 transform: translate(-50%, -50%);
306 background-color: black;
307 }
308 .img-out-show.base-line::after {
309 position: absolute;
310 box-sizing: border-box;
311 content: "";
312 width: 1px;
313 top: 0;
314 bottom: 0;
315 left: 50%;
316 transform: translateX(-50%);
317 }
318 .img-out-show.base-line::before {
319 position: absolute;
320 box-sizing: border-box;
321 content: "";
322 height: 1px;
323 border: 1px dashed rgba(0, 0, 0, 0.36);
324 left: 0;
325 right: 0;
326 top: 50%;
327 transform: translateY(-50%);
328 }
329 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <el-image-viewer
3 :on-close="closeViewer"
4 :url-list="urlList">
5 </el-image-viewer>
6 </template>
7
8 <script>
9 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
10 export default {
11 components: {
12 ElImageViewer,
13 },
14 props: {
15 urlList: {
16 type: Array,
17 default: function () {
18 return []
19 },
20 },
21 },
22 data () {
23 return {
24 wrapperElem: null,
25 }
26 },
27 mounted () {
28 this.$nextTick(() => {
29 let wrapper = document.getElementsByClassName(
30 'el-image-viewer__actions__inner'
31 )
32 let downImg = document.createElement('i')
33 downImg.setAttribute('class', 'el-icon-download')
34 wrapper[0].appendChild(downImg)
35 if (wrapper.length > 0) {
36 this.wrapperElem = wrapper[0]
37 this.wrapperElem.addEventListener('click', this.hideCusBtn)
38 }
39 })
40 },
41 methods: {
42 closeViewer () {
43 this.$emit('close-viewer')
44 },
45 hideCusBtn (e) {
46 let className = e.target.className
47 if (className === 'el-icon-download') {
48 let imgUrl = document.getElementsByClassName(
49 'el-image-viewer__canvas'
50 )[0].children[0].src
51 this.downloadImage(imgUrl)
52 }
53 },
54 downloadImage (imgUrl) {
55 let tmpArr = imgUrl.split('/')
56 let fileName = tmpArr[tmpArr.length - 1]
57 window.URL = window.URL || window.webkitURL
58 let xhr = new XMLHttpRequest()
59 xhr.open('get', imgUrl, true)
60 xhr.responseType = 'blob'
61 xhr.onload = function () {
62 if (this.status == 200) {
63 //得到一个blob对象
64 let blob = this.response
65 let fileUrl = window.URL.createObjectURL(blob)
66 let a = document.createElement('a')
67 ; (document.body || document.documentElement).appendChild(a)
68 a.href = fileUrl
69 if ('download' in a) {
70 a.download = fileName
71 } else {
72 a.setAttribute('download', fileName)
73 }
74 a.target = '_self'
75 a.click()
76 a.remove()
77 }
78 }
79 xhr.send()
80 },
81 },
82 }
83 </script>
84
85 <style lang="scss" scoped>
86 /deep/ .el-image-viewer__close {
87 color: #ffffff;
88 }
89 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663579235470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z" p-id="2392" fill="#ffffff"></path><path d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z" p-id="2393" fill="#ffffff"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="rlPopup">
3 <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
4 <i class="el-icon-arrow-left"></i>
5 </div>
6 <div class="next handle-btn" v-if="!isSingle" @click="next()">
7 <i class="el-icon-arrow-right"></i>
8 </div>
9 <div class="img-list-wrap">
10 <div v-for="(img, i) in previewImg.imgList" :key="i">
11 <photo-zoom :url="img.url" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
12 overlayStyle="width: 100%;height: 563px;">
13 </photo-zoom>
14 </div>
15 </div>
16 <!--缩略图-->
17 <div class="thumb-wrap">
18 <div class="thumb-wrap-button">
19 <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
20 <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :limit="5" :auto-upload="false"
21 :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
22 <el-button icon="el-icon-upload" type="primary">上传</el-button>
23 </el-upload>
24 <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
25 </div>
26 <ul>
27 <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active:previewImg.index === index}"
28 @click="showCurrent(index)">
29 <img :src="img.url">
30 </li>
31 </ul>
32 </div>
33 <!-- 点开后的视图 -->
34 <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
35 </publicPicture>
36 </div>
37 </template>
38 <script>
39 import PhotoZoom from '@/components/photo-zoom'
40 import publicPicture from '@/components/publicPicture/index.vue'
41 export default {
42 name: 'PreviewImage',
43 props: {
44 previewImg: {
45 type: Object,
46 default: () => { }
47 }
48 },
49 components: {
50 PhotoZoom,
51 publicPicture
52 },
53 data () {
54 return {
55 transform: {
56 scale: 1,
57 degree: 0
58 },
59 // 缩略图
60 thumbnailImages: this.previewImg.imgList,
61 showViewer: false,
62 initialIndex: undefined,
63 allLi: [],
64 }
65 },
66 watch: {
67 previewImg: {
68 handler (newValue, oldValue) {
69 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.url)
70 },
71 deep: true
72 }
73 },
74 computed: {
75 isSingle () {
76 return this.previewImg.imgList.length <= 1
77 },
78 isFirst () {
79 return this.previewImg.index === 0
80 },
81 isLast () {
82 return this.previewImg.index === this.previewImg.imgList.length - 1
83 }
84 },
85 methods: {
86 prev () {
87 if (this.isFirst) {
88 if (this.previewImg.selectedIndex - 1 >= 0) {
89 this.$parent.previewImg.index = 1
90 }
91 return
92 }
93 const len = this.previewImg.imgList.length
94 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
95 this.reset()
96 },
97 next () {
98 if (this.isLast) {
99 if (this.previewImg.selectedIndex + 1 < this.previewImg.attachmentList.length) {
100 this.$parent.previewImg.index = 0
101 }
102 return
103 }
104 const len = this.previewImg.imgList.length
105 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
106 this.reset()
107 },
108 reset () {
109 this.transform = {
110 scale: 1,
111 degree: 0
112 }
113 },
114 showCurrent (index) {
115 this.previewImg.index = index
116 },
117 closeViewer () {
118 this.showViewer = false
119 },
120 clickImage () {
121 this.showViewer = true
122 },
123 // 上传
124 beforeUpload (file) {
125 const isJPEG = file.type === 'image/jpeg'
126 const isPNG = file.type === 'image/png'
127 const isJPG = file.type === 'image/jpg'
128 const isGIF = file.type === 'image/gif'
129 const isLt5M = file.size / 1024 / 1024 < 5
130 if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
131 this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
132 this.loading = false
133 }
134 if (!isLt5M) {
135 this.$message.error('上传图片大小不能超过 5MB!')
136 this.loading = false
137 }
138 this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
139 return this.imgHidden
140 },
141 async handleChange (file) {
142 let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
143 },
144 handleDelete () {
145 let _this = this
146 this.$confirm('此操作将永久该附件, 是否继续?', '提示', {
147 confirmButtonText: '确定',
148 cancelButtonText: '取消',
149 type: 'warning'
150 }).then(async () => {
151 let bsmFileList = []
152 bsmFileList[0] = this.previewImg.imgList[this.previewImg.index].bsmFile
153 }).catch(() => {
154 this.$message({
155 type: 'info',
156 message: '已取消删除'
157 });
158 });
159 }
160 }
161 }
162 </script>
163
164 <style lang="scss" scoped>
165 // 查看大图
166 .rlPopup {
167 position: relative;
168 width: 100%;
169 text-align: center;
170 height: 100%;
171
172 .handle-btn {
173 position: absolute;
174 top: 50%;
175 transform: translateY(-100%);
176 width: 66px;
177 height: 66px;
178 line-height: 75px;
179 color: #fff;
180 background-color: rgb(198, 198, 198);
181 border-radius: 4px;
182 cursor: pointer;
183 text-align: center;
184
185 i {
186 font-size: 24px;
187 }
188 }
189
190 .prev {
191 left: 0%;
192 }
193
194 .next {
195 right: 0%;
196 }
197
198 .img-list-wrap {
199 width: 100%;
200 display: flex;
201 justify-content: center;
202 height: calc(100% - 80px);
203 align-items: center;
204 background: rgba(194, 190, 190, 0.1);
205
206 img {
207 display: block;
208 object-fit: scale-down;
209 transition: all 0.3s;
210 max-width: 100%;
211 }
212 }
213
214 .thumb-wrap {
215 &-button {
216 display: flex;
217 justify-content: center;
218
219 .fileUpdate {
220 margin: 0 10px;
221 }
222 }
223
224 li {
225 float: left;
226 width: 60px;
227 height: 45px;
228 border: solid 1px #ececec;
229 position: relative;
230 margin-right: 5px;
231 cursor: pointer;
232
233 &:last-child {
234 margin-right: 0;
235 }
236
237 img {
238 max-width: 57px;
239 max-height: 42px;
240 display: block;
241 object-fit: scale-down;
242 position: absolute;
243 top: 50%;
244 left: 50%;
245 transform: translate(-50%, -50%);
246 }
247 }
248
249 .active {
250 border-color: #409eff;
251 }
252 }
253 }
254 </style>
255 <style>
256 .zoom-on-hover {
257 position: relative;
258 overflow: hidden;
259 }
260
261 .zoom-on-hover .normal {
262 width: 100%;
263 }
264
265 .zoom-on-hover .zoom {
266 position: absolute;
267 opacity: 0;
268 transform-origin: top left;
269 }
270
271 .zoom-on-hover.zoomed .zoom {
272 opacity: 1;
273 }
274
275 .zoom-on-hover.zoomed .normal {
276 opacity: 0;
277 }
278 </style>
...@@ -44,10 +44,8 @@ ...@@ -44,10 +44,8 @@
44 </el-row> 44 </el-row>
45 </el-form> 45 </el-form>
46 </div> 46 </div>
47 <!-- 表格 -->
48 <!-- 表格 -->
49 <div class="from-clues-content"> 47 <div class="from-clues-content">
50 <lb-table :page-size="pageData.size" :current-page.sync="pageData.currentPage" :total="tableData.total" 48 <lb-table :page-size="pageData.size" border :current-page.sync="pageData.currentPage" :total="tableData.total"
51 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns" 49 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
52 :data="tableData.data"> 50 :data="tableData.data">
53 </lb-table> 51 </lb-table>
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <lb-table :column="InformationTable" border :key="key" :heightNum="390" :pagination="false" heightNumSetting 3 <lb-table :column="InformationTable" :maxHeight="300" heightNumSetting :pagination="false" :data="tableData">
4 :data="tableData">
5 </lb-table> 4 </lb-table>
6 </div> 5 </div>
7 </template> 6 </template>
8 <script> 7 <script>
8 import { mapGetters } from 'vuex'
9 export default { 9 export default {
10 /**注册组件*/ 10 computed: {
11 components: {}, 11 ...mapGetters(["dictData"]),
12 },
13 props: {
14 tableData: {
15 type: Array,
16 default: []
17 }
18 },
12 data () { 19 data () {
13 return { 20 return {
14 key: 0, 21 InformationTable: [
15 tableData:[{
16 xm: '12',
17 zjzl: '32',
18 zjh: '123',
19 fr: "213123",
20 }],
21 InformationTable:[
22 { 22 {
23 width: '60', 23 width: '60',
24 renderHeader: (h, scope) => { 24 renderHeader: (h, scope) => {
...@@ -34,36 +34,58 @@ export default { ...@@ -34,36 +34,58 @@ export default {
34 label: '身份证读卡器', 34 label: '身份证读卡器',
35 align: 'center', 35 align: 'center',
36 render: (h, scope) => { 36 render: (h, scope) => {
37 return <el-button type="text" icon="el-icon-delete" onClick={() => { this.readClick(scope) }}>读取</el-button> 37 return <el-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
38 } 38 }
39 }, 39 },
40 { 40 {
41 prop: "xm", 41 prop: "sqrmc",
42 label: "姓名/名称", 42 label: "姓名/名称",
43 render: (h, scope) => {
44 return (
45 <el-input placeholder="姓名/名称" value={scope.row[scope.column.property]}
46 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
47 )
48 }
43 }, 49 },
44 { 50 {
45 prop: "zjzl", 51 prop: "dlrzjlx",
46 label: "证件种类", 52 label: "证件种类",
53 render: (h, scope) => {
54 return (
55 <el-select value={scope.row[scope.column.property]}>
56 {
57 this.dictData && this.dictData['A30'].map(option => {
58 return (
59 <el-option label={option.dname} value={option.dcode}></el-option>
60 )
61 })
62 }
63 </el-select>
64 )
65 }
47 }, 66 },
48 { 67 {
49 prop: "zjh", 68 prop: "dlrzjh",
50 label: "证件号", 69 label: "证件号",
70 render: (h, scope) => {
71 return (
72 <el-input placeholder="证件号" value={scope.row[scope.column.property]}
73 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
74 )
75 }
51 }, 76 },
52 { 77 {
53 prop: "fr", 78 prop: "fr",
54 label: "法人", 79 label: "法人",
55 },
56 {
57 label: '操作',
58 width: '80',
59 align: 'center',
60 fixed: 'right',
61 render: (h, scope) => { 80 render: (h, scope) => {
62 return <el-button type="text" icon="el-icon-delete" onClick={() => { vm.editClick(scope) }}>修改</el-button> 81 return (
82 <el-input placeholder="法人" value={scope.row[scope.column.property]}
83 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
84 )
63 } 85 }
64 } 86 }
65 ] 87 ]
66 }; 88 }
67 }, 89 },
68 watch: { 90 watch: {
69 tableData: { 91 tableData: {
...@@ -73,16 +95,15 @@ export default { ...@@ -73,16 +95,15 @@ export default {
73 deep: true 95 deep: true
74 } 96 }
75 }, 97 },
76 created(){}, 98 methods: {
77 methods:{
78 // 添加 99 // 添加
79 handleAdd () { 100 handleAdd () {
80 this.tableData.push( 101 this.tableData.push(
81 { 102 {
82 xm: '22', 103 sqrmc: '',
83 zjzl: '33', 104 dlrzjlx: '',
84 zjh: '44', 105 dlrzjh: '',
85 fr: "55", 106 fr: ''
86 } 107 }
87 ) 108 )
88 this.key++ 109 this.key++
...@@ -92,12 +113,13 @@ export default { ...@@ -92,12 +113,13 @@ export default {
92 this.tableData.splice(index, 1) 113 this.tableData.splice(index, 1)
93 }, 114 },
94 // 身份证读取 115 // 身份证读取
95 readClick(){}, 116 readClick () { },
96 117
97 // 修改 118 // 修改
98 editClick(){}, 119 editClick () { },
99 } 120 }
100 } 121 }
101 </script> 122 </script>
102 <style scoped lang='scss'> 123 <style scoped lang='scss'>
124
103 </style> 125 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
6 <div class="from-clues-header"> 6 <div class="from-clues-header">
7 <el-form :model="queryForm" ref="queryForm" label-width="120px"> 7 <el-form :model="queryForm" ref="queryForm" label-width="120px">
8 <el-form-item label="下一环节名称:"> 8 <el-form-item label="下一环节名称:">
9 代码审查 9 {{this.tableData.taskName}}
10 </el-form-item> 10 </el-form-item>
11 <el-form-item label="下一环节办理人:"> 11 <el-form-item label="下一环节办理人:">
12 赵小千 12 {{this.usernames}}
13 </el-form-item> 13 </el-form-item>
14 14
15 </el-form> 15 </el-form>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </template> 19 </template>
20 20
21 <script> 21 <script>
22 import { completeTask } from "@/api/fqsq.js" 22 import { completeTask ,getNextLinkInfo} from "@/api/fqsq.js"
23 export default { 23 export default {
24 components: { 24 components: {
25 }, 25 },
...@@ -29,9 +29,21 @@ export default { ...@@ -29,9 +29,21 @@ export default {
29 }, 29 },
30 data () { 30 data () {
31 return { 31 return {
32 tableData: {},
33 usernames: '',
32 } 34 }
33 }, 35 },
34 methods: { 36 methods: {
37 tablelistFn(){
38 getNextLinkInfo(this.queryForm).then(res => {
39 if (res.code === 200) {
40 this.tableData = res.result
41 if(res.result.usernames){
42 this.usernames = String(res.result.usernames)
43 }
44 }
45 })
46 },
35 submitForm () { 47 submitForm () {
36 completeTask(this.queryForm).then(res => { 48 completeTask(this.queryForm).then(res => {
37 console.log(res) 49 console.log(res)
......
...@@ -2,14 +2,13 @@ ...@@ -2,14 +2,13 @@
2 <div class='fqsq'> 2 <div class='fqsq'>
3 <div class="fqsq-header"> 3 <div class="fqsq-header">
4 <ul> 4 <ul>
5 <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)" 5 <li @click="operation(index, item)" v-for="(item, index) in headerleftList" :key="index">
6 :key="index">
7 <svg-icon :icon-class="item.icon" /> 6 <svg-icon :icon-class="item.icon" />
8 <span class="iconName">{{ item.name }}</span> 7 <span class="iconName">{{ item.name }}</span>
9 </li> 8 </li>
10 </ul> 9 </ul>
11 <ul> 10 <ul>
12 <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(-4)" :key="index"> 11 <li @click="operation(index, item)" v-for="(item, index) in headerRightList" :key="index">
13 <svg-icon class="icon" :icon-class="item.icon" /> 12 <svg-icon class="icon" :icon-class="item.icon" />
14 <span class="iconName">{{ item.name }}</span> 13 <span class="iconName">{{ item.name }}</span>
15 </li> 14 </li>
...@@ -28,7 +27,10 @@ ...@@ -28,7 +27,10 @@
28 <ul v-if='this.isShowdrawer'> 27 <ul v-if='this.isShowdrawer'>
29 <p class="title">受理单元列表({{unitData.length}})</p> 28 <p class="title">受理单元列表({{unitData.length}})</p>
30 <div v-for='(item,index) in unitData' :key='index'> 29 <div v-for='(item,index) in unitData' :key='index'>
31 <li @click='unitClick(item)'><p>{{item.bdcdyh}}</p><p>{{item.zl}}</p></li> 30 <li @click='unitClick(item)'>
31 <p>{{item.bdcdyh}}</p>
32 <p>{{item.zl}}</p>
33 </li>
32 <div class="xian"></div> 34 <div class="xian"></div>
33 </div> 35 </div>
34 </ul> 36 </ul>
...@@ -39,23 +41,23 @@ ...@@ -39,23 +41,23 @@
39 <div class="splitScreen"></div> 41 <div class="splitScreen"></div>
40 </div> 42 </div>
41 <el-tabs v-model="activeName" @tab-click='activeClick'> 43 <el-tabs v-model="activeName" @tab-click='activeClick'>
42 <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> 44 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
43 <div class="splitScreen-con" v-if='index == 0'> 45 <div class="splitScreen-con">
44 <component ref='slxx' :is="editItem" :flag="flag" :key="key" /> 46 <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" />
45 </div>
46 <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" /> 47 <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" />
47 <component :is="editItem" v-else :key="key" /> 48 <component :is="editItem" v-else :key="key" />
49 </div>
48 </el-tab-pane> 50 </el-tab-pane>
49 </el-tabs> 51 </el-tabs>
50 </div> 52 </div>
51 </div> 53 </div>
52 <zc v-model="zcDialog" :queryForm='queryForm' /> 54 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
53 <thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' /> 55 <thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' />
54 <zsylDialog v-model='zsylFlag' /> 56 <zsylDialog v-model='zsylFlag' />
55 </div> 57 </div>
56 </template> 58 </template>
57 <script> 59 <script>
58 import { leftMenu } from "@/api/fqsq.js" 60 import { leftMenu, stepExpandInfo } from "@/api/fqsq.js"
59 import zc from "./components/zc.vue" 61 import zc from "./components/zc.vue"
60 import thDialog from "./components/th.vue" 62 import thDialog from "./components/th.vue"
61 import zsylDialog from './components/zsyl' 63 import zsylDialog from './components/zsyl'
...@@ -64,106 +66,61 @@ export default { ...@@ -64,106 +66,61 @@ export default {
64 components: { zc, thDialog, zsylDialog }, 66 components: { zc, thDialog, zsylDialog },
65 data () { 67 data () {
66 return { 68 return {
67 zsylFlag:false, 69 zsylFlag: false,
68 zcDialog:false, 70 zcDialog: false,
69 thflag:false, 71 thflag: false,
70 queryForm:{ 72 queryForm: {
71 bsmSlsq:"", 73 bsmSlsq: "",
72 bestepid:"", 74 bestepid: "",
73 }, 75 },
74 isShowdrawer: true, 76 isShowdrawer: true,
75 key: 0, 77 key: 0,
76 flag: false, 78 flag: false,
77 headerleftList: [ 79 headerleftList: [],
78 { 80 headerRightList: [
79 name: '图形定位',
80 icon: 'fqsq1'
81 },
82 {
83 name: '登记簿',
84 icon: 'fqsq2'
85 },
86 {
87 name: '证书预览',
88 icon: 'fqsq3'
89 },
90 {
91 name: '流程图',
92 icon: 'fqsq4'
93 },
94 {
95 name: '材料分屏',
96 icon: 'fqsq5'
97 },
98 {
99 name: '材料导入',
100 icon: 'fqsq6'
101 },
102 {
103 name: '打印申请书',
104 icon: 'fqsq7'
105 },
106 { 81 {
107 name: '登簿', 82 name: '登簿',
108 icon: 'fqsq2' 83 icon: 'fqsq2',
84 value: 'db'
109 }, 85 },
110 { 86 {
111 name: '退回', 87 name: '退回',
112 icon: 'fqsq8' 88 icon: 'fqsq8',
89 value: 'th'
113 }, 90 },
114 { 91 {
115 name: '转出', 92 name: '转出',
116 icon: 'fqsq9' 93 icon: 'fqsq9',
94 value: 'zc'
117 }, 95 },
118 { 96 {
119 name: '退出', 97 name: '退出',
120 icon: '' 98 icon: 'del',
99 value: 'tc'
121 } 100 }
122 ], 101 ],
123 activeName: '1', 102 activeName: 'slxx',
124 tabList1: [ 103 tabList1: [],
125 {
126 name: '受理申请',
127 },
128 {
129 name: '材料信息',
130 },
131 {
132 name: '审批意见',
133 },
134 {
135 name: '宗地基本信息',
136 },
137 {
138 name: '权利信息',
139 },
140 ],
141 tabList: [], 104 tabList: [],
142 editItem: '', 105 editItem: '',
143 issplitScreen: false, 106 issplitScreen: false,
144 unitData: [], 107 unitData: [],
145 taskId:"", 108 taskId: "",
146 bsmBusiness:"", 109 bsmBusiness: "",
147 id:"", 110 id: "",
148 }; 111 };
149 }, 112 },
150 watch: { 113 watch: {
151 activeName: { 114 activeName: {
152 handler (newName, oldName) { 115 handler (newName, oldName) {
153 console.log(newName, 'newName'); 116 this.editItem = this.loadView(newName)
154 let itemObj = { '1': 'slxx', '2': 'clxx', '3': 'spyj' }
155 this.editItem = this.loadView(itemObj[newName])
156 }, 117 },
157 immediate: true 118 immediate: true
158 } 119 }
159 }, 120 },
160 created () {
161
162 this.tabList = [...this.tabList1]
163
164 },
165 mounted () { 121 mounted () {
166 if (this.$route.query.bsmSlsq) { 122 if (this.$route.query.bsmSlsq) {
123 this.expandInfo(this.$route.query.bsmSlsq,this.$route.query.bestepid);
167 this.list(this.$route.query.bsmSlsq) 124 this.list(this.$route.query.bsmSlsq)
168 this.queryForm.bsmSlsq = this.$route.query.bsmSlsq 125 this.queryForm.bsmSlsq = this.$route.query.bsmSlsq
169 this.queryForm.bestepid = this.$route.query.bestepid 126 this.queryForm.bestepid = this.$route.query.bestepid
...@@ -187,8 +144,22 @@ export default { ...@@ -187,8 +144,22 @@ export default {
187 } 144 }
188 }) 145 })
189 }, 146 },
190 activeClick(tab,event){ 147 //获取环节扩展信息
191 if(tab.name=='1'){ 148 expandInfo (bsmSlsq,bestepid) {
149 let that = this
150 var formdata = new FormData();
151 formdata.append("bsmSlsq", bsmSlsq);
152 formdata.append("bestepid", bestepid);
153 stepExpandInfo(formdata).then(res => {
154 if (res.code === 200) {
155 this.tabList1 = [...res.result.form]
156 this.tabList = res.result.form;
157 this.headerleftList = res.result.button
158 }
159 })
160 },
161 activeClick (tab, event) {
162 if (tab.name == 'slxx') {
192 this.list(this.id) 163 this.list(this.id)
193 } 164 }
194 }, 165 },
...@@ -201,10 +172,10 @@ export default { ...@@ -201,10 +172,10 @@ export default {
201 }) 172 })
202 }, 173 },
203 operation (index, item) { 174 operation (index, item) {
204 if(item.icon == 'fqsq3'){ 175 if (item.value == 'zsyl') {
205 this.zsylFlag = true 176 this.zsylFlag = true
206 177
207 } else if (item.icon == 'fqsq5') { 178 } else if (item.value == 'clfp') {
208 this.key++ 179 this.key++
209 this.issplitScreen = !this.issplitScreen 180 this.issplitScreen = !this.issplitScreen
210 this.flag = !this.flag 181 this.flag = !this.flag
...@@ -213,18 +184,18 @@ export default { ...@@ -213,18 +184,18 @@ export default {
213 } else { 184 } else {
214 this.tabList = [...this.tabList1] 185 this.tabList = [...this.tabList1]
215 } 186 }
216 } else if (item.icon == 'fqsq8') { 187 } else if (item.value == 'th') {
217 this.thflag = true 188 this.thflag = true
218 this.$nextTick(() => { 189 this.$nextTick(() => {
219 this.$refs.thdialogRef.tablelistFn() 190 this.$refs.thdialogRef.tablelistFn()
220 }) 191 })
221 } 192 }
222 else if (item.icon == 'fqsq9') { 193 else if (item.value == 'zc') {
223 this.zcDialog = true 194 this.zcDialog = true
195 this.$refs.zcDialogRef.tablelistFn()
196 } else if (item.value === 'tc') {
197 window.close()
224 } 198 }
225 // if (index == 3) {
226 // window.close()
227 // }
228 }, 199 },
229 loadView (view) { 200 loadView (view) {
230 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 201 return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
...@@ -253,6 +224,15 @@ export default { ...@@ -253,6 +224,15 @@ export default {
253 font-size: 12px; 224 font-size: 12px;
254 } 225 }
255 226
227 /deep/.el-tabs__content {
228 height: calc(100vh - 135px) !important;
229 }
230
231 .splitScreen-con {
232 padding: 0 15px;
233 box-sizing: border-box;
234 }
235
256 .fqsq { 236 .fqsq {
257 width: 100%; 237 width: 100%;
258 height: 100%; 238 height: 100%;
...@@ -343,6 +323,8 @@ export default { ...@@ -343,6 +323,8 @@ export default {
343 .tabsList-left { 323 .tabsList-left {
344 border-right: 1px solid #EBEEF5; 324 border-right: 1px solid #EBEEF5;
345 position: relative; 325 position: relative;
326 width: 250px;
327 box-sizing: border-box;
346 328
347 ul { 329 ul {
348 position: relative; 330 position: relative;
...@@ -392,8 +374,6 @@ export default { ...@@ -392,8 +374,6 @@ export default {
392 374
393 /deep/.el-tabs { 375 /deep/.el-tabs {
394 width: 100%; 376 width: 100%;
395 height: 90vh;
396 overflow-y: scroll;
397 } 377 }
398 } 378 }
399 </style> 379 </style>
...\ No newline at end of file ...\ No newline at end of file
......