d85a489d by 任超

style:材料预览

1 parent c9f6c360
......@@ -87,33 +87,19 @@ export default {
},
methods: {
prev () {
if (this.isFirst) {
if (this.previewImg.selectedIndex - 1 >= 0) {
this.$parent.previewImg.index = 1
}
return
}
let len = this.previewImg.imgList.length
if (this.isFirst || len == 0) {
this.$emit('prevPriview')
} else {
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
} else {
console.log(this.$parent.previewImg.selectedIndex);
}
let len = this.previewImg.imgList.length
if (this.isLast || len == 0) {
this.$emit('nextPriview')
} else {
this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
this.reset()
},
reset () {
this.transform = {
scale: 1,
degree: 0
}
},
showCurrent (index) {
......
......@@ -19,8 +19,8 @@
<div class="item">
材料目录({{tableData.length}})
<div>
<div v-for="item in tableData" :key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
<div v-for="(item,index) in tableData" :key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
<span v-if="item.isrequired==1" class="required">必选</span>
{{ item.sjmc }}
<span class="cl_number">({{item.children.length}})</span>
......@@ -28,7 +28,8 @@
</div>
</div>
</div>
<image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" />
<image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
@prevPriview="prevPriview" />
</div>
</div>
<clxxAddDialog v-model="isDialog" />
......@@ -56,6 +57,7 @@ export default {
],
iclass: "",
// 材料目录选中
treeCheckIndex: 0,
treeCheckId: "",
checkedId: "1",
column: [
......@@ -205,6 +207,25 @@ export default {
this.clmlInitList()
},
methods: {
// 自动预览
nextPriview () {
if (this.treeCheckIndex < this.tableData.length) {
this.treeCheckIndex++
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
this.previewImg.index = 0
this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
}
},
prevPriview () {
if (this.treeCheckIndex >= 1) {
this.treeCheckIndex--
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
this.previewImg.index = this.previewImg.imgList.length
this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
}
},
// 材料目录明细初始化
clmlInitList () {
return new Promise(resolve => {
......@@ -228,6 +249,7 @@ export default {
})
},
updateList (val) {
let that = this
if (val != null) { //删除最后一张图片时 val=null
this.tableData.forEach(item => {
if (item.bsmSj === val.bsmSj) {
......@@ -240,9 +262,10 @@ export default {
}
} else {
this.previewImg.imgList = []
this.tableData.forEach(item => {
this.tableData.forEach((item, index) => {
if (this.treeCheckId == item.bsmSj) {
item.children = []
that.treeCheckIndex = index
}
})
}
......@@ -343,9 +366,10 @@ export default {
})
},
// 材料目录点击选中
treeClick (item) {
treeClick (item, index) {
this.previewImg.index = 0
this.treeCheckId = item.bsmSj
this.treeCheckId = item?.bsmSj
this.treeCheckIndex = index
this.previewImg.imgList = item?.children
this.previewImg.bsmSj = item?.bsmSj
},
......@@ -469,8 +493,9 @@ export default {
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
line-height: 24px;
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
}
.child:hover {
......