aiot-app/components/categorySelector/contentBox.vue

<template>
  <view class="main-box">
    <view class="title"
      >选择原料
      <view class="choose-box" @click="handleClassification"> 选择分类 </view>
    </view>
    <view class="wrapper">
      <view class="searchBox">
        <input
          v-model="searchKey"
          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>
    <view 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.assetName }}
                </view>
                <view class="listBox-code">
                  {{ item.assetCode }}
                </view>
              </view>
              <view class="listBox-bottom">
                <view class="items"> 编码：{{ item.code }} </view>
                <view class="items"> 名称：{{ item.name }} </view>
                <view class="items"> 牌号：{{ item.brandNum }} </view>
                <view class="items"> 型号：{{ item.modelType }} </view>
                <view class="items"> 规格：{{ item.specification }} </view>
              </view>
            </view>
          </view>
        </label>
      </checkbox-group>
      <u-empty style="margin-top: 20vh" v-if="!listData.length"> </u-empty>
    </view>
    <view class="footer">
      <view class="footer-cancel" @click="$emit('handleCancel')">关闭</view>
      <view class="footer-comfirm" @click="handleComfirm">选择</view>
    </view>

    <classificationPicker
      :warehousingType="warehousingType"
      ref="classificationRef"
      @confirm="classificationConfirm"
    />
  </view>
</template>
<script>
import classificationPicker from "./classification-picker.vue";
import { getList } from "@/api/classifyManage/itemInformation";
let page = 1;
export default {
  components: { classificationPicker },
  props: {
    warehousingType: {
      type: [String, Number],
      default: "0", //默认原料
    },
    chooseList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      searchKey: "",
      curId: "",
      listData: [],
      memoList: [],
    };
  },

  methods: {
    //勾选
    selectVal(e, val, index) {
      this.listData[index].checked = !this.listData[index].checked;
      this.seletedAll = !this.listData.some((item) => !item.checked);
      const idx = this.memoList.findIndex(
        (item) => item.curId === this.listData[index].curId
      );
      if (this.listData[index].checked) {
        if (idx === -1) {
          this.memoList.push(this.listData[index]);
        }
      } else {
        if (idx > -1) {
          this.memoList.splice(idx, 1);
        }
      }
    },
    handleClassification() {
      this.$refs.classificationRef.show();
    },
    classificationConfirm([id], name) {
      this.curId = id;
      page = 1;
      this.getList();
    },
    async getList() {
      const res = await getList({
        pageNum: page,
        size: -1,
        categoryLevelId: this.curId,
        searchKey: this.searchKey,
      });
      this.listData = res.list;
      for (var i = 0; i < this.listData.length; i++) {
        for (var j = 0; j < this.chooseList.length; j++) {
          if (this.listData[i].id == this.chooseList[j].id) {
            this.listData[i].checked = true;
          }
        }
      }
      // console.log(res);
    },
    doSearch() {
      page = 1;
      this.getList();
    },
    handleComfirm() {
      this.$emit("pick", this.memoList);
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  line-height: 80rpx;
  font-size: $uni-font-size-lg;
  text-align: center;
  font-weight: bold;
  position: relative;
  .choose-box {
    position: absolute;
    right: 10rpx;
    top: 0;
    font-weight: normal;
    font-size: $uni-font-size-sm;
    color: $j-primary-green;
  }
}

.main-box {
  height: 90vh;
  display: flex;
  flex-direction: column;
}
.wrapper {
  padding-top: 50px;
  position: relative;
}
.searchBox {
  position: absolute;
  top: 0;
  z-index: 99;
  background-color: #dedede;
  height: 50px;
  width: 100%;
  line-height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  input {
    height: 40px;
    width: 65%;
    background: #f9f9f9 !important;
    margin-left: 20rpx;
    padding-left: 10rpx;
    border-radius: 5rpx;
  }

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

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

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

.listContent {
  // margin-top: 100rpx;
  padding-bottom: 100rpx;
  flex: 1;
  overflow-x: scroll;

  .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-code {
        }
      }

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

        .items {
          width: 50%;
          margin-bottom: 10rpx;
        }

        .bot-left,
        .bot-right {
          display: inline-block;
          color: $uni-text-color-grey;
        }

        .bot-right {
        }
      }
    }
  }
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .footer-cancel {
    width: 50%;
    font-size: 36rpx;
    color: #fff;
    background: #ccc;
    text-align: center;
    line-height: 90rpx;
  }
  .footer-comfirm {
    width: 50%;
    font-size: 36rpx;
    color: #fff;
    background: #33cc66;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>