aiot-app/pages/production/execute/halfAdded/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="半加定长"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view class="tab-title">
      <view class="search-box">
        <uni-easyinput
          prefixIcon="search"
          v-model="searchValue"
          placeholder="请输入搜索内容"
          @iconClick="iconClick"
        >
        </uni-easyinput>
      </view>
    </view>
    <view class="radio-wrapper">
      <view class="title"> 设备 </view>
      <radio-group @change="(e) => selectVal(e)">
        <label v-for="item in tableList">
          <view class="list-item">
            <view class="list-col full"
              ><text>编码：</text><text>{{ item.code }}</text></view
            >
            <view class="list-col full"
              ><text>设备名称：</text><text>{{ item.name }}</text></view
            >
            <view class="list-col"
              ><text>设备规格：</text
              ><text>{{ item.category.specification }}</text></view
            >
            <!-- <view class="list-col"
              ><text>是否已投料</text><text>22222</text></view
            > -->
            <view class="list-col"
              ><text>设备型号：</text
              ><text>{{ item.category.modelType }}</text></view
            >
            <view class="list-col position"
              ><text>位置：</text
              ><text>{{ item.position[0].pathName }}</text></view
            >
            <radio
              :value="item.id"
              color="#fff"
              :disabled="item.disabled"
              :checked="item.id === (curItem && curItem.id)"
            />
          </view>
        </label>
      </radio-group>
    </view>
    <view class="footer">
      <ProcessOperate
        @handlePicking="handlePicking"
        @handleReport="handleReport"
      />
    </view>
  </view>
</template>

<script>
import { getAsset } from "@/api/mainData";
import ProcessOperate from "../components/ProcessOperate.vue";
let page = 1;
let isEnd = false;
export default {
  components: {
    ProcessOperate,
  },
  data() {
    return {
      searchVisible: false,
      tableList: [],
      searchValue: "",
      curItem: null,
    };
  },
  onShow() {
    page = 1;
    this.getList();
  },
  onReachBottom() {
    if (isEnd) {
      return;
    }
    page++;
    this.getList();
  },
  methods: {
    //勾选
    selectVal({ detail }) {
      this.curItem = this.tableList.find((i) => i.id === detail?.value);
    },
    // 投料、
    handlePicking() {
      if (!this.curItem) {
        return uni.showToast({
          title: "请选择设备",
          icon: "none",
        });
      }
      uni.navigateTo({
        url: `/pages/production/execute/halfAdded/picking?code=${this.curItem.code}&name=${this.curItem.name}`,
      });
    },
    // 报工
    handleReport() {
      const eqObj = {
        code: this.curItem.code,
        name: this.curItem.name,
        sourceInstanceId: this.curItem.id,
        rootCategoryLevelId: this.curItem.rootCategoryLevelId,
        brandNum: this.curItem.category?.brandNum,
        modelType: this.curItem.category?.modelType,
      };

      uni.navigateTo({
        url: `/pages/production/execute/halfAdded/report?data=${JSON.stringify(
          eqObj
        )}`,
      });
    },
    //获取列表信息
    async getList() {
      const res = await getAsset({
        pageNum: page,
        size: 15,
        name: this.searchValue,
        categoryLevelId: 4,
        rootCategoryLevelId: 4,
      });

      this.curItem = null;
      this.tableList = page === 1 ? res.list : [...this.tableList, ...res.list];

      isEnd = res.count <= this.tableList.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBox {
  box-sizing: border-box;
  padding-bottom: 230rpx;

  .radio-wrapper {
    .title {
      font-weight: bold;
      padding: 10rpx;
    }

    .list-item {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 50rpx 10rpx 20rpx;
      border-bottom: 1rpx solid #ccc;
      radio {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10rpx;
      }

      .list-col {
        display: flex;
        justify-content: space-between;
        width: 50%;
        &.position {
          width: 100%;
          justify-content: flex-start;
          text {
            flex: auto;
          }
        }
        &.full {
          width: 100%;
        }
        text {
          flex: 1;
        }
      }
    }
  }

  .footer {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 0;
  }
}
.search-container {
  width: 70vw;
  padding: 30rpx 36rpx;
  .title {
    font-weight: bold;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }
  .status-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      background-color: rgba(242, 242, 242, 1);
      height: 60rpx;
      border-radius: 30rpx;
      line-height: 60rpx;
      text-align: center;
      width: 160rpx;
      border: 1rpx solid rgba(242, 242, 242, 1);
      &.active {
        color: #157a2c;
        border-color: rgba(21, 122, 44, 1);
      }
    }
  }
  /deep/.uni-date {
    .uni-icons {
      display: none;
    }
    .uni-date-x {
      padding: 0;
      view {
        margin: 0 20rpx;
      }
    }
  }
  /deep/.uni-date__x-input,
  /deep/.uni-easyinput__content-input {
    height: 60rpx;
    border-radius: 30rpx;
    overflow: hidden;
    background-color: rgba(242, 242, 242, 1);
  }
  .version-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .wrapper-label {
    height: 50rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    margin: 0 20rpx 20rpx 0;
  }
  .picker-time {
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #ccc;
    margin-bottom: 20rpx;
    text-indent: 10rpx;
    border-radius: 4rpx;
  }
}
.tab-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  height: 110rpx;
  .search-box {
    width: 90%;
    margin: 0 auto;
  }
  .search-icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    white-space: nowrap;
    margin-left: 10rpx;
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .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;
    }
  }
}

.listBox {
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  .listTit {
    display: flex;
    align-items: center;
    .stuts {
      width: 55px;
      font-size: 12px;
      // border: 1px solid red;
    }
    .name {
      font-size: $uni-font-size-base;
      padding-left: 15rpx;
    }

    .date {
      font-size: $uni-font-size-sm;
      padding-left: 45rpx;
      color: #999;
    }
  }

  .listCont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 20rpx;
    flex-direction: row;
    margin-top: 10rpx;
    color: #666;

    // border: 1px solid red;
    .item {
      width: 50%;
      font-size: $uni-font-size-sm;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }

    .item text {
      color: #666;
    }
    .item-left {
      font-size: 20px;
      font-weight: 600;
      color: #999;
      position: relative;
      left: 90%;
      top: -55rpx;
    }
  }
  .item-top {
    height: 5rpx;
    width: 96%;
    margin: 0 auto;
    border-bottom: 1px solid #d8d3d3;
  }

  .listbtn {
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .operBox {
      display: flex;
      align-items: center;
    }
  }

  .listbtn button {
    margin-right: 20rpx;
  }
}
</style>