delivery-depot-uniapp/pages/myTask-verification/components/WarehouseInfo.vue

<template>
  <view class="warehouse-info">
    <view class="filter-buttons">
      <button class="filter-btn" type="primary" @click="handleSelectAll">
        {{ isAllSelected ? "取消全选" : "全选" }}
      </button>
      <!-- <button class="filter-btn" type="primary" @click="confirmSelection">
          确认选择
        </button> -->
    </view>
    <view class="info-list">
      <view
        v-for="(item, index) in warehouseList"
        :key="index"
        class="info-card"
        @click="handleWarehouseItem(item)"
      >
        <view class="info-content">
          <view class="info-row">
            <view class="warehouse-name-container">
              <view class="warehouse-icon">
                <image src="/static/images/warehouse.png" mode="aspectFit" />
              </view>
              <text class="label warehouse-name">仓房名称:</text>
              <text class="value warehouse-name">{{ item.cfmc }}</text>
            </view>

            <!-- :disabled="item.hyState !== 3" -->
            <checkbox
              v-if="item.hyState === 3"
              class="check-circle"
              :checked="item.checked"
              @click.stop="handleCheck(item)"
              style="transform: scale(0.8)"
            />
            <view
              v-if="item.hyState === 1 || item.hyState === 2"
              :style="{
                color: item.hyState === 1 ? '#1976d2' : '#f44336',
              }"
            >
              {{ item.hyState === 1 ? "检验通过" : "检验不通过" }}
            </view>
          </view>
          <view class="info-row">
            <view class="info-row-item">
              <text class="label">仓房类型:</text>
              <text class="value">{{ filterLX(item.cflx) || "-" }}</text>
            </view>
            <view class="info-row-item">
              <text class="label status-label">仓房状态:</text>
              <text class="value">{{ filterZT(item.cazt) || "-" }}</text>
            </view>
          </view>
          <view class="info-row">
            <view class="info-row-item">
              <text class="label">设计仓容:</text>
              <text class="value">{{ item.sjcr }}吨</text>
            </view>

            <view class="info-row-item">
              <text class="label status-label">是否空仓:</text>
              <text class="value">{{ item.sfkc === 1 ? "是" : "否" }}</text>
            </view>
          </view>
          <view class="info-row">
            <view class="info-row-item">
              <text class="label">租仓参考价:</text>
              <text class="value">{{ item.zcckj || "-" }}元/天</text>
            </view>

            <view class="info-row-item">
              <text class="label status-label">委托保管参考价:</text>
              <text class="value">{{ item.wtbgckj || "-" }}元/吨/月</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="warehouseList.length === 0" class="empty-container">
        <image src="" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无数据</text>
      </view>
      <view style="height: 200rpx"></view>
    </view>
  </view>
</template>

<script>
import { getCaxxByKqId, getTasks } from "@/api/task";

import { getDictOptions, DICT_TYPE } from "@/utils/dict.js";
export default {
  name: "WarehouseInfo",
  props: {
    taskInfo: {
      type: Object, // 根据实际数据类型调整
      default: () => ({}), // 默认值
    },
  },

  data() {
    return {
      warehouseList: [],
      cflxList: [],
      ztlxList: [],
      isAllSelected: false,
      selectedWarehouses: [],
    };
  },
  async mounted() {
    // console.log("接收到的任务信息：", this.taskInfo);
    this.cflxList = await getDictOptions(DICT_TYPE.SYSTEM_CFLX);
    this.ztlxList = await getDictOptions(DICT_TYPE.SYSTEM_CAZT);

    this.getWarehouseList();
  },
  methods: {
    filterLX(value) {
      return this.cflxList.find((item) => item.value == value)?.label;
    },
    filterZT(value) {
      return this.ztlxList.find((item) => item.value == value)?.label;
    },

    handleSelectAll() {
      this.isAllSelected = !this.isAllSelected;
      this.warehouseList = this.warehouseList.map(
        (item) => {
          if (item.hyState === 3) {
            return {
              ...item,
              checked: this.isAllSelected,
            };
          } else {
            return {
              ...item,
              // hyState: 3,
            };
          }
        }

        // {
        //   ...item,
        //   checked: this.isAllSelected,
        // }
      );
    },

    handleCheck(item) {
      item.checked = !item.checked;
      this.isAllSelected = this.warehouseList.every((item) => item.checked);
    },

    async confirmSelection(params) {
      this.selectedWarehouses = this.warehouseList.filter(
        (item) => item.checked && item.hyState === 3
      );

      if (this.selectedWarehouses.length === 0) {
        uni.showToast({
          title: "请至少选择一个仓房",
          icon: "none",
        });
        return;
      }

      // this.$emit("selected-warehouses", this.selectedWarehouses);

      // console.log(params, this.selectedWarehouses, "params");

      // 加载
      uni.showLoading({
        title: "处理中...",
      });

      let caIds = this.selectedWarehouses.map((item) => item.caId);

      const res = await getTasks({
        ...params,
        // hyState: 3,
        caIds,
      });

      if (res.code === 0) {
        uni.showToast({
          title: res.msg,
          icon: "success",
        });

        // 刷新仓房数据
        this.getWarehouseList();

        // 跳转到任务列表页面
        // uni.reLaunch({
        //   url: "/pages/taskList-verification/taskListLayout?tab=1",
        // });
      } else {
        uni.showToast({
          title: "核验失败",
          icon: "none",
        });
      }

      uni.hideLoading();
    },

    handleWarehouseItem(item) {
      console.log("点击仓房:", item);
    },

    getWarehouseList() {
      getCaxxByKqId({
        kqId: this.taskInfo.kqId,
        listType: 2,
      }).then((res) => {
        if (res.code === 0) {
          this.warehouseList = res.data.map((item) => ({
            ...item,
            checked: false,
          }));
        } else {
          uni.showToast({
            title: res.msg || "获取任务列表失败",
            icon: "none",
          });
        }
      });
    },
    handleVerify(isPassed) {
      // 处理验证结果
      console.log("仓房信息验证结果：", isPassed);
    },
  },
};
</script>

<style lang="scss" scoped>
.warehouse-info {
  padding: 20rpx;
  height: 100%;
  overflow: auto;
  .filter-buttons {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20rpx;

    z-index: 99;
    box-sizing: border-box;

    .filter-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #1976d2;
      color: #fff;
    }
  }

  .info-list {
    height: 100%;
    padding-top: 100rpx;
    box-sizing: border-box;
    .info-card {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      // 阴影
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

      .warehouse-icon {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .warehouse-name {
        font-size: 32rpx !important;
        color: #000 !important;
      }

      .storage-image {
        width: 100rpx;
        height: 100rpx;
      }

      .info-content {
        display: flex;
        flex-direction: column;

        .info-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10rpx;
          flex-wrap: wrap;
          font-size: 30rpx;

          .warehouse-name-container {
            display: flex;
            align-items: center;
          }

          .label {
            color: #666;
            font-size: 30rpx;
            margin-right: 10rpx;
          }

          .value {
            color: #333;
            font-size: 30rpx;
            margin-right: 30rpx;
          }

          .status-label {
            margin-left: auto;
          }
        }
      }
    }
  }
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 100rpx 0;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

.check-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-left: auto;

  &.checked {
    background-color: #1976d2;
    border-color: #1976d2;
  }
}
</style>