soc_app/src/views/menu/training/components/selectData.vue

<template>
  <div>
    <van-action-sheet class="bigsheetbox" v-model="show" position="bottom" title="选择资料">
      <van-row>
        <van-col span="24">
          <!-- <van-search v-model="searchVal" placeholder="请输入搜索关键词" /> -->
          <form action="/">

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

      <van-row class="rowclss">
        <van-col span="24">
          <van-collapse v-model="activeNames" @change="checkedHandler">
            <van-checkbox-group v-model="result" >
              <van-collapse-item
                v-for="item in peopleListCpoy"
                :name="item.id"
                :key="item.id"
                :title="`${item.title}-(${item.orgName})`"
              >
                <!-- :title="item.defaultCause" -->
                <template #right-icon>
                  <van-checkbox :name="item.id" > </van-checkbox>
                </template>
                <van-row>
                  <van-col class="colCls" span="24" v-for="i in item.fileList" :key="i.name">
                    <van-tag type="primary" class="tagCls" plain @click="tagHandler(i)">{{ i.name }}</van-tag>
                  </van-col>
                </van-row>
              </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="large" type="info" @click="submitHandler">确定</van-button>
        </van-col>
      </van-row>
    </van-action-sheet>
  </div>
</template>
<script>
import { deptTreeList } from '@/api/toConsult.js'
import { materialsFileList } from '@/api/training.js'
import OrgTree from '@/components/orgTree'
import { Toast } from 'vant'
export default {
  name: 'SocAppIndex',
  components: {
    OrgTree
  },

  props: {
    organizationId: {
      //机构ID
    },
    //培训资料数量
    listLength: {
      type: Number
    }
  },
  data() {
    return {
      activeNames: [],
      result: [],
      orgId: this.organizationId || '',
      show: false,
      value1: '',
      showcascader: false,
      cascaderValue: '',
      loading: false,
      options: [], //机构列表
      peoplesId: [], //资料ID集合
      searchVal: '', //搜索值
      peopleList: [], //资料列表
      peopleListCpoy: [], //资料列表2
      orgName: '', //机构名称
      peoples: '' //资料列表
    }
  },
  watch: {
    organizationId(val) {
      this.orgId = val + ''
      this.getSelectData()
    },
    //监听弹框是否打开
    show(val) {
      if (val) {
        this.getSelectData()
      }
    },
    //监听资料数组变化
    userList(val) {
      this.peoplesId = []
      this.$set(this.$data, 'peoples', val.map(item => item.userName).join(','))

      val.map(item => {
        this.peoplesId.push(item.userId)
      })
    }
  },

  created() {},
  mounted() {},

  methods: {
    onLoad() {},
    //获取资料
    getSelectData() {
      materialsFileList({ orgId: this.orgId, pageNum: 1, pageSize: 100000 }).then(res => {
        let { code, rows, msg } = res
        if (code == 200) {
          rows.forEach(item => {
            if (item.fileList && item.fileList.length > 0) {
              item.fileList = item.fileList.map(i => {
                i = JSON.parse(i)
                return i
              })
            }
          })

          this.peopleList = rows
          this.peopleListCpoy = JSON.parse(JSON.stringify(rows))
        }
      })
    },

    onSearch(val) {
      this.peopleListCpoy = this.peopleList.filter(item => {
        if (item.title.indexOf(val) != -1 || item.orgName.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.fileList)
          }
        })
      })

      // this.peoples = list.map(item => item.name).join(',')
      if (list.length + this.listLength > 5) {
        return Toast('资料附件数量不能超过5个,请修改!')
      }
      this.$set(this.$data, 'peoples', list.map(item => item.name).join(','))
      // 抛出已选择资料信息
      this.$emit('dataList', list)
      this.show = false
    },
    //复选框单选
    // changeCheckBox(list) {
    //   if (list && list.length > 1) {
    //     this.result = [list[list.length - 1]]
    //   }
    // },
    checkedHandler(id) {
     
      this.result=id
      
    },
    tagHandler(i) {
     
      this.openFilePreview(i)
      // const filePath = `${process.env.NODE_ENV === 'development' ? '/dev' : window.origin}${i.url}`
      // const tempLink = document.createElement('a')
      // tempLink.style.display = 'none'
      // tempLink.href = filePath
      // tempLink.setAttribute('download', i.name)
      // tempLink.setAttribute('target', '_blank')
      // document.body.appendChild(tempLink)
      // tempLink.click()
      // document.body.removeChild(tempLink)
    },
    clickHandler() {
      console.log('哈哈哈哈')
    }
  }
}
</script>
<style lang="scss" scoped>
.van-action-sheet {
  min-height: 90%;
}
.btns {
  width: 100%;
  height: 90px;
}
.bottomdiv {
  width: 100%;
  bottom: 0%;
  position: absolute;
  margin-top: 20px;
  z-index: 2000;
  padding-bottom:calc(0 + env(safe-area-inset-bottom));
}
.rowclss{
  // height: 1050px;
  height: calc(100vh - 180px);
  overflow: scroll;
}
.bigsheetbox {

  height: calc(100vh - 100px);
}
.van-field__control {
  padding-right: 20px;
}
.line {
  width: 100%;
  height: 3px;
  background-color: #1989fa;
}
.colCls {
  display: flex;
  .tagCls {
    margin-top: 10px;
  }
}
</style>