aiot-app/pages/salesServiceManagement/demandList/components/Invoice.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="发货单"
      @clickLeft="backAdd"
    >
      <!--右菜单-->
      <!-- 	<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="invoiceSelect"
					text="选择发货单"></u-button>
			</template> -->
    </uni-nav-bar>
    <!-- <u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection> -->
    <view class="top-wrapper">
      <view class="nav_box rx-sc">
        <view
          class="nav_item"
          :class="{ active: current == 0 }"
          @click="handNav(0)"
        >
          {{associationType === '1' ? '发货单' : '销售订单'}}</view
        >
        <view
          class="nav_item"
          :class="{ active: current == 1 }"
          @click="handNav(1)"
        >
          物品明细</view
        >
        <view class="menu_box" @click="handleSearch" v-show="current == 0">
          <image class="menu_icon" src="~@/static/moreSearch.svg"></image>
        </view>
      </view>
    </view>
    <view class="wrapper">
      <u-list
        v-show="current == 0"
        @scrolltolower="scrolltolower"
        class="listContent"
      >
        <checkbox-group
          v-for="(item, index) in dataList"
          :key="index"
          @change="(e) => selectVal(e, item, index)"
        >
          <label>
            <view class="listBox">
              <view class="listBox-sel">
                <checkbox
                  :value="item.id"
                  color="#fff"
                  :disabled="item.disabled"
                  :checked="item.checked"
                />
              </view>
              <view class="listBox-con">
                <view class="listBox-top">
                  <view class="listBox-name">
                    {{ item.contactName }}
                  </view>
                </view>
                <view v-if="associationType === '1'" class="listBox-bottom">
                  <view>发货单编码：{{ item.docNo }}</view>
                  <view>销售订单编码：{{ item.orderNo }}</view>
                  <view class="half"
                    >是否回执：{{ item.replied == 1 ? "是" : "否" }}</view
                  >
                  <view class="half">状态：{{ orderStatus(item) }}</view>
                  <view>创建时间：{{ item.createTime }}</view>
                </view>
                <view v-if="associationType === '2'" class="listBox-bottom">
                  <view>订单编码：{{ item.orderNo }}</view>
                  <view>订单类型：{{ needProduceStatus(item) }}</view>
                  <view>预销售订单编码：{{ item.preOrderNo }}</view>
                  <view>产品名称：{{ item.productNames }}</view>
                  <view>生产编号：{{ item.productionCodes }}</view>
                  <view>批次号：{{ item.batchNos }}</view>
                  <view>数量：{{ item.productCount }}</view>
                  <view class="half">状态：{{ orderStatus(item) }}</view>
                </view>
              </view>
            </view>
          </label>
        </checkbox-group>
        <u-empty
          class="noDate"
          style="margin-top: 20vh"
          v-if="!dataList.length"
        ></u-empty>
      </u-list>
      <itemSelect
        @getDetails="getDetails"
        ref="itemRef"
        v-show="current == 1"
      />
    </view>
    <view class="footer">
      <u-button
        type="success"
        size="small"
        class="u-reset-button"
        @click="jumpAdd"
      >
        <view class="selBtn">选择( {{ checkListLen }} )</view>
      </u-button>
    </view>
    <screen ref="screen" @succeed="cabScreen"></screen>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { parameterGetByCode } from "@/api/mainData/index.js";
