vue-apps/com.actionsoft.apps.kms.mobile/pages/knwldir.vue

<template>
  <div class="knwldir">
    <van-search v-model="keyvalue" placeholder="请输入文件内容关键词"/>
    <div class="content" :style="contentH">
      <div class="item">
		  <van-cell v-for="(item,index) in dirs" :key="index" is-link
					:to="{name:'sub-knwldir', params: {id:item.id,hasPerm:item.hasPerm}}">
			  <i v-if="item.iconCls.indexOf('treeDimension')>-1" class="awsui-iconfont" :style="item.hasPerm?'color:#FABD01;':'color:#c8c9cc;'" :class="item.iconCls">&#58913;</i>
			  <i v-else class="awsui-iconfont" :style="item.hasPerm?'color:#FABD01;':'color:#c8c9cc;'" :class="item.iconCls">&#xeac5;</i>
			  {{item.name}}
		  </van-cell>
      </div>
		<div v-show="!initLoad&&dirs.length==0">
			<div class="con">
				<div class="img">
					<img src="../assets/no_content.png" alt="" style="width: 110px;">
				</div>
				<div class="text">暂无数据</div>
			</div>
		</div>
    </div>
    <tabbar/>
  </div>
</template>

<script>
  import tabbar from '@/components/tabbar.vue' //引用组件的地址
  import awsuiAxios from "../awsuiAxios";
  export default {
    name: 'knwldir',
    components: {
      tabbar
    },
    data() {
      return {
      	initLoad:true,
		keyvalue: '',
		contentH:'',
        dirs: [],
		tmpdirs:[],
        name: `<font color='#378DEC'>知识目录</font>` + ' > '
      }
    },
	  methods:{
        getDimensionList(){
        	let that = this;
			awsuiAxios.post({
				url: "jd",
				data: {
					cmd: "com.actionsoft.apps.kms_mobile_center_dimension_tree_json",
					parentId:"",
					isDimensionKnwlPage:false

				},
			}).then(function (r) {
				that.loading = false;
				if (r.result == "error") {
					that.$toast({message: r.data?r.data.desc:r.msg, overlay: true});
				} else {
					that.dirs = r.data.dimensionJA;
					that.tmpdirs = r.data.dimensionJA;
				}
				that.initLoad = false;
			});
		},
		  searchDirName(){
			  let that = this;
			  if(that.keyvalue===''){
			  	this.dirs=this.tmpdirs;
			  }
			  let resultdata = [];
			  that.dirs.forEach((item) => {
				  if (item.name.indexOf(that.keyvalue) > -1 ) {
					  resultdata.push(item);
				  }
			  })
			  that.dirs=resultdata;
		  }
	  },
	  watch:{
		  keyvalue:function(){
		  	let that = this;
			setTimeout(function () {
				that.searchDirName();
			},300);
		  }
	  },

    mounted() {
	  localStorage.setItem("dimensionhasPerm",undefined);
      let that = this;
      let h = window.innerHeight-105;
      this.contentH="height:"+h+"px;overflow-y:auto;";
      this.getDimensionList();
    }
  }
</script>

<style scoped>
  .knwldir {
    height: 100%;
  }

  .knwldir .content {
    border-top: 0.33px solid #e9e9e9;
    height: calc(100% - 105px);
    overflow-y: auto;
  }

  .knwldir .content .item {
    padding: 0 12px;
    background: #fff;
  }

  .knwldir .content .van-cell {
    padding: 8px 0;
    /*border-bottom: 0.33px solid #e9e9e9;*/
  }

  .knwldir .content .van-cell:last-child {
    border-bottom: 0;
  }

  .knwldir .content .van-cell .awsui-iconfont {
    /*color: #03A76B;*/
    margin-right: 8px;
  }

  .knwldir .content .van-cell .default {
    color: #CCCCCC;
  }
  .treeHotspot {
	 color:#f3b731 !important;
  }
  .con {
	  position: absolute;
	  width: 100%;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	  text-align: center;
  }

  .con .img {
	  width: 125px;
	  height: 125px;
	  margin: 0 auto;
  }

  .con .text {
	  color: #999;
	  line-height: 20px;
	  font-size: 13px;
	  width: 100%;
  }
</style>