soc_app/src/views/menu/rehearsalTask/components/dialog.vue

<template>
  <div>
    <van-action-sheet class="bigsheetbox" @closed="closedHandler" v-model="show" position="bottom" title="选择演练库">
      <van-row>
        <van-col span="24">
          <div class="line"></div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24">
          <van-search
            v-model="searchVal"
            
            placeholder="请输入搜索关键词"
            @input="onSearch"
            @cancel="onCancel"
          />
        </van-col>
      </van-row>

      <van-row class="rowclss">
        <van-col span="24">
          <van-collapse v-model="activeNames" @change="checkedHandler" accordion>
            <van-checkbox-group v-model="result"  @change="changeCheckBox">
            <van-collapse-item
              :ref="item.id"
              :name="item.id"
              v-for="item in peopleListCpoy"
              
              :key="item.id"
              :title="item.drillProjects"
              >
              <!-- :title="item.defaultCause" -->
              <template #right-icon>
                <van-checkbox  :name="item.id"  ref="checkboxes" class="checkboxList" />
              </template>
              {{ item.defaultCause }}
            </van-collapse-item>
           
             </van-checkbox-group>
          </van-collapse>
        </van-col>
      </van-row>
      <van-row class="bottomdiv">
        <van-col span="24">
          <van-button class="btns" size="small" type="info" @click="submitHandler">确定</van-button>
        </van-col>
      </van-row>
    </van-action-sheet>
  </div>
</template>
<script>
import { deptTreeList } from '@/api/toConsult.js'
import { drillDictionaryList } from '@/api/drillTask.js'
import OrgTree from '@/components/orgTree'
import { list } from '@/api/protection'
export default {
  name: 'SocAppIndex',
  components: {
    OrgTree
  },
  props: {
    userList: {
      type: Array,
      default: () => {
        return []
      }
    },
    dictValue: {},
    organizationId: {
      //机构ID
      type: String,
      default: JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
    },

    inpitLabel: {
      type: String,
      default: '参与人员'
    },
    fieldNames: {
      //树行配置映射项
      type: Object,
      default: () => {
        return {
          text: 'name',
          value: 'id',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      activeNames:[],
      orgId: this.organizationId || '',
      show: false,
      value1: '',
      showcascader: false,
      cascaderValue: '',
      loading: false,
      options: [], //机构列表
      result: [], //人员ID集合
      searchVal: '', //搜索值
      peopleList: [], //人员列表
      peopleListCpoy: [], //人员列表2
      orgName: '' //机构名称
    }
  },
  created() {},
  mounted() {},

  methods: {
    // 弹框关闭动画
    closedHandler(){
        this.searchVal=''
    },
    //复选框发生变化
    changeCheckBox(list) {
      if (list && list.length > 1) {
        this.result = [list[list.length - 1]]
      }
    },
    init() {
      this.show = true
      this.getpeople()
    },
    onLoad() {},
    getpeople() {
      drillDictionaryList({ orgId: this.orgId, dictValue: this.dictValue }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          console.log(res)
          this.peopleList = data
          this.peopleListCpoy = JSON.parse(JSON.stringify(this.peopleList))
          this.peopleListCpoy.forEach(item => {
            this.$set(item, 'checked', false)
          })
        }
      })
    },

    onSearch(val) {
      this.peopleListCpoy = this.peopleList.filter(item => {
        if (item.defaultCause.indexOf(val) != -1) {
          return item
        }
      })
    },
    onCancel() {
      this.searchVal = ''
      this.peopleListCpoy = this.peopleList
    },
    submitHandler() {
      let list = []
      this.peopleListCpoy.filter(item => {
        this.result.forEach(r => {
          if (r == item.id) {
            list.push(item)
          }
        })
      })
      this.show = false

      // 抛出已选择人员信息
      this.$emit('checkList', list)
    },
    checkedHandler(id){
      
      this.result.push(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.checkboxList{
  z-index: 999;
}
.van-action-sheet {
  min-height: 90%;
}
.btns {
  width: 100%;
}
.bottomdiv {
  width: 100%;
  bottom: 0%;
  position: fixed;
  margin-top: 20px;
  z-index: 2000;
}
.bigsheetbox {
  height: calc(100vh - 100px);
}
.line {
  width: 100%;
  height: 3px;
  background-color: #1989fa;
}
.rowclss{
  margin-bottom: 100px;
}
</style>