import screen from "./screen.vue";
import itemSelect from "./itemSelect.vue";
import { reviewStatusEnum } from "@/enum/dict";
import { saleordersendrecord, getTableList } from "@/api/saleManage/saleorder/index.js";
let [isEnd] = [false];
export default {
  components: {
    screen,
    itemSelect,
  },
  computed: {
    needProduceStatus() {
      return (row) => {
        if(this.associationType === '2') {
          return row.needProduce == 1
                  ? '有客户生产性订单'
                  : row.needProduce == 2
                  ? '无客户生产性订单'
                  : row.needProduce == 4
                  ? '不定向订单'
                  : '库存式订单';
        }
        return ''
      }
    },
    orderStatus() {
      return (row) => {
        if(this.associationType === '1') {
          return reviewStatusEnum[row.reviewStatus].label;
        }
        return reviewStatusEnum.find(item => item.value === row.orderStatus)?.label;
      };
    },
    checkListLen() {
      return this.detailsData.length
    },
  },
  data() {
    return {
      contactId: "",
      associationType: "",
      current: 0,
      page: 1,
      size: 10,
      dataList: [],
      detailsData: [],
    };
  },
  onLoad({ contactId, associationType }) {
    this.contactId = contactId;
    this.associationType = associationType;
    this.getList();
    // this.getClassify()
  },
  methods: {
    //返回添加页
    backAdd() {
      uni.navigateBack();
    },
    invoiceSelect() {},
    handNav(index) {
      this.current = index;
    },
    handleSearch() {
      this.$refs.screen.open();
    },
    cabScreen(params) {
      console.log(params, "params -");
      this.page = 1;
      this.getList(params);
    },
    async getList(data = {}) {
      let params = {
        pageNum: this.page,
        // reviewStatus: 2,
        ...data,
        contactId: this.contactId,
      };
      if(this.associationType === '1') {
        params.reviewStatus = 2;
      }
      isEnd = false;
      const requst = this.associationType === '1' ? saleordersendrecord : getTableList;
      const res = await requst(params);
      if (params.pageNum === 1) {
        this.dataList = [];
      }
      this.dataList.push(...res.list);
      isEnd = this.dataList.length >= res.count;
    },
    //勾选
    selectVal(e, val, index) {
      this.$set(this.dataList[index], "checked", !this.dataList[index].checked);
      this.dataList.forEach((item, i) => {
        if (item.id != val.id) {
          this.$set(this.dataList[i], "checked", false);
        }
      });

      // 勾选完 查询物品明细
      if (val.checked) {
        this.$refs.itemRef.getData(this.dataList[index], this.associationType);
      } else {
        this.$refs.itemRef.resetTable();
      }
      this.detailsData = [];
    },
    // 选择
    jumpAdd() {
      if (!this.detailsData.length) {
        this.$refs.uToast.show({
          type: "warning",
          message: "请选择一条物品明细数据",
        });
        return;
      }
      let obj = this.dataList.filter((item) => item.checked)[0];
      let data = {
        orderCode: this.associationType === '1' ? obj.docNo : obj.orderNo,
        orderId: obj.id,
        tableList: this.detailsData,
      };
      uni.$emit("goosData", data);
      uni.navigateBack();
    },

    getDetails(data) {
      this.detailsData = data;
    },

    scrolltolower() {
      if (isEnd) return;
      this.page++;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./invoice.scss";

/deep/.u-subsection__item__text {
  font-size: 28rpx !important;
}

.u-reset-button {
  position: absolute;
  right: 10rpx;
  top: 20rpx;
  width: 160rpx;
}

.mainBox {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .wrapper {
    // flex: 1;
    height: calc(100vh - 250rpx);
    overflow: hidden;
  }

  //底部按钮
  .footer {
    height: 45px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #eeecec;
    background-color: #ffffff;
    z-index: 999;

    .bottom {
      margin-left: 10rpx;
    }

    .u-reset-button {
      position: absolute;
      right: 10rpx;
      top: 20rpx;
      width: 150rpx;
    }
  }

  .nav_box {
    padding: 6rpx 32rpx;
    position: relative;

    .nav_item {
      font-size: 28rpx;
      font-weight: 400;
      color: $theme-color;
      background: #f0f8f2;
      margin-right: 16rpx;
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      border: 2rpx solid #acd4b5;
    }

    .menu_box {
      position: absolute;
      right: 20rpx;
      top: 10rpx;

      .menu_icon {
        width: 44rpx;
        height: 44rpx;
      }
    }

    .active {
      background: $theme-color;
      border: 2rpx solid $theme-color;
      color: #fff;
    }
  }
}
</style>