Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
7d54a17e by 任超
Options

style:材料上传

1 parent 9285eb55
Inline Side-by-side
Showing 10 changed files with 135 additions and 216 deletions
......@@ -59,7 +59,7 @@ export default {
},
heightNum: {
type: Number,
default: 275,
default: 265,
},
maxHeight: {
type: Number,
......
......@@ -19,7 +19,7 @@ export default {
<style lang="scss" scoped>
.hasTagsView {
.app-main {
height: calc(100% - 48px);
height: calc(100% - 41px);
overflow-x: auto;
padding: 5px;
box-sizing: border-box;
......
......@@ -206,15 +206,5 @@ export default {
}
}
}
/*2.隐藏滚动条，太丑了*/
.el-drawer__container ::-webkit-scrollbar {
display: none;
}
.el-form-item--small .el-form-item__label {
width: 80px !important;
}
}
</style>
......
......@@ -9,32 +9,32 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing
export default {
name: 'ScrollPane',
data() {
data () {
return {
left: 0
}
},
computed: {
scrollWrapper() {
scrollWrapper () {
return this.$refs.scrollContainer.$refs.wrap
}
},
mounted() {
mounted () {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
},
beforeDestroy() {
beforeDestroy () {
this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
},
methods: {
handleScroll(e) {
handleScroll (e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
emitScroll() {
emitScroll () {
this.$emit('scroll')
},
moveToTarget(currentTag) {
moveToTarget (currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper
......@@ -82,15 +82,14 @@ export default {
position: relative;
overflow: hidden;
width: 100%;
::v-deep {
.el-scrollbar__bar {
bottom: 0px;
width: 0;
}
.el-scrollbar__wrap {
height: 48px;
line-height: 48px;
}
}
height: 100%;
}
/deep/ .el-scrollbar__view {
display: inline-block !important;
}
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
</style>
......
<template>
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<p class="pane-mask-left"></p>
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
<p class="pane-mask-right"></p>
</scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">刷新</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭全部</li>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">Refresh</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags(selectedTag)">Close All</li>
</ul>
</div>
</template>
......@@ -89,7 +87,7 @@ export default {
return tags
},
initTags () {
const affixTags = (this.affixTags = this.filterAffixTags(this.routes))
const affixTags = this.affixTags = this.filterAffixTags(this.routes)
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
......@@ -130,21 +128,17 @@ export default {
})
},
closeSelectedTag (view) {
this.$store
.dispatch('tagsView/delView', view)
.then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view)
}
})
this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view)
}
})
},
closeOthersTags () {
this.$router.push(this.selectedTag)
this.$store
.dispatch('tagsView/delOthersViews', this.selectedTag)
.then(() => {
this.moveToCurrentTag()
})
this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
this.moveToCurrentTag()
})
},
closeAllTags (view) {
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
......@@ -168,14 +162,13 @@ export default {
this.$router.push('/')
}
}
console.log(this.$store.state.tagsView.visitedViews);
},
openMenu (tag, e) {
const menuMinWidth = 95
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft + 210 // 15: margin right
const left = e.clientX - offsetLeft + 15 // 15: margin right
if (left > maxLeft) {
this.left = maxLeft
......@@ -199,52 +192,29 @@ export default {
<style lang="scss" scoped>
.tags-view-container {
height: 48px;
line-height: 48px;
height: 40px;
width: 100%;
background: #EDF1F7;
border-bottom: 1px solid #E4EBF4;
box-shadow: 0 1px 3px 0 rgba(147, 173, 209, 0.12);
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.el-scrollbar__view {
position: relative;
.pane-mask-left,
.pane-mask-right {
position: absolute;
top: 8px;
height: 33px;
z-index: 1;
background: #EDF1F7!important;
}
.pane-mask-left {
width: 15px;
left: 0;
background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 20%, #FFFFFF 33%);
}
.pane-mask-right {
width: 30px;
right: 0;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 5%, #FFFFFF 30%);
}
}
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 31px;
line-height: 29px;
color: #686666;
background: #D8DFE6;
padding: 0 20px 0 20px;
font-size: 16px;
margin-top: 5px;
border-radius: 8px 8px 0 0;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
......@@ -254,20 +224,21 @@ export default {
}
&.active {
color: #0f93f6;
background: #ffffff;
// &::before {
// content: '';
// background: #0F93F6;
// display: inline-block;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// position: relative;
// margin-right: 2px;
// }
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
}
......@@ -278,22 +249,19 @@ export default {
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
height: 29px;
line-height: 29px;
margin: 0;
padding: 0px 16px;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #F6F7F9;
background: #eee;
}
}
}
......@@ -304,24 +272,19 @@ export default {
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
text-align: justify;
margin-right: 8px;
.el-icon-close {
height: 16px;
width: 16px;
position: relative;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
line-height: 16px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
color: #686666;
font-size: 14px;
&:before {
transform: scale(0.8);
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
......
......@@ -120,7 +120,6 @@
::-webkit-scrollbar-thumb:hover {
background-color: rgb(162, 164, 167);
}
// element 样式补丁
.el-menu--horizontal {
border-bottom: none !important;
......
......@@ -33,22 +33,6 @@
}
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
&::-webkit-scrollbar {
display: none;
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
......
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {
......
......@@ -9,7 +9,7 @@
<div class="img-list-wrap">
<div v-for="(img, i) in previewImg.imgList" :key="i">
<photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
overlayStyle="width: 100%;height: 563px;">
overlayStyle="width: 100%;height:100%">
</photo-zoom>
</div>
</div>
......@@ -204,8 +204,8 @@ export default {
height: 66px;
line-height: 75px;
color: #fff;
background-color: rgb(198, 198, 198);
border-radius: 4px;
background-color: rgb(239, 239, 239);
border-radius: 50%;
cursor: pointer;
text-align: center;
......@@ -214,12 +214,17 @@ export default {
}
}
.handle-btn:hover {
background-color: rgb(185, 183, 183);
}
.prev {
left: 0%;
left: 1%;
}
.next {
right: 0%;
right: 1%;
}
.img-list-wrap {
......@@ -230,6 +235,7 @@ export default {
align-items: center;
background: rgba(194, 190, 190, 0.1);
overflow: scroll;
img {
display: block;
object-fit: scale-down;
......
......@@ -17,16 +17,15 @@
<div class="clyl-box" v-else>
<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>
材料目录({{tableData.length}})
<div>
<div v-for="item in tableData" :key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
<span v-if="item.isrequired==1" class="required">必选</span>
{{ item.sjmc }}
<span class="cl_number">({{item.children.length}})</span>
</div>
</el-collapse-transition>
</div>
</div>
</div>
<image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" />
......@@ -55,8 +54,7 @@ export default {
label: "材料预览",
},
],
menuOpen: true,
iclass: "itemIcon el-icon-caret-bottom",
iclass: "",
treeCheckId: "",
checkedId: "1",
column: [
......@@ -233,25 +231,25 @@ export default {
})
},
updateList (val) {
if(val!=null){ //删除最后一张图片时 val=null
if (val != null) { //删除最后一张图片时 val=null
this.tableData.forEach(item => {
if (item.bsmSj === val.bsmSj) {
item.children = val.children
if (item.bsmSj === val.bsmSj) {
item.children = val.children
}
})
this.previewImg.imgList = _.cloneDeep(val.children)
if (this.previewImg.index == this.previewImg.imgList.length) {
this.previewImg.index = this.previewImg.index - 1
}
})
this.previewImg.imgList = _.cloneDeep(val.children)
if (this.previewImg.index == this.previewImg.imgList.length) {
this.previewImg.index = this.previewImg.index - 1
}
}else{
} else {
this.previewImg.imgList = []
this.tableData.forEach(item => {
if(this.treeCheckId == item.bsmSj){
item.children = []
if (this.treeCheckId == item.bsmSj) {
item.children = []
}
})
})
}
},
// 左侧菜单点击
menuClick (item) {
......@@ -347,20 +345,12 @@ export default {
})
})
},
// 材料目录关闭收起
iconClick () {
this.menuOpen = !this.menuOpen;
if (this.menuOpen) {
this.iclass = "itemIcon el-icon-caret-bottom close";
} else {
this.iclass = "itemIcon el-icon-caret-bottom open";
}
},
// 材料目录点击选中
treeClick (item) {
this.treeCheckId = item.bsmSj;
this.previewImg.imgList = item?.children;
this.previewImg.bsmSj = item?.bsmSj;
this.previewImg.index = 0
this.treeCheckId = item.bsmSj
this.previewImg.imgList = item?.children
this.previewImg.bsmSj = item?.bsmSj
},
// 小图片点击
imgClick (item, index) {
......@@ -391,6 +381,16 @@ export default {
color: #fff;
}
.required {
font-size: 12px;
color: $pink;
float: left;
}
.cl_number {
float: right;
}
.clxx {
width: 100%;
display: flex;
......@@ -450,11 +450,12 @@ export default {
padding: 0 15px;
.item {
height: 60px;
line-height: 60px;
line-height: 30px;
padding-top: 5px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
color: #4a4a4a;
text-align: center;
color: $light-blue;
.itemIcon {
float: right;
......@@ -462,44 +463,23 @@ export default {
cursor: pointer;
}
@keyframes open {
100% {
transform: rotate(180deg);
}
}
@keyframes close {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(-0deg);
}
}
.open {
animation: open 0.5s;
animation-fill-mode: both;
}
.close {
animation: close 0.5s;
animation-fill-mode: both;
}
.child {
line-height: 36px;
line-height: 32px;
border-bottom: 1px solid #e8e8e8;
padding-left: 10px;
color: #6b6b6b;
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
}
.child:hover {
color: $light-blue;
}
.checked {
border-radius: 6px;
border: 1px solid #4083f9;
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
......