usky-web-mobile/src/pages/business/common/projectMange/mall/components/mall-list.vue

<template>
  <view>
    <view class="box-head"><uni-mall-head ref="refUniMallHead" @change="tabChange"></uni-mall-head></view>
    <view class="box-list">
      <u-checkbox-group v-model="checkboxList" placement="column" :activeColor="$settingStore.themeColor.color" @change="checkboxChange">
        <view
          v-for="item in currentData"
          class="box-list-item"
          :class="[item.children && item.children.length >= 0 ? 'box-list-item-department-icon' : 'box-list-item-user']"
          :key="item.id"
          @click="handelClickItem(item)"
        >
          <view class="box-list-item-department-pic" v-if="item.children && item.children.length >= 0"><image src="@/static/department-icon.png"></image></view>
          <view class="box-list-item-user-pic flex" v-else>
            <u-checkbox class="box-list-item-user-pic-checkbox mr9" :name="item.id"> </u-checkbox>
            <u-avatar
              class="box-list-item-user-pic-avatar mr10"
              :src="item.avatar"
              shape="square"
              size="40"
              fontSize="12"
              color="#ffffff"
              :bgColor="$settingStore.themeColor.color"
              v-if="item.avatar"
            ></u-avatar>
            <u-avatar
              class="box-list-item-user-pic-avatar mr10"
              :text="item.label.length > 2 ? item.label.slice(1, 3) : item.label"
              shape="square"
              size="40"
              fontSize="12"
              color="#ffffff"
              :bgColor="$settingStore.themeColor.color"
              v-else
            ></u-avatar>
          </view>

          <view class="box-list-item-right">
            <view class="box-list-item-text">{{ item.label }} {{ item.children && item.children.length > 0 ? `（${item.children.length}）` : "" }}</view>
            <view class="box-list-item-user-tag" v-if="!item.children && item.post">
              <text>{{ item.post }}</text>
            </view>
          </view>
        </view>
      </u-checkbox-group>
    </view>
    <view class="box-foot">
      <view class="box-foot-left" style="justify-self: center">
        <view class="box-foot-left-count" :style="{ color: $settingStore.themeColor.color }">已选择:{{ checkboxUserList.length }}人</view>
        <view class="box-foot-left-people"> {{ checkboxUserList.toString() || "最多选择200人" }}</view>
      </view>
      <view class="box-foot-right">
        <u-button class="app-buttom" type="primary" @click="handleSubmit()" shape="square" :color="$settingStore.themeColor.color"> 确定({{ checkboxUserList.length + "/200" }}) </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import uniMallHead from "./mall-head.vue";
import common from "@/plugins/common.plugins.js";
import { storageSystem } from "@/utils/storage"; // 公共方法引用
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    defaultHeadList: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    uniMallHead,
  },
  data() {
    return {
      checkboxList: [],
      currentData: [],
      checkboxUserData: [],
      checkboxUserList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (Object.keys(this.defaultHeadList).length > 0) {
        this.$refs.refUniMallHead.addTab(this.defaultHeadList);
      }
      this.currentData = this.dataList;

      var userList = storageSystem.get("project").userList;
      if (userList) {
        userList.forEach((e) => {
          this.checkboxList.push(e.id);
          this.checkboxUserData.push(e);
          this.checkboxUserList.push(e.label);
        });
      }
    },
    tabChange(obj) {
      this.getCurrentData(obj.id, this.dataList);
    },
    handelClickItem(item) {
      if (item.children && item.children.length > 0) {
        this.$refs.refUniMallHead.addTab({ label: item.label, id: item.id });
        this.currentData = item.children;

        this.currentData.forEach((e) => {
          this.checkboxUserData.forEach((f) => {
            if (e.id === f.id) {
              this.checkboxList.push(f.id);
            }
          });
        });
      } else {
        this.$modal.msg("该部门下暂无可选择人员！");
      }
      // this.$emit("change", item);
    },
    getCurrentData(id, data) {
      if (id === this.defaultHeadList.id) {
        this.currentData = this.dataList;
      } else {
        if (data.length > 0) {
          data.map((item) => {
            if (item.id === id) {
              this.currentData = item.children;
            }
            if (item.children && item.children.length > 0) {
              this.getCurrentData(id, item.children);
            }
          });
        }
      }
    },
    handleSubmit() {
      this.$emit("submit", this.checkboxUserData);
    },
    checkboxChange(event) {
      this.currentData.forEach((f) => {
        if (event.includes(f.id)) {
          this.checkboxUserData.push(f);
        } else {
          this.checkboxUserData.forEach((e, index) => {
            if (e.id === f.id) {
              delete this.checkboxUserData[index];
            }
          });
        }
      });

      this.checkboxUserList = [];
      this.checkboxUserData = common.uniq(this.checkboxUserData, "id");
      this.checkboxUserData.forEach((e) => {
        this.checkboxUserList.push(e.label);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-head {
  position: fixed;
  left: 0px;
  width: 100%;
  height: 48px;
  background: #ffffff;
  padding-left: 17px;
  box-sizing: border-box;
  overflow-y: hidden;
  z-index: 999;
}
.box-list {
  padding-top: 52px;
  //#ifdef APP-PLUS || MP-WEIXIN
  padding-bottom: 60px;
  //#endif
  .box-list-item {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    background: #ffffff;
    margin-bottom: 1px;
    &:active {
      background: #f2f3f4;
    }
    &:last-child {
      margin-bottom: 0px;
    }
    .box-list-item-department-pic {
      width: 40px;
      height: 40px;
      background: rgba(55, 127, 255, 0.1);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      overflow: hidden;
      image {
        width: 20px;
        height: 20px;
      }
    }
    .box-list-item-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
    }
    .box-list-item-text {
      color: #333333;
      font-size: 14px;
    }
    .box-list-item-user-tag {
      text {
        box-sizing: border-box;
        border-radius: 8px;
        padding: 4px 8px;
        font-size: 10px;
        margin-left: 5px;
        &:first-child {
          margin-left: 0px;
        }
        &:nth-child(1) {
          background: rgba(49, 210, 144, 0.05);
          border: 1px solid #31d290;
          color: #31d290;
        }
        &:nth-child(2) {
          background: rgba(55, 127, 255, 0.05);
          border: 1px solid #377fff;
          color: #377fff;
        }
      }
    }
    &.box-list-item-department-icon {
      &::before {
        content: " ";
        height: 10px;
        width: 10px;
        border-width: 2px 2px 0 0;
        border-color: #c0c0c0;
        border-style: solid;
        transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
        position: absolute;
        top: 50%;
        margin-top: -6px;
        right: 14px;
      }
    }
  }
  .box-list-item-department + .box-list-item-user {
    margin-top: 10px;
  }
}

.box-foot {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background: #ffffff;
  z-index: 999;
  box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
  display: flex;
  padding: 0 15px;

  &-left {
    margin: auto auto auto 0;

    &-count {
      color: #377fff;
      font-size: 14px;
      margin-bottom: 5px;
    }

    &-people {
      color: #999;
      font-size: 12px;
    }
  }

  &-right {
    margin: auto 0 auto 15px;
  }
}
</style>