kd-aiot-frontend-mes/src/views/cqzb/components/select.vue

<template>
  <ele-modal
    title="选择人员"
    :visible.sync="staffVisible"
    :before-close="handleClose"
    width="400px"
    :centered="true"
    :close-on-click-modal="false"
    :maxable="true"
    append-to-body
  >
    <el-form label-width="68px" label-position="left">
      <el-form-item label="部门:" required>
        <deptSelect v-model="form.groupId" @changeGroup="searchDeptNodeClick" />
      </el-form-item>
      <el-form-item label="清理人:" required>
        <el-select
          style="width: 100%"
          v-model="form.nameIds"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in nameList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="choose"> 确定 </el-button>
    </template>
  </ele-modal>
</template>
<script>
  import { getUserPage } from '@/api/system/organization';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  export default {
    components: {
      deptSelect
    },
    data() {
      return {
        staffVisible: false,
        form: {
          nameIds: []
        },
        depVOList: [],
        nameList: [],
        index: 0
      };
    },
    methods: {
      handleClose() {
        this.staffVisible = false;
        this.nameList = [];
        this.form = {
          nameIds: []
        };
      },
      //选择部门(搜索)
      searchDeptNodeClick(info, row) {
        if (info) {
          const params = { groupId: info };
          this.getUserList(params);
        } else {
          this.form.nameIds = [];
        }
      },
      open(ids, index) {
        this.staffVisible = true;
        this.index = index;
      },
      // 选择
      choose() {
        if (!this.form.nameIds || this.form.nameIds.length == 0) {
          return this.$message.warning('请选择清理人');
        }
        // let cleaners =
        let obj = {};
        this.nameList.map((el) => {
          obj[el.id] = el.name;
        });
        let nameArr = [];
        this.form.nameIds.map((item) => {
          if (obj[item]) {
            nameArr.push(obj[item]);
          }
        });
        let name = nameArr.toString();
        this.$emit('setPersonnel', name, this.index);
        this.handleClose();
      },
      // 获取人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          let list = res.list.map((el) => {
            return {
              id: el.id,
              name: el.name
            };
          });
          this.nameList = list;
        } catch (error) {}
      }
    }
  };
</script>