ShutongInterconnectedChemicalCloudPlatform/src/views/hr/company/orgPeople.vue

<!--
@ 作者: 秦东
@ 时间: 2025-08-16 11:11:52
@ 备注: 人员选择
-->
<script lang="ts" setup>
import {
  geiOrgAllPeople,
  saveEditDutyInfo,
  getDutyCont,
  get_org_everyone_people,
  getOrgTree,
  getOrgPeopleList,
} from "@/api/hr/paiban/index";
import UserIcon from "@/assets/images/1.png";

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  orgKey: {
    type: Object,
    default() {
      return {};
    },
  },
  orgInfo: {
    type: Object,
    default() {
      return {};
    },
  },
  currOrgCont: {
    type: Number,
    default: 309,
  },
  currOrgContName: {
    type: String,
    default: "",
  },
});
const loading = ref(false);
const emits = defineEmits(["update:isOpen", "subitRefresh"]);
const openPage = computed({
  get() {
    return props.isShow;
  },
  set(val: boolean) {
    emits("update:isShow", val);
  },
});
//行政组织列表
const currOrgManList = ref([]);
const peopleAry = ref([]); //人员列表
//搜索条件
const searchAry = reactive({
  id: props.currOrgCont * 1,
  name: "",
  page: 1,
  pagesize: 10,
});
//已选择的数据
const pickUserAry = ref(props.orgInfo ? props.orgInfo : []);
const pickUserKeyAry = ref(props.orgKey ? props.orgKey : []);
const totalCount = ref(0); //一共多少数据
//选中行政组织节点
const pickOrgNode = (val: any, v: any, y: any, u: any) => {
  searchAry.id = val.id * 1;
  searchAry.page = 1;
  getPeople();
};
//树字段转换
const defaultProps = {
  children: "children",
  label: "name",
};
const saveInfo = ref("");
const loadTable = ref(false);
//获取行政组织
const getOrgTreeSub = () => {
  currOrgManList.value = [];
  getOrgTree({
    id: props.currOrgCont * 1,
  }).then((res: any) => {
    console.log("获取行政组织人员信息get_org", res);
    currOrgManList.value = res.data;
  });
};
//清空所有数据
const delAll = () => {
  pickUserAry.value = [];
  pickUserKeyAry.value = [];
};
//关闭选择
const closeOrgUserPAge = () => {
  emits("update:isShow", false);
  delAll();
  currOrgManList.value = [];
  peopleAry.value = [];
  searchAry.id = props.currOrgCont * 1;
  searchAry.page = 1;
  searchAry.pagesize = 10;
  searchAry.name = "";
};
//搜索人员
const searchPeopleUs = () => {
  searchAry.id = props.currOrgCont * 1;
  searchAry.page = 1;
  getPeople();
};
//获取人员信息
const getPeople = () => {
  loadTable.value = true;
  getOrgPeopleList({
    id: searchAry.id,
    name: searchAry.name,
    page: searchAry.page,
    pagesize: searchAry.pagesize,
  })
    .then((res: any) => {
      console.log("获取人员信息------val----->", res);
      let userListAry = res.data;
      totalCount.value = userListAry.total;
      peopleAry.value = userListAry.list;
      loadTable.value = false;
    })
    .finally(() => {
      loadTable.value = false;
    });
};
//选择人员
const handleCurrentChange = (val: any) => {
  console.log("选择人员------row----->", val);
  let isNew = true;
  console.log("选择人员------row----->", Array.isArray(pickUserAry.value));
  if (Array.isArray(pickUserAry.value)) {
    let neeAry = new Array();
    let neeKeyAry = new Array();
    pickUserAry.value.forEach((item, index) => {
      if (item.userKey == val.userKey) {
        isNew = false;
      } else {
        neeAry.push(item);
        neeKeyAry.push(item.userKey);
      }
    });
    if (isNew) {
      pickUserAry.value.push(val);
      pickUserKeyAry.value.push(val.userKey);
    } else {
      pickUserAry.value = neeAry;
      pickUserKeyAry.value = neeKeyAry;
    }
  } else {
    pickUserAry.value.push(val);
    pickUserKeyAry.value.push(val.userKey);
  }
};
// 勾选的行改变颜色
const rowClass = (val: any) => {
  if (Array.isArray(pickUserKeyAry.value)) {
    if (pickUserKeyAry.value.includes(val.userKey)) {
      return "active";
    }
  }
};
//翻页
const pageCurrentChange = (val: any) => {
  searchAry.page = val;
  console.log("翻页数据--->", val, searchAry);
  getPeople();
};
//删除已选中的数据
const delPickUs = (val: any) => {
  if (Array.isArray(pickUserAry.value)) {
    let neeAry = new Array();
    let neeKeyAry = new Array();
    pickUserAry.value.forEach((item, index) => {
      if (item.userKey != val.userKey) {
        neeAry.push(item);
        neeKeyAry.push(item.userKey);
      }
    });
    pickUserAry.value = neeAry;
    pickUserKeyAry.value = neeKeyAry;
  }
};

//选定
const pickOkUser = () => {};
onMounted(() => {
  console.log("新家项目---》", props);
  getOrgTreeSub();
  getPeople();
});
</script>
<template>
  <el-dialog
    v-model="openPage"
    title="选择人员"
    width="900"
    draggable
    :before-close="closeOrgUserPAge"
    append-to-body
  >
    <div class="bianBox">
      <div class="bianKuang">
        <div class="topHead">行政组织</div>
        <el-scrollbar class="bianScro">
          <el-tree
            style="width: 100%"
            :data="currOrgManList"
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            node-key="id"
            @node-click="pickOrgNode"
          />
        </el-scrollbar>
      </div>
      <div class="bianKuangCenter">
        <div class="topHead">
          <el-input
            v-model="searchAry.name"
            clearable
            placeholder="请输入姓名或工号、手机号码"
          >
            <template #append>
              <el-button class="fa fa-search" @click="searchPeopleUs" />
            </template>
          </el-input>
        </div>
        <el-row class="rowHead">
          <el-col :span="4">照片</el-col>
          <el-col :span="6">姓名</el-col>
          <el-col :span="7">工号</el-col>
          <el-col :span="7">联系方式</el-col>
        </el-row>
        <el-scrollbar class="bianScroRow">
          <el-row
            v-for="item in peopleAry"
            :key="item.userKey"
            @click="handleCurrentChange(item)"
            :class="'rowInfo ' + rowClass(item)"
          >
            <el-col :span="4" class="imgBoxCol">
              <img class="imgBox" :src="item.userAvatar ? item.userAvatar : UserIcon" />
            </el-col>
            <el-col :span="6">{{ item.userName }}</el-col>
            <el-col :span="7">{{ item.userNumber }}</el-col>
            <el-col :span="7">{{ item.telStr }}</el-col>
          </el-row>
        </el-scrollbar>
        <div class="fanyeBox">
          <el-pagination
            size="small"
            background
            layout="prev, pager, next"
            :total="totalCount"
            @current-change="pageCurrentChange"
          />
        </div>
      </div>
      <div class="bianKuang">
        <div class="topHead fencha">
          <div>
            已选择（<el-text class="mx-1" type="danger">{{ pickUserAry.length }}</el-text
            >）
          </div>
          <div><el-text class="mx-1" type="danger" @click="delAll">清空</el-text></div>
        </div>
        <el-scrollbar class="bianScroRight">
          <div v-for="item in pickUserAry" :key="item.userKey" class="userBox">
            <img :src="item.userAvatar ? item.userAvatar : UserIcon" />
            <div>
              <el-space wrap>
                <el-text class="mx-1 pianyi fa fa-user" type="info"
                  >{{ item.userName }}（{{ item.userNumber }}）</el-text
                >
                <el-text class="mx-1 pianyi fa fa-phone" type="primary">{{
                  item.telStr
                }}</el-text>
              </el-space>
            </div>
            <i class="fa fa-trash-o" @click="delPickUs(item)" />
          </div>
        </el-scrollbar>
        <div class="footBut">
          <el-button @click="closeOrgUserPAge">取消</el-button>
          <el-button type="primary" @click="pickOkUser">确定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped></style>