aiot-app/pages/saleManage/components/selectContact.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择"
      @clickLeft="backAdd"
    >
      <!--右菜单-->
      <template slot="right">
        <u-button
          type="success"
          size="small"
          class="u-reset-button"
          @click="$refs.treePicker._show()"
          text="选择分类"
        ></u-button>
      </template>
    </uni-nav-bar>
    <view class="searchBox">
      <input v-model="searchVal" placeholder="请输入名称" class="searchInput" />
      <u-button
        type="icon-shixiangxinzeng"
        size="30"
        @click="doSearch"
        data-icon="Search"
        class="searchBtn"
      >
        <view class="iconfont icon-sousuo"></view>
        <view class="text">搜索</view>
      </u-button>
    </view>
    <view class="wrapper">
      <u-list @scrolltolower="scrolltolower" class="listContent">
        <checkbox-group
          v-for="(item, index) in listData"
          :key="index"
          @change="(e) => selectVal(e, item, index)"
        >
          <label>
            <view class="listBox">
              <view class="listBox-sel">
                <checkbox
                  :value="item.code"
                  color="#fff"
                  :disabled="item.disabled"
                  :checked="item.checked"
                />
              </view>
              <view class="listBox-con">
                <view class="listBox-top">
                  <view class="listBox-name">
                    {{ item.name }}
                  </view>
                </view>
                <view class="listBox-bottom">
                  <!-- <view v-for="(itm, index) in tableHeader" :key="index">{{ itm.label }}：{{ item[itm.prop] }}</view> -->
                  <view>代号：{{ item.serialNo || "" }}</view>
                  <view
                    >详细地址：{{
                      (item.addressName || "") + item.address || ""
                    }}</view
                  >
                  <view
                    >是否指派：{{
                      (item.assignStatus === 1 ? "是" : "否") || ""
                    }}</view
                  >
                  <view>销售员：{{ item.salesmanName || "" }}</view>
                  <view>创建人：{{ item.createUsername || "" }}</view>
                </view>
              </view>
            </view>
          </label>
        </checkbox-group>
        <u-empty
          class="noDate"
          style="margin-top: 20vh"
          v-if="!listData.length"
        ></u-empty>
      </u-list>
    </view>

    <view class="footer">
      <view class="bottom" v-if="this.isAll == 1">
        <checkbox
          v-if="!seletedAll"
          color="#fff"
          :checked="seletedAll"
          @tap="_seletedAll"
          >全选</checkbox
        >
        <checkbox
          class="select-all"
          color="#fff"
          v-else
          :checked="seletedAll"
          @tap="_seletedAll"
          >取消全选
        </checkbox>
      </view>
      <u-button
        type="success"
        size="small"
        class="u-reset-button"
        :disabled="!checkListLen"
        @click="jumpAdd"
      >
        <view class="selBtn">选择( {{ checkListLen }} )</view>
      </u-button>
    </view>
    <ba-tree-picker
      ref="treePicker"
      key="verify"
      :multiple="false"
      @select-change="confirm"
      title="选择分类"
      :localdata="classificationList"
      valueKey="id"
      textKey="name"
    />
  </view>
</template>

