Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
13 changed files
with
1018 additions
and
516 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"> | ... | ... |
src/components/photo-zoom/index.vue
0 → 100644
| 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 |
src/components/publicPicture/index.vue
0 → 100644
| 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 |
src/image/icons/svg/del.svg
0 → 100644
| 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 |
src/views/components/imagePreview.vue
0 → 100644
| 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 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="clxx"> | 2 | <div class="clxx"> |
| 3 | <div class="left"> | 3 | <div class="left"> |
| 4 | <div | 4 | <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']" |
| 5 | v-for="item in menuList" | 5 | @click="menuClick(item)"> |
| 6 | :key="item.id" | ||
| 7 | :class="['item', checkedId == item.id ? 'checked' : '']" | ||
| 8 | @click="menuClick(item)" | ||
| 9 | > | ||
| 10 | {{ item.label }} | 6 | {{ item.label }} |
| 11 | </div> | 7 | </div> |
| 12 | </div> | 8 | </div> |
| ... | @@ -14,78 +10,12 @@ | ... | @@ -14,78 +10,12 @@ |
| 14 | <!-- 材料目录明细 --> | 10 | <!-- 材料目录明细 --> |
| 15 | <div class="clmlmx-box" v-if="checkedId == '1'"> | 11 | <div class="clmlmx-box" v-if="checkedId == '1'"> |
| 16 | <div class="title">申请材料目录</div> | 12 | <div class="title">申请材料目录</div> |
| 17 | <lb-table | 13 | <lb-table :column="column" :key="key" :heightNum="210" :pagination="false" :data="tableData"> |
| 18 | :column="column" | ||
| 19 | border | ||
| 20 | :key="key" | ||
| 21 | heightNumSetting | ||
| 22 | :pagination="false" | ||
| 23 | :data="tableData" | ||
| 24 | > | ||
| 25 | </lb-table> | 14 | </lb-table> |
| 26 | </div> | 15 | </div> |
| 27 | |||
| 28 | <!-- 材料预览 --> | 16 | <!-- 材料预览 --> |
| 29 | <div class="clyl-box" v-if="checkedId == '2'"> | 17 | <div class="clyl-box" v-else> |
| 30 | <div class="menu-tree"> | 18 | <image-preview :previewImg="previewImg" /> |
| 31 | <div class="item"> | ||
| 32 | 材料目录 | ||
| 33 | <i :class="iclass" @click="iconClick()"></i> | ||
| 34 | <el-collapse-transition> | ||
| 35 | <div v-show="menuOpen"> | ||
| 36 | <div | ||
| 37 | v-for="item in tableData" | ||
| 38 | :key="item.bsmSj" | ||
| 39 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" | ||
| 40 | @click="treeClick(item)" | ||
| 41 | > | ||
| 42 | {{ item.sjmc }} | ||
| 43 | </div> | ||
| 44 | </div> | ||
| 45 | </el-collapse-transition> | ||
| 46 | </div> | ||
| 47 | </div> | ||
| 48 | <div class="clyl-img"> | ||
| 49 | <div class="header"> | ||
| 50 | <div class="title" v-if="titleNum == 0"> | ||
| 51 | {{ title }} | ||
| 52 | </div> | ||
| 53 | <div class="title" v-else> | ||
| 54 | {{ title }} ({{ titleYs }} / {{ titleNum }}) | ||
| 55 | </div> | ||
| 56 | <div class="i-group"> | ||
| 57 | <i class="el-icon-zoom-in"></i> | ||
| 58 | <i class="el-icon-zoom-out"></i> | ||
| 59 | <i class="el-icon-refresh-right"></i> | ||
| 60 | <i class="el-icon-refresh-left"></i> | ||
| 61 | <i class="el-icon-document"></i> | ||
| 62 | </div> | ||
| 63 | </div> | ||
| 64 | <div class="prev" @click="imgPrev()" v-if="imgList.length > 0"> | ||
| 65 | <i class="el-icon-arrow-left"></i> | ||
| 66 | </div> | ||
| 67 | <div class="img-box"> | ||
| 68 | <img :src="showImg.imgUrl" alt="" /> | ||
| 69 | </div> | ||
| 70 | <div class="next" @click="imgNext()" v-if="imgList.length > 0"> | ||
| 71 | <i class="el-icon-arrow-right"></i> | ||
| 72 | </div> | ||
| 73 | <div class="img-list"> | ||
| 74 | <div class="item" v-for="(item, index) in imgList" :key="index"> | ||
| 75 | <img | ||
| 76 | :class="showImg.id == item.id ? 'active' : ''" | ||
| 77 | :src="item.imgUrl" | ||
| 78 | alt="" | ||
| 79 | @click="imgClick(item, index)" | ||
| 80 | /> | ||
| 81 | </div> | ||
| 82 | </div> | ||
| 83 | <div class="btn-group"> | ||
| 84 | <el-button>扫描</el-button> | ||
| 85 | <el-button icon="el-icon-upload2">上传文件</el-button> | ||
| 86 | <el-button icon="el-icon-delete">删除</el-button> | ||
| 87 | </div> | ||
| 88 | </div> | ||
| 89 | </div> | 19 | </div> |
| 90 | </div> | 20 | </div> |
| 91 | <clxxAddDialog v-model="isDialog" /> | 21 | <clxxAddDialog v-model="isDialog" /> |
| ... | @@ -94,13 +24,11 @@ | ... | @@ -94,13 +24,11 @@ |
| 94 | <script> | 24 | <script> |
| 95 | import { mapGetters } from "vuex"; | 25 | import { mapGetters } from "vuex"; |
| 96 | import clxxAddDialog from "./clxxAddDialog.vue"; | 26 | import clxxAddDialog from "./clxxAddDialog.vue"; |
| 97 | import { upward, down } from "@/utils/operation"; | 27 | import imagePreview from '@/views/components/imagePreview.vue' |
| 98 | import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js"; | 28 | import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js"; |
| 99 | import filter from "@/utils/filter.js"; | ||
| 100 | |||
| 101 | export default { | 29 | export default { |
| 102 | components: { clxxAddDialog }, | 30 | components: { clxxAddDialog, imagePreview }, |
| 103 | data() { | 31 | data () { |
| 104 | return { | 32 | return { |
| 105 | isDialog: false, | 33 | isDialog: false, |
| 106 | menuList: [ | 34 | menuList: [ |
| ... | @@ -122,9 +50,8 @@ export default { | ... | @@ -122,9 +50,8 @@ export default { |
| 122 | <i | 50 | <i |
| 123 | class="el-icon-plus pointer" | 51 | class="el-icon-plus pointer" |
| 124 | onClick={() => { | 52 | onClick={() => { |
| 125 | this.handleAdd(); | 53 | this.handleAdd() |
| 126 | }} | 54 | }} |
| 127 | style="color:#409EFF" | ||
| 128 | ></i> | 55 | ></i> |
| 129 | ); | 56 | ); |
| 130 | }, | 57 | }, |
| ... | @@ -243,39 +170,40 @@ export default { | ... | @@ -243,39 +170,40 @@ export default { |
| 243 | ], | 170 | ], |
| 244 | key: 0, | 171 | key: 0, |
| 245 | tableData: [], | 172 | tableData: [], |
| 246 | menuOpen: true, | 173 | previewImg: { |
| 247 | treeCheckId: "", | 174 | bsmCatalog: '', |
| 248 | defaultProps: { | 175 | index: 0, |
| 249 | children: "children", | 176 | selectedIndex: 0, |
| 250 | label: "label", | 177 | imgList: [ |
| 251 | }, | 178 | { |
| 252 | title: "", | 179 | url: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111' |
| 253 | titleYs: 1, | 180 | }, |
| 254 | titleNum: 0, | 181 | { |
| 255 | imgList:[], | 182 | url: 'https://img1.baidu.com/it/u=2383300938,4241539174&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=500' |
| 256 | showImg:{}, | 183 | } |
| 257 | iclass: "itemIcon el-icon-caret-bottom", | 184 | ], |
| 185 | } | ||
| 258 | }; | 186 | }; |
| 259 | }, | 187 | }, |
| 260 | computed: { | 188 | computed: { |
| 261 | ...mapGetters(["dictData"]), | 189 | ...mapGetters(["dictData"]), |
| 262 | }, | 190 | }, |
| 263 | mounted() { | 191 | mounted () { |
| 264 | if (this.$parent.index == 1) { | 192 | if (this.$parent.index == 1) { |
| 265 | this.clmlmxInit(); | 193 | this.clmlmxInit(); |
| 266 | } | 194 | } |
| 267 | }, | 195 | }, |
| 268 | methods: { | 196 | methods: { |
| 269 | // 左侧菜单点击 | 197 | // 左侧菜单点击 |
| 270 | menuClick(item) { | 198 | menuClick (item) { |
| 271 | this.checkedId = item.id; | 199 | this.checkedId = item.id; |
| 272 | }, | 200 | }, |
| 273 | // 添加材料目录 | 201 | // 添加材料目录 |
| 274 | handleAdd() { | 202 | handleAdd () { |
| 275 | this.isDialog = true; | 203 | this.isDialog = true; |
| 276 | }, | 204 | }, |
| 277 | // 上移 | 205 | // 上移 |
| 278 | moveUpward(index, row) { | 206 | moveUpward (index, row) { |
| 279 | let obj = { | 207 | let obj = { |
| 280 | xh: row.xh, | 208 | xh: row.xh, |
| 281 | bsmSlsq: row.bsmSlsq, | 209 | bsmSlsq: row.bsmSlsq, |
| ... | @@ -288,7 +216,7 @@ export default { | ... | @@ -288,7 +216,7 @@ export default { |
| 288 | }); | 216 | }); |
| 289 | }, | 217 | }, |
| 290 | // 下移 | 218 | // 下移 |
| 291 | moveDown(index, row) { | 219 | moveDown (index, row) { |
| 292 | let obj = { | 220 | let obj = { |
| 293 | xh: row.xh, | 221 | xh: row.xh, |
| 294 | bsmSlsq: row.bsmSlsq, | 222 | bsmSlsq: row.bsmSlsq, |
| ... | @@ -301,7 +229,7 @@ export default { | ... | @@ -301,7 +229,7 @@ export default { |
| 301 | }); | 229 | }); |
| 302 | }, | 230 | }, |
| 303 | // 材料目录明细初始化 | 231 | // 材料目录明细初始化 |
| 304 | clmlmxInit() { | 232 | clmlmxInit () { |
| 305 | this.id = this.$parent.$parent.$parent.id; | 233 | this.id = this.$parent.$parent.$parent.id; |
| 306 | this.unitData = this.$parent.$parent.$parent.unitData; | 234 | this.unitData = this.$parent.$parent.$parent.unitData; |
| 307 | var formdata = new FormData(); | 235 | var formdata = new FormData(); |
| ... | @@ -318,7 +246,7 @@ export default { | ... | @@ -318,7 +246,7 @@ export default { |
| 318 | }); | 246 | }); |
| 319 | }, | 247 | }, |
| 320 | // 新增弹窗保存 | 248 | // 新增弹窗保存 |
| 321 | addSave(data) { | 249 | addSave (data) { |
| 322 | let maxXh = 0; | 250 | let maxXh = 0; |
| 323 | this.tableData.forEach((item) => { | 251 | this.tableData.forEach((item) => { |
| 324 | if (item.xh > maxXh) { | 252 | if (item.xh > maxXh) { |
| ... | @@ -346,7 +274,7 @@ export default { | ... | @@ -346,7 +274,7 @@ export default { |
| 346 | }); | 274 | }); |
| 347 | }, | 275 | }, |
| 348 | // 材料目录删除 | 276 | // 材料目录删除 |
| 349 | handleDelete(index, row) { | 277 | handleDelete (index, row) { |
| 350 | clmlDelete({ sjBsm: row.bsmSj }).then((res) => { | 278 | clmlDelete({ sjBsm: row.bsmSj }).then((res) => { |
| 351 | if (res.code == 200) { | 279 | if (res.code == 200) { |
| 352 | this.$message({ | 280 | this.$message({ |
| ... | @@ -359,7 +287,7 @@ export default { | ... | @@ -359,7 +287,7 @@ export default { |
| 359 | }); | 287 | }); |
| 360 | }, | 288 | }, |
| 361 | // 材料目录关闭收起 | 289 | // 材料目录关闭收起 |
| 362 | iconClick() { | 290 | iconClick () { |
| 363 | this.menuOpen = !this.menuOpen; | 291 | this.menuOpen = !this.menuOpen; |
| 364 | if (this.menuOpen) { | 292 | if (this.menuOpen) { |
| 365 | this.iclass = "itemIcon el-icon-caret-bottom close"; | 293 | this.iclass = "itemIcon el-icon-caret-bottom close"; |
| ... | @@ -368,27 +296,19 @@ export default { | ... | @@ -368,27 +296,19 @@ export default { |
| 368 | } | 296 | } |
| 369 | }, | 297 | }, |
| 370 | // 材料目录点击选中 | 298 | // 材料目录点击选中 |
| 371 | treeClick(item) { | 299 | treeClick (item) { |
| 372 | this.treeCheckId = item.bsmSj; | 300 | this.treeCheckId = item.bsmSj; |
| 373 | this.title = item.sjmc; | 301 | this.title = item.sjmc; |
| 374 | this.titleYs = 1; | 302 | this.titleYs = 1; |
| 375 | this.titleNum = item.children.length; | 303 | this.titleNum = item.children.length; |
| 376 | }, | 304 | }, |
| 377 | // 小图片点击 | 305 | // 小图片点击 |
| 378 | imgClick(item, index) { | 306 | imgClick (item, index) { |
| 379 | this.showImg = item; | 307 | this.showImg = item; |
| 380 | this.titleYs = index + 1; | 308 | this.titleYs = index + 1; |
| 381 | }, | 309 | }, |
| 382 | // 图片上一张 | ||
| 383 | imgPrev(){ | ||
| 384 | |||
| 385 | }, | ||
| 386 | // 图片下一张 | ||
| 387 | imgNext(){ | ||
| 388 | |||
| 389 | }, | ||
| 390 | // 字典 | 310 | // 字典 |
| 391 | dicStatus(val, code) { | 311 | dicStatus (val, code) { |
| 392 | let data = this.$store.getters.dictData[code], | 312 | let data = this.$store.getters.dictData[code], |
| 393 | name = "暂无"; | 313 | name = "暂无"; |
| 394 | if (data) { | 314 | if (data) { |
| ... | @@ -404,52 +324,48 @@ export default { | ... | @@ -404,52 +324,48 @@ export default { |
| 404 | }; | 324 | }; |
| 405 | </script> | 325 | </script> |
| 406 | <style scoped lang='scss'> | 326 | <style scoped lang='scss'> |
| 327 | @import "~@/styles/mixin.scss"; | ||
| 328 | |||
| 329 | .active { | ||
| 330 | background: $light-blue !important; | ||
| 331 | color: #fff; | ||
| 332 | } | ||
| 333 | |||
| 407 | .clxx { | 334 | .clxx { |
| 408 | width: 100%; | 335 | width: 100%; |
| 409 | height: 100%; | ||
| 410 | display: flex; | 336 | display: flex; |
| 411 | padding-left: 15px; | 337 | padding-left: 15px; |
| 338 | height: calc(100vh - 150px); | ||
| 339 | |||
| 412 | .left { | 340 | .left { |
| 413 | width: 52px; | 341 | display: flex; |
| 414 | height: 780px; | 342 | flex-direction: column; |
| 415 | background: #f3f4f7; | 343 | justify-content: space-between; |
| 416 | border-radius: 1px; | 344 | |
| 417 | .item { | 345 | .item { |
| 418 | width: 42px; | 346 | width: 42px; |
| 419 | height: 50%; | 347 | height: 49%; |
| 420 | margin: 0 0 auto auto; | 348 | @include flex-center; |
| 421 | writing-mode: tb; | 349 | background-color: #E4E7ED; |
| 422 | display: flex; | 350 | border-bottom-right-radius: 10px; |
| 423 | justify-content: center; | 351 | padding: 15px; |
| 424 | align-items: center; | ||
| 425 | font-size: 16px; | ||
| 426 | font-family: PingFangSC-Medium, PingFang SC; | ||
| 427 | color: #7a7a7a; | ||
| 428 | cursor: pointer; | 352 | cursor: pointer; |
| 429 | border-right: 1px solid #d9d9d9; | 353 | transition: all 0.3s; |
| 430 | } | 354 | |
| 431 | .item.checked { | 355 | &:hover { |
| 432 | background: #ffffff; | 356 | @extend .active; |
| 433 | border-top: 1px solid #d9d9d9; | ||
| 434 | border-bottom: 1px solid #d9d9d9; | ||
| 435 | border-left: 2px solid #2b7ff1; | ||
| 436 | border-right: none; | ||
| 437 | font-size: 18px; | ||
| 438 | color: #4a4a4a; | ||
| 439 | } | 357 | } |
| 440 | } | 358 | } |
| 359 | } | ||
| 360 | |||
| 441 | .right { | 361 | .right { |
| 442 | width: calc(100% - 80px); | 362 | width: 100%; |
| 443 | height: 780px; | 363 | height: 100%; |
| 444 | padding: 0 30px; | 364 | padding: 0 15px; |
| 445 | 365 | ||
| 446 | .clmlmx-box { | 366 | .clmlmx-box { |
| 447 | width: 100%; | ||
| 448 | height: 530px; | ||
| 449 | margin: 0 auto; | 367 | margin: 0 auto; |
| 450 | border: 1px solid #d9d9d9; | 368 | |
| 451 | background: #f3f4f7; | ||
| 452 | padding: 20px; | ||
| 453 | .title { | 369 | .title { |
| 454 | text-align: center; | 370 | text-align: center; |
| 455 | height: 60px; | 371 | height: 60px; |
| ... | @@ -472,12 +388,14 @@ export default { | ... | @@ -472,12 +388,14 @@ export default { |
| 472 | margin-right: 30px; | 388 | margin-right: 30px; |
| 473 | border-right: 1px dotted #d9d9d9; | 389 | border-right: 1px dotted #d9d9d9; |
| 474 | padding: 0 24px; | 390 | padding: 0 24px; |
| 391 | |||
| 475 | .item { | 392 | .item { |
| 476 | height: 60px; | 393 | height: 60px; |
| 477 | line-height: 60px; | 394 | line-height: 60px; |
| 478 | border-bottom: 1px solid #e8e8e8; | 395 | border-bottom: 1px solid #e8e8e8; |
| 479 | font-size: 16px; | 396 | font-size: 16px; |
| 480 | color: #4a4a4a; | 397 | color: #4a4a4a; |
| 398 | |||
| 481 | .itemIcon { | 399 | .itemIcon { |
| 482 | float: right; | 400 | float: right; |
| 483 | line-height: 60px; | 401 | line-height: 60px; |
| ... | @@ -494,6 +412,7 @@ export default { | ... | @@ -494,6 +412,7 @@ export default { |
| 494 | 0% { | 412 | 0% { |
| 495 | transform: rotate(180deg); | 413 | transform: rotate(180deg); |
| 496 | } | 414 | } |
| 415 | |||
| 497 | 100% { | 416 | 100% { |
| 498 | transform: rotate(-0deg); | 417 | transform: rotate(-0deg); |
| 499 | } | 418 | } |
| ... | @@ -503,10 +422,12 @@ export default { | ... | @@ -503,10 +422,12 @@ export default { |
| 503 | animation: open 0.5s; | 422 | animation: open 0.5s; |
| 504 | animation-fill-mode: both; | 423 | animation-fill-mode: both; |
| 505 | } | 424 | } |
| 425 | |||
| 506 | .close { | 426 | .close { |
| 507 | animation: close 0.5s; | 427 | animation: close 0.5s; |
| 508 | animation-fill-mode: both; | 428 | animation-fill-mode: both; |
| 509 | } | 429 | } |
| 430 | |||
| 510 | .child { | 431 | .child { |
| 511 | height: 60px; | 432 | height: 60px; |
| 512 | line-height: 60px; | 433 | line-height: 60px; |
| ... | @@ -515,6 +436,7 @@ export default { | ... | @@ -515,6 +436,7 @@ export default { |
| 515 | color: #6b6b6b; | 436 | color: #6b6b6b; |
| 516 | cursor: pointer; | 437 | cursor: pointer; |
| 517 | } | 438 | } |
| 439 | |||
| 518 | .checked { | 440 | .checked { |
| 519 | border-radius: 6px; | 441 | border-radius: 6px; |
| 520 | border: 1px solid #4083f9; | 442 | border: 1px solid #4083f9; |
| ... | @@ -524,91 +446,10 @@ export default { | ... | @@ -524,91 +446,10 @@ export default { |
| 524 | 446 | ||
| 525 | .clyl-img { | 447 | .clyl-img { |
| 526 | width: 75%; | 448 | width: 75%; |
| 527 | height: 800px; | 449 | height: 100%; |
| 528 | background: #f3f4f7; | 450 | background: #f3f4f7; |
| 529 | margin: 0 auto; | 451 | margin: 0 auto; |
| 530 | position: relative; | 452 | position: relative; |
| 531 | .header { | ||
| 532 | height: 54px; | ||
| 533 | line-height: 52px; | ||
| 534 | background: #eceef2; | ||
| 535 | border: 1px solid #ededed; | ||
| 536 | padding: 0 0 0 30px; | ||
| 537 | .title { | ||
| 538 | font-size: 13px; | ||
| 539 | display: inline-block; | ||
| 540 | } | ||
| 541 | .i-group { | ||
| 542 | float: right; | ||
| 543 | height: 100%; | ||
| 544 | i { | ||
| 545 | width: 50px; | ||
| 546 | height: 52px; | ||
| 547 | cursor: pointer; | ||
| 548 | } | ||
| 549 | } | ||
| 550 | } | ||
| 551 | .prev, | ||
| 552 | .next { | ||
| 553 | width: 60px; | ||
| 554 | height: 60px; | ||
| 555 | line-height: 60px; | ||
| 556 | text-align: center; | ||
| 557 | font-size: 40px; | ||
| 558 | border-radius: 6px; | ||
| 559 | cursor: pointer; | ||
| 560 | position: absolute; | ||
| 561 | } | ||
| 562 | .prev:hover, | ||
| 563 | .next:hover{ | ||
| 564 | background: #7a7a7a; | ||
| 565 | } | ||
| 566 | |||
| 567 | .prev { | ||
| 568 | top: 40%; | ||
| 569 | left: 10px; | ||
| 570 | } | ||
| 571 | .next { | ||
| 572 | top: 40%; | ||
| 573 | right: 10px; | ||
| 574 | } | ||
| 575 | .img-box { | ||
| 576 | width: 800px; | ||
| 577 | height: calc(100% - 214px); | ||
| 578 | padding: 5px; | ||
| 579 | text-align: center; | ||
| 580 | margin: 0 auto; | ||
| 581 | img { | ||
| 582 | max-height: 100%; | ||
| 583 | max-width: 100%; | ||
| 584 | } | ||
| 585 | } | ||
| 586 | .img-list { | ||
| 587 | width: 100%; | ||
| 588 | height: 80px; | ||
| 589 | line-height: 80px; | ||
| 590 | background: #eceef2; | ||
| 591 | text-align: center; | ||
| 592 | .item { | ||
| 593 | display: inline-block; | ||
| 594 | margin: 10px 5px; | ||
| 595 | img { | ||
| 596 | width: 60px; | ||
| 597 | height: 60px; | ||
| 598 | cursor: pointer; | ||
| 599 | } | ||
| 600 | .active { | ||
| 601 | border: 1px solid #fff; | ||
| 602 | } | ||
| 603 | } | ||
| 604 | } | ||
| 605 | .btn-group { | ||
| 606 | width: 100%; | ||
| 607 | height: 80px; | ||
| 608 | line-height: 80px; | ||
| 609 | background: #fff; | ||
| 610 | text-align: center; | ||
| 611 | } | ||
| 612 | } | 453 | } |
| 613 | } | 454 | } |
| 614 | } | 455 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="slxx"> | 2 | <div class="slxx"> |
| 3 | <el-form | 3 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag" |
| 4 | :model="ruleForm" | 4 | label-width="140px"> |
| 5 | :rules="rules" | 5 | <div class="slxx_con"> |
| 6 | ref="ruleForm" | ||
| 7 | :label-position="flagTop" | ||
| 8 | :inline="flag" | ||
| 9 | label-width="140px" | ||
| 10 | > | ||
| 11 | <div class="slxx_title">受理信息</div> | 6 | <div class="slxx_title">受理信息</div> |
| 12 | <el-row :gutter="10"> | 7 | <el-row :gutter="10"> |
| 13 | <el-col :span="8"> | 8 | <el-col :span="8"> |
| 14 | <el-form-item label="业务号:" prop="ywh"> | 9 | <el-form-item label="业务号:" prop="ywh"> |
| 15 | <el-input | 10 | <el-input disabled v-model="ruleForm.ywh" class="width300px"></el-input> |
| 16 | disabled | ||
| 17 | v-model="ruleForm.ywh" | ||
| 18 | class="width300px" | ||
| 19 | ></el-input> | ||
| 20 | </el-form-item> | 11 | </el-form-item> |
| 21 | </el-col> | 12 | </el-col> |
| 22 | <el-col :span="8"> | 13 | <el-col :span="8"> |
| 23 | <el-form-item label="受理人员:" prop="slry"> | 14 | <el-form-item label="受理人员:" prop="slry"> |
| 24 | <el-input | 15 | <el-input disabled v-model="ruleForm.slry" class="width300px"></el-input> |
| 25 | disabled | ||
| 26 | v-model="ruleForm.slry" | ||
| 27 | class="width300px" | ||
| 28 | ></el-input> | ||
| 29 | </el-form-item> | 16 | </el-form-item> |
| 30 | </el-col> | 17 | </el-col> |
| 31 | <el-col :span="8"> | 18 | <el-col :span="8"> |
| 32 | <el-form-item label="受理时间:" prop="slsj"> | 19 | <el-form-item label="受理时间:" prop="slsj"> |
| 33 | <el-input | 20 | <el-input disabled v-model="ruleForm.slsj" class="width300px"></el-input> |
| 34 | disabled | ||
| 35 | v-model="ruleForm.slsj" | ||
| 36 | class="width300px" | ||
| 37 | ></el-input> | ||
| 38 | </el-form-item> | 21 | </el-form-item> |
| 39 | </el-col> | 22 | </el-col> |
| 40 | </el-row> | 23 | </el-row> |
| 41 | <el-row :gutter="10"> | 24 | <el-row :gutter="10"> |
| 42 | <el-col :span="8"> | 25 | <el-col :span="8"> |
| 43 | <el-form-item label="权利类型:" prop="qllx"> | 26 | <el-form-item label="权利类型:" prop="qllx"> |
| 44 | <el-select | 27 | <el-select disabled v-model="ruleForm.qllx" class="width300px" filterable clearable placeholder="请选择权利类型"> |
| 45 | disabled | 28 | <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode"> |
| 46 | v-model="ruleForm.qllx" | ||
| 47 | class="width300px" | ||
| 48 | filterable | ||
| 49 | clearable | ||
| 50 | placeholder="请选择权利类型" | ||
| 51 | > | ||
| 52 | <el-option | ||
| 53 | v-for="item in dictData['A8']" | ||
| 54 | :key="item.dcode" | ||
| 55 | :label="item.dname" | ||
| 56 | :value="item.dcode" | ||
| 57 | > | ||
| 58 | </el-option> | 29 | </el-option> |
| 59 | </el-select> | 30 | </el-select> |
| 60 | </el-form-item> | 31 | </el-form-item> |
| 61 | </el-col> | 32 | </el-col> |
| 62 | <el-col :span="8"> | 33 | <el-col :span="8"> |
| 63 | <el-form-item label="登记类型:" prop="djlx"> | 34 | <el-form-item label="登记类型:" prop="djlx"> |
| 64 | <el-select | 35 | <el-select disabled v-model="ruleForm.djlx" class="width300px" filterable clearable placeholder="请选择登记类型"> |
| 65 | disabled | 36 | <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode"> |
| 66 | v-model="ruleForm.djlx" | ||
| 67 | class="width300px" | ||
| 68 | filterable | ||
| 69 | clearable | ||
| 70 | placeholder="请选择登记类型" | ||
| 71 | > | ||
| 72 | <el-option | ||
| 73 | v-for="item in dictData['A21']" | ||
| 74 | :key="item.dcode" | ||
| 75 | :label="item.dname" | ||
| 76 | :value="item.dcode" | ||
| 77 | > | ||
| 78 | </el-option> | 37 | </el-option> |
| 79 | </el-select> | 38 | </el-select> |
| 80 | </el-form-item> | 39 | </el-form-item> |
| 81 | </el-col> | 40 | </el-col> |
| 82 | <el-col :span="8"> | 41 | <el-col :span="8"> |
| 83 | <el-form-item label="登记情形:" prop="djqx"> | 42 | <el-form-item label="登记情形:" prop="djqx"> |
| 84 | <el-input | 43 | <el-input disabled class="width300px" v-model="ruleForm.djqxmc"></el-input> |
| 85 | disabled | ||
| 86 | class="width300px" | ||
| 87 | v-model="ruleForm.djqxmc" | ||
| 88 | ></el-input> | ||
| 89 | </el-form-item> | 44 | </el-form-item> |
| 90 | </el-col> | 45 | </el-col> |
| 91 | </el-row> | 46 | </el-row> |
| ... | @@ -93,67 +48,36 @@ | ... | @@ -93,67 +48,36 @@ |
| 93 | <el-row :gutter="10"> | 48 | <el-row :gutter="10"> |
| 94 | <el-col :span="8"> | 49 | <el-col :span="8"> |
| 95 | <el-form-item label="宗地代码:" prop="zddm"> | 50 | <el-form-item label="宗地代码:" prop="zddm"> |
| 96 | <el-input | 51 | <el-input disabled v-model="ruleForm.zddm" class="width300px"></el-input> |
| 97 | disabled | ||
| 98 | v-model="ruleForm.zddm" | ||
| 99 | class="width300px" | ||
| 100 | ></el-input> | ||
| 101 | </el-form-item> | 52 | </el-form-item> |
| 102 | </el-col> | 53 | </el-col> |
| 103 | <el-col :span="8"> | 54 | <el-col :span="8"> |
| 104 | <el-form-item label="不动产单元号:" prop="bdcdyh"> | 55 | <el-form-item label="不动产单元号:" prop="bdcdyh"> |
| 105 | <el-input | 56 | <el-input disabled v-model="ruleForm.bdcdyh" class="width300px"></el-input> |
| 106 | disabled | ||
| 107 | v-model="ruleForm.bdcdyh" | ||
| 108 | class="width300px" | ||
| 109 | ></el-input> | ||
| 110 | </el-form-item> | 57 | </el-form-item> |
| 111 | </el-col> | 58 | </el-col> |
| 112 | <el-col :span="8"> | 59 | <el-col :span="8"> |
| 113 | <el-form-item label="权利性质:" prop="qlxzmc"> | 60 | <el-form-item label="权利性质:" prop="qlxzmc"> |
| 114 | <el-input | 61 | <el-input disabled v-model="ruleForm.qlxzmc" class="width300px"></el-input> |
| 115 | disabled | ||
| 116 | v-model="ruleForm.qlxzmc" | ||
| 117 | class="width300px" | ||
| 118 | ></el-input> | ||
| 119 | </el-form-item> | 62 | </el-form-item> |
| 120 | </el-col> | 63 | </el-col> |
| 121 | </el-row> | 64 | </el-row> |
| 122 | <el-row :gutter="10"> | 65 | <el-row :gutter="10"> |
| 123 | <el-col :span="8"> | 66 | <el-col :span="8"> |
| 124 | <el-form-item label="宗地面积:" prop="zdmj"> | 67 | <el-form-item label="宗地面积:" prop="zdmj"> |
| 125 | <el-input | 68 | <el-input disabled v-model="ruleForm.zdmj" class="width300px"></el-input> |
| 126 | disabled | ||
| 127 | v-model="ruleForm.zdmj" | ||
| 128 | class="width300px" | ||
| 129 | ></el-input> | ||
| 130 | </el-form-item> | 69 | </el-form-item> |
| 131 | </el-col> | 70 | </el-col> |
| 132 | <el-col :span="8"> | 71 | <el-col :span="8"> |
| 133 | <el-form-item label="土地用途:" prop="tdyt"> | 72 | <el-form-item label="土地用途:" prop="tdyt"> |
| 134 | <el-input | 73 | <el-input disabled v-model="ruleForm.tdyt" class="width300px"></el-input> |
| 135 | disabled | ||
| 136 | v-model="ruleForm.tdyt" | ||
| 137 | class="width300px" | ||
| 138 | ></el-input> | ||
| 139 | </el-form-item> | 74 | </el-form-item> |
| 140 | </el-col> | 75 | </el-col> |
| 141 | <el-col :span="8"> | 76 | <el-col :span="8"> |
| 142 | <el-form-item label="权利设定方式:" prop="qlsdfs"> | 77 | <el-form-item label="权利设定方式:" prop="qlsdfs"> |
| 143 | <el-select | 78 | <el-select disabled v-model="ruleForm.qlsdfs" filterable class="width300px" clearable |
| 144 | disabled | 79 | placeholder="请选择权利设定方式"> |
| 145 | v-model="ruleForm.qlsdfs" | 80 | <el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value"> |
| 146 | filterable | ||
| 147 | class="width300px" | ||
| 148 | clearable | ||
| 149 | placeholder="请选择权利设定方式" | ||
| 150 | > | ||
| 151 | <el-option | ||
| 152 | v-for="item in qlsdfsOption" | ||
| 153 | :key="item.value" | ||
| 154 | :label="item.label" | ||
| 155 | :value="item.value" | ||
| 156 | > | ||
| 157 | </el-option> | 81 | </el-option> |
| 158 | </el-select> | 82 | </el-select> |
| 159 | </el-form-item> | 83 | </el-form-item> |
| ... | @@ -162,42 +86,26 @@ | ... | @@ -162,42 +86,26 @@ |
| 162 | <el-row :gutter="10"> | 86 | <el-row :gutter="10"> |
| 163 | <el-col :span="8"> | 87 | <el-col :span="8"> |
| 164 | <el-form-item label="取得价格:" prop="qdjg"> | 88 | <el-form-item label="取得价格:" prop="qdjg"> |
| 165 | <el-input | 89 | <el-input disabled v-model="ruleForm.qdjg" class="width300px"></el-input> |
| 166 | disabled | ||
| 167 | v-model="ruleForm.qdjg" | ||
| 168 | class="width300px" | ||
| 169 | ></el-input> | ||
| 170 | </el-form-item> | 90 | </el-form-item> |
| 171 | </el-col> | 91 | </el-col> |
| 172 | 92 | ||
| 173 | <el-col :span="16"> | 93 | <el-col :span="16"> |
| 174 | <el-form-item label="坐落:" prop="zl"> | 94 | <el-form-item label="坐落:" prop="zl"> |
| 175 | <el-input | 95 | <el-input disabled class="width300px" v-model="ruleForm.zl"></el-input> |
| 176 | disabled | ||
| 177 | class="width300px" | ||
| 178 | v-model="ruleForm.zl" | ||
| 179 | ></el-input> | ||
| 180 | </el-form-item> | 96 | </el-form-item> |
| 181 | </el-col> | 97 | </el-col> |
| 182 | </el-row> | 98 | </el-row> |
| 183 | <el-row :gutter="10"> | 99 | <el-row :gutter="10"> |
| 184 | <el-col :span="8"> | 100 | <el-col :span="8"> |
| 185 | <el-form-item label="使用期限:" prop="tdsyqx"> | 101 | <el-form-item label="使用期限:" prop="tdsyqx"> |
| 186 | <el-input | 102 | <el-input disabled v-model="ruleForm.tdsyqx" class="width300px"></el-input> |
| 187 | disabled | ||
| 188 | v-model="ruleForm.tdsyqx" | ||
| 189 | class="width300px" | ||
| 190 | ></el-input> | ||
| 191 | </el-form-item> | 103 | </el-form-item> |
| 192 | </el-col> | 104 | </el-col> |
| 193 | 105 | ||
| 194 | <el-col :span="16"> | 106 | <el-col :span="16"> |
| 195 | <el-form-item label="使用权起止时间:" prop="qssj"> | 107 | <el-form-item label="使用权起止时间:" prop="qssj"> |
| 196 | <el-input | 108 | <el-input disabled v-model="ruleForm.syqqzsj" class="width300px"></el-input> |
| 197 | disabled | ||
| 198 | v-model="ruleForm.syqqzsj" | ||
| 199 | class="width300px" | ||
| 200 | ></el-input> | ||
| 201 | </el-form-item> | 109 | </el-form-item> |
| 202 | </el-col> | 110 | </el-col> |
| 203 | </el-row> | 111 | </el-row> |
| ... | @@ -220,27 +128,22 @@ | ... | @@ -220,27 +128,22 @@ |
| 220 | </el-form-item> | 128 | </el-form-item> |
| 221 | </el-col> | 129 | </el-col> |
| 222 | <el-col> | 130 | <el-col> |
| 223 | <InformationTable /> | 131 | <InformationTable :tableData="ruleForm.qlrxx" /> |
| 224 | </el-col> | 132 | </el-col> |
| 225 | </el-row> | 133 | </el-row> |
| 226 | <div class="slxx_title">登记原因</div> | 134 | <div class="slxx_title">登记原因</div> |
| 227 | <el-row :gutter="10"> | 135 | <el-row :gutter="10"> |
| 228 | <el-col> | 136 | <el-col> |
| 229 | <el-form-item label="登记原因:" prop="djyy"> | 137 | <el-form-item label="登记原因:" prop="djyy"> |
| 230 | <el-input | 138 | <el-input class="textArea" type="textarea" v-model="ruleForm.djyy"></el-input> |
| 231 | class="textArea" | ||
| 232 | type="textarea" | ||
| 233 | v-model="ruleForm.djyy" | ||
| 234 | ></el-input> | ||
| 235 | </el-form-item> | 139 | </el-form-item> |
| 236 | </el-col> | 140 | </el-col> |
| 237 | </el-row> | 141 | </el-row> |
| 142 | </div> | ||
| 238 | <el-row> | 143 | <el-row> |
| 239 | <el-col> | ||
| 240 | <el-form-item class="btn"> | 144 | <el-form-item class="btn"> |
| 241 | <el-button type="primary" @click="onSubmit">保存</el-button> | 145 | <el-button type="primary" @click="onSubmit">保存</el-button> |
| 242 | </el-form-item> | 146 | </el-form-item> |
| 243 | </el-col> | ||
| 244 | </el-row> | 147 | </el-row> |
| 245 | </el-form> | 148 | </el-form> |
| 246 | </div> | 149 | </div> |
| ... | @@ -250,7 +153,6 @@ import InformationTable from "./InformationTable"; | ... | @@ -250,7 +153,6 @@ import InformationTable from "./InformationTable"; |
| 250 | import { Init } from "@/api/fqsq.js"; | 153 | import { Init } from "@/api/fqsq.js"; |
| 251 | import { mapGetters } from "vuex"; | 154 | import { mapGetters } from "vuex"; |
| 252 | export default { | 155 | export default { |
| 253 | /**注册组件*/ | ||
| 254 | components: { InformationTable }, | 156 | components: { InformationTable }, |
| 255 | props: { | 157 | props: { |
| 256 | flag: { | 158 | flag: { |
| ... | @@ -261,7 +163,7 @@ export default { | ... | @@ -261,7 +163,7 @@ export default { |
| 261 | computed: { | 163 | computed: { |
| 262 | ...mapGetters(["dictData"]), | 164 | ...mapGetters(["dictData"]), |
| 263 | }, | 165 | }, |
| 264 | data() { | 166 | data () { |
| 265 | return { | 167 | return { |
| 266 | disabled: true, | 168 | disabled: true, |
| 267 | flagTop: this.flag ? "top" : "", | 169 | flagTop: this.flag ? "top" : "", |
| ... | @@ -277,6 +179,7 @@ export default { | ... | @@ -277,6 +179,7 @@ export default { |
| 277 | zddm: "", | 179 | zddm: "", |
| 278 | bdcdyh: "", | 180 | bdcdyh: "", |
| 279 | qlxzmc: "", | 181 | qlxzmc: "", |
| 182 | qlrxx: [], | ||
| 280 | zdmj: "", | 183 | zdmj: "", |
| 281 | zl: "", | 184 | zl: "", |
| 282 | tdyt: "", | 185 | tdyt: "", |
| ... | @@ -289,35 +192,22 @@ export default { | ... | @@ -289,35 +192,22 @@ export default { |
| 289 | gyfs: "", | 192 | gyfs: "", |
| 290 | }, | 193 | }, |
| 291 | rules: { | 194 | rules: { |
| 292 | // ywh: [ | 195 | } |
| 293 | // { required: true, message: '业务号', trigger: 'blur' } | 196 | } |
| 294 | // ], | ||
| 295 | }, | ||
| 296 | }; | ||
| 297 | }, | 197 | }, |
| 298 | methods: { | 198 | methods: { |
| 299 | list(bsmSldy) { | 199 | list (bsmSldy) { |
| 300 | var formdata = new FormData(); | 200 | var formdata = new FormData(); |
| 301 | //可以通过append()方法来追加数据 | 201 | //可以通过append()方法来追加数据 |
| 302 | formdata.append("bsmSldy", bsmSldy); | 202 | formdata.append("bsmSldy", bsmSldy); |
| 303 | Init(formdata).then((res) => { | 203 | Init(formdata).then((res) => { |
| 304 | if (res.code === 200) { | 204 | if (res.code === 200 && res.result) { |
| 305 | console.log(res, 1111); | 205 | this.ruleForm = { ...res.result, ...res.result.zdjbxxdatas, ...res.result.qlxxdatas, ...res.result.jsydsyqdatas } |
| 306 | this.ruleForm = res.result; | 206 | console.log(this.ruleForm, 'this.ruleForm'); |
| 307 | this.ruleForm.zddm = res.result.zdjbxxdatas.zddm; | ||
| 308 | this.ruleForm.zdmj = res.result.zdjbxxdatas.zdmj; | ||
| 309 | this.ruleForm.zl = res.result.qlxxdatas.zl; | ||
| 310 | this.ruleForm.tdyt = res.result.qlxxdatas.ytmc; | ||
| 311 | this.ruleForm.qlsdfs = res.result.zdjbxxdatas.qlsdfsmc; | ||
| 312 | this.ruleForm.qdjg = res.result.jsydsyqdatas.qdjg; | ||
| 313 | this.ruleForm.fj = res.result.jsydsyqdatas.fj; | ||
| 314 | this.ruleForm.syqqzsj = res.result.jsydsyqdatas.syqqzsj; | ||
| 315 | this.ruleForm.tdsyqx = res.result.jsydsyqdatas.tdsyqx; | ||
| 316 | this.ruleForm.qlxzmc = res.result.zdjbxxdatas.qlxzmc; | ||
| 317 | } | 207 | } |
| 318 | }); | 208 | }) |
| 319 | }, | 209 | }, |
| 320 | onSubmit() {}, | 210 | onSubmit () { }, |
| 321 | }, | 211 | }, |
| 322 | }; | 212 | }; |
| 323 | </script> | 213 | </script> |
| ... | @@ -325,23 +215,34 @@ export default { | ... | @@ -325,23 +215,34 @@ export default { |
| 325 | @import "~@/styles/public.scss"; | 215 | @import "~@/styles/public.scss"; |
| 326 | 216 | ||
| 327 | .slxx { | 217 | .slxx { |
| 328 | padding-left: 15px; | 218 | box-sizing: border-box; |
| 219 | padding-right: 15px; | ||
| 220 | } | ||
| 221 | |||
| 222 | .slxx_con { | ||
| 223 | height: calc(100vh - 190px); | ||
| 224 | overflow-y: auto; | ||
| 225 | overflow-x: hidden; | ||
| 226 | } | ||
| 227 | |||
| 228 | .submit_btn { | ||
| 229 | height: 50px; | ||
| 329 | } | 230 | } |
| 330 | 231 | ||
| 331 | .slxx_title { | 232 | .slxx_title { |
| 332 | border-bottom: 1px solid $borderColor; | 233 | border-bottom: 1px solid $borderColor; |
| 333 | padding-left: 10px; | 234 | padding-left: 10px; |
| 334 | padding-bottom: 20px; | 235 | padding-bottom: 15px; |
| 335 | margin-bottom: 15px; | 236 | margin-bottom: 15px; |
| 336 | margin-top: 30px; | 237 | margin-top: 5px; |
| 337 | font-size: 18px; | 238 | font-size: 18px; |
| 338 | font-family: PingFangSC-Medium, PingFang SC; | ||
| 339 | font-weight: 500; | 239 | font-weight: 500; |
| 340 | color: #4a4a4a; | 240 | color: #4a4a4a; |
| 341 | } | 241 | } |
| 342 | 242 | ||
| 343 | .btn { | 243 | .btn { |
| 344 | text-align: center; | 244 | text-align: center; |
| 245 | padding-top: 5px; | ||
| 345 | } | 246 | } |
| 346 | 247 | ||
| 347 | .textArea { | 248 | .textArea { |
| ... | @@ -350,15 +251,6 @@ export default { | ... | @@ -350,15 +251,6 @@ export default { |
| 350 | } | 251 | } |
| 351 | } | 252 | } |
| 352 | 253 | ||
| 353 | // .Inputclass { | ||
| 354 | // width: 100%; | ||
| 355 | // } | ||
| 356 | |||
| 357 | // /deep/.el-select, | ||
| 358 | // /deep/.el-date-editor { | ||
| 359 | // width: 100%; | ||
| 360 | // } | ||
| 361 | |||
| 362 | /deep/.el-form-item__label { | 254 | /deep/.el-form-item__label { |
| 363 | padding-bottom: 0px; | 255 | padding-bottom: 0px; |
| 364 | } | 256 | } | ... | ... |
| ... | @@ -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 | ... | ... |
-
Please register or sign in to post a comment