yueyueshu/jnpf-app/pages/yys/materialProcurementOrder/index.vue

<template>
  <view class="viewport">
    <CustomNavbar />
    <u-tabs
      :list="tabsList"
      :is-scroll="false"
      :current="tabsCurrent"
      @change="fnTabsChg"
    ></u-tabs>
    <u-card v-for="orderItem in orderList">
      <view class="" slot="head">
        <text>采购订单（编号：{{ orderItem.orderNumber }}）</text>
      </view>
      <view class="" slot="body">
        <u-row gutter="16">
          <u-col span="12">
            <text>订单日期：</text><text>{{ orderItem.orderDate }}</text>
          </u-col>
          <u-col span="6">
            <text>物料名称：</text><text>{{ orderItem.materialName }}</text>
          </u-col>
          <u-col span="6">
            <text>规格型号：</text><text>{{ orderItem.specification }}</text>
          </u-col>
          <u-col span="6">
            <text>物料编码：</text><text>{{ orderItem.materialCode }}</text>
          </u-col>
          <u-col span="6">
            <text>下单数量：</text><text>{{ orderItem.orderQuantity }}</text>
          </u-col>
          <u-col span="6">
            <text>要求到货日期：</text><text>{{ orderItem.orderDate }}</text>
          </u-col>
        </u-row>
      </view>
      <view class="" slot="foot">
        <u-button
          size="mini"
          :custom-style="{
            color: 'white',
            margin: '5px',
            backgroundImage:
              'linear-gradient(to right, rgb(111, 137, 221), rgb(42, 75, 180))',
          }"
          :plain="true"
          shape="false"
        >
          接单
        </u-button>
        <u-button
          size="mini"
          :custom-style="{
            color: 'white',
            margin: '5px',
            backgroundImage:
              'linear-gradient(to right, rgb(255, 133, 133), rgb(249, 61, 61))',
          }"
          :plain="true"
          shape="false"
        >
          延期发货
        </u-button>
        <u-button
          size="mini"
          :custom-style="{
            color: 'white',
            margin: '5px',
            backgroundImage:
              'linear-gradient(to right, rgb(255, 199, 131), rgb(252, 136, 13))',
          }"
          :plain="true"
          shape="false"
        >
          缺货结单
        </u-button>
        <u-button
          size="mini"
          :custom-style="{
            color: 'white',
            margin: '5px',
            backgroundImage:
              'linear-gradient(to right, rgb(111, 137, 221), rgb(42, 75, 180))',
          }"
          :plain="true"
          shape="false"
        >
          投产
        </u-button>
        <u-button
          size="mini"
          :custom-style="{
            color: 'white',
            margin: '5px',
            backgroundImage:
              'linear-gradient(to right, rgb(126, 237, 140), rgb(74, 215, 92))',
          }"
          :plain="true"
          shape="false"
        >
          发货
        </u-button>
      </view>
    </u-card>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapGetters } from "vuex";
import { getOrderList } from "@/api/yys/materialProcurementOrder.js";
import CustomNavbar from "./components/CustomNavbar";
export default {
  components: { CustomNavbar },
  mixins: [],
  data() {
    return {
      isLoading: false,
      tabsList: [
        { name: "待接单", orderStatus: "1" },
        { name: "已接单", orderStatus: "2" },
        { name: "部分发货", orderStatus: "4" },
        { name: "发货完成", orderStatus: "5" },
      ],
      tabsCurrent: 0,
      orderList: [],
    };
  },
  watch: {},
  computed: {},
  onLoad(params) {
    this.fnGetList();
  },
  onUnload() {},
  methods: {
    fnTabsChg(index) {
      this.tabsCurrent = index;
      this.fnGetList();
    },
    fnGetList() {
      let tabsNow = this.tabsList[this.tabsCurrent];
      let params = {
        orderStatus: tabsNow.orderStatus,
      };
      getOrderList(params)
        .then((res) => {
          if (res.code == 200) {
            this.orderList = res.data;
          }
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss"></style>