备份 知识库选择 弹框页面

src/views/menu/training/components/selectData_backUp_20250206.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <van-dialog v-model="show" title="选择资料" width="95%" @confirm="submitHandler" show-cancel-button>
+      <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-dialog>
+  </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: 70%;
+}
+.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(80vh - 180px);
+  overflow: scroll;
+}
+.bigsheetbox {
+
+  height: calc(80vh - 200px);
+}
+.van-field__control {
+  padding-right: 20px;
+}
+.line {
+  width: 100%;
+  height: 3px;
+  background-color: #1989fa;
+}
+.colCls {
+  display: flex;
+  .tagCls {
+    margin-top: 10px;
+  }
+}
+::v-deep .van-dialog{
+  top: 50% !important;
+}
+</style>