Merge branch 'master' of http://139.186.142.91:10010/r/productDev/dmvisit

liukangdong

2024-05-10 c58ada7f49aac20b06ea2ebda2cb5c006decf122

 admin/src/views/meeting/components/selectMember.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,267 @@
<template>
  <GlobalAlertWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <div class="select-container">
      <div class="tree">
        <div style="display: flex; margin-bottom: 5px;">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            clearable
            @input="inputAction"
            @keypress.enter.native="search"
          ></el-input>
          <el-button @click="search" style="margin-left: 5px;" type="primary">搜索</el-button>
        </div>
        <el-tree
          key="tree"
          v-if="!filterList.length"
          :data="data"
          :load="loadNode"
          lazy
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.name }}</span>
            <el-checkbox @change="selectUser(node.data)" v-if="node.data.isUser" v-model="node.data.isSelect"></el-checkbox>
          </span>
        </el-tree>
        <div v-else>
          <div v-for="item in filterList" :key="item.id" class="custom-tree-node">
            <span>{{ item.realname }}</span>
            <el-checkbox @change="selectUser(item)" v-model="item.isSelect"></el-checkbox>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="selected">
        <div style="margin-bottom: 5px;">已选：{{ selectList.length }}</div>
        <div v-for="item in selectList" :key="item.id" class="custom-tree-node">
          <span>{{ item.name }}</span>
          <i class="el-icon-delete delete" @click="deleteAction(item)"></i>
        </div>
      </div>
    </div>
  </GlobalAlertWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import { findTreeUser } from '@/api/system/department'
import { fetchList as userList } from '@/api/system/user'
export default {
  name: 'selectMember',
  extends: BaseOpera,
  components: { GlobalAlertWindow },
  data () {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'isUser'
      },
      data: [],
      filterText: '',
      filterList: [],
      selectList: [],
      // è¡¨å•æ•°æ®
      form: {
        id: null,
        creator: '',
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        remark: '',
        name: '',
        roomId: '',
        startTime: '',
        endTime: '',
        content: ''
      },
      rootNode: {},
      // éªŒè¯è§„则
      rules: {
      }
    }
  },
  created () {
    this.config({
      api: '/meeting/bookings',
      'field.id': 'id'
    })

  },
  methods: {
    /**
     * æ‰“开窗口
     * @title çª—口标题
     * @target ç¼–辑的对象
     */
    open (title, target) {
      this.title = title
      this.visible = true
      this.filterList = []
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          // this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    },
    loadNode(node, resolve) {
      this.rootNode = node
      // console.log(node, resolve);
      if (node.data.isUser) {
        return resolve([])
      }
      let parentId = ''
      if (node.level === 0) {
        parentId = ''
      } else {
        parentId = node.data.id
      }
      findTreeUser({parentId})
        .then(res => {
          // this.data = [res]
          if (!parentId) {
            resolve([res])
          } else {
            let resolveList = []
            if (res.userList) {
              res.userList.forEach(item => {
                let index = this.selectList.findIndex(sel => sel.id == item.id)
                resolveList.push({
                  ...item,
                  name: item.realname,
                  isUser: true,
                  isSelect: index !== -1
                })
              });
            }
            if (res.children) {
              res.children.forEach(item => {
                resolveList.push(item)
              })
            }

            resolve(resolveList)
          }

        })
    },
    inputAction() {
      if (!this.filterText) {
        this.filterList = []
      }
    },
    search() {
      this.filterList = []
      if (this.filterText) {
        userList({
          page: 1,
          capacity: 9999,
          model: { realname: this.filterText },
        })
          .then(res => {
            // console.log(res);
            // this.filterList = res.records
            res.records.forEach(item => {
              let index = this.selectList.findIndex(sel => sel.id == item.id)
              this.filterList.push({
                  ...item,
                  isSelect: index !== -1
                })
            })
          })
      }
    },
    selectUser(item) {
      let index = this.selectList.findIndex(sel => sel.id == item.id)
      if (index !== -1) {
        this.selectList.splice(index, 1)
      } else {
        this.selectList.push({
          name: item.realname,
          id: item.id
        })
      }
    },
    deleteAction(item) {
      console.log(this.rootNode);
      this.selectList.splice(this.selectList.findIndex(sel => sel.id == item.id), 1)
      this.filterList.forEach(filter => {
        if (filter.id == item.id) {
          filter.isSelect = false
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.select-container {
  display: flex;
  height: 100%;
  .tree {
    padding: 0 10px 10px;
    box-sizing: border-box;
    width: calc(50% - 0.5px);
    min-height: 200px;
    // height: 100%;

  }
  .line {
    width: 1px;
    min-height: 200px;
    // height: 100%;

    background-color: #f7f7f7;
  }
  .selected {
    padding: 0 10px 10px;
    box-sizing: border-box;
    // background-color: red;
    // flex: 1;
    width: calc(50% - 0.5px);
    min-height: 200px;
    // height: 100%;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.delete {
    box-sizing: border-box;
    line-height: 26px;
    margin-left: 10px;
    width: 16px;
    height: 16px;
    // background-color: #BFC3CB;
    color: #216EEE;
    border-radius: 50%;
    padding: 1.5px;
    cursor: pointer;
    &:hover {
      color: #ff0000;
    }
  }
</style>