<script>
import { contactPage } from "@/api/saleManage/contact/index.js";
import { getTreeByPid } from "@/api/classifyManage/index.js";
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
export default {
  components: {
    baTreePicker,
  },

  data() {
    return {
      page: 1,
      size: 20,
      isEnd: true,
      searchVal: "",
      pickTabIndex: 1,
      popupShow: false, //右侧搜索窗
      typeIndex: 1,
      listData: [], //列表数据
      classificationList: [], //分类数据
      seletedAll: false, //全选状态,
      isAll: "",
      isDemand: "",
      contactType: "",
    };
  },
  //选择的列表长度
  computed: {
    checkListLen() {
      return this.listData.filter((el) => el.checked).length;
    },
  },
  onLoad({ isAll, type, contactType }) {
    this.isAll = isAll; //1多选 2单选
    this.contactType = contactType || 17; //17客户 20供应商

    // *** 新增 需求进来的话 要增加查询条件
    if (type == "需求") {
      this.isDemand = "1";
    }
    this.getClassify();
  },
  onShow() {},
  methods: {
    scrolltolower() {
      if (this.isEnd) {
        return;
      }
      // 显示加载图标
      uni.showLoading({
        title: "数据加载中",
      });
      //获取更多数据
      this.page++;
      this.getList();
    },
    //列表数据
    async getList() {
      this.isEnd = false;
      this._getClassifyList();
    },
    async _getClassifyList() {
      uni.showLoading({
        title: "数据加载中",
      });
      const params = {
        pageNum: this.page,
        size: this.size,
        name: this.searchVal,
        categoryId: this.categoryLevelId,
        status: 1,
        type: this.contactType == 17 ? 1 : 2,
      };
      // 需求新增参数 ***
      if (this.isDemand == "1") {
        params.type = "1";
        params.status = "1";
      }
      contactPage(params).then((res) => {
        uni.hideLoading();
        if (this.page == 1) {
          this.listData = [];
        }
        this.listData = this.listData.concat(res.list);
        this.isEnd = this.listData.length >= res.count;
      });
    },
    confirm([id]) {
      this.categoryLevelId = id;
      this.page = 1;

      if (this.isAll === "2") {
        this.listData.forEach((item) => (item.checked = false));
      }

      this.getList();
    },
    async getClassify() {
      getTreeByPid(17).then((res) => {
        this.classificationList = res.data;
        this.page = 1;
        this.getList();
      });
    },
    doSearch() {
      this.page = 1;
      this.getList();
    },
    //勾选
    selectVal(e, val, index) {
      this.$set(this.listData[index], "checked", !this.listData[index].checked);

      if (this.isAll != 1) {
        this.listData.forEach((item, i) => {
          if (item.id != val.id) {
            this.$set(this.listData[i], "checked", false);
          }
        });
      } else {
        this.seletedAll = !this.listData.some((item) => !item.checked);
      }
    },
    //全选按钮
    _seletedAll() {
      if (!this.seletedAll) {
        this.seletedAll = true;
        this.listData.map((item) => {
          this.$set(item, "checked", true);
        });
      } else {
        this.seletedAll = false;
        //this.checkListLen = 0;
        this.listData.map((item) => {
          this.$set(item, "checked", false);
        });
      }
    },
    //跳转回添加页面
    jumpAdd() {
      uni.$emit(
        "setSelectList",
        this.listData.filter((item) => item.checked),
      );
      console.log(
        this.listData.filter((item) => item.checked),
        "222",
      );
      uni.navigateBack();
    },
    //返回添加页
    backAdd() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBox {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .wrapper {
    flex: 1;
    overflow: hidden;
  }

  .searchBox {
    padding: 10rpx 0;
    box-sizing: border-box;
    background-color: #dedede;
    height: 90rpx;
    width: 100%;
    line-height: 90rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    input {
      height: 78rpx;
      width: 65%;
      background: #f9f9f9 !important;
      margin: 0 10rpx;
      padding: 0 10rpx;
      box-sizing: border-box;
      border-radius: 5rpx;
    }

    .searchBtn {
      height: 80rpx;
      background: #f9f9f9 !important;
      color: #676767;
      font-size: 28rpx;
      padding: 0 42rpx;
      box-sizing: border-box;
      outline: none;
      border: none;
      width: 260rpx;

      .icon-sousuo {
        font-size: 22px;
      }

      .text {
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }

  .tab-title {
    position: fixed;
    top: 190rpx;
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $tab-height;
    line-height: $tab-height;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f2f2f2;
    box-sizing: border-box;

    .tab-item {
      width: 25%;
      text-align: center;
      font-size: 32rpx;
      color: $uni-text-color-grey;
    }

    .tab-item.active {
      color: $j-primary-border-green;
      border-bottom: 1px solid $j-primary-border-green;
      font-weight: bold;
    }

    .tab-item.filter {
      flex: 1;
      padding: 0px 30rpx;

      .uni-icons {
        display: flex;
        padding-top: 5px;
      }
    }

    .screenIcon {
      display: flex;
      width: 80px;
      justify-content: center;

      .screenText {
        font-size: 32rpx;
        color: $uni-text-color-grey;
      }
    }
  }

  .listContent {
    height: 100% !important;

    .listBox {
      display: flex;
      // height: 180rpx;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e5e5e5;

      .listBox-sel {
        height: 90rpx;
        width: 80rpx;
        // line-height: 90rpx;
        text-align: center;

        checkbox {
          transform: scale(1.2);
        }
      }

      .listBox-con {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        align-items: center;
        padding: 0 18rpx 0 0;

        .listBox-top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-bottom: 10rpx;

          .listBox-name,
          .listBox-code {
            display: inline-block;
            font-size: $uni-font-size-sm;
            font-weight: bold;
          }
        }

        .listBox-bottom {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: $uni-font-size-sm;
          flex-wrap: wrap;

          > view {
            width: 50%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .noDate {
      height: 100%;
    }
  }

  //底部按钮
  .footer {
    height: 90rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    border-top: 1rpx solid #eeecec;
    background-color: #ffffff;
    z-index: 999;

    .bottom {
      margin-left: 10rpx;
    }

    .u-reset-button {
      position: absolute;
      right: 10rpx;
      top: 20rpx;
      width: 150rpx;
    }
  }
}
</style>