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

@@ -78,3 +78,21 @@ export function clmlDelete (params) {
         params: params
     })
 }
+
+// 获取下一环节信息
+export function getNextLinkInfo (params) {
+    return request({
+        url: '/business/workFlow/getNextLinkInfo',
+        method: 'get',
+        params: params
+    })
+}
+
+// 环节扩展信息
+export function stepExpandInfo (data) {
+    return request({
+        url: '/business/workFlow/stepExpandInfo',
+        method: 'post',
+        data
+    })
+}

@@ -12,14 +12,14 @@
   <div :class="['lb-table', customClass]">
     <el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border'
       :row-class-name="tableRowClassName" :show-header='showHeader'
-      :header-cell-style="{ background: 'rgb(217, 236, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
+      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
       :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
       <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
       </lb-column>
     </el-table>
 
     <el-table v-else ref="elTable" class="table-fixed" :border='border' :row-class-name="tableRowClassName"
-      :show-header='showHeader' :header-cell-style="{ background: 'rgb(217, 236, 255)' }" v-bind="$attrs"
+      :show-header='showHeader' :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs"
       :max-height="maxHeight" v-on="$listeners" :data="data" style="width: 100%"
       :span-method="this.merge ? this.mergeMethod : this.spanMethod">
       <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">

+<template>
+  <div style="width: 100%;height: 100%">
+    <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType"
+      :overlayStyle="overlayStyle">
+    </vue-photo-zoom-pro>
+  </div>
+</template>
+
+<script>
+  import vuePhotoZoomPro from '@/components/photo-zoom/vue-photo-zoom-pro'
+  export default {
+    name: 'PicZoom',
+    components: { vuePhotoZoomPro },
+    data() {
+      return {
+        type: "square",
+        showType: false,
+      }
+    },
+    props: {
+      url: {
+        type: String,
+        required: true,
+        // default: require('@/assets/vehicle_img/blank_vehicle.jpg') 
+      },
+      bigWidth: {
+        type: Number,
+        required: true,
+        default: 168
+      },
+      scale: {
+        type: Number,
+        required: true,
+        default: 2
+      },
+      overlayStyle: {
+        type: String,
+        default: 'width:100%;height:100%'
+      }
+    },
+  }
+</script>
\ No newline at end of file

+<template>
+  <div class="pic-img">
+    <div class="img-container">
+      <img ref="img" @load="imgLoaded" :src="url" :style="overlayStyle" @error="imgerrorfun" />
+      <div class="overlay" @mousemove.stop="!moveEvent && mouseMove($event)"
+        @mouseout.stop="!leaveEvent && mouseLeave($event)" :style="overlayStyle">
+      </div>
+      <div v-if="!hideZoom && imgLoadedFlag &&!hideSelector" :class="['img-selector', {'circle': type === 'circle'}]"
+        :style="[imgSelectorStyle, imgSelectorSize, imgSelectorPosition, !outShow && imgBg, !outShow && imgBgSize, !outShow && imgBgPosition]">
+        <slot></slot>
+      </div>
+      <div v-if="outShow" v-show="!hideOutShow" :class="['img-out-show', {'base-line': baseline}]"
+        :style="[imgOutShowSize, imgOutShowPosition, imgBg, imgBgSize, imgBgPosition]">
+        <div v-if="pointer" class="img-selector-point"></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: "vue-photo-zoom-pro",
+    props: {
+      url: {
+        type: String,
+      },
+      highUrl: String,
+      width: {
+        type: Number,
+        default: 168
+      },
+      type: {
+        type: String,
+        default: "square",
+        validator: function (value) {
+          return ["circle", "square"].indexOf(value) !== -1;
+        }
+      },
+      selectorStyle: {
+        type: Object,
+        default () {
+          return {};
+        }
+      },
+      outShowStyle: {},
+      scale: {
+        type: Number,
+        default: 3
+      },
+      moveEvent: {
+        type: [Object, MouseEvent],
+        default: null
+      },
+      leaveEvent: {
+        type: [Object, MouseEvent],
+        default: null
+      },
+      hideZoom: {
+        type: Boolean,
+        default: false
+      },
+      outShow: {
+        type: Boolean,
+        default: false
+      },
+      pointer: {
+        type: Boolean,
+        default: false
+      },
+      baseline: {
+        type: Boolean,
+        default: false
+      },
+      overlayStyle: {
+        type: String,
+        default: 'width:100%;height:100%'
+      },
+    },
+    data () {
+      return {
+        selector: {
+          width: this.width,
+          top: 0,
+          left: 0,
+          bgTop: 0,
+          bgLeft: 0,
+          rightBound: 0,
+          bottomBound: 0,
+          absoluteLeft: 0,
+          absoluteTop: 0
+        },
+        imgInfo: {},
+        $img: null,
+        screenWidth: document.body.clientWidth,
+        outShowInitTop: 0,
+        outShowTop: 0,
+        hideOutShow: true,
+        imgLoadedFlag: false,
+        hideSelector: false,
+        timer: null
+      };
+    },
+    watch: {
+      moveEvent (e) {
+        this.mouseMove(e);
+      },
+      leaveEvent (e) {
+        this.mouseLeave(e);
+      },
+      url (n) {
+        this.imgLoadedFlag = false;
+      },
+      width (n) {
+        this.initSelectorProperty(n);
+      },
+      screenWidth (val) {
+        if (!this.timer) {
+          this.screenWidth = val;
+          this.timer = setTimeout(() => {
+            this.imgLoaded();
+            clearTimeout(this.timer);
+            this.timer = null;
+          }, 400);
+        }
+      }
+    },
+    computed: {
+      addWidth () {
+        return !this.outShow ? (this.width / 2) * (1 - this.scale) : 0;
+      },
+      imgSelectorPosition () {
+        let { top, left } = this.selector;
+        return {
+          top: `${top}px`,
+          left: `${left}px`
+        };
+      },
+      imgSelectorSize () {
+        let width = this.selector.width;
+        return {
+          width: `${width}px`,
+          height: `${width}px`,
+          borderRadius: '50%'
+        };
+      },
+      imgSelectorStyle () {
+        return this.selectorStyle;
+      },
+      imgOutShowSize () {
+        let {
+          scale,
+          selector: { width }
+        } = this;
+        return {
+          width: `${width * scale}px`,
+          height: `${width * scale}px`
+        };
+      },
+      imgOutShowPosition () {
+        return {
+          top: `${this.outShowTop}px`,
+          right: `${-8}px`
+        };
+      },
+      imgBg () {
+        return {
+          backgroundImage: `url(${this.highUrl || this.url})`
+        };
+      },
+      imgBgSize () {
+        let {
+          scale,
+          imgInfo: { height, width }
+        } = this;
+        return {
+          backgroundSize: `${width * scale}px ${height * scale}px`
+        };
+      },
+      imgBgPosition () {
+        let { bgLeft, bgTop } = this.selector;
+        return {
+          backgroundPosition: `${bgLeft}px ${bgTop}px`
+        };
+      },
+    },
+    mounted () {
+      this.$img = this.$refs["img"];
+    },
+    methods: {
+      imgLoaded () {
+        let imgInfo = this.$img.getBoundingClientRect();
+        if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
+          this.imgInfo = imgInfo;
+          this.initSelectorProperty(this.width);
+          this.resetOutShowInitPosition();
+        }
+        if (!this.imgLoadedFlag) {
+          this.imgLoadedFlag = true;
+          this.$emit("created", imgInfo);
+        }
+      },
+      mouseMove (e) {
+        if (!this.hideZoom && this.imgLoadedFlag) {
+          this.imgLoaded();
+          const { pageX, pageY, clientY } = e;
+          const { scale, selector, outShow, addWidth, outShowAutoScroll } = this;
+          let { outShowInitTop } = this;
+          const scrollTop = pageY - clientY;
+          const { absoluteLeft, absoluteTop, rightBound, bottomBound } = selector;
+          const x = pageX - absoluteLeft; // 选择器的x坐标 相对于图片
+          const y = pageY - absoluteTop; // 选择器的y坐标
+          if (outShow) {
+            if (!outShowInitTop) {
+              outShowInitTop = this.outShowInitTop = scrollTop + this.imgInfo.top;
+            }
+            this.hideOutShow && (this.hideOutShow = false);
+            this.outShowTop =
+              scrollTop > outShowInitTop ? scrollTop - outShowInitTop : 0;
+          }
+          this.hideSelector && (this.hideSelector = false);
+          selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0;
+          selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0;
+          selector.bgLeft = addWidth - x * scale; // 选择器图片的坐标位置
+          selector.bgTop = addWidth - y * scale;
+        }
+      },
+      initSelectorProperty (selectorWidth) {
+        const selectorHalfWidth = selectorWidth / 2;
+        const selector = this.selector;
+        const { width, height, left, top } = this.imgInfo;
+        const { scrollLeft, scrollTop } = document.documentElement;
+        selector.width = selectorWidth;
+        selector.rightBound = width - selectorWidth;
+        selector.bottomBound = height - selectorWidth;
+        selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
+        selector.absoluteTop = top + selectorHalfWidth + scrollTop;
+      },
+      mouseLeave () {
+        this.hideSelector = true;
+        if (this.outShow) {
+          this.hideOutShow = true;
+        }
+      },
+      reset () {
+        Object.assign(this.selector, {
+          top: 0,
+          left: 0,
+          bgLeft: 0,
+          bgTop: 0
+        });
+        this.resetOutShowInitPosition();
+      },
+      resetOutShowInitPosition () {
+        this.outShowInitTop = 0;
+      },
+      imgerrorfun (e) {
+        // let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
+        // this.url = img
+        // e.target.src = img
+        // e.target.onerror= null
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .img-container {
+    position: relative;
+    max-width: 82%;
+    margin: 0 auto;
+  }
+  .overlay {
+    cursor: crosshair;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    z-index: 3;
+  }
+  .img-selector {
+    position: absolute;
+    cursor: crosshair;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background-repeat: no-repeat;
+    background-color: rgba(64, 64, 64, 0.6);
+  }
+  .img-selector.circle {
+    border-radius: 50%;
+  }
+  .img-out-show {
+    z-index: 5000;
+    position: absolute;
+    background-repeat: no-repeat;
+    -webkit-background-size: cover;
+    background-color: white;
+    transform: translate(100%, 0);
+  }
+  .img-selector-point {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: black;
+  }
+  .img-out-show.base-line::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: "";
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .img-out-show.base-line::before {
+    position: absolute;
+    box-sizing: border-box;
+    content: "";
+    height: 1px;
+    border: 1px dashed rgba(0, 0, 0, 0.36);
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+</style>
\ No newline at end of file

+<template>
+  <el-image-viewer
+    :on-close="closeViewer"
+    :url-list="urlList">
+  </el-image-viewer>
+</template>
+
+<script>
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  export default {
+    components: {
+      ElImageViewer,
+    },
+    props: {
+      urlList: {
+        type: Array,
+        default: function () {
+          return []
+        },
+      },
+    },
+    data () {
+      return {
+        wrapperElem: null,
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        let wrapper = document.getElementsByClassName(
+          'el-image-viewer__actions__inner'
+        )
+        let downImg = document.createElement('i')
+        downImg.setAttribute('class', 'el-icon-download')
+        wrapper[0].appendChild(downImg)
+        if (wrapper.length > 0) {
+          this.wrapperElem = wrapper[0]
+          this.wrapperElem.addEventListener('click', this.hideCusBtn)
+        }
+      })
+    },
+    methods: {
+      closeViewer () {
+        this.$emit('close-viewer')
+      },
+      hideCusBtn (e) {
+        let className = e.target.className
+        if (className === 'el-icon-download') {
+          let imgUrl = document.getElementsByClassName(
+            'el-image-viewer__canvas'
+          )[0].children[0].src
+          this.downloadImage(imgUrl)
+        }
+      },
+      downloadImage (imgUrl) {
+        let tmpArr = imgUrl.split('/')
+        let fileName = tmpArr[tmpArr.length - 1]
+        window.URL = window.URL || window.webkitURL
+        let xhr = new XMLHttpRequest()
+        xhr.open('get', imgUrl, true)
+        xhr.responseType = 'blob'
+        xhr.onload = function () {
+          if (this.status == 200) {
+            //得到一个blob对象
+            let blob = this.response
+            let fileUrl = window.URL.createObjectURL(blob)
+            let a = document.createElement('a')
+              ; (document.body || document.documentElement).appendChild(a)
+            a.href = fileUrl
+            if ('download' in a) {
+              a.download = fileName
+            } else {
+              a.setAttribute('download', fileName)
+            }
+            a.target = '_self'
+            a.click()
+            a.remove()
+          }
+        }
+        xhr.send()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-image-viewer__close {
+    color: #ffffff;
+  }
+</style>
\ No newline at end of file

+<?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

+<template>
+  <div class="rlPopup">
+    <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div class="next handle-btn" v-if="!isSingle" @click="next()">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+    <div class="img-list-wrap">
+      <div v-for="(img, i) in previewImg.imgList" :key="i">
+        <photo-zoom :url="img.url" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
+          overlayStyle="width: 100%;height: 563px;">
+        </photo-zoom>
+      </div>
+    </div>
+    <!--缩略图-->
+    <div class="thumb-wrap">
+      <div class="thumb-wrap-button">
+        <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
+        <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :limit="5" :auto-upload="false"
+          :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
+          <el-button icon="el-icon-upload" type="primary">上传</el-button>
+        </el-upload>
+        <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
+      </div>
+      <ul>
+        <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active:previewImg.index === index}"
+          @click="showCurrent(index)">
+          <img :src="img.url">
+        </li>
+      </ul>
+    </div>
+    <!-- 点开后的视图 -->
+    <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
+    </publicPicture>
+  </div>
+</template>
+<script>
+import PhotoZoom from '@/components/photo-zoom'
+import publicPicture from '@/components/publicPicture/index.vue'
+export default {
+  name: 'PreviewImage',
+  props: {
+    previewImg: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  components: {
+    PhotoZoom,
+    publicPicture
+  },
+  data () {
+    return {
+      transform: {
+        scale: 1,
+        degree: 0
+      },
+      // 缩略图
+      thumbnailImages: this.previewImg.imgList,
+      showViewer: false,
+      initialIndex: undefined,
+      allLi: [],
+    }
+  },
+  watch: {
+    previewImg: {
+      handler (newValue, oldValue) {
+        this.allLi = _.cloneDeep(newValue.imgList).map(item => item.url)
+      },
+      deep: true
+    }
+  },
+  computed: {
+    isSingle () {
+      return this.previewImg.imgList.length <= 1
+    },
+    isFirst () {
+      return this.previewImg.index === 0
+    },
+    isLast () {
+      return this.previewImg.index === this.previewImg.imgList.length - 1
+    }
+  },
+  methods: {
+    prev () {
+      if (this.isFirst) {
+        if (this.previewImg.selectedIndex - 1 >= 0) {
+          this.$parent.previewImg.index = 1
+        }
+        return
+      }
+      const len = this.previewImg.imgList.length
+      this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
+      this.reset()
+    },
+    next () {
+      if (this.isLast) {
+        if (this.previewImg.selectedIndex + 1 < this.previewImg.attachmentList.length) {
+          this.$parent.previewImg.index = 0
+        }
+        return
+      }
+      const len = this.previewImg.imgList.length
+      this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
+      this.reset()
+    },
+    reset () {
+      this.transform = {
+        scale: 1,
+        degree: 0
+      }
+    },
+    showCurrent (index) {
+      this.previewImg.index = index
+    },
+    closeViewer () {
+      this.showViewer = false
+    },
+    clickImage () {
+      this.showViewer = true
+    },
+    // 上传
+    beforeUpload (file) {
+      const isJPEG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      const isJPG = file.type === 'image/jpg'
+      const isGIF = file.type === 'image/gif'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
+        this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
+        this.loading = false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传图片大小不能超过 5MB!')
+        this.loading = false
+      }
+      this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
+      return this.imgHidden
+    },
+    async handleChange (file) {
+      let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
+    },
+    handleDelete () {
+      let _this = this
+      this.$confirm('此操作将永久该附件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        let bsmFileList = []
+        bsmFileList[0] = this.previewImg.imgList[this.previewImg.index].bsmFile
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 查看大图
+.rlPopup {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  height: 100%;
+
+  .handle-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-100%);
+    width: 66px;
+    height: 66px;
+    line-height: 75px;
+    color: #fff;
+    background-color: rgb(198, 198, 198);
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+
+    i {
+      font-size: 24px;
+    }
+  }
+
+  .prev {
+    left: 0%;
+  }
+
+  .next {
+    right: 0%;
+  }
+
+  .img-list-wrap {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: calc(100% - 80px);
+    align-items: center;
+    background: rgba(194, 190, 190, 0.1);
+
+    img {
+      display: block;
+      object-fit: scale-down;
+      transition: all 0.3s;
+      max-width: 100%;
+    }
+  }
+
+  .thumb-wrap {
+    &-button {
+      display: flex;
+      justify-content: center;
+
+      .fileUpdate {
+        margin: 0 10px;
+      }
+    }
+
+    li {
+      float: left;
+      width: 60px;
+      height: 45px;
+      border: solid 1px #ececec;
+      position: relative;
+      margin-right: 5px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      img {
+        max-width: 57px;
+        max-height: 42px;
+        display: block;
+        object-fit: scale-down;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .active {
+      border-color: #409eff;
+    }
+  }
+}
+</style>
+<style>
+.zoom-on-hover {
+  position: relative;
+  overflow: hidden;
+}
+
+.zoom-on-hover .normal {
+  width: 100%;
+}
+
+.zoom-on-hover .zoom {
+  position: absolute;
+  opacity: 0;
+  transform-origin: top left;
+}
+
+.zoom-on-hover.zoomed .zoom {
+  opacity: 1;
+}
+
+.zoom-on-hover.zoomed .normal {
+  opacity: 0;
+}
+</style>

@@ -44,10 +44,8 @@
         </el-row>
       </el-form>
     </div>
-    <!-- 表格 -->
-    <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table :page-size="pageData.size" :current-page.sync="pageData.currentPage" :total="tableData.total"
+      <lb-table :page-size="pageData.size" border :current-page.sync="pageData.currentPage" :total="tableData.total"
         @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
         :data="tableData.data">
       </lb-table>

 <template>
   <div>
-    <lb-table :column="InformationTable" border :key="key" :heightNum="390"  :pagination="false" heightNumSetting
-    :data="tableData">
+    <lb-table :column="InformationTable" :maxHeight="300" heightNumSetting :pagination="false" :data="tableData">
     </lb-table>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
-  /**注册组件*/
-  components: {},
+  computed: {
+    ...mapGetters(["dictData"]),
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
-      key: 0,
-      tableData:[{
-          xm: '12',
-          zjzl: '32',
-          zjh: '123',
-          fr: "213123",
-        }],
-      InformationTable:[
+      InformationTable: [
         {
           width: '60',
           renderHeader: (h, scope) => {
@@ -34,36 +34,58 @@ export default {
           label: '身份证读卡器',
           align: 'center',
           render: (h, scope) => {
-          return <el-button type="text" icon="el-icon-delete" onClick={() => { this.readClick(scope) }}>读取</el-button>
+            return <el-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
           }
         },
         {
-        prop: "xm",
+          prop: "sqrmc",
           label: "姓名/名称",
+          render: (h, scope) => {
+            return (
+              <el-input placeholder="姓名/名称" value={scope.row[scope.column.property]}
+                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+            )
+          }
         },
         {
-        prop: "zjzl",
+          prop: "dlrzjlx",
           label: "证件种类",
+          render: (h, scope) => {
+            return (
+              <el-select value={scope.row[scope.column.property]}>
+                {
+                  this.dictData && this.dictData['A30'].map(option => {
+                    return (
+                      <el-option label={option.dname} value={option.dcode}></el-option>
+                    )
+                  })
+                }
+              </el-select>
+            )
+          }
         },
         {
-        prop: "zjh",
+          prop: "dlrzjh",
           label: "证件号",
+          render: (h, scope) => {
+            return (
+              <el-input placeholder="证件号" value={scope.row[scope.column.property]}
+                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+            )
+          }
         },
         {
           prop: "fr",
           label: "法人",
-      },
-      {
-        label: '操作',
-        width: '80',
-        align: 'center',
-        fixed: 'right',
           render: (h, scope) => {
-          return <el-button type="text" icon="el-icon-delete" onClick={() => { vm.editClick(scope) }}>修改</el-button>
+            return (
+              <el-input placeholder="法人" value={scope.row[scope.column.property]}
+                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+            )
           }
         }
       ]
-    };
+    }
   },
   watch: {
     tableData: {
@@ -73,16 +95,15 @@ export default {
       deep: true
     }
   },
-  created(){},
-  methods:{
+  methods: {
     // 添加
     handleAdd () {
       this.tableData.push(
         {
-          xm: '22',
-          zjzl: '33',
-          zjh: '44',
-          fr: "55",
+          sqrmc: '',
+          dlrzjlx: '',
+          dlrzjh: '',
+          fr: ''
         }
       )
       this.key++
@@ -92,12 +113,13 @@ export default {
       this.tableData.splice(index, 1)
     },
     // 身份证读取
-    readClick(){},
+    readClick () { },
 
     // 修改
-    editClick(){},
+    editClick () { },
   }
 }
 </script>
 <style scoped lang='scss'>
+
 </style>
\ No newline at end of file

 <template>
   <div class="clxx">
     <div class="left">
-      <div
-        v-for="item in menuList"
-        :key="item.id"
-        :class="['item', checkedId == item.id ? 'checked' : '']"
-        @click="menuClick(item)"
-      >
+      <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']"
+        @click="menuClick(item)">
         {{ item.label }}
       </div>
     </div>
@@ -14,78 +10,12 @@
       <!-- 材料目录明细 -->
       <div class="clmlmx-box" v-if="checkedId == '1'">
         <div class="title">申请材料目录</div>
-        <lb-table
-          :column="column"
-          border
-          :key="key"
-          heightNumSetting
-          :pagination="false"
-          :data="tableData"
-        >
+        <lb-table :column="column" :key="key" :heightNum="210" :pagination="false" :data="tableData">
         </lb-table>
       </div>
-
       <!-- 材料预览 -->
-      <div class="clyl-box" v-if="checkedId == '2'">
-        <div class="menu-tree">
-          <div class="item">
-            材料目录
-            <i :class="iclass" @click="iconClick()"></i>
-            <el-collapse-transition>
-              <div v-show="menuOpen">
-                <div
-                  v-for="item in tableData"
-                  :key="item.bsmSj"
-                  :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
-                  @click="treeClick(item)"
-                >
-                  {{ item.sjmc }}
-                </div>
-              </div>
-            </el-collapse-transition>
-          </div>
-        </div>
-        <div class="clyl-img">
-          <div class="header">
-            <div class="title" v-if="titleNum == 0">
-              {{ title }}
-            </div>
-            <div class="title" v-else>
-              {{ title }} ({{ titleYs }} / {{ titleNum }})
-            </div>
-            <div class="i-group">
-              <i class="el-icon-zoom-in"></i>
-              <i class="el-icon-zoom-out"></i>
-              <i class="el-icon-refresh-right"></i>
-              <i class="el-icon-refresh-left"></i>
-              <i class="el-icon-document"></i>
-            </div>
-          </div>
-          <div class="prev" @click="imgPrev()" v-if="imgList.length > 0">
-            <i class="el-icon-arrow-left"></i>
-          </div>
-          <div class="img-box">
-            <img :src="showImg.imgUrl" alt="" />
-          </div>
-          <div class="next" @click="imgNext()" v-if="imgList.length > 0">
-            <i class="el-icon-arrow-right"></i>
-          </div>
-          <div class="img-list">
-            <div class="item" v-for="(item, index) in imgList" :key="index">
-              <img
-                :class="showImg.id == item.id ? 'active' : ''"
-                :src="item.imgUrl"
-                alt=""
-                @click="imgClick(item, index)"
-              />
-            </div>
-          </div>
-          <div class="btn-group">
-            <el-button>扫描</el-button>
-            <el-button icon="el-icon-upload2">上传文件</el-button>
-            <el-button icon="el-icon-delete">删除</el-button>
-          </div>
-        </div>
+      <div class="clyl-box" v-else>
+        <image-preview :previewImg="previewImg" />
       </div>
     </div>
     <clxxAddDialog v-model="isDialog" />
@@ -94,13 +24,11 @@
 <script>
 import { mapGetters } from "vuex";
 import clxxAddDialog from "./clxxAddDialog.vue";
-import { upward, down } from "@/utils/operation";
+import imagePreview from '@/views/components/imagePreview.vue'
 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
-import filter from "@/utils/filter.js";
-
 export default {
-  components: { clxxAddDialog },
-  data() {
+  components: { clxxAddDialog, imagePreview },
+  data () {
     return {
       isDialog: false,
       menuList: [
@@ -122,9 +50,8 @@ export default {
               <i
                 class="el-icon-plus pointer"
                 onClick={() => {
-                  this.handleAdd();
+                  this.handleAdd()
                 }}
-                style="color:#409EFF"
               ></i>
             );
           },
@@ -243,39 +170,40 @@ export default {
       ],
       key: 0,
       tableData: [],
-      menuOpen: true,
-      treeCheckId: "",
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      title: "",
-      titleYs: 1,
-      titleNum: 0,
-      imgList:[],
-      showImg:{},
-      iclass: "itemIcon el-icon-caret-bottom",
+      previewImg: {
+        bsmCatalog: '',
+        index: 0,
+        selectedIndex: 0,
+        imgList: [
+          {
+            url: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
+          },
+          {
+            url: 'https://img1.baidu.com/it/u=2383300938,4241539174&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=500'
+          }
+        ],
+      }
     };
   },
   computed: {
     ...mapGetters(["dictData"]),
   },
-  mounted() {
+  mounted () {
     if (this.$parent.index == 1) {
       this.clmlmxInit();
     }
   },
   methods: {
     // 左侧菜单点击
-    menuClick(item) {
+    menuClick (item) {
       this.checkedId = item.id;
     },
     // 添加材料目录
-    handleAdd() {
+    handleAdd () {
       this.isDialog = true;
     },
     // 上移
-    moveUpward(index, row) {
+    moveUpward (index, row) {
       let obj = {
         xh: row.xh,
         bsmSlsq: row.bsmSlsq,
@@ -288,7 +216,7 @@ export default {
       });
     },
     // 下移
-    moveDown(index, row) {
+    moveDown (index, row) {
       let obj = {
         xh: row.xh,
         bsmSlsq: row.bsmSlsq,
@@ -301,7 +229,7 @@ export default {
       });
     },
     // 材料目录明细初始化
-    clmlmxInit() {
+    clmlmxInit () {
       this.id = this.$parent.$parent.$parent.id;
       this.unitData = this.$parent.$parent.$parent.unitData;
       var formdata = new FormData();
@@ -318,7 +246,7 @@ export default {
       });
     },
     // 新增弹窗保存
-    addSave(data) {
+    addSave (data) {
       let maxXh = 0;
       this.tableData.forEach((item) => {
         if (item.xh > maxXh) {
@@ -346,7 +274,7 @@ export default {
       });
     },
     // 材料目录删除
-    handleDelete(index, row) {
+    handleDelete (index, row) {
       clmlDelete({ sjBsm: row.bsmSj }).then((res) => {
         if (res.code == 200) {
           this.$message({
@@ -359,7 +287,7 @@ export default {
       });
     },
     // 材料目录关闭收起
-    iconClick() {
+    iconClick () {
       this.menuOpen = !this.menuOpen;
       if (this.menuOpen) {
         this.iclass = "itemIcon el-icon-caret-bottom close";
@@ -368,27 +296,19 @@ export default {
       }
     },
     // 材料目录点击选中
-    treeClick(item) {
+    treeClick (item) {
       this.treeCheckId = item.bsmSj;
       this.title = item.sjmc;
       this.titleYs = 1;
       this.titleNum = item.children.length;
     },
     // 小图片点击
-    imgClick(item, index) {
+    imgClick (item, index) {
       this.showImg = item;
       this.titleYs = index + 1;
     },
-    // 图片上一张
-    imgPrev(){
-
-    },
-    // 图片下一张
-    imgNext(){
-
-    },
     // 字典
-    dicStatus(val, code) {
+    dicStatus (val, code) {
       let data = this.$store.getters.dictData[code],
         name = "暂无";
       if (data) {
@@ -404,52 +324,48 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
+@import "~@/styles/mixin.scss";
+
+.active {
+  background: $light-blue !important;
+  color: #fff;
+}
+
 .clxx {
   width: 100%;
-  height: 100%;
   display: flex;
   padding-left: 15px;
+  height: calc(100vh - 150px);
+
   .left {
-    width: 52px;
-    height: 780px;
-    background: #f3f4f7;
-    border-radius: 1px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
     .item {
       width: 42px;
-      height: 50%;
-      margin: 0 0 auto auto;
-      writing-mode: tb;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      color: #7a7a7a;
+      height: 49%;
+      @include flex-center;
+      background-color: #E4E7ED;
+      border-bottom-right-radius: 10px;
+      padding: 15px;
       cursor: pointer;
-      border-right: 1px solid #d9d9d9;
-    }
-    .item.checked {
-      background: #ffffff;
-      border-top: 1px solid #d9d9d9;
-      border-bottom: 1px solid #d9d9d9;
-      border-left: 2px solid #2b7ff1;
-      border-right: none;
-      font-size: 18px;
-      color: #4a4a4a;
+      transition: all 0.3s;
+
+      &:hover {
+        @extend .active;
       }
     }
+  }
+
   .right {
-    width: calc(100% - 80px);
-    height: 780px;
-    padding: 0 30px;
+    width: 100%;
+    height: 100%;
+    padding: 0 15px;
 
     .clmlmx-box {
-      width: 100%;
-      height: 530px;
       margin: 0 auto;
-      border: 1px solid #d9d9d9;
-      background: #f3f4f7;
-      padding: 20px;
+
       .title {
         text-align: center;
         height: 60px;
@@ -472,12 +388,14 @@ export default {
         margin-right: 30px;
         border-right: 1px dotted #d9d9d9;
         padding: 0 24px;
+
         .item {
           height: 60px;
           line-height: 60px;
           border-bottom: 1px solid #e8e8e8;
           font-size: 16px;
           color: #4a4a4a;
+
           .itemIcon {
             float: right;
             line-height: 60px;
@@ -494,6 +412,7 @@ export default {
             0% {
               transform: rotate(180deg);
             }
+
             100% {
               transform: rotate(-0deg);
             }
@@ -503,10 +422,12 @@ export default {
             animation: open 0.5s;
             animation-fill-mode: both;
           }
+
           .close {
             animation: close 0.5s;
             animation-fill-mode: both;
           }
+
           .child {
             height: 60px;
             line-height: 60px;
@@ -515,6 +436,7 @@ export default {
             color: #6b6b6b;
             cursor: pointer;
           }
+
           .checked {
             border-radius: 6px;
             border: 1px solid #4083f9;
@@ -524,91 +446,10 @@ export default {
 
       .clyl-img {
         width: 75%;
-        height: 800px;
+        height: 100%;
         background: #f3f4f7;
         margin: 0 auto;
         position: relative;
-        .header {
-          height: 54px;
-          line-height: 52px;
-          background: #eceef2;
-          border: 1px solid #ededed;
-          padding: 0 0 0 30px;
-          .title {
-            font-size: 13px;
-            display: inline-block;
-          }
-          .i-group {
-            float: right;
-            height: 100%;
-            i {
-              width: 50px;
-              height: 52px;
-              cursor: pointer;
-            }
-          }
-        }
-        .prev,
-        .next {
-          width: 60px;
-          height: 60px;
-          line-height: 60px;
-          text-align: center;
-          font-size: 40px;
-          border-radius: 6px;
-          cursor: pointer;
-          position: absolute;
-        }
-        .prev:hover,
-        .next:hover{
-          background: #7a7a7a;
-        }
-
-        .prev {
-          top: 40%;
-          left: 10px;
-        }
-        .next {
-          top: 40%;
-          right: 10px;
-        }
-        .img-box {
-          width: 800px;
-          height: calc(100% - 214px);
-          padding: 5px;
-          text-align: center;
-          margin: 0 auto;
-          img {
-            max-height: 100%;
-            max-width: 100%;
-          }
-        }
-        .img-list {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          background: #eceef2;
-          text-align: center;
-          .item {
-            display: inline-block;
-            margin: 10px 5px;
-            img {
-              width: 60px;
-              height: 60px;
-              cursor: pointer;
-            }
-            .active {
-              border: 1px solid #fff;
-            }
-          }
-        }
-        .btn-group {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          background: #fff;
-          text-align: center;
-        }
       }
     }
   }

 <template>
   <div class="slxx">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="ruleForm"
-      :label-position="flagTop"
-      :inline="flag"
-      label-width="140px"
-    >
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag"
+      label-width="140px">
+      <div class="slxx_con">
         <div class="slxx_title">受理信息</div>
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="业务号：" prop="ywh">
-            <el-input
-              disabled
-              v-model="ruleForm.ywh"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.ywh" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="受理人员：" prop="slry">
-            <el-input
-              disabled
-              v-model="ruleForm.slry"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.slry" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="受理时间：" prop="slsj">
-            <el-input
-              disabled
-              v-model="ruleForm.slsj"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.slsj" class="width300px"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="权利类型：" prop="qllx">
-            <el-select
-              disabled
-              v-model="ruleForm.qllx"
-              class="width300px"
-              filterable
-              clearable
-              placeholder="请选择权利类型"
-            >
-              <el-option
-                v-for="item in dictData['A8']"
-                :key="item.dcode"
-                :label="item.dname"
-                :value="item.dcode"
-              >
+              <el-select disabled v-model="ruleForm.qllx" class="width300px" filterable clearable placeholder="请选择权利类型">
+                <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="登记类型：" prop="djlx">
-            <el-select
-              disabled
-              v-model="ruleForm.djlx"
-              class="width300px"
-              filterable
-              clearable
-              placeholder="请选择登记类型"
-            >
-              <el-option
-                v-for="item in dictData['A21']"
-                :key="item.dcode"
-                :label="item.dname"
-                :value="item.dcode"
-              >
+              <el-select disabled v-model="ruleForm.djlx" class="width300px" filterable clearable placeholder="请选择登记类型">
+                <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="登记情形：" prop="djqx">
-            <el-input
-              disabled
-              class="width300px"
-              v-model="ruleForm.djqxmc"
-            ></el-input>
+              <el-input disabled class="width300px" v-model="ruleForm.djqxmc"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -93,67 +48,36 @@
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="宗地代码：" prop="zddm">
-            <el-input
-              disabled
-              v-model="ruleForm.zddm"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.zddm" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="不动产单元号：" prop="bdcdyh">
-            <el-input
-              disabled
-              v-model="ruleForm.bdcdyh"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.bdcdyh" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="权利性质：" prop="qlxzmc">
-            <el-input
-              disabled
-              v-model="ruleForm.qlxzmc"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.qlxzmc" class="width300px"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="宗地面积：" prop="zdmj">
-            <el-input
-              disabled
-              v-model="ruleForm.zdmj"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.zdmj" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="土地用途：" prop="tdyt">
-            <el-input
-              disabled
-              v-model="ruleForm.tdyt"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.tdyt" class="width300px"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="权利设定方式：" prop="qlsdfs">
-            <el-select
-              disabled
-              v-model="ruleForm.qlsdfs"
-              filterable
-              class="width300px"
-              clearable
-              placeholder="请选择权利设定方式"
-            >
-              <el-option
-                v-for="item in qlsdfsOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+              <el-select disabled v-model="ruleForm.qlsdfs" filterable class="width300px" clearable
+                placeholder="请选择权利设定方式">
+                <el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
@@ -162,42 +86,26 @@
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="取得价格：" prop="qdjg">
-            <el-input
-              disabled
-              v-model="ruleForm.qdjg"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.qdjg" class="width300px"></el-input>
             </el-form-item>
           </el-col>
 
           <el-col :span="16">
             <el-form-item label="坐落：" prop="zl">
-            <el-input
-              disabled
-              class="width300px"
-              v-model="ruleForm.zl"
-            ></el-input>
+              <el-input disabled class="width300px" v-model="ruleForm.zl"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="使用期限：" prop="tdsyqx">
-            <el-input
-              disabled
-              v-model="ruleForm.tdsyqx"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.tdsyqx" class="width300px"></el-input>
             </el-form-item>
           </el-col>
 
           <el-col :span="16">
             <el-form-item label="使用权起止时间：" prop="qssj">
-            <el-input
-              disabled
-              v-model="ruleForm.syqqzsj"
-              class="width300px"
-            ></el-input>
+              <el-input disabled v-model="ruleForm.syqqzsj" class="width300px"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -220,27 +128,22 @@
             </el-form-item>
           </el-col>
           <el-col>
-          <InformationTable />
+            <InformationTable :tableData="ruleForm.qlrxx" />
           </el-col>
         </el-row>
         <div class="slxx_title">登记原因</div>
         <el-row :gutter="10">
           <el-col>
             <el-form-item label="登记原因：" prop="djyy">
-            <el-input
-              class="textArea"
-              type="textarea"
-              v-model="ruleForm.djyy"
-            ></el-input>
+              <el-input class="textArea" type="textarea" v-model="ruleForm.djyy"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
+      </div>
       <el-row>
-        <el-col>
         <el-form-item class="btn">
           <el-button type="primary" @click="onSubmit">保存</el-button>
         </el-form-item>
-        </el-col>
       </el-row>
     </el-form>
   </div>
@@ -250,7 +153,6 @@ import InformationTable from "./InformationTable";
 import { Init } from "@/api/fqsq.js";
 import { mapGetters } from "vuex";
 export default {
-  /**注册组件*/
   components: { InformationTable },
   props: {
     flag: {
@@ -261,7 +163,7 @@ export default {
   computed: {
     ...mapGetters(["dictData"]),
   },
-  data() {
+  data () {
     return {
       disabled: true,
       flagTop: this.flag ? "top" : "",
@@ -277,6 +179,7 @@ export default {
         zddm: "",
         bdcdyh: "",
         qlxzmc: "",
+        qlrxx: [],
         zdmj: "",
         zl: "",
         tdyt: "",
@@ -289,35 +192,22 @@ export default {
         gyfs: "",
       },
       rules: {
-        // ywh: [
-        //   { required: true, message: '业务号', trigger: 'blur' }
-        // ],
-      },
-    };
+      }
+    }
   },
   methods: {
-    list(bsmSldy) {
+    list (bsmSldy) {
       var formdata = new FormData();
       //可以通过append()方法来追加数据
       formdata.append("bsmSldy", bsmSldy);
       Init(formdata).then((res) => {
-        if (res.code === 200) {
-          console.log(res, 1111);
-          this.ruleForm = res.result;
-          this.ruleForm.zddm = res.result.zdjbxxdatas.zddm;
-          this.ruleForm.zdmj = res.result.zdjbxxdatas.zdmj;
-          this.ruleForm.zl = res.result.qlxxdatas.zl;
-          this.ruleForm.tdyt = res.result.qlxxdatas.ytmc;
-          this.ruleForm.qlsdfs = res.result.zdjbxxdatas.qlsdfsmc;
-          this.ruleForm.qdjg = res.result.jsydsyqdatas.qdjg;
-          this.ruleForm.fj = res.result.jsydsyqdatas.fj;
-          this.ruleForm.syqqzsj = res.result.jsydsyqdatas.syqqzsj;
-          this.ruleForm.tdsyqx = res.result.jsydsyqdatas.tdsyqx;
-          this.ruleForm.qlxzmc = res.result.zdjbxxdatas.qlxzmc;
+        if (res.code === 200 && res.result) {
+          this.ruleForm = { ...res.result, ...res.result.zdjbxxdatas, ...res.result.qlxxdatas, ...res.result.jsydsyqdatas }
+          console.log(this.ruleForm, 'this.ruleForm');
         }
-      });
+      })
     },
-    onSubmit() {},
+    onSubmit () { },
   },
 };
 </script>
@@ -325,23 +215,34 @@ export default {
 @import "~@/styles/public.scss";
 
 .slxx {
-  padding-left: 15px;
+  box-sizing: border-box;
+  padding-right: 15px;
+}
+
+.slxx_con {
+  height: calc(100vh - 190px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.submit_btn {
+  height: 50px;
 }
 
 .slxx_title {
   border-bottom: 1px solid $borderColor;
   padding-left: 10px;
-  padding-bottom: 20px;
+  padding-bottom: 15px;
   margin-bottom: 15px;
-  margin-top: 30px;
+  margin-top: 5px;
   font-size: 18px;
-  font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #4a4a4a;
 }
 
 .btn {
   text-align: center;
+  padding-top: 5px;
 }
 
 .textArea {
@@ -350,15 +251,6 @@ export default {
   }
 }
 
-// .Inputclass {
-//   width: 100%;
-// }
-
-// /deep/.el-select,
-// /deep/.el-date-editor {
-//   width: 100%;
-// }
-
 /deep/.el-form-item__label {
   padding-bottom: 0px;
 }

@@ -6,10 +6,10 @@
       <div class="from-clues-header">
         <el-form :model="queryForm" ref="queryForm" label-width="120px">
           <el-form-item label="下一环节名称:">
-            代码审查
+            {{this.tableData.taskName}}
           </el-form-item>
           <el-form-item label="下一环节办理人:">
-            赵小千
+            {{this.usernames}}
           </el-form-item>
         
         </el-form>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-   import { completeTask } from "@/api/fqsq.js"
+import { completeTask ,getNextLinkInfo} from "@/api/fqsq.js"
 export default {
   components: {
   },
@@ -29,9 +29,21 @@ export default {
   },
   data () {
     return {
+      tableData: {},
+      usernames: '',
     }
   },
   methods: {
+    tablelistFn(){            
+      getNextLinkInfo(this.queryForm).then(res => {
+        if (res.code === 200) {
+            this.tableData = res.result
+            if(res.result.usernames){
+              this.usernames = String(res.result.usernames)
+            }
+        }
+      })
+    },
     submitForm () {
       completeTask(this.queryForm).then(res => {
         console.log(res)

@@ -2,14 +2,13 @@
   <div class='fqsq'>
     <div class="fqsq-header">
       <ul>
-        <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
-          :key="index">
+        <li @click="operation(index, item)" v-for="(item, index) in headerleftList" :key="index">
           <svg-icon :icon-class="item.icon" />
           <span class="iconName">{{ item.name }}</span>
         </li>
       </ul>
       <ul>
-        <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(-4)" :key="index">
+        <li @click="operation(index, item)" v-for="(item, index) in headerRightList" :key="index">
           <svg-icon class="icon" :icon-class="item.icon" />
           <span class="iconName">{{ item.name }}</span>
         </li>
@@ -28,7 +27,10 @@
         <ul v-if='this.isShowdrawer'>
           <p class="title">受理单元列表({{unitData.length}})</p>
           <div v-for='(item,index) in unitData' :key='index'>
-            <li @click='unitClick(item)'><p>{{item.bdcdyh}}</p><p>{{item.zl}}</p></li>
+            <li @click='unitClick(item)'>
+              <p>{{item.bdcdyh}}</p>
+              <p>{{item.zl}}</p>
+            </li>
             <div class="xian"></div>
           </div>
         </ul>
@@ -39,23 +41,23 @@
           <div class="splitScreen"></div>
         </div>
         <el-tabs v-model="activeName" @tab-click='activeClick'>
-          <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
-            <div class="splitScreen-con" v-if='index == 0'>
-              <component ref='slxx' :is="editItem" :flag="flag" :key="key" />
-            </div>
+          <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
+            <div class="splitScreen-con">
+              <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" />
               <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" />
               <component :is="editItem" v-else :key="key" />
+            </div>
           </el-tab-pane>
         </el-tabs>
       </div>
     </div>
-    <zc v-model="zcDialog" :queryForm='queryForm' />
+    <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
     <thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' />
     <zsylDialog v-model='zsylFlag' />
   </div>
 </template>
 <script>
-import { leftMenu } from "@/api/fqsq.js"
+import { leftMenu, stepExpandInfo } from "@/api/fqsq.js"
 import zc from "./components/zc.vue"
 import thDialog from "./components/th.vue"
 import zsylDialog from './components/zsyl'
@@ -64,106 +66,61 @@ export default {
   components: { zc, thDialog, zsylDialog },
   data () {
     return {
-      zsylFlag:false,
-      zcDialog:false,
-      thflag:false,
-      queryForm:{
-        bsmSlsq:"",
-        bestepid:"",
+      zsylFlag: false,
+      zcDialog: false,
+      thflag: false,
+      queryForm: {
+        bsmSlsq: "",
+        bestepid: "",
       },
       isShowdrawer: true,
       key: 0,
       flag: false,
-      headerleftList: [
-        {
-          name: '图形定位',
-          icon: 'fqsq1'
-        },
-        {
-          name: '登记簿',
-          icon: 'fqsq2'
-        },
-        {
-          name: '证书预览',
-          icon: 'fqsq3'
-        },
-        {
-          name: '流程图',
-          icon: 'fqsq4'
-        },
-        {
-          name: '材料分屏',
-          icon: 'fqsq5'
-        },
-        {
-          name: '材料导入',
-          icon: 'fqsq6'
-        },
-        {
-          name: '打印申请书',
-          icon: 'fqsq7'
-        },
+      headerleftList: [],
+      headerRightList: [
         {
           name: '登簿',
-          icon: 'fqsq2'
+          icon: 'fqsq2',
+          value: 'db'
         },
         {
           name: '退回',
-          icon: 'fqsq8'
+          icon: 'fqsq8',
+          value: 'th'
         },
         {
           name: '转出',
-          icon: 'fqsq9'
+          icon: 'fqsq9',
+          value: 'zc'
         },
         {
           name: '退出',
-          icon: ''
+          icon: 'del',
+          value: 'tc'
         }
       ],
-      activeName: '1',
-      tabList1: [
-        {
-          name: '受理申请',
-        },
-        {
-          name: '材料信息',
-        },
-        {
-          name: '审批意见',
-        },
-        {
-          name: '宗地基本信息',
-        },
-        {
-          name: '权利信息',
-        },
-      ],
+      activeName: 'slxx',
+      tabList1: [],
       tabList: [],
       editItem: '',
       issplitScreen: false,
       unitData: [],
-      taskId:"",
-      bsmBusiness:"",
-      id:"",
+      taskId: "",
+      bsmBusiness: "",
+      id: "",
     };
   },
   watch: {
     activeName: {
       handler (newName, oldName) {
-        console.log(newName, 'newName');
-        let itemObj = { '1': 'slxx', '2': 'clxx', '3': 'spyj' }
-        this.editItem = this.loadView(itemObj[newName])
+        this.editItem = this.loadView(newName)
       },
       immediate: true
     }
   },
-  created () {
-
-    this.tabList = [...this.tabList1]
-
-  },
   mounted () {
     if (this.$route.query.bsmSlsq) {
+      this.expandInfo(this.$route.query.bsmSlsq,this.$route.query.bestepid);
       this.list(this.$route.query.bsmSlsq)
       this.queryForm.bsmSlsq = this.$route.query.bsmSlsq
       this.queryForm.bestepid = this.$route.query.bestepid
@@ -187,8 +144,22 @@ export default {
         }
       })
     },
-    activeClick(tab,event){
-      if(tab.name=='1'){
+    //获取环节扩展信息
+    expandInfo (bsmSlsq,bestepid) {
+      let that = this
+      var formdata = new FormData();
+      formdata.append("bsmSlsq", bsmSlsq);
+      formdata.append("bestepid", bestepid);
+      stepExpandInfo(formdata).then(res => {
+        if (res.code === 200) {
+          this.tabList1 = [...res.result.form]
+          this.tabList = res.result.form;
+          this.headerleftList = res.result.button
+        }
+      })
+    },
+    activeClick (tab, event) {
+      if (tab.name == 'slxx') {
         this.list(this.id)
       }
     },
@@ -201,10 +172,10 @@ export default {
       })
     },
     operation (index, item) {
-      if(item.icon == 'fqsq3'){
+      if (item.value == 'zsyl') {
         this.zsylFlag = true
 
-      }  else if (item.icon == 'fqsq5') {
+      } else if (item.value == 'clfp') {
         this.key++
         this.issplitScreen = !this.issplitScreen
         this.flag = !this.flag
@@ -213,18 +184,18 @@ export default {
         } else {
           this.tabList = [...this.tabList1]
         }
-      } else if (item.icon == 'fqsq8') {
+      } else if (item.value == 'th') {
         this.thflag = true
         this.$nextTick(() => {
           this.$refs.thdialogRef.tablelistFn()
         })
       }
-      else if (item.icon == 'fqsq9') {
+      else if (item.value == 'zc') {
         this.zcDialog = true
+        this.$refs.zcDialogRef.tablelistFn()
+      } else if (item.value === 'tc') {
+        window.close()
       }
-      // if (index == 3) {
-      //   window.close()
-      // }
     },
     loadView (view) {
       return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
@@ -253,6 +224,15 @@ export default {
   font-size: 12px;
 }
 
+/deep/.el-tabs__content {
+  height: calc(100vh - 135px) !important;
+}
+
+.splitScreen-con {
+  padding: 0 15px;
+  box-sizing: border-box;
+}
+
 .fqsq {
   width: 100%;
   height: 100%;
@@ -343,6 +323,8 @@ export default {
     .tabsList-left {
       border-right: 1px solid #EBEEF5;
       position: relative;
+      width: 250px;
+      box-sizing: border-box;
 
       ul {
         position: relative;
@@ -392,8 +374,6 @@ export default {
 
   /deep/.el-tabs {
     width: 100%;
-    height: 90vh;
-    overflow-y: scroll;
   }
 }
 </style>
\ No newline at end of file