charge-java/admin-web/src/views/admin/invoice/dialog.vue

<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="820px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        @close="onClose"
        align-center>
      <el-form
          inline
          :model="state.ruleForm"
          :rules="state.rules"
          ref="formRef"
          size="default"
          label-width="125px"
          class="mt5">
        <el-form-item label="微信发票申请id" prop="applyId">
          <el-input
              v-model.trim="state.ruleForm.applyId"
              placeholder="微信发票申请号"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="开票日期" prop="fapiaoTime">
          <el-input
              v-model.trim="state.ruleForm.fapiaoTime"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
<!--        <el-form-item label="用户id" prop="userId">
          <el-input
              v-model.trim="state.ruleForm.userId"
              placeholder="用户id"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>-->
        <el-form-item label="累积充电量（度）" prop="totalPower">
          <el-input
              v-model.trim="state.detail.totalPower"
              placeholder="累积充电量（度）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="累积总金额（元）" prop="totalMoney">
          <el-input
              :model-value="u.fmt.fmtMoney(state.detail.totalMoney)"
              placeholder="累积总金额（元）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="累积电费（元）" prop="elecMoney">
          <el-input
              :model-value="u.fmt.fmtMoney(state.detail.elecMoney)"
              placeholder="累积电费（元）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="累积服务费（元）" prop="serviceMoney">
          <el-input
              :model-value="u.fmt.fmtMoney(state.detail.serviceMoney)"
              placeholder="累积服务费（元）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="服务费优惠金额（元）" prop="serviceMoneyDiscount">
          <el-input
              :model-value="u.fmt.fmtMoney(state.detail.serviceMoneyDiscount)"
              placeholder="服务费优惠金额（元）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="接收发票邮箱" prop="email">
          <el-input
              v-model.trim="state.ruleForm.email"
              placeholder="接收发票邮箱"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
              v-model.trim="state.ruleForm.phone"
              placeholder="电话"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoiceType">
          <ext-d-label   class="wd200"  type="Invoice.type" :model-value="state.ruleForm.buyerInformation.type"></ext-d-label>
        </el-form-item>
        <el-form-item label="发票抬头名称" prop="invoiceTitle">
          <el-input
              v-model.trim="state.ruleForm.buyerInformation.name"
              placeholder="发票抬头名称"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="公司税号" prop="taxId">
          <el-input
              v-model.trim="state.ruleForm.buyerInformation.taxpayer_id"
              placeholder="公司税号"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input
              v-model.trim="state.ruleForm.buyerInformation.address"
              placeholder="公司地址"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankName">
          <el-input
              v-model.trim="state.ruleForm.buyerInformation.bank_name"
              placeholder="开户银行"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input
              v-model.trim="state.ruleForm.buyerInformation.bank_account"
              placeholder="银行账户"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="发票金额（单位：分）" prop="invoiceAmount">
          <el-input
              :model-value="u.fmt.fmtMoney(state.ruleForm.totalAmount)"
              placeholder="发票金额（单位：分）"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="税额" prop="taxInfo">
          <el-input
              :model-value="u.fmt.fmtMoney(state.ruleForm.taxAmount)"
              placeholder="税额"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="开票人" prop="biller">
          <el-input
              v-model.trim="state.ruleForm.sellerInformation.name"
              placeholder="开票人"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="发票状态" prop="status">
          <ext-d-label    class="wd200" type="Invoice.status" :model-value="state.ruleForm.status"> </ext-d-label>
        </el-form-item>
<!--        <el-form-item label="备注" prop="remark">
          <el-input
              v-model.trim="state.ruleForm.remark"
              placeholder="备注"
              readonly
              class="wd200">
          </el-input>
        </el-form-item>-->
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="InvoiceDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'
import ExtDLabel from "/@/components/form/ExtDLabel.vue";


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0,
    buyerInformation:{},
    blueFapiao:{},
    cardInformation:{},
    extraInformationd:{},
    sellerInformation:{},
  },
  detail:{
    orderDetails:{}
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {},
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.dialog.title = u.dialog.actions[action].title + "『发票记录表』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『发票记录表』"
  state.dialog.isShowDialog = true;
  state.detail = row;
  if (action !== 'add') {
    loadData(row.applyId);
  } else {
    state.ruleForm = Object.assign(state.ruleForm, row);
  }
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      state.btnLoading = true;
      const url = state.ruleForm.id > 0 ? "invoice/modify" : "invoice/add"
      $body(url, state.ruleForm).then(() => {
        state.btnLoading = false;
        Msg.message('操作成功');
        console.log('submit!')
        onClose();
        emit('refresh');
      })
    }
  }).catch(() => {
    state.btnLoading = false;
    Msg.message('请先完整填写表单', 'error');
  })
};

const handleFormChange = (formData: any) => {
  console.log(formData)
}

// 初始化表格数据
const loadData = (applyId: String) => {
  $get(`finance/listInvoiceDetail`, {applyId}).then((res: any) => {
    if (res.list && res.list.length > 0) {
      state.ruleForm = res.list[0];
      console.log(state.ruleForm)
      console.log(state.detail)
    }
  })
}

// 暴露变量
defineExpose({
  open
});


</script>