soc_app/src/views/menu/iot/videoDiagnosis/index.vue

<template>
  <div class="page_list">
    <nav-bar :go="{ type: 'push', path: '/menu' }"></nav-bar>
    <van-row>
      <van-col span="24">
        <org-tree v-model="search.orgId" @changeItem="changeTree" @checked="orgCheckChanged" showChecked defaultChecked></org-tree>
      </van-col>     
    </van-row>
    <van-row>
      <van-col span="24">      
        <van-cell title="通道状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
        <van-popup v-model="showStatus" round position="bottom">
          <van-picker
            title="通道状态"
            show-toolbar
            :columns="statusOptions"
            @confirm="onStatusConfirm"
            @cancel="onCancel"
            default-index="0"
            :close-on-click-overlay="false"
          />
        </van-popup>
      </van-col>
    </van-row>
    <div class="container">
      <k-list :list="list" :params="search" :auto="false" ref="list">
        <template slot-scope="{ data }">
          <item :data="data" :defaultExpanded="!search.checkSub"></item>
        </template>
      </k-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
import { deptTreeList } from '@/api/public'
import { list } from '@/api/iot/videoDiagnosis.js'
import KList from '@/components/list/index.vue'
import Item from './components/item.vue'
import OrgTree from '@/components/orgTree'
export default {
  components: { NavBar, KList, Item, OrgTree },
  name:'iot_videoDiagnosis',
  data() {
    return {
      search: {
        orgId: this.orgId,
        checkSub: true,
        state: null,
        pageNum: 1,
        pageSize: 10
      },
      showStatus:false,
      defaultStatus:'全部',
      dicts: ["app_video_diagnosis_status"]
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.search.orgId = this.orgId
  },
  
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary']),
    statusOptions() {
      let r = [
        { value: null, text: '全部' }
      ]

      let dict = this.getDictItem('app_video_diagnosis_status');
      if (dict) {
        dict.forEach(element => {
          r.push({ value: element.dictValue, text: element.dictLabel })
        });
      }

      return r;
    }
  },
  methods: {
    list,

    // refreshData(){
    //   this.search.pageNum=0;
    // },
    //改变机构后将重新发起请求
    changeTree(node) {
      this.search.orgId = node.id
    },
    orgCheckChanged(v) {
      this.search.checkSub = v
    },
    onStatusConfirm(opt) {
      this.defaultStatus=opt.text;
      this.search.state = opt.value
      this.showStatus = false
    },
    onCancel(){
      this.showStatus=false;
    }
    // onStatusChanged(state) {
    //   if(this.search.state===state){
    //     this.search.state=null;
    //   }else{
    //     this.search.state = state
    //   }      
    // }
  }
}
</script>

<style lang="scss" scoped>
.page_list {
  background-color: transparent;
  display: block;

  .container {
    // overflow: auto;
    // height: calc(100vh - 11rem);
    .k-content-repair {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
  }
}
// .search-state {
//   width: 100%;

//   > span {
//     width: 33.333333%;
//     border: solid 1px rgb(196,196,196);
//     display: inline-block;
//     text-align: center;
//     padding-top: 1.2vw;
//     padding-bottom: 1.2vw;
//   }
// }

// .alarm_state_selected {
//   background-color: #409eff;
//   border-color: #409eff;
//   color: white;
//   font-weight: 700;
// }
</style>