手机端-标准化动态-资料中心增加搜索条件弹窗

src/pages/phone/components/folderPopup.vue

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

src/pages/phone/components/folderTree.vue

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

src/pages/phone/components/standardSystemTree.vue

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

src/pages/phone/standDynamics.vue

@@ -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() {