手机端-标准化动态-资料中心增加搜索条件弹窗
This commit is contained in:
zyn
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<van-popup v-model="popupShow"
|
||||
position="right"
|
||||
:style="{ height: '100%', width: '90%' }"
|
||||
round
|
||||
:close-on-click-overlay="false"
|
||||
@click-overlay="handleCancel">
|
||||
<h3 class="popup-title">
|
||||
<span>体系结构</span>
|
||||
<van-icon name="cross" size="22px" @click="handleCancel" />
|
||||
</h3>
|
||||
<div class="popup-main">
|
||||
<folderTree ref="folderTreeRef" @checked="getChecked"></folderTree>
|
||||
</div>
|
||||
<div class="popup-footer">
|
||||
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="handleOk">确定</el-button>
|
||||
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleCancel">取消</el-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import folderTree from "./folderTree";
|
||||
export default {
|
||||
name: "folderPopup",
|
||||
components: {
|
||||
folderTree,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
popupShow: false,
|
||||
currentData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open (id) {
|
||||
this.popupShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.folderTreeRef.setCurrentKey(id)
|
||||
})
|
||||
},
|
||||
hide () {
|
||||
this.popupShow = false
|
||||
},
|
||||
getChecked (obj) {
|
||||
this.currentData = obj
|
||||
},
|
||||
handleOk () {
|
||||
this.$emit('checked', this.currentData)
|
||||
this.hide()
|
||||
},
|
||||
handleCancel () {
|
||||
this.hide()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.popup-title{
|
||||
line-height: 1rem;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 0 0.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.popup-main{
|
||||
height: calc(100vh - 1rem - 50px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.popup-footer{
|
||||
border-top: 1px solid #e8e8e8;
|
||||
text-align: right;
|
||||
padding-right: 0.2rem;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: fixed;
|
||||
bottom: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="tree">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
class="tree-line"
|
||||
icon-class="icon-tree"
|
||||
:indent="0"
|
||||
:props="props"
|
||||
:data="treeList"
|
||||
:default-expanded-keys="['1']"
|
||||
highlight-current
|
||||
:current-node-key="currentKey"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
|
||||
<span style="font-size:18px"> {{ node.label }} </span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "folderTree",
|
||||
data () {
|
||||
return {
|
||||
treeList: [],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
currentKey: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getTreeData()
|
||||
},
|
||||
methods: {
|
||||
getTreeData () {
|
||||
this.$http._getData('fileMaterialCenter/zlTree').then(res => {
|
||||
if (res.ok && res.data) {
|
||||
this.treeList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
filterNode (value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
handleNodeClick (data, node, element) {
|
||||
this.$emit('checked', data)
|
||||
},
|
||||
setCurrentKey (id) {
|
||||
this.currentKey = id
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.tree.setCurrentKey(this.currentKey)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tree-line {
|
||||
|
||||
/deep/ .el-tree-node {
|
||||
position: relative;
|
||||
padding-left: 0px; // 缩进量
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/deep/ .el-tree-node__children {
|
||||
padding-left: 16px; // 缩进量
|
||||
overflow: inherit; // 横向滚动条默认hidden
|
||||
}
|
||||
.el-tree-node__content{
|
||||
//display: block!important;
|
||||
}
|
||||
|
||||
// 竖线
|
||||
/deep/ .el-tree-node::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
//left: -3px;
|
||||
//top: -26px;
|
||||
left: -1px;
|
||||
top: -5px;
|
||||
border-width: 1px;
|
||||
border-left: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 当前层最后一个节点的竖线高度固定
|
||||
/deep/ .el-tree-node:last-child::before {
|
||||
//height: 38px; // 可以自己调节到合适数值
|
||||
height: 17px; // 可以自己调节到合适数值
|
||||
}
|
||||
|
||||
// 横线
|
||||
/deep/ .el-tree-node::after {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
//left: -3px;
|
||||
left: -1px;
|
||||
top: 12px;
|
||||
border-width: 1px;
|
||||
border-top: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||||
/deep/ & > .el-tree-node::after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/deep/ & > .el-tree-node::before {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// 展开关闭的icon
|
||||
/deep/ .el-tree-node__expand-icon {
|
||||
font-size: 20px;
|
||||
// 叶子节点（无子节点）
|
||||
&.is-leaf {
|
||||
color: transparent;
|
||||
//display: none; // 也可以去掉
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .icon-tree {
|
||||
margin: 0 5px 0 10px;
|
||||
position: relative;
|
||||
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .is-leaf {
|
||||
background-image: none;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .expanded {
|
||||
background: url('~@/assets/images/shangqi/img/tree-sub.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .is-leaf-none {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/none-file-new.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .is-show {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/tree.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -54,6 +54,7 @@ export default {
|
||||
}
|
||||
this.$emit('checkedKey', this.checkedKeys)
|
||||
},
|
||||
// 通过 keys 设置目前勾选的节点
|
||||
setCheckedKeys (keys) {
|
||||
this.$refs.tree.setCheckedKeys(keys)
|
||||
}
|
||||
@@ -69,5 +70,8 @@ export default {
|
||||
/deep/ .el-tree-node__label{
|
||||
font-size: 18px;
|
||||
}
|
||||
/deep/ .el-tree-node__children {
|
||||
overflow: inherit; // 横向滚动条
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,6 +72,11 @@
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab name="ZLZX" title="资料中心">
|
||||
<van-search v-model="currentSearch.name" show-action clearable placeholder="请输入搜索关键词" @focus="onFocus" >
|
||||
<template #action>
|
||||
<div @click="onCancel">取消</div>
|
||||
</template>
|
||||
</van-search>
|
||||
<div class="card-box" ref="cardBoxTwo" @scroll="scroolThree">
|
||||
<div v-if="loading">
|
||||
<van-loading size="24px" color="#3170A8">加载中...</van-loading>
|
||||
@@ -108,13 +113,18 @@
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<folderPopup ref="folderPopupRef" @checked="setChecked" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import folderPopup from "./components/folderPopup";
|
||||
export default {
|
||||
name: "standDynamics",
|
||||
components: {
|
||||
folderPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: "",
|
||||
@@ -127,7 +137,8 @@ export default {
|
||||
loading: true,
|
||||
scrolled: "",
|
||||
moreFlag: false,
|
||||
listFlag: false
|
||||
listFlag: false,
|
||||
currentSearch: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -231,7 +242,8 @@ export default {
|
||||
getAdvice() {
|
||||
this.$http.get("fileMaterialCenter/file-material/getFileMaterialIndex", {
|
||||
page: this.page,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
treeId: this.currentSearch.id || ''
|
||||
}, {
|
||||
_this: this, loading: "loading"
|
||||
}, res => {
|
||||
@@ -292,6 +304,17 @@ export default {
|
||||
data.forEach(item => {
|
||||
this.$set(this.textStatusMap, item.value, item.label);
|
||||
});
|
||||
},
|
||||
onFocus () {
|
||||
this.$refs.folderPopupRef.open(this.currentSearch.id || null)
|
||||
},
|
||||
onCancel () {
|
||||
this.$set(this, 'currentSearch', {})
|
||||
this.getAdvice()
|
||||
},
|
||||
setChecked (currentData) {
|
||||
this.currentSearch = currentData
|
||||
this.getAdvice()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
Reference in New Issue
Block a user