parking_h5_all/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader.vue

<!-- 新增发票抬头 -->
<template>
  <view class="invoice-header u-skeleton">
    <view class="invoice-header-form">
      <u-form :model="form" ref="uForm" label-width="220" label-align="right">
        <u-form-item label="抬 头：" prop="invoHeadType" class="u-skeleton-fillet">
          <u-radio-group v-model="form.invoHeadType" :disabled="!!form.id">
            <u-radio :name="1">企业</u-radio>
            <u-radio :name="2">个人</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="发票抬头：" prop="invoName" class="u-skeleton-fillet">
          <u-input v-model="form.invoName" placeholder="请输入发票抬头" />
        </u-form-item>
        <u-form-item label="税 号：" prop="invoCode" class="u-skeleton-fillet" v-if="form.invoHeadType === 1">
          <u-input v-model="form.invoCode" placeholder="请输入税号" />
        </u-form-item>
      </u-form>
    </view>
    <view class="invoice-header-default">
      <u-form :model="form" ref="uForm1" label-width="220" label-align="right">
        <u-form-item label="电子邮箱(选填)：" prop="invoMail" class="u-skeleton-fillet">
          <u-input v-model="form.invoMail" placeholder="请输入电子邮箱" />
        </u-form-item>
        <u-form-item label="手机号码(选填)：" prop="invoPhone" class="u-skeleton-fillet">
          <u-input v-model="form.invoPhone" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item label="默认抬头：" prop="invoStatus" class="u-skeleton-fillet">
          <view class="invoice-header-default-item">
            <text class="tips">每次开票默认抬头信息</text>
            <u-switch v-model="form.invoStatus" size="40" />
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="invoice-header-bottom">
      <u-button type="primary" @click="submitForm" :loading="loading">保存</u-button>
    </view>
    <!--引用组件-->
    <u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        invoHeadType: 1,
        invoName: '',
        invoCode: '',
        invoPhone: '',
        invoMail: '',
        invoStatus: false,
        id: undefined
      },
      rules: {
        invoName: [{ required: true, message: '请输入发票抬头', trigger: ['blur', 'change'] }],
        invoCode: [{ required: true, message: '请输入税号', trigger: ['blur', 'change'] }]
      },
      loading: false,
      skeletonLoading: false
    };
  },
  onLoad(options) {
    const { id } = options;
    if (id) {
      uni.setNavigationBarTitle({
        title: '编辑抬头'
      });
      this.getInvoiceHeaderDetails(id);
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    /**
     * @description: 获取发票抬头信息
     * @param {*} id
     * @return {*}
     */
    async getInvoiceHeaderDetails(id) {
      try {
        this.skeletonLoading = true;
        const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadDetailsApi({ id });
        if (code === 200) {
          this.form.id = data.id;
          this.form.invoHeadType = data.invoHeadType;
          this.form.invoName = data.invoName;
          this.form.invoCode = data.invoCode;
          this.form.invoPhone = data.invoPhone;
          this.form.invoMail = data.invoMail;
          this.form.invoStatus = data.invoStatus === 1 ? true : false;
        }
      } catch (error) {
      } finally {
        this.skeletonLoading = false;
      }
    },
    /**
     * @description: 提交发票
     * @return {*}
     */
    submitForm() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const form = { ...this.form };
          form.invoStatus = form.invoStatus ? 1 : 0;
          if (form.invoHeadType === 2) {
            form.invoCode = null;
          }
          if (form.id) {
            try {
              const { code } = await this.$u.api.invoiceModuleApi.updateInvoiceHeaderApi({ ...form });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '修改成功!',
                  type: 'success',
                  duration: 2000,
                  url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
                });
              }
            } catch (error) {
            } finally {
              this.loading = false;
            }
          } else {
            try {
              const { code } = await this.$u.api.invoiceModuleApi.addInvoiceHeaderApi({ ...form });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '保存成功!',
                  type: 'success',
                  duration: 2000,
                  url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
                });
              }
            } catch (error) {
            } finally {
              this.loading = false;
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './addInvoiceHeader.scss';
</style>