middleground_H5/components/baseCustomer/index.vue

<template>
  <view>
    <base-popup
      :title="'关联客户'"
      ref="basePopup"
      @handleConfirmClick="handlerCustomerConfirm"
      @handleCloseClick="resetDialog"
    >
      <view style="padding: 20rpx 30rpx 0 30rpx">
        <u-search
          v-if="showSearch"
          :placeholder="placeholder"
          v-model="CodeOrName"
          shape="square"
          clearabled
          :showAction="false"
          @change="contractSearch"
        ></u-search>
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltolower="scrolltolower"
          :lower-threshold="0"
          style="margin-top: 20rpx"
          v-if="!isLoading"
        >
          <!--单选-->
          <u-radio-group
            v-if="type == 'radio'"
            :borderBottom="true"
            iconPlacement="right"
            placement="column"
            @change="groupChange"
            v-model="radioValue"
          >
            <u-radio
              :customStyle="{ marginBottom: '12px' }"
              v-for="(item, index) in dataLists"
              :key="index"
              :name="item.cusCode"
            >
              <view class="listData">
                <view class="content">
                  <text>客户编码：</text>
                  {{ item.cusCode }}
                </view>
                <view class="content">
                  <text>客户名称：</text>
                  {{ item.cusName }}
                </view>
                <view class="flex time">
                  <view class="overflowTextHidden">
                    <text>客户简称：</text>
                    {{ item.cusShortName }}
                  </view>
                  <view class="overflowTextHidden">
                    <text>客户分类：</text>
                    {{ item.cusClassifyName }}
                  </view>
                  <view class="overflowTextHidden">
                    <text>分管部门：</text>
                    {{ item.orgainName }}
                  </view>
                  <view class="overflowTextHidden">
                    <text>法人：</text>
                    {{ item.legalPerson }}
                  </view>
                  <view class="overflowTextHidden">
                    <text>税号：</text>
                    {{ item.taxNumber }}
                  </view>
                  <view class="overflowTextHidden">
                    <text>电话：</text>
                    {{ item.telphone }}
                  </view>
                  <view>
                    <text>地址：</text>
                    {{ item.address }}
                  </view>
                </view>
              </view>
            </u-radio>
          </u-radio-group>

          <!--多选-->
          <u-checkbox-group
            v-if="type == 'checkbox'"
            :borderBottom="true"
            placement="column"
            iconPlacement="right"
            @change="checkboxChange"
            v-model="checkboxValue"
          >
            <u-checkbox
              :customStyle="{ marginBottom: '12px', paddingBottom: '12px' }"
              v-for="(item, index) in dataLists"
              :key="index"
              :name="item.cusCode"
              :label="item.cusName + ' ' + item.cusCode"
            >
            </u-checkbox>
          </u-checkbox-group>
          <view class="contractNoData" v-show="noData">
            <u-divider text="我是有底线哒！" :hairline="true"></u-divider>
          </view>
        </scroll-view>
        <u-loadmore
          v-else
          status="loading"
          :loadingText="'数据加载中'"
          :marginTop="150"
        ></u-loadmore>
      </view>
    </base-popup>
  </view>
</template>

<script>
import { OrganGetCustomer } from "@/api/system/projectAdd.js";
import basePopup from "@/components/basePopup/index.vue";
export default {
  components: {
    basePopup,
  },
  props: {
    // 是否显示搜索
    showSearch: {
      default: true,
      type: Boolean,
    },
    placeholder: {
      default: "请输入客户名称、客户编码",
      type: String,
    },
    type: {
      default: "checkbox",
      type: String,
    },
  },
  data() {
    return {
      noData: false,
      CodeOrName: "",
      scrollTop: 0,
      pages: {
        page: 1, //当前页码
        limit: 20, //每页显示多少
        cusClassify: "", //树形分类id
        Sequence: "", //排列方式
        SequenceName: "", //需要排列的字段名
        CodeOrName: "",
      },
      dataLists: [],
      checkboxData: [],
      checkboxValue: [],
      radioData: "",
      radioValue: "",
      timer: null,
      isLoading: false,
    };
  },
  methods: {
    openDialog() {
      this.OrganGetCustomer();
      this.$refs.basePopup.isShowPopup = true;
    },
    // 搜索
    contractSearch(value) {
      if (this.timer !== null) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.pages.CodeOrName = value;
        this.OrganGetCustomer();
        this.radioValue = "";
        this.checkboxValue = Object.assign([], []);
      }, 800);
    },
    resetDialog() {
      this.CodeOrName = "";
      this.pages.page = 1;
      this.pages.CodeOrName = "";
      this.radioValue = "";
      this.checkboxValue = Object.assign([], []);
    },
    checkboxChange(n) {
      this.checkboxData = [];
      n.forEach((key) => {
        this.dataLists.forEach((item) => {
          if (item.cusCode == key) {
            this.checkboxData.push(item);
          }
        });
      });
    },
    //选择列表项触发
    groupChange(n) {
      this.radioData = this.dataLists.filter((item) => item.cusCode === n);
    },
    // 滑动到底部触发，用于下拉加载新数据
    scrolltolower() {
      if (this.noData != true) {
        this.pages.page++;
        this.OrganGetCustomer();
      }
    },
    // 获取客户弹窗--列表
    async OrganGetCustomer() {
      this.isLoading = true;
      this.noData = false;
      let params = {
        ...this.pages,
      };
      const res = await OrganGetCustomer(params);
      this.isLoading = false;
      if (this.pages.page > 1) {
        this.dataLists.push(...res.data[1]);
      } else {
        this.dataLists = res.data[1];
      }
      if (res.data[1].length < 20) {
        this.noData = true;
      }
    },
    // 确认按钮点击事件
    handlerCustomerConfirm() {
      if (this.type == "radio") {
        if (
          this.radioData == "" ||
          this.radioData == undefined ||
          this.radioData == null
        ) {
          uni.$u.toast("请选择数据");
          return;
        }
        this.$emit("handlerCustomerConfirm", this.radioData);
        this.$refs.basePopup.isShowPopup = false;
        this.resetDialog();
      } else if (this.type == "checkbox") {
        if (this.checkboxData.length == 0) {
          uni.$u.toast("请选择数据");
          return;
        }
        this.$emit("handlerCustomerConfirm", this.checkboxData);
        this.$refs.basePopup.isShowPopup = false;
        this.resetDialog();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-Y {
  height: 680rpx;
}
.contractNoData .u-divider {
  margin: 0;
}
.content {
  line-height: 1.5;
  font-size: 28rpx;
  margin-bottom: 20rpx;

  text {
    font-size: 28rpx;
    color: #979797;
  }
}
.time {
  font-size: 28rpx;
  flex-wrap: wrap;
  line-height: 1.5;

  text {
    display: inline-block;
    font-size: 26rpx;
    color: #979797;
    margin-bottom: 30rpx;
  }

  view {
    height: 48rpx;
  }
  view:nth-child(2n + 1) {
    width: 50%;
  }

  view:nth-child(2n) {
    width: 50%;
  }
  view:nth-child(4) {
    text:nth-child(2) {
      font-size: 28rpx;
    }
  }
}
</style>