lanju-app/src/components/lanju/lj-choose-spare/index.vue

<template>

  <u-popup
    id="popup-content"
    v-model="showPopup"
    mode="center"
    :mask-close-able="false"
    width="700rpx"
    height="90%"
    borderRadius="12rpx"
  >
    <view class="page-product-receipt">

      <u-form id="queryFrom" style="margin-top: -40px;" class="queryFrom" ref="form" label-width="180rpx">
        <u-form-item label="备件类型" label-width="23vw">
          <jPicker sureColor="#ff0000" @bindpicker="changSpareType" showKey="dictLabel" valKey="dictLabel" :val="query.spareType" :options="spareTypeList" :clearable="true"/>
        </u-form-item>
        <u-form-item label="备件品类" label-width="23vw">
          <jPicker sureColor="#ff0000" @bindpicker="changSpareCategory" showKey="dictLabel" valKey="dictLabel" :val="query.spareCategory" :options="spareCategoryList" :clearable="true" />
        </u-form-item>
        <u-form-item label="备件号/名称" label-width="23vw">
          <u-search placeholder="请输入备件号/名称" :focus="true"  :show-action="false"  v-model="query.materialCode" @search="getList"></u-search>
        </u-form-item>
      </u-form>
      <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }"  :lower-threshold="50" @touchmove.stop>
        <!--  列表  -->
        <u-form class="list">
          <view v-if="list.length > 0">
            <view class="list-item" v-for="(item, index) in list" :key="index" :class="{ active: spareItem && item.materialCode === spareItem.materialCode }" @click="selectItem(item)">
              <lj-list-row label="备件编码:" :value="item.materialCode" />
              <lj-list-row label="备件名称:" :value="item.materialDesc" />
              <lj-list-row label="单价:" :value="item.unitPrice || 0" />
            </view>
          </view>
          <view v-else> 暂无数据 </view>
        </u-form>
      </scroll-view>

      <!-- 底部按钮区 -->
      <view class="popup-footer" id="footer"  ref="footer">
        <u-button
          @click="closePopup"
          type="default"
          class="footer-btn cancel-btn"
          :style="{width: '160rpx'}"
        >
          取消
        </u-button>
        <u-button
          type="primary"
          class="footer-btn confirm-btn"
          :style="{width: '160rpx'}"
          @click="confirm"
        >
          确认
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import JPicker from "@/components/J-Picker/jPicker.vue";
import LjListRow from "@/components/lanju/lj-list-row/index.vue";
import {getDict, getSparePartsList} from "@/components/lanju/lj-choose-spare/model";

export default {
  name: 'SpareSelectPopup',
  components: {LjListRow, JPicker},
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      listHeight:400,
      showPopup: false,
      spareItem: null,
      query:{
        pageSize:9999,
        spareType:undefined,
        spareCategory:undefined,
        materialCode:undefined,
      },
      list:[],
      spareTypeList:[],
      spareCategoryList:[],
      spareCategoryObj:{}
    };
  },
  watch: {
    show(newVal) {
      this.showPopup = newVal;
      this.resetListHeight();
    }
  },
  computed: {

  },
  methods: {
    getList(){
      getSparePartsList(this.query).then(res=>{
        this.list = res.rows
      })
    },
    changSpareType(type){
      this.query.spareType = type.pickerName.dictValue
      this.spareCategoryList = this.spareCategoryObj[type.pickerName.dictValue]
      this.getList()
    },
    changSpareCategory(type){
      this.query.spareCategory = type.pickerName.dictValue
      this.getList()
    },
    selectItem(item){
      item.spareQuantity = 1
      this.spareItem = item
    },
    closePopup() {
      this.query.spareType = undefined
      this.query.spareCategory = undefined
      this.spareItem = undefined
      this.$emit('close');
    },
    confirm(){
      if (this.spareItem){
        this.$emit('confirm',this.spareItem);
      }else {
        uni.showToast({
          title: '请选择数据！',
          icon: 'none'
        });
      }

    },
    resetListHeight(){
      this.$nextTick(() => {
        let footer = 0;
        let buttonHeight = 0
        //获取底部按钮信息
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#popup-content')
          .boundingClientRect((data) => {
            if (data){
              footer = data.height;
            }
          })
          .exec();

        query
          .select('#footer')
          .boundingClientRect((data) => {
            //获取列表到顶部距离
            if (data){

              buttonHeight = data.height * 2;
            }

          })
          .exec();

        //获取列表信息
        query
          .select('#list')
          .boundingClientRect((data) => {
            //获取列表到顶部距离
            if (data){
              const listTop = data.top;
              console.log(footer)
              console.log(listTop)
              console.log(buttonHeight)
              this.listHeight = footer - listTop - buttonHeight - 10;
            }

          })
          .exec();
      });
    },
    initPickerOptions  () {
      getDict("spare_part_type").then(async res => {
        this.spareTypeList = res.data

        for (const item of this.spareTypeList) {
          await getDict(item.dictValue).then(res => {
            this.spareCategoryObj[item.dictValue] = res.data
          })
        }
        for (const key in this.spareCategoryObj){
          this.spareCategoryList = this.spareCategoryList.concat(this.spareCategoryObj[key]);
        }
      })
    }
  },

  mounted() {
    this.getList()
    this.resetListHeight()
    this.initPickerOptions()
  }
};
</script>

<style scoped lang="scss">

.list {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 20rpx 25rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
  color: #8d8989;

  .list-item {
    padding: 20rpx;
    margin-bottom: 10rpx;
  }

  .list-item.active {
    box-shadow: 0 0 0 3px #0c7bf3;
  }

  .righttitle {
    display: flex;
    justify-content: flex-end;

    .boder-icon-rigth {
      font-size: 30rpx;
      border-radius: 5px;
      border: 1rpx solid #fa3534;
      text-align: center;
      background: #fa3534;
      color: #ffffff;
      margin-top: 10px;
      margin-left: 10px;
    }
  }



  /* 奇数行背景色 */
  .list-item:nth-child(odd) {
    background-color: #ffffff;
  }

  /* 偶数行背景色 */
  .list-item:nth-child(even) {
    background-color: #f5f5f5;
  }
}


.popup-content {
  box-sizing: border-box;
}

.table-scroll {
  border-radius: 8rpx;
  background-color: #fafafa;
  margin-bottom: 30rpx;
}

.table {
  width: 100%;
}

.table-header {
  display: flex;
  background-color: #e8f4f8;
  border-radius: 8rpx 8rpx 0 0;
  height: 80rpx;
  line-height: 80rpx;
}

.table-th {
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.table-body {
  background-color: #fff;
}

.table-tr {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.table-td {
  padding: 0 20rpx;
  box-sizing: border-box;
  text-align: center;
  border: 1rpx solid #e5e5e5;
  line-height: 75rpx;
}

.input-item {
  width: 100%;
  border-radius: 8rpx;
  border: 1rpx solid #e5e5e5;
  padding: 0 16rpx;
  box-sizing: border-box;
}

.delete-icon {
  cursor: pointer;
}

.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #fafafa;
  border-radius: 0 0 8rpx 8rpx;
  cursor: pointer;
}

.add-text {
  font-size: 28rpx;
  color: #8c8c8c;
  margin-left: 16rpx;
}

.popup-footer {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.footer-btn {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
}

.cancel-btn {
  border: 1rpx solid #e5e5e5;
  color: #333;
}

.confirm-btn {
  background-color: #1989fa;
  color: #fff;
}
</style>