yueyueshu/jnpf-app/pages/yys/materialProcurementOrder/components/PopDelay.vue

<template>
  <view>
    <u-popup
      v-model="isShow"
      mode="center"
      :border-radius="10"
      :closeable="true"
      @close="fnCancel"
      width="90%"
    >
      <u-row gutter="12">
        <u-col span="12">
          <view
            :style="{ textAlign: 'center', height: '60px', lineHeight: '60px' }"
          >
            <text
              :style="{ fontSize: '40rpx', fontWeight: 500, color: '#1D2129' }"
              >延期发货</text
            >
          </view>
        </u-col>
        <u-col span="12" :style="{ margin: '10rpx' }">
          <text :style="{ fontSize: '32rpx' }"> 要求到货日期： </text>
          <text :style="{ fontSize: '32rpx' }">{{
            fnFormat(orderItem.requestDeliveryDate)
          }}</text>
        </u-col>
        <u-col span="12" :style="{ margin: '10rpx' }">
          <text :style="{ color: 'red' }">*</text> <text> 预计交货日期： </text>
          <text @click="fnShowPickerA">
            {{ fnFormat(expectedSendTime) }}
          </text>
          <u-picker
            mode="time"
            :default-time="expectedSendTime"
            v-model="isShowPickerA"
            :params="pickerParams"
            @confirm="fnExpectedSendTime"
          ></u-picker>
        </u-col>
        <u-col span="12" :style="{ margin: '10rpx' }">
          <text :style="{ color: 'red' }">*</text> <text>延期原因：</text>
        </u-col>
        <u-col span="12">
          <view :style="{ textAlign: 'center', margin: '10rpx' }">
            <u-input
              v-model="extensionReason"
              :border="true"
              placeholder="请输入延期原因"
            />
          </view>
        </u-col>
        <u-col span="12">
          <view :style="{ textAlign: 'center', margin: '25rpx 0rpx' }">
            <u-button
              size="mini"
              shape="circle"
              @click="fnCancel"
              :custom-style="{
                margin: '5px 20px',
                padding: '5px 20px',
              }"
            >
              取消
            </u-button>
            <u-button
              size="mini"
              shape="circle"
              type="primary"
              :custom-style="{
                margin: '5px 20px',
                padding: '5px 20px',
              }"
              @click="fnOk"
            >
              确定
            </u-button>
          </view>
        </u-col>
      </u-row>
    </u-popup>
    <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 { delay } from "@/api/yys/materialProcurementOrder.js";
import dayjs from "dayjs";
export default {
  components: {},
  mixins: [],
  data() {
    return {
      isShow: false,
      extensionReason: '',
      orderItem: {},
      expectedSendTime: dayjs().format("YYYY-MM-DD")+ ' 00:00:00',
      isShowPickerA: false,
      pickerParams: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
    };
  },
  watch: {},
  computed: {},
  onLoad(params) {},
  onUnload() {},
  methods: {
    init(orderItem) {
      this.orderItem = orderItem;
      this.extensionReason = '';
      this.expectedSendTime = dayjs().format("YYYY-MM-DD") + ' 00:00:00';
      this.isShow = true;
    },
    fnCancel() {
      this.orderItem = {};
      this.isShow = false;
    },
    fnOk() {
      if (this.extensionReason == '') {
        this.$refs.uTips.show({
          title: "延期原因不能为空",
          type: "error",
          duration: "2300",
        });
        console.log(this.extensionReason);
        return true;
      }
      let _params = {
        orderNumber: this.orderItem.orderNumber,
        expectedSendTime: dayjs(this.expectedSendTime),
        extensionReason: this.extensionReason,
      };
      delay(_params)
        .then((res) => {
          if (res.code == 200) {
            this.$emit("evtRefresh");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.fnCancel();
    },
    fnShowPickerA() {
      this.isShowPickerA = true;
    },
    fnExpectedSendTime(timeObj) {
      this.expectedSendTime =
        timeObj.year +
        "-" +
        timeObj.month +
        "-" +
        timeObj.day +
        " 00:00:00";
    },
    fnFormat(time, fmtStr = "YYYY-MM-DD") {
      return dayjs(time).format(fmtStr);
    },
  },
};
</script>

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