soc_app/src/views/menu/protection/index.vue

<template>
  <div class="protection_list">
    <nav-bar></nav-bar>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <!-- <div style="width:34%;"
        @click="
          () => {
            showOrg = true
          }
        "
      >
        {{ orgName }}
      </div> -->
    <!-- <van-cell
        is-link
        readonly
        title="机构"
        :label="orgInfo.orgName"
        
      /> -->
    <van-dropdown-menu>
      <!-- <div role="button" tabindex="0" class="van-dropdown-menu__item">
        <span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down">
          <div class="van-ellipsis">'abadfasd'</div></span
        >
      </div> -->
      
      <van-dropdown-item :title="orgName" @open="onItemClick"/>
      <van-dropdown-item v-model="search.status" :options="statusOptions" />
      <van-dropdown-item v-model="search.hour" :options="hourOptions" />
    </van-dropdown-menu>
    <!-- <div>
      <van-picker show-toolbar title="选择" :columns="statusOptions"/>
    </div> -->
    <van-popup v-model="showOrg" round position="bottom">
      <van-cascader
        v-model="search.orgId"
        title="选择机构"
        :options="options"
        @close="showOrg = false"
        @change="changeTree"
        @finish="onFinish"
        :field-names="fieldNames"
      />
    </van-popup>
    <div class="container">
      <k-list :list="list" :params="search">
        <template slot-scope="{ data }">
          <item :data="data"></item>
        </template>
      </k-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
// import Calendar from '@/components/Calendar';
import { mapGetters } from 'vuex'
import { deptTreeList } from '@/api/public'
import { list } from '@/api/protection.js'
import KList from '@/components/list/index.vue'
export default {
  components: { NavBar, KList },
  data() {
    return {
      options: [],
      search: {
        orgId: this.orgId,
        status: null,
        hour: null,
        updateTime: [],
        pageNum: 1,
        pageSize: 10
      },
      showOrg: false,

      statusOptions: [
        { value: null, text: '防区状态' },
        { value: 0, text: '撤防' },
        { value: 1, text: '布防' },
        { value: 2, text: '未知' }
      ],
      hourOptions: [
        { value: null, text: '上报时间' },
        { value: 1, text: '1小时内' },
        { value: 2, text: '2小时内' },
        { value: 3, text: '3小时内' },
        { value: 4, text: '4小时内' },
        { value: 8, text: '8小时内' },
        { value: 12, text: '12小时内' },
        { value: 24, text: '24小时内' },
        { value: 48, text: '48小时内' }
      ],
      orgOptions: [
        {
          value: null,
          text: ''
        }
      ],
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children'
      }
    }
  },
  watch: {
    'search.hour': {
      handler(v) {
        if (v) {
          this.search.updateTime = []
          this.search.updateTime[0] = (new Date().valueOf() - v * 60 * 60 * 1000).toLocaleString()
          this.search.updateTime[1] = new Date(2099, 1).toLocaleString()
        } else {
          this.search.updateTime = []
        }
      }
    }
  },
  created() {
    this.search.orgId = this.orgId
    this.orgOptions[0].value = this.orgId
    this.orgOptions[0].text = this.orgName
  },
  mounted() {
    this.getTreeList()
  },
  computed: {
    ...mapGetters(['orgName', 'orgId'])
  },
  methods: {
    list,
    //获取机构树
    getTreeList() {
      deptTreeList(this.orgId).then(res => {
        this.options = res.data
        // this.orgInfo.orgId = this.orgId;
        // this.orgInfo.orgName = this.orgName;
        // console.log(res,'3333')
      })
    },
    onItemClick(){
      debugger
      this.showOrg=true;
    },
    //改变机构后将重新发起请求
    changeTree({ selectedOptions }) {
      // console.log(selectedOptions,'aaaaaa')
      // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
      this.search.orgId = selectedOptions[selectedOptions.length - 1].id
      this.orgName = selectedOptions[selectedOptions.length - 1].name
    },
    onFinish({ selectedOptions }) {
      this.showOrg = false
    }
  }
}
</script>

<style lang="scss" scoped>
.protection_list {
  background-color: #fff;

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

// .form-box {
//   height: calc(100vh - 180px);
//   padding: 0 30px 50px 30px;
//   overflow: auto;
// }
// .radio-box {
//   height: 100px;
//   padding: 30px;
// }
// .org-name {
//   font-size: 30px;
//   line-height: 80px;
//   height: 80px;
//   text-align: center;
// }
</style>