consumoption/consumablespkg/pages/management/index.vue

<template>
  <view class="query-wrap">
    <view class="card">
      <view class="search-view">
        <uni-easyinput
          prefixIcon="search"
          :value="value"
          placeholder="请输入采购订单号"
          @iconClick="iconClick"
          @input="input"
          style="width: 100%; flex: 1"
        >
        </uni-easyinput>
      </view>
    </view>
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: index === 0 }" @click="changeTab(0)">
        待验收
      </view>
      <view class="tab-item" :class="{ active: index === 1 }" @click="changeTab(1)">
        已验收
      </view>
    </view>
    <z-paging ref="paging" @query="queryList" v-model="dataList" :use-page-scroll="true">
      <!-- 待验收 -->
      <template v-if="index === 0">
        <view
          class="inner-item"
          v-for="(item, indx) in dataList"
          :key="indx"
          @click="itemDetails(item)"
        >
          <view class="item-stats">
            <span v-if="item.stas == 'A'">待验收</span>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">配送订单: </view>
              <view class="shuo-unit">{{ item.delvOrdId }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">采购订单: </view>
              <view class="shuo-unit">{{ item.purcOrdId }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">配送品种: </view>
              <view class="shuo-cont">{{ item.delvDrugSum || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">配送总数: </view>
              <view class="shuo-cont">{{ item.delvCntDetlSum }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">采购品种: </view>
              <view class="shuo-cont">{{ item.ordDetlCnt || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">采购总数: </view>
              <view class="shuo-cont">{{ item.purcCntDetlSum || "" }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">采购员: </view>
              <view class="shuo-cont">{{ item.planDocmker }}</view>
            </view>
            <view class="shuo-item-name">
              <view class="shuo-label">采购方式: </view>
              <view class="shuo-cont">{{ item.planWay }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">采购时间: </view>
              <view class="shuo-cont">{{ forMatTime(item.ordDocmkDate) }}</view>
            </view>
            <view class="shuo-item-name">
              <view class="shuo-label">配送时间: </view>
              <view class="shuo-cont">{{ forMatTime(item.docmkDate) }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">配送企业: </view>
              <view class="shuo-cont">{{ item.splerName }}</view>
            </view>
          </view>
        </view>
      </template>

      <!-- 已验收 -->
      <template v-else>
        <view
          class="inner-item"
          v-for="(item, indx) in dataList"
          :key="indx"
          @click="itemDetails(item)"
        >
          <view class="item-stats">
            <span v-if="item.delvOrdStas == 'C'">已验收</span>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">验收单号: </view>
              <view class="shuo-unit">{{ item.stoinOrdId }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">配送订单: </view>
              <view class="shuo-unit">{{ item.delvOrdId }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">采购订单: </view>
              <view class="shuo-unit">{{ item.purcOrdId }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">采购品种: </view>
              <view class="shuo-cont">{{ item.detlCnt || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">配送品种: </view>
              <view class="shuo-cont">{{ item.delvDrugSum }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">本次配送: </view>
              <view class="shuo-cont">{{ item.delvCntDetlSum || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">采购总数: </view>
              <view class="shuo-cont">{{ item.purcCntDetlSum || "" }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">采购总额: </view>
              <view class="shuo-cont">{{ item.delvAmt || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">配送总额: </view>
              <view class="shuo-cont">{{ item.ordAmt || "" }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item">
              <view class="shuo-label">本次验收: </view>
              <view class="shuo-cont">{{ item.shppCntDetlSum || "" }}</view>
            </view>
            <view class="shuo-item">
              <view class="shuo-label">采购员: </view>
              <view class="shuo-cont">{{ item.docmker || "" }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">验收时间: </view>
              <view class="shuo-cont">{{ forMatTime(item.stoinDate) }}</view>
            </view>
            <view class="shuo-item-name">
              <view class="shuo-label">配送时间: </view>
              <view class="shuo-cont">{{ forMatTime(item.docmkDate) }}</view>
            </view>
          </view>
          <view class="inventory-item">
            <view class="shuo-item-name">
              <view class="shuo-label">配送企业: </view>
              <view class="shuo-cont">{{ item.splerName }}</view>
            </view>
          </view>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script>
import { debounce } from "lodash";
import moment from "moment";
import ZPMixin from "@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin.js";
import UnidatetimePicker from "@/consumablespkg/components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
export default {
  components: {
    UnidatetimePicker,
  },
  mixins: [ZPMixin],
  data() {
    return {
      index: 0,
      value: "",
      dataList: [],
      datetimesingle: [],
    };
  },
  methods: {
    async queryList(current, size) {
      const apiName =
        this.index === 0 ? "drugHospital.getDelvPage" : "drugHospital.getStoinPage";
      await this.$http(apiName, { current, size }, "加载中").then((res) => {
        if (res && res.data) {
          this.$refs.paging.complete(res.data);
        }
      });
    },
    //筛选时间
    filterTime() {
      this.$refs.popup.open("bottom");
    },
    forMatTime(row) {
      return moment(row).format("YYYY-MM-DD");
    },
    // 日期重置
    reset() {
      this.datetimesingle = [];
    },
    //日期确定按钮
    btnConfirm() {
      this.$refs.popup.close();
      this.$refs.paging.reload();
    },
    //跳转订单详情
    itemDetails(item) {
      uni.setStorage({
        key: "detailsData",
        data: item,
      });
      uni.navigateTo({
        url: "/consumablespkg/pages/management/details/index",
        success: function (res) {
          console.log(res, "res");
        },
      });
    },
    input: debounce(function (e) {
      this.value = e;
      this.$refs.paging.reload();
    }, 500),
    iconClick(e) {
      console.log(e, "点击搜索拿到的数据");
    },

    blur(e) {
      this.$nextTick(() => {});
    },
    changeTab(index) {
      this.index = index;
      this.$refs.paging.reload();
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.query-wrap {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f1f1f1;
  overflow-y: scroll;
  overflow-x: hidden;
}

uni-page-body {
  width: 100%;
  height: 100%;
}

.time-view {
  height: 350rpx;
  background-color: #fff;
  padding: 50rpx 50rpx 0 50rpx;
  box-sizing: border-box;

  .btn-view {
    width: 100%;
    height: 100rpx;
    margin-top: 100rpx;
    display: flex;
    justify-content: space-around;
  }
}
.card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  padding: 0;
  margin-bottom: 20rpx;
}
.search-view {
  width: 100%;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  // padding: 0rpx 20rpx 0rpx 20rpx;
  box-sizing: border-box;
  .filter-text {
    width: 72rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: rgba(1, 169, 146, 1);
    font-size: 36rpx;
    font-family: PingFangSC-bold;
    padding-left: 20rpx;
  }
}
.search-view uni-easyinput {
  width: 100% !important;
  flex: 1 !important;
}

.item-stats {
  margin-top: 80rpx;
}
.tab-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10rpx;
  border-radius: 20rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #666;
  padding: 30rpx 0 20rpx 0;
  position: relative;
  cursor: pointer;
}
.tab-item.active {
  color: #36cfc9;
  font-weight: bold;
}
.tab-item.active::after {
  content: "";
  display: block;
  width: 60rpx;
  height: 6rpx;
  background: #36cfc9;
  border-radius: 3rpx;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
</style>