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

<template>
  <div class="protection_list">
    <nav-bar></nav-bar>
    <van-search v-model="search.key" placeholder="请输入搜索关键词" />
    <van-dropdown-menu>
      <van-dropdown-item :title="selectedOrgName" @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" :auto="false" ref="list">
        <template slot-scope="{ data }">
          <item :data="data" :statusOptions="statusOptions"></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'
import Item from './components/item.vue'
export default {
  components: { NavBar, KList, Item },
  data() {
    return {
      options: [],
      search: {
        orgId: this.orgId,
        status: null,
        hour: null,
        key: null,
        updateTime: [],
        pageNum: 1,
        pageSize: 10
      },
      showOrg: false,
      selectedOrgName:null,
      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() {},
  mounted() {
    this.getTreeList()
    this.search.orgId = this.orgId
    // this.orgOptions[0].value = this.orgId
    // this.orgOptions[0].text = this.orgName
    this.selectedOrgName=this.orgName
  },
  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() {
      this.showOrg = true
    },
    //改变机构后将重新发起请求
    changeTree({ selectedOptions }) {
      // console.log(selectedOptions,'aaaaaa')
      // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
      let option = selectedOptions[selectedOptions.length - 1]
      this.search.orgId = option.id      
      this.selectedOrgName = option.name
    },
    onFinish({ selectedOptions }) {
      this.showOrg = false
    }
  }
}
</script>

<style lang="scss" scoped>
.protection_list {
  background-color: #fff;
  display: block;
  .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>