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">
        <template v-if="orderItem.orderStatus == 1">
          <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="circle"
            @click="fnTakeOrder(orderItem)"
          >
            接单
          </u-button>
        </template>
        <template v-else-if="orderItem.orderStatus == 2">
          <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="circle"
            @click="fnDelay(orderItem)"
          >
            延期发货
          </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="circle"
            @click="fnFinish(orderItem)"
          >
            缺货结单
          </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="circle"
            @click="fnToProd(orderItem)"
          >
            投产
          </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="circle"
            @click="fnShipments(orderItem)"
          >
            发货
          </u-button>
        </template>
      </view>
    </u-card>
    <PopToProd ref="popToProd" @evtRefresh="fnRefreshA"></PopToProd>
    <PopDelay ref="popDelay" @evtRefresh="fnRefreshB"></PopDelay>
    <PopShipments ref="popShipments" @evtRefresh="fnRefreshC"></PopShipments>
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapGetters } from "vuex";
import {
  getOrderList,
  takeOrder,
  finish,
} from "@/api/yys/materialProcurementOrder.js";
import CustomNavbar from "./components/CustomNavbar";
import PopToProd from "./components/PopToProd";
import PopDelay from "./components/PopDelay";
import PopShipments from "./components/PopShipments";
export default {
  components: { CustomNavbar, PopToProd, PopDelay, PopShipments },
  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);
        });
    },
    fnTakeOrder(orderItem) {
      uni.showModal({
        title: "确认接单",
        content: "确认接单（编号：" + orderItem.orderNumber + ")",
        success: (res) => {
          if (res.confirm) {
            // 用户确认接单
            console.log("用户确认接单");
            takeOrder(orderItem)
              .then((res) => {
                if (res.code == 200) {
                  this.$refs.uTips.show({
                    title: "确认接单提交成功",
                    type: "success",
                    duration: "2300",
                  });
                  this.fnGetList();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else if (res.cancel) {
            // 用户取消接单
            console.log("用户取消接单");
          }
        },
      });
      console.log(orderItem);
    },
    fnToProd(orderItem) {
      this.$refs.popToProd.init(orderItem);
    },
    fnFinish(orderItem) {
      uni.showModal({
        title: "缺货结单",
        content: "缺货结单（编号：" + orderItem.orderNumber + ")",
        success: (res) => {
          if (res.confirm) {
            // 用户确认缺货结单
            console.log("用户确认缺货结单");
            finish(orderItem)
              .then((res) => {
                if (res.code == 200) {
                  this.$refs.uTips.show({
                    title: "缺货结单提交成功",
                    type: "success",
                    duration: "2300",
                  });
                  this.fnGetList();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else if (res.cancel) {
            // 用户取消缺货结单
            console.log("用户取消缺货结单");
          }
        },
      });
    },
    fnDelay(orderItem) {
      this.$refs.popDelay.init(orderItem);
    },
    fnShipments(orderItem) {
      this.$refs.popShipments.init(orderItem);
    },
    fnRefreshA() {
      this.$refs.uTips.show({
        title: "投产提交成功",
        type: "success",
        duration: "2300",
      });
      this.fnGetList();
    },
    fnRefreshB() {
      this.$refs.uTips.show({
        title: "延期发货提交成功",
        type: "success",
        duration: "2300",
      });
      this.fnGetList();
    },
    fnRefreshC() {
      this.$refs.uTips.show({
        title: "发货提交成功",
        type: "success",
        duration: "2300",
      });
      this.fnGetList();
    },
  },
};
</script>

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