consumoption/consumablespkg/pages/puhse-order/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>
    <z-paging ref="paging" @query="queryList" v-model="dataList" :use-page-scroll="true">
      <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>
          <span v-if="item.stas == 'B'">待出库</span>
          <span v-if="item.stas == 'D'">部分出库</span>
          <span v-if="item.stas == 'C'">待验收</span>
          <span v-if="item.stas == 'Y'">已验收</span>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 采购订单: </view>
            <view class="shuo-unit">
              {{ item.id }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 计划单号: </view>
            <view class="shuo-unit">
              {{ item.purcPlanId }}
            </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.purcCntSum }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item">
            <view class="shuo-label"> 采购总额: </view>
            <view class="shuo-cont">
              {{ item.purcAmt || "" }}
            </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 class="inventory-item">
          <view class="shuo-item-name">
            <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">
              {{ item.docmkDate }}
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <uni-popup ref="popup" :mask-click="false">
      <view class="time-view">
        <UnidatetimePicker type="datetimerange" v-model="datetimesingle" />
        <view class="btn-view">
          <button
            type="primary"
            plain="true"
            style="height: 70rpx; line-height: 70rpx"
            @click.stop="reset()"
          >
            重置
          </button>
          <button
            type="primary"
            plain="true"
            style="height: 70rpx; line-height: 70rpx"
            @click.stop="btnConfirm()"
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
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: [],
    };
  },
  computed: {
    ...mapState(["instData"]),
  },
  onShow() {
    uni.$once("update", function (data) {});
  },
  mounted() {},
  methods: {
    async queryList(pageNo, pageSize) {
      await this.$http(
        "drugHospital.getPurcOrd",
        {
          current: pageNo,
          size: pageSize,
          spdId: this.instData.spdId,
          id: this.value,
        },
        "加载中"
      ).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 HH:mm");
    },
    // 日期重置
    reset() {
      this.datetimesingle = [];
    },
    //日期确定按钮
    btnConfirm() {
      this.$refs.popup.close();
      this.$refs.paging.reload();
    },
    //跳转订单详情
    itemDetails(item) {
      uni.setStorage({
        key: "puderDelData",
        data: item,
      });
      uni.navigateTo({
        url: "/consumablespkg/pages/puhse-order/details",
        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;
  }
}

.search-view {
  width: 100%;
  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;
  }
}
.item-stats {
  margin-top: 80rpx;
}
.card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  padding: 0;
  margin-bottom: 20rpx;
}
.search-view uni-easyinput {
  width: 100% !important;
  flex: 1 !important;
}
</style>