middleground_H5/components/baseRadioPerson/index.vue

<!-- 选择人员组件
	@desc 单选 弹窗
 -->
<template>
  <view>
    <base-popup
      ref="basePopup"
      @handleConfirmClick="personConfirmClick"
      :title="'选择人员'"
    >
      <view>
        <u-collapse>
          <!-- 手风琴headImageUr1 -->
          <u-collapse-item
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.o_OrganName"
            class="department"
            :name="index"
          >
            <u-icon
              name="star-fill"
              size="20"
              slot="icon"
              :color="color"
              class="el-icon-star-on star"
              :class="{ active: item.active }"
            ></u-icon>
            <u-list :height="'auto'" v-if="item.personList && item.personList.length > 0">
              <u-list-item
                v-for="(elItem, elIndex) in item.personList"
                :key="elIndex"
              >
                <u-cell
                  :title="elItem.p_PersonName + ' ' + elItem.p_Telphone"
                  @click="selectPerson(elItem)"
                >
                  <base-avatar
                    slot="icon"
                    shape="square"
                    size="35"
                    :text="
                      elItem.p_PersonName ? elItem.p_PersonName.slice(-2) : ''
                    "
                    bg-color="#3c9cff"
                    color="#ffffff"
                    font-size="10"
                    :src="elItem.headImageUrl"
                    customStyle="margin: -3px 5px -3px 0"
                  ></base-avatar>
                  <u-icon
                    name="checkbox-mark"
                    slot="right-icon"
                    size="20"
                    :color="color"
                    class="el-icon-star-on star"
                    :class="{ active: elItem.p_PersonID == chooseData.p_PersonID }"
                  ></u-icon>
                </u-cell>
              </u-list-item>
            </u-list>
            <view v-else class="empty">暂无数据</view>
          </u-collapse-item>
        </u-collapse>
        <u-toast ref="uToast"></u-toast>
      </view>
    </base-popup>
  </view>
</template>

<script>
import baseAvatar from "@/components/baseAvatar/index.vue";
import basePopup from "@/components/basePopup/index.vue";
import { PersonList, GetOrganTree } from "@/api/system/basePerson";
import config from "@/config";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    basePopup,
    baseAvatar,
  },
  data() {
    return {
      dataList: [],
      selectedDataList: [],
      personLoading: false,
      color: "f0f0f0",
      configData: {},
      chooseData: {},
    };
  },
  methods: {
    // 打开弹窗
    openDialog(selectedDataList = [], type) {
      this.configData = config;
      this.$refs.basePopup.isShowPopup = true;
      this.selectedDataList = [];
      this.getMenuData(selectedDataList);
    },
    // 人员确定
    personConfirmClick() {
      if (JSON.stringify(this.chooseData) == "{}") {
        this.$refs.uToast.show({
          type: "warning",
          message: "请选择人员!",
        });
        return;
      }
      this.$emit("personConfirmClick", this.chooseData);
      this.$refs.basePopup.isShowPopup = false;
    },
    // 获得组织图
    async getMenuData(selectedDataList) {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 5000);
      let params = {
        CompanyID: getUserInfo().companyID,
      };

      let res = await GetOrganTree(params);
      let dataList = JSON.parse(res.data[0]);

      let departmentList = [];

      function setDepartmentList(data) {
        data.forEach((item) => {
          let arr = {
            o_OrganName: item.label,
            personList: [],
            active: false,
          };
          departmentList.push(arr);
          if (item.children && item.children.length > 0) {
            setDepartmentList(item.children);
          }
        });
      }
      setDepartmentList(dataList);
      this.getPersonList(departmentList, selectedDataList);
    },
    // 获得人员列表
    async getPersonList(departmentList, selectedDataList) {
      let params = {
        page: "1",
        limit: "999",
        departmentID: "",
      };
      let res = await PersonList(params);
      if (res.code === 1) {
        departmentList.forEach((el) => {
          res.data[1].forEach((item) => {
            if (el.o_OrganName == item.o_OrganName) {
              let personArr = {
                o_OrganName: item.o_OrganName,
                p_PersonName: item.p_PersonName,
                p_PersonID: item.p_PersonID,
                p_Telphone: item.p_Telphone,
                headImageUrl: item.headImageUrl
                  ? this.configData.baseUrl +
                    String(item.headImageUrl).split("/wwwroot")[1]
                  : "",
                active: false,
              };
              el.personList.push(personArr);
            }
          });
        });
        this.dataList = departmentList;
        this.dataList.forEach((el) => {
          el.personList.forEach((elItem) => {
            selectedDataList.forEach((item) => {
              if (item.p_PersonID == elItem.p_PersonID) {
                elItem.active = true;
                this.selectedDataList.push(elItem);
              }
            });
          });
        });
        this.personLoading = false;
      }
    },
    selectPerson(val) {
      this.chooseData = val;
    },
  },
};
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

::v-deep .u-collapse-item__content__text {
  padding: 0;
}

::v-deep .u-list-item.u-list-item- .u-cell .u-line {
  border-bottom: 0 solid rgb(214, 215, 217) !important;
}
.empty {
  text-align: center;
  font-size: 14px;
  color: #919398;
  padding: 10px 0;
}
.dataBox {
  padding: 10rpx 0;
  border-bottom: 2rpx solid #ccc;
  min-height: 100rpx;
  display: flex;
  align-items: center;
}

.personBox {
  border-radius: 6rpx;
  text-align: center;
  background-color: #f0f0f0;
  color: #817582;
  padding: 20rpx 0;
  cursor: pointer;
  min-width: 200rpx;

  .name {
  }

  .phone {
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}

.personBox {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.personBox.active {
  color: #fff;
  background-color: #3c9cff;
}

.department {
  .el-icon-star-on {
    color: #f0f0f0;
  }
}

.el-icon-star-on.active {
  color: #3c9cff;
}

.personItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>