Skip to content

bdc / bdcdj-web

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

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

2 parents eabb9c85 e4e913ac
Inline Side-by-side
Showing 13 changed files with 1158 additions and 656 deletions
......@@ -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>
<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) => {
return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
......@@ -30,40 +30,62 @@ export default {
)
}
},
{
label: '身份证读卡器',
align: 'center',
render: (h, scope) => {
return <el-button type="text" icon="el-icon-delete" onClick={() => { this.readClick(scope) }}>读取</el-button>
}
},
{
prop: "xm",
label: "姓名/名称",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
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>
{
label: '身份证读卡器',
align: 'center',
render: (h, scope) => {
return <el-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
}
},
{
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: "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: "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: "法人",
render: (h, scope) => {
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"
>
<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-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-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-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-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-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-form-item>
</el-col>
</el-row>
<div class="slxx_title">不动产单元情况</div>
<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-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-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-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-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-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-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<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-form-item>
</el-col>
<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-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-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-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-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-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-form-item>
</el-col>
</el-row>
<div class="slxx_title">不动产单元情况</div>
<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-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-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-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-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-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-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<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-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-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-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-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-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-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col>
<el-form-item label="附记：" prop="fj">
<el-input type="textarea" v-model="ruleForm.fj"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="slxx_title">权利人信息</div>
<el-row :gutter="10">
<el-col>
<el-form-item label="共有方式：">
<el-radio-group disabled v-model="ruleForm.gyfs">
<el-radio label="单独所有"></el-radio>
<el-radio label="共同共有"></el-radio>
<el-radio label="按份所有"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<InformationTable />
</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-form-item>
</el-col>
</el-row>
<el-col :span="16">
<el-form-item label="使用权起止时间：" prop="qssj">
<el-input disabled v-model="ruleForm.syqqzsj" class="width300px"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col>
<el-form-item label="附记：" prop="fj">
<el-input type="textarea" v-model="ruleForm.fj"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="slxx_title">权利人信息</div>
<el-row :gutter="10">
<el-col>
<el-form-item label="共有方式：">
<el-radio-group disabled v-model="ruleForm.gyfs">
<el-radio label="单独所有"></el-radio>
<el-radio label="共同共有"></el-radio>
<el-radio label="按份所有"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<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-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-form-item class="btn">
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</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" />
<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>
<component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" />
<component :is="editItem" v-else :key="key" />
</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'){
this.zsylFlag = true
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
......