aiot-app/pages/pda/by_product_recovery/index/index.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="副产品回收"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="top-wrapper">
      <view class="searchBox rx-bc">
        <zxz-uni-data-select
          :localdata="taskList"
          v-model="formData.taskId"
          dataValue="id"
          format="{name}"
          dataKey="name"
          filterable
          placeholder="请选择工序"
          @change="doSearch"
        ></zxz-uni-data-select>
        <u-button
          @click="doSearch"
          type="success"
          size="small"
          class="u-reset-button"
          text="搜索"
        >
        </u-button>
      </view>
    </view>

    <view class="list_box">
      <u-list
        @scrolltolower="scrolltolower"
        key="list"
        :preLoadScreen="page * 10"
      >
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="card_box" @click="handleDetail">
            <view class="item_box rx-bc">
              <view class="round">{{ index + 1 }}</view>
              <view class="item_one perce100 rx-sc">
                <view class="lable">回收单号：</view>
                <view class="text">{{ item.code }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">工单编码：</view>
                <view class="text">{{ item.workOrderCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">物品编码：</view>
                <view class="text">{{ item.categoryCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">物品名称：</view>
                <view class="text"> {{ item.categoryName }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce50 rx-sc">
                <view class="lable">不合格/合格数量：</view>
                <view class="text">
                  {{ item.notFormedNum || 0 }} / {{ item.formedNum || 0 }}</view
                >
              </view>

              <view class="item_one perce50 rx-sc">
                <view class="lable">工序：</view>
                <view class="text"> {{ item.taskName }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce50 rx-sc">
                <view class="lable">重量：</view>
                <view class="text">
                  {{ item.weight || 0 }} / {{ item.weightUnit }}</view
                >
              </view>
              <view class="item_one perce50 rx-sc">
                <view class="lable">回收人：</view>
                <view class="text"> {{ item.executorName }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">创建时间：</view>
                <view> {{ item.createTime }}</view>
              </view>
            </view>
          </view>
        </u-list-item>
        <!-- 
				<checkbox-group v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
					<label class="listBox rx-bs">

						<view class="listBox-sel">
							<checkbox
								v-if='item.rootCategoryLevelId != 11 || (item.rootCategoryLevelId == 11 && item.status != 1)'
								:value="item.code" color="#fff" :disabled="item.disabled" :checked="item.checked" />
						</view>

						<view class="listBox-con">

							<view class="listBox-top rx-bc">
								<view>工单编号：</view>
								<view class="code">{{ item.code}}</view>
							</view>


							<view class="listBox-bottom rx">
								<view class="items">
									<text>工艺路线</text>{{ item.produceRoutingName }}
								</view>


								<view class="items">
									<text>名称</text>{{ item.productName }}
								</view>

								<view class="items">
									<text>生产数量</text>{{ item.formingNum }}{{item.unit}}
								</view>


								<view class="items">
									<text>生产重量</text>{{item.formingWeight}} {{item.weightUnit}}
								</view>


							</view>

						</view>


					</label>

				</checkbox-group> -->

        <view v-if="list.length == 0" style="margin-top: 20vh">
          <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
        </view>
      </u-list>
    </view>

    <!-- <view class="bottom-wrapper rx-bc">
			<view>
				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
				</checkbox>
			</view>
			<view>
				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen"
					@click="handleSelect">
					<view> 选择( {{ checkListLen }} ) </view>
				</u-button>
			</view>
		</view> -->

    <!-- <SearchPopup mode="center" v-if='searchShow'>
			<template v-slot:list>
				<u-list @scrolltolower="scrolltolower" class="wl_list">
					<view class="recycleTitle">副产品列表</view>
					<view class="pop_list" v-for="(item, index) in memoList" :key="index">

						<view class="work_box rx-bc">
							<view>工单编号：</view>
							<view class="code">{{item.code}}</view>
						</view>



						<view class="recycleList rx" v-for="(it,idx) in item.recycleList" :key="'RECY' + idx">

							<view class="items">
								<text>副产品{{idx+1}}</text>{{ it.categoryName }}
							</view>


							<view class="items">
								<text>编号</text>{{ it.categoryCode }}
							</view>


						</view>

					</view>
					<view class="recycleTitle mt40">副产品处置</view>

					<view class="content_table" v-for="(item, index) in recyclell" :key="'ll' +index">

						<view class="item rx-sc">
							<view class="rx ww55 ">
								<view class="lable rx-cc">副产品</view>
								<view class="content ">{{item.categoryName}}</view>
							</view>

							<view class="rx ww45">
								<view class="lable rx-cc ww80">编号</view>
								<view class="content ">
									{{item.categoryCode}}
								</view>
							</view>
						</view>
						
						<view class="item rx-sc">
							<view class="rx ww55 ">
								<view class="lable rx-cc">处置</view>
								<view class="content  content_num">
									<zxz-uni-data-select  :localdata="warehouseList" v-model="item.warehouseId"
										dataValue='id' format='{name}' dataKey="name" filterable
										:clear='false'></zxz-uni-data-select>
										
								</view>
							</view>
						
							<view class="rx ww45">
								<view class="lable rx-cc ww80">数量</view>
								<view class="content content_num">
								<input class="uni-input" v-model="item.quantity" type="digit"></input>
								<view class="unit">{{item.weightUnit}}</view>
								</view>
							</view>
						</view>


					</view>

				</u-list>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="searchCancel">
						取消
					</u-button>


					<u-button type="success" size="small" class="u-reset-button" @click="handSave">
						确定
					</u-button>

				</view>
			</template>

		</SearchPopup> -->
  </view>
</template>

<script>
import { tableHeader } from "../../common.js";
import {
  treeByPid,
  listWorkOrderByTaskId,
  getWarehouseList,
  disposeorder,
} from "@/api/pda/workOrder.js";

import { getPage } from "@/api/pda/byProductRecovery.js";

import { producetaskList } from "@/api/common.js";

import SearchPopup from "../../components/searchPopup.vue";

let [isEnd] = [false];
export default {
  components: {
    SearchPopup,
  },
  data() {
    return {
      list: [],
      page: 1,
      size: 10,
      seletedAll: false, //全选状态
      memoList: [],

      recyclell: [],

      formData: {
        taskId: "",
      },

      taskList: [],

      warehouseList: [],

      searchShow: false,
    };
  },

  //选择的列表长度
  computed: {
    checkListLen() {
      return this.memoList.length;
    },
  },

  onLoad(option) {
    this.getProducetask();

    this.getWarehouseFn();

    this.getList();
  },

  onUnload() {},

  methods: {
    _seletedAll() {
      if (!this.seletedAll) {
        this.seletedAll = true;

        this.list.map((item) => {
          this.$set(item, "checked", true);
          const idx = this.memoList.findIndex((itm) => itm.id === item.id);
          if (idx === -1) {
            this.memoList.push(item);
          }
        });
      } else {
        this.seletedAll = false;
        this.list.map((item) => {
          this.$set(item, "checked", false);

          const idx = this.memoList.findIndex((itm) => itm.id === item.id);
          if (idx > -1) {
            this.memoList.splice(idx, 1);
          }
        });
      }
    },

    doSearch() {
      this.list = [];
      this.getList();
    },

    scrolltolower() {
      if (isEnd) return;
      this.page++;
      this.getList();
    },

    async getList() {
      let param = {
        pageNum: this.page,
        size: this.size,
        taskId: this.formData.taskId,
      };

      await getPage(param).then((res) => {
        // this.list = res.list;
        this.list.push(...res.list);
      });

      isEnd = this.list.length >= res.count;

      // listWorkOrderByTaskId(param).then(res => {
      // 	this.list = res.list
      // })
    },

    //勾选
    selectVal(e, val, index) {
      console.log(val);
      if (val.rootCategoryLevelId == 11 && val.status == 1) {
        return false;
      }
      this.list[index].checked = !this.list[index].checked;
      this.seletedAll = !this.list.some((item) => !item.checked);
      const idx = this.memoList.findIndex(
        (item) => item.id === this.list[index].id
      );

      if (this.list[index].checked) {
        if (idx === -1) {
          this.memoList.push(this.list[index]);
        }
      } else {
        if (idx > -1) {
          this.memoList.splice(idx, 1);
        }
      }
    },

    searchCancel() {
      this.list = [];
      this.page = 1;
      this.getList();
      this.searchShow = false;
    },

    handleSelect() {
      let arr = [];
      this.recyclell = [];

      this.memoList.forEach((e) => {
        e.recycleList.forEach((f) => {
          arr.push(f);
        });
      });

      this.recyclell = Array.from(
        new Set(arr.map((item) => JSON.stringify(item)))
      ).map((item) => JSON.parse(item));

      this.searchShow = true;
    },

    handSave() {
      let param = {
        taskId: this.formData.taskId,
        recyclell: this.recyclell,
        memoList: this.memoList,
      };
      disposeorder(param).then((res) => {
        console.log(res);
        this.searchShow = false;
      });
    },

    handleDetail() {},

    async getProducetask() {
      await producetaskList().then((res) => {
        this.taskList = res;
      });
    },

    async getWarehouseFn() {
      await getWarehouseList().then((res) => {
        this.warehouseList = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
}

.searchBox {
  background-color: #dedede;
  height: 90rpx;
  padding: 0 20rpx;

  .mt20 {
    margin-top: 20rpx;
  }

  /deep/ .uni-select {
    height: 70rpx;
    width: 520rpx;
    background: #fff !important;
    padding-left: 10rpx;
    border-radius: 5rpx;
    margin-right: 20rpx;
  }
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 6rpx 0;

  .u-list {
    height: 100% !important;
  }

  .card_box {
    width: 750rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #e1e1e1;

    .item_box {
      margin-top: 10rpx;

      .round {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 50%;
        background: $theme-color;
        color: #fff;
        text-align: center;
        font-size: 20rpx;
        margin-right: 10px;
      }

      .orderId {
        color: #000;
        font-family: PingFang HK;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        margin-left: 16rpx;
      }

      .item_one {
        width: 100%;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 38rpx;
        word-wrap: break-word;
        .text {
          color: #157a2c;
        }
      }

      .item-right {
        flex: 1;
      }

      .gylx {
        color: $theme-color;
      }

      .perce50 {
        width: 50%;
      }

      .perce100 {
        width: 100%;
      }
    }
  }
}

.bottom-wrapper {
  height: 80rpx;
  background: #fff;
  padding: 0 32rpx;

  /deep/ .uni-checkbox-input-checked {
    background-color: $theme-color !important;
    border-color: $theme-color !important;
  }
}

.listBox {
  margin-top: 8rpx;
  padding: 8rpx 24rpx;
  background: #fff;

  /deep/ .uni-checkbox-input-checked {
    background-color: $theme-color !important;
    border-color: $theme-color !important;
  }

  .listBox-con {
    width: 650rpx;
    font-weight: 400;
  }

  .listBox-top {
    margin-top: 6rpx;
    color: #090a0a;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 800;
  }
}

.listBox-bottom,
.recycleList {
  color: #090a0a;
  font-size: 24rpx;
  font-style: normal;
  flex-wrap: wrap;

  .items {
    width: calc(50% - 1px);
    border-left: 1rpx solid #e3e5e5;
    border-right: 1rpx solid #e3e5e5;
    border-bottom: 1rpx solid #e3e5e5;
    box-sizing: border-box;
    word-break: break-all;
    text {
      display: inline-block;
      background: #f7f9fa;
      padding: 8rpx 10rpx;
      color: #157a2c;
    }

    &:nth-child(1),
    &:nth-child(2) {
      border-top: 1rpx solid #e3e5e5;
      margin-top: 8rpx;
    }
  }
}

.wl_list {
  width: 720rpx;
  max-height: 75vh;

  .operate_box {
    margin: 20rpx;
  }

  .recycleTitle {
    margin-top: 12rpx;
    font-size: 28rpx;
    line-height: 24rpx;
    border-left: 6rpx solid #157a2c;
    padding-left: 16rpx;
    color: #157a2c;
    margin-left: 16rpx;
  }

  .mt40 {
    margin-top: 40rpx;
  }

  .pop_list {
    padding: 12rpx 16rpx;

    border-bottom: 2rpx solid #157a2c;

    .work_box {
      color: #090a0a;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 800;
    }

    .recycleList {
      .lable {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        border-radius: 50%;
        background: #157a2c;
        font-size: 20rpx;
        color: #fff;
        margin-right: 40rpx;
      }
    }

    .it_name {
      width: 350rpx;
      font-size: 24rpx;
    }

    .it_code {
      font-size: 24rpx;
    }
  }
}

.content_table {
  width: 700rpx;
  margin: auto;
  margin-top: 20rpx;
  border: 2rpx solid $border-color;

  .item {
    display: flex;
    border-bottom: 2rpx solid $border-color;

    .lable {
      width: 100rpx;
      text-align: center;
      background-color: #f7f9fa;
      font-size: 22rpx;
      border-right: 2rpx solid $border-color;
      flex-shrink: 0;
    }

    .ww80 {
      width: 60rpx;
    }

    .content {
      width: 518rpx;
      min-height: 64rpx;
      font-size: 24rpx;
      line-height: 28rpx;
      font-style: normal;
      font-weight: 400;
      padding: 18rpx 8rpx;
      box-sizing: border-box;
      word-wrap: break-word;
      flex-grow: 1 !important;
    }

    .content_num {
      display: flex;
      align-items: center;
      padding: 0 4rpx;

      /deep/ .uni-input-input {
        border: 2rpx solid #f0f8f2;
        background: #f0f8f2;
        color: $theme-color;
      }

      .unit {
        width: 90rpx;
        text-align: center;
        font-size: 24rpx;
        color: #404446;
      }
    }

    .pd4 {
      padding: 4rpx 8rpx;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .ww55 {
    width: 55%;
  }

  .ww45 {
    width: 45%;
  }
}
</style>