YZProjectCloud/yanzhu-ui-app/miniprogram/components/select-group-person/index.js

// newComponents/select-group-person/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
    },
    index: {
      type: String,
    },
    choose: {
      type: String,
    },
    multiple: {
      type: Boolean,
      value: true,
    },
    rectifierData: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        // 当rectifierData变化时，重新初始化选中状态
        this.initSelectedData(newVal);
      },
    },
  },
  observers: {},
  lifetimes: {
    created: function () {
      //在组件实例刚刚被创建时执行，注意此时不能调用 setData
    },
    attached: function () {
      //在组件实例进入页面节点树时执行
    },
    ready: function () {
      // 在组件在视图层布局完成后执行
      // 初始化选中数据
      this.initSelectedData(this.data.rectifierData);
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    gridData: [],
    selectedIndex: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 初始化选中数据
    initSelectedData(rectifierData) {
      if (!rectifierData || rectifierData.length === 0) return;

      let selectedIndex = [];
      let chooses = "";

      // 遍历数据，查找已选中的用户
      rectifierData.forEach((group, groupIndex) => {
        if (group.userList && group.userList.length > 0) {
          group.userList.forEach((user, userIndex) => {
            if (user.state === true) {
              // 记录选中项的索引
              selectedIndex.push(groupIndex + "_" + userIndex);

              // 构建显示文本
              let post = user.userPostName
                ? " [" + user.userPostName + "]"
                : "";
              chooses += "," + user.userName + post;
            }
          });
        }
      });

      // 更新数据
      this.setData({
        selectedIndex: selectedIndex,
        choose: chooses ? chooses.substring(1) : "",
      });
    },

    onAddResponsible() {
      this.setData({
        show: true,
      });
    },
    onClose() {
      this.setData({
        show: false,
      });
    },
    onSelected(e) {
      // 使用深拷贝避免直接修改原始数据
      const data = JSON.parse(JSON.stringify(this.data.rectifierData));
      let ei = e.currentTarget.dataset.index;
      let index = ei.split("_");
      let userdata = data[index[0]].userList[index[1]];
      let selectedIndex = [...this.data.selectedIndex];
      let of = selectedIndex.indexOf(ei);

      if (of > -1) {
        // 取消选中
        selectedIndex.splice(of, 1);
        userdata.state = false;
      } else {
        // 选中
        if (!this.data.multiple) {
          // 单选模式，清空之前选中的项
          selectedIndex.forEach((item) => {
            let _indexs = item.split("_");
            data[_indexs[0]].userList[_indexs[1]].state = false;
          });
          selectedIndex = [ei];
        } else {
          // 多选模式
          selectedIndex.push(ei);
        }
        userdata.state = true;
      }

      // 如果是单选模式且有选中项，直接触发事件并关闭弹窗
      if (!this.data.multiple && selectedIndex.length > 0) {
        let _post = userdata.userPostName
          ? " [" + userdata.userPostName + "]"
          : "";
        let _gridData = [
          {
            userId: userdata.userId,
            userName: userdata.userName + _post,
            userPhone: userdata.userPhone,
          },
        ];
        this.triggerEvent("selected", _gridData);
        this.setData({
          choose: _gridData[0].userName,
          rectifierData: data,
          selectedIndex: selectedIndex,
          show: false,
        });
      } else {
        this.setData({
          rectifierData: data,
          selectedIndex: selectedIndex,
        });
      }
    },
    onConfirm() {
      const data = this.data.rectifierData;
      let _gridData = [];
      let chooses = "";
      if (this.data.selectedIndex.length > 0) {
        this.data.selectedIndex.forEach((item) => {
          let _indexs = item.split("_");
          let _post = "";
          if (data[_indexs[0]].userList[_indexs[1]].userPostName) {
            _post =
              " [" + data[_indexs[0]].userList[_indexs[1]].userPostName + "]";
          }
          let name = data[_indexs[0]].userList[_indexs[1]].userName + _post;
          _gridData.push({
            userId: data[_indexs[0]].userList[_indexs[1]].userId,
            userName: name,
            userPhone: data[_indexs[0]].userList[_indexs[1]].userPhone,
          });
          chooses += "," + name;
        });
      }
      this.triggerEvent("selected", _gridData);
      this.setData({
        choose: chooses.substring(1),
        show: false,
      });
    },
  },
});