klp-oa/klp-ui/src/views/finance/document/components/Voucher.vue

<template>
  <div>
    <el-row>
      <el-form :model="form" label-width="120px" inline>
        <el-form-item label="凭证编号">
          <el-input v-model="form.docNo" placeholder="请输入凭证编号" />
        </el-form-item>
        <el-form-item label="单据日期" prop="docDate">
          <el-date-picker clearable v-model="form.docDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择单据日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关联订单" prop="orderId">
          <el-input v-model="form.orderId" placeholder="请输入关联订单" />
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column prop="summary" label="摘要">
          <template slot-scope="scope">
            <el-input v-model="scope.row.summary" placeholder="请输入摘要" @change="handleRowChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="accountingId" label="会计科目">
          <template slot-scope="scope">
            <amount-select v-model="scope.row.accountId" placeholder="请输入会计科目" @change="handleRowChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="debitAmount" label="借方金额">
          <template slot-scope="scope">
            <el-input v-model.number="scope.row.debitAmount" type="number" placeholder="0.00"
              @input="handleDebitInput(scope.row)" @change="handleRowChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="creditAmount" label="贷方金额">
          <template slot-scope="scope">
            <el-input v-model.number="scope.row.creditAmount" type="number" placeholder="0.00"
              @input="handleCreditInput(scope.row)" @change="handleRowChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.$index)"
              :disabled="tableData.length <= 1">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 合计部分 -->
    <el-row>
      <el-descriptions>
        <el-descriptions-item label="大写金额">
          <span>{{ amountInWords }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="借方合计">
          <span>{{ debitAmount.toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="贷方合计">
          <span>{{ creditAmount.toFixed(2) }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-row>

    <el-row>
      <el-button type="primary" @click="handleCreate">创建凭证</el-button>
    </el-row>
  </div>
</template>

<script>
import AmountSelect from '@/components/KLPService/AmountSelect/index.vue';

export default {
  components: {
    AmountSelect
  },
  data() {
    return {
      form: {
        docNo: undefined,
        docDate: undefined,
        orderId: undefined
      },
      tableData: [{
        summary: '',
        accountingId: '',
        debitAmount: 0,
        creditAmount: 0,
        remark: ''
      }]
    }
  },
  computed: {
    // 借方总额和贷方总额（过滤空行）
    debitAmount() {
      return this.tableData.reduce((total, item) => {
        // 只计算有内容的行
        if (this.isRowNotEmpty(item)) {
          return total + (Number(item.debitAmount) || 0);
        }
        return total;
      }, 0);
    },
    creditAmount() {
      return this.tableData.reduce((total, item) => {
        if (this.isRowNotEmpty(item)) {
          return total + (Number(item.creditAmount) || 0);
        }
        return total;
      }, 0);
    },
    // 大写金额
    amountInWords() {
      // 如果借贷相等则正常显示，不相等则显示借贷不相等
      if (Math.abs(this.debitAmount - this.creditAmount) < 0.01) {
        return this.numberToChinese(this.debitAmount);
      } else {
        return '借贷不相等';
      }
    }
  },
  methods: {
    // 判断行是否有内容
    isRowNotEmpty(row) {
      return row.summary || row.accountingId ||
        (row.debitAmount && row.debitAmount > 0) ||
        (row.creditAmount && row.creditAmount > 0) ||
        row.remark;
    },

    // 处理借方金额输入
    handleDebitInput(row) {
      // 如果借方金额有值，则清空贷方金额
      if (row.debitAmount && row.debitAmount > 0) {
        if (row.creditAmount && row.creditAmount > 0) {
          this.$message.warning('借方和贷方金额不能同时填写，已自动清空贷方金额');
          row.creditAmount = 0;
        }
      }
    },

    // 处理贷方金额输入
    handleCreditInput(row) {
      // 如果贷方金额有值，则清空借方金额
      if (row.creditAmount && row.creditAmount > 0) {
        if (row.debitAmount && row.debitAmount > 0) {
          this.$message.warning('借方和贷方金额不能同时填写，已自动清空借方金额');
          row.debitAmount = 0;
        }
      }
    },

    // 处理行数据变化
    handleRowChange(row) {
      // 检查最后一行是否有内容，如果有则添加新的空行
      const lastRow = this.tableData[this.tableData.length - 1];
      if (this.isRowNotEmpty(lastRow)) {
        this.addEmptyRow();
      }
    },

    // 添加空行
    addEmptyRow() {
      this.tableData.push({
        summary: '',
        accountingId: '',
        debitAmount: 0,
        creditAmount: 0,
        remark: ''
      });
    },

    // 删除行
    handleDelete(index) {
      this.tableData.splice(index, 1);

      // 确保至少保留一个空行
      if (this.tableData.length === 0) {
        this.addEmptyRow();
      } else {
        // 检查最后一行是否为空，如果不为空则添加新的空行
        const lastRow = this.tableData[this.tableData.length - 1];
        if (this.isRowNotEmpty(lastRow)) {
          this.addEmptyRow();
        }
      }
    },

    // 数字转中文大写金额
    numberToChinese(num) {
      if (num === 0) return '零元整';

      const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'];
      const decimals = ['角', '分'];

      // 处理整数和小数部分
      const parts = num.toFixed(2).split('.');
      const integerPart = parts[0];
      const decimalPart = parts[1];

      let result = '';

      // 处理整数部分
      for (let i = 0; i < integerPart.length; i++) {
        const digit = parseInt(integerPart[i]);
        const position = integerPart.length - i - 1;

        if (digit !== 0) {
          result += digits[digit] + units[position];
        } else {
          // 处理零的情况
          if (position % 4 === 0) { // 万或亿的位置
            result += units[position];
          }
          // 避免连续多个零
          if (!result.endsWith('零')) {
            result += digits[digit];
          }
        }
      }

      result += '元';

      // 处理小数部分
      if (decimalPart === '00') {
        result += '整';
      } else {
        if (decimalPart[0] !== '0') {
          result += digits[parseInt(decimalPart[0])] + decimals[0];
        }
        if (decimalPart[1] !== '0') {
          result += digits[parseInt(decimalPart[1])] + decimals[1];
        }
      }

      // 处理以零开头的情况
      return result.replace(/^零+/, '');
    },

    handleCreate() {
      // 验证所有行的借贷金额是否符合规则
      const invalidRows = this.tableData.findIndex(row => {
        return this.isRowNotEmpty(row) &&
          row.debitAmount > 0 &&
          row.creditAmount > 0;
      });

      // 凭证编号，单据日期和关联订单必填
      if (!this.form.docNo) {
        this.$message.error('凭证编号必填');
        return;
      }
      if (!this.form.docDate) {
        this.$message.error('单据日期必填');
        return;
      }
      if (!this.form.orderId) {
        this.$message.error('关联订单必填');
        return;
      }

      if (invalidRows !== -1) {
        this.$message.error('存在同时填写借方和贷方金额的行，请检查');
        return;
      }

      // 过滤掉空行后提交
      const validData = this.tableData.filter(row => this.isRowNotEmpty(row));

      if (validData.length === 0) {
        this.$message.warning('请至少填写一行凭证数据');
        return;
      }

      // 所有的科目必须填写
      const accountIds = validData.map(row => row.accountId);
        if (accountIds.some(id => !id)) {
          this.$message.error('请填写所有会计科目');
          return;
        }

        // 每一行至少包含借方或贷方金额
        const hasDebitOrCredit = validData.some(row => row.debitAmount > 0 || row.creditAmount > 0);
        if (!hasDebitOrCredit) {
          this.$message.error('请至少填写一行借方或贷方金额');
          return;
        }

        // 借贷必须相同
        if (this.debitAmount !== this.creditAmount) {
          this.$message.error('借方和贷方金额必须相同');
          return;
        }
        
        console.log('表单数据:', this.form, this.debitAmount, this.creditAmount);
        console.log('表格数据:', validData);
        
        // 这里可以添加提交逻辑
        this.$message.success('凭证创建成功');
      }
    }
  }
</script>