zj_dierketang/library/components/CheckRenyuan/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2022-12-14 16:03:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-08 17:57:00
-->
<template>
  <div class="page-container">
    <el-form-item label="发送人员" prop="users">
      <div class="grid">
        <div class="item">
          <el-scrollbar height="400px">
            <el-tree
              ref="departmentTree"
              :data="department_list"
              default-expand-all
              :empty-text="emptyText"
              highlight-current
              node-key="id"
              :props="defaultProps"
              @node-click="handleNodeDepartment"
            />
          </el-scrollbar>
        </div>
        <div class="item middle">
          <el-scrollbar height="400px">
            <div class="people-search">
              <el-input
                v-model.trim="name"
                clearable
                placeholder="请输入姓名"
              />
              <el-button
                circle
                :icon="Search"
                style="margin-left: 10px"
                type="primary"
              />
              <el-button
                style="margin-left: 10px"
                type="primary"
                @click="selectAll"
              >
                全选
              </el-button>
            </div>

            <el-tree
              ref="departmentPeople"
              :data="people_list"
              :default-checked-keys="peopleChecked"
              default-expand-all
              highlight-current
              min-width="200px"
              node-key="id"
              :props="defaultProps"
              show-checkbox
              @check-change="handleNodeClickPeople"
            />
          </el-scrollbar>
        </div>
        <div class="item">
          <el-scrollbar height="400px">
            <div class="people-search">
              <el-input
                v-model.trim="name"
                clearable
                placeholder="请输入姓名"
              />
              <el-button
                circle
                :icon="Search"
                style="margin-left: 10px"
                type="primary"
              />
            </div>
            <div>
              <div
                v-for="(item, index) in users"
                :key="index"
                class="select-list"
              >
                <div class="name">{{ item.name }}</div>
                <el-icon
                  color="#f56c6c"
                  size="18"
                  style="line-height: 35px; display: inline-block"
                  @click="deletePeople(item.id)"
                >
                  <Delete />
                </el-icon>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-form-item>
  </div>
</template>
<script>
  import { getDepartmentList, getPersonList } from './api/index'
  import { handleTree } from '@/utils/publicMethods' //将列表转坏为树形
  import { nextTick } from 'vue'
  import { Search, Delete } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'RoleManagementEdit',
    // props: ['pieData'],
    emits: ['changeNavfu'],
    setup(props, ctx) {
      const pie_data = toRefs(props.pieData)
      // const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        departmentTree: null,
        department_list: [], //部门列表
        departmentPeople: null,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        peopleChecked: [], //选中人员列表
        people_list: '', //用户列表
        name: '', //用户姓名
        emptyText: '',
        users: [], //已选择的用户
        form: {
          name: '',
          send_type: [],
          body: '',
          type: '',
          users: [],
          status: 1,
        },
        title: '',
        dialogFormVisible: false,
        list: [],
      })

      if (pie_data) {
        state.users = pie_data
        const arr = []
        for (let i = 0; i < pie_data.length; i++) {
          arr.push(pie_data[i].id)
        }
        state.peopleChecked = arr
      }
      watch(props, (newProps) => {
        const pie_data = newProps.pieData
        console.log(newProps.pieData, 'newProps.pieData')
        if (pie_data) {
          state.users = pie_data
          const arr = []
          for (let i = 0; i < pie_data.length; i++) {
            arr.push(pie_data[i].id)
          }
          console.log(arr)
          state.peopleChecked = arr
        }
        getDepartment()
        getPerson()
      })
      //获取部门列表
      const getDepartment = async () => {
        const { data } = await getDepartmentList({
          status: 1,
          sortedBy: 'desc',
          orderBy: 'sort',
          filter: 'id;name;parent_id;sort;status',
        })
        // const arr_1 = data
        const arr_1 = [{ id: 0, name: '全部部门' }].concat(data)
        const arr = handleTree(arr_1, 'id', 'parent_id')
        state.department_list = arr
        nextTick(() => {
          state['departmentTree'].setCurrentKey(0)
        })
      }
      //获取用户列表
      const getPerson = async (department_id) => {
        const { data } = await getPersonList({
          department_id: department_id,
          status: 1,
          filter: 'id;name',
        })
        state.people_list = data
      }
      //点击切换部门
      const handleNodeDepartment = (node) => {
        getPerson(node.id)
      }
      const handleNodeClickPeople = () => {
        const data = state['departmentPeople'].getCheckedNodes()
        state.users = data
        ctx.emit('changeNavfu', data)
      }
      //全选
      const selectAll = () => {
        const arr = []
        state.people_list.map((item) => {
          arr.push(item.id)
        })
        state.peopleChecked = arr
      }
      //删除已选中的人员
      const deletePeople = (id) => {
        state.users = state.users.filter((item) => {
          return item.id !== id
        })
        const arr = []
        state.users.map((item) => {
          arr.push(item.id)
        })
        state['departmentPeople'].setCheckedKeys(arr, true, false)
        ctx.emit('changeNavfu', arr)
      }

      onMounted(() => {
        getDepartment()
        getPerson()
      })
      return {
        ...toRefs(state),
        getDepartment,
        getPerson,
        handleNodeDepartment,
        handleNodeClickPeople,
        deletePeople,
        selectAll,
        Search,
        Delete,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .page-container {
    padding: 0 !important;
  }
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }
  .grid {
    display: flex;
    border: dashed 1px #dcdfe6;
    padding: 15px;
    width: 100%;
    .item {
      flex: 1;
      margin-right: 5px;
    }
    .middle {
      padding: 0 20px;
      border-right: dashed 1px #dcdfe6;
      border-left: dashed 1px #dcdfe6;
    }
  }
  .people-search {
    display: flex;
    margin-bottom: 15px;
  }
  .select-list {
    display: flex;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    cursor: pointer;
    .name {
      flex: 1;
    }
  }
  .select-list:hover {
    background-color: #eeeeee;
  }
</style>