gxtyzx-admin/src/views/think/thinkOrder/components/invoiceByList.vue

<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    title="合并开具发票"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
      :wrapper-col="
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
      <a-form-item label="发票金额" name="price">
        <a-input
          allow-clear
          placeholder="请输入发票金额"
          v-model:value="form.price"
        />
      </a-form-item>
      <a-form-item label="单位名称" name="name">
        <a-input
          allow-clear
          placeholder="请输入单位名称"
          v-model:value="form.name"
        />
      </a-form-item>
      <a-form-item label="税号/身份证号" name="code">
        <a-input
          allow-clear
          placeholder="请输入税号/身份证号"
          v-model:value="form.code"
        />
      </a-form-item>
      <a-form-item label="手机号码" name="phone">
        <a-input
          allow-clear
          placeholder="请输入手机号码"
          v-model:value="form.phone"
        />
      </a-form-item>
      <a-form-item label="开户行" name="bank">
        <a-input
          allow-clear
          placeholder="请输入开户行"
          v-model:value="form.bank"
        />
      </a-form-item>
      <a-form-item label="开户账号" name="account">
        <a-input
          allow-clear
          placeholder="请输入开户账号"
          v-model:value="form.account"
        />
      </a-form-item>
      <a-form-item label="单位地址" name="address">
        <a-input
          allow-clear
          placeholder="请输入单位地址"
          v-model:value="form.address"
        />
      </a-form-item>
      <a-form-item label="公司电话" name="tel">
        <a-input
          allow-clear
          placeholder="请输入公司电话"
          v-model:value="form.tel"
        />
      </a-form-item>
      <a-form-item label="电子邮箱" name="email">
        <a-input
          allow-clear
          placeholder="请输入电子邮箱"
          v-model:value="form.email"
        />
      </a-form-item>
      <a-form-item label="备注信息" name="info">
        <a-textarea
          :rows="4"
          :maxlength="200"
          placeholder="请输入备注信息"
          v-model:value="form.info"
        />
      </a-form-item>
      <a-form-item label="发票类型" name="type">
        <a-radio-group v-model:value="form.type">
          <a-radio :value="1">纸质发票</a-radio>
          <a-radio :value="2">电子发票</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="发票类型" name="itype">
        <a-radio-group v-model:value="form.itype" :disabled="true">
          <a-radio :value="1">场地发票</a-radio>
          <a-radio :value="2">vip卡发票</a-radio>
          <a-radio :value="2">ic卡发票</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="发票类型" name="invoicetype">
        <a-radio-group v-model:value="form.invoicetype">
          <a-radio :value="1">普票</a-radio>
          <a-radio :value="2">专票</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import {
  doInvoiceByListReq
} from "@/api/think/thinkInvoice";
import { ThinkInvoice } from "@/api/think/thinkInvoice/model";
import { useThemeStore } from "@/store/modules/theme";
import { storeToRefs } from "pinia";
import { FormInstance } from "ant-design-vue/es/form";

const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: any;
}>();

const emit = defineEmits<{
  (e: "done"): void;
  (e: "update:visible", visible: boolean): void;
}>();

// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);

// 用户信息
const form = reactive<ThinkInvoice>({
  id: undefined,
  incoiveNum: undefined,
  incoiveCode: undefined,
  orderNum: undefined,
  oid: undefined,
  uid: undefined,
  price: undefined,
  name: undefined,
  tel: undefined,
  address: undefined,
  bank: undefined,
  account: undefined,
  code: undefined,
  phone: undefined,
  email: undefined,
  info: undefined,
  isOpen: undefined,
  type: 2,
  itype: 1,
  invoicetype: 1,
  createTime: undefined,
  updateTime: undefined,
  orderIdList: []
});

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit("update:visible", value);
};

// 表单验证规则
const rules = reactive({
  price: [
    {
      required: true,
      message: "请填写发票金额",
      trigger: "blur"
    }
  ],
  name: [
    {
      required: true,
      type: "string",
      message: "请填写单位名称",
      trigger: "blur"
    }
  ],
  code: [
    {
      required: true,
      type: "string",
      message: "请填写税号",
      trigger: "blur"
    }
  ],
  phone: [
    {
      required: true,
      type: "string",
      message: "请填写手机号",
      trigger: "blur"
    }
  ]
});

const { resetFields } = useForm(form, rules);

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      const formData = {
        ...form
      };
      doInvoiceByListReq(formData)
        .then((msg) => {
          loading.value = false;
          message.success(msg);
          updateVisible(false);
          emit("done");
        })
        .catch((e) => {
          loading.value = false;
          message.error(e.message);
        });
    })
    .catch(() => {
    });
};

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      form.price = props.data?.price;
      form.orderIdList = props.data?.orderIdList;
    } else {
      resetFields();
    }
  },
  { immediate: true }
);
</script>