aiot-app/pages/production/execute/extrusion/components/materialDialog.vue

<template>
  <u-popup :show="searchVisible" mode="bottom" @close="searchVisible = false">
    <view class="main-box">
      <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.categoryCode }} </view>
                  <view class="items"> 名称：{{ item.categoryName }} </view>
                  <view class="items"> 牌号：{{ item.brandNum }} </view>
                  <view class="items"> 型号：{{ item.model }} </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="close">关闭</view>
        <view class="footer-comfirm" @click="handleComfirm">选择</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { bomSubListByVersionId } from "@/api/classifyManage/itemInformation";
export default {
  props: {
    chooseList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    params: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      searchVisible: false,
      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);
        }
      }
    },
    async getList() {
      const res = await bomSubListByVersionId(this.params);
      this.listData = res;
      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("affirm", this.memoList);
      this.close();
    },
    open() {
      this.searchVisible = true;
      this.getList();
    },
    close() {
      this.searchVisible = false;
    },
    select(list) {
      this.$emit("affirm", list);
      this.searchVisible = false;
    },
  },
};
</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>