opms_wechat/pages/contract/invoice.vue

<template>
  <!-- 新建发票 -->
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>新建发票</text>
        </view>
      </view>
    </view>
    <view class="main">
      <u-form :model="form" :rules="rules" ref="form" label-width="0">
        <u-form-item prop="contractCode">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            合同编号
          </view>
          <u-input v-model="form.contractCode" disabled />
        </u-form-item>
        <u-form-item prop="invoiceAmount">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            开票金额
          </view>
          <u-input v-model.number="form.invoiceAmount" placeholder="请输入开票金额" />
        </u-form-item>
        <u-form-item prop="invoiceDate" @click="show = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            开票日期
          </view>
          <u-input v-model="form.invoiceDate" disabled disabledColor="#ffffff" placeholder="请选择开票日期"></u-input>
        </u-form-item>
        <u-form-item prop="invoiceType" @click="showPicker = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            开票类型
          </view>
          <u-input v-model="form.invoiceName" disabled disabledColor="#ffffff" placeholder="请选择开票类型" />
        </u-form-item>
        <u-form-item prop="remark">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            备注
          </view>
          <u-textarea
            fontSize="26rpx"
            v-model="form.remark"
            placeholder="输入备注"
            height="180"
            :count="true"
            maxlength="300"></u-textarea>
        </u-form-item>
      </u-form>
      <view class="save" @click="save" :class="!flag ? 'disabledBtn' : ''">保存</view>
    </view>
    <u-calendar :show="show" @confirm="confirmCalendar" @close="show = false" minDate="1990-1-1"></u-calendar>
    <u-action-sheet :actions="collectionTypeOption" @select="selectClick" :show="showPicker"></u-action-sheet>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import api from '@/api/contract'
  import to from 'await-to-js'
  export default {
    data() {
      return {
        flag:true,
        height: '',
        paddingTop: '',
        form: {
          invoiceDate: '', //开票日期
          contractCode: '', //合同编号
          contractId: null, //合同id
          invoiceAmount: '', //开票金额
          invoiceType: '', //开票类型
          invoiceName: '', //开票类型名称
          remark: '', //备注
        },
        rules: {
          contractCode: [
            {
              required: true,
              trigger: 'blur',
              message: '请选择合同',
            },
          ],
          invoiceAmount: [
            {
              type: 'number',
              required: true,
              trigger: 'blur',
              message: '请输入开票金额',
            },
          ],
          invoiceDate: [
            {
              required: true,
              trigger: 'change',
              message: '请选择开票日期',
            },
          ],
          invoiceType: [
            {
              required: true,
              trigger: 'chgange',
              message: '请输入开票类型',
            },
          ],
        },
        show: false,
        showPicker: false,
        collectionTypeOption: [],
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
      this.getOptions()
    },
    onLoad(option) {
      this.form.contractId = parseInt(option.id)
      this.form.contractCode = option.code
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('invoice_type')])
          .then(([collectionType]) => {
            this.collectionTypeOption = collectionType.data.values || []
            this.collectionTypeOption.forEach((item) => (item.name = item.value))
          })
          .catch((err) => console.log(err))
      },
      closeMoveInModel() {},
      confirmCalendar(val) {
        this.form.invoiceDate = val[0]
        this.show = false
      },
      selectClick(val) {
        this.form.invoiceType = val.key
        this.form.invoiceName = val.value
        this.showPicker = false
      },
      async save() {
        if(!this.flag) return 
        let params = {
          ...this.form,
        }
        delete params.invoiceName
        params.invoiceAmount = parseInt(params.invoiceAmount)
        this.$refs.form
          .validate()
          .then(async (valid) => {
            if (valid) {
              this.flag = false
              const [err, res] = await to(api.addInvoice(params))
              this.flag = true
              if (err) return
              this.$refs.uToast.show({
                type: 'success',
                message: '创建成功',
                complete: () => {
                  this.goBack()
                },
              })
            }
          })
          .catch((errors) => {})
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;

      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;

        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 190rpx);
      background: #ffffff;
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;

      .form-label {
        font-size: 32rpx;
        font-weight: bold;
        color: #323232;
        padding-bottom: 18rpx;

        .label-tag {
          width: 15rpx;
          height: 15rpx;
          background: #ff4d4f;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }

      .save {
        width: 100%;
        height: 92rpx;
        background: #3e7ef8;
        border-radius: 31rpx;
        margin: 60rpx auto 0;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 92rpx;
      }
    }
  }
</style>