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

@@ -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