tenant-Platform/src/views/receivable/documentary/documentaryRecord.vue

<template>
  <PageMain class="vh100">
    <el-form v-model="form" label-width="80">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item prop="recordId" label="记录编号">
            <el-input v-model="form.recordId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="companyId" label="保险公司">
            <el-select v-model="form.companyId" placeholder="请选择" clearable filterable>
              <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="invoiceParty" label="开票方">
            <el-select v-model="form.invoiceParty" clearable>
              <el-option v-for="item in optionObj['invoice_party']" :key="item.value" :value="item.value"
                :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="invoiceType" label="应收项">
            <el-select v-model="form.accountsReceivable" clearable>
              <el-option v-for="item in optionObj['invoice_risk_type']" :key="item.value" :value="item.value"
                :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="status" label="结算状态">
            <el-select v-model="form.settlementStatus" clearable>
              <el-option v-for="item in optionObj['settlement_status']" :key="item.value" :value="item.value"
                :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="invoicePerson" label="开票人">
            <el-input v-model="form.invoicePerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="invoiceDate" label="开票时间">
            <el-date-picker type="daterange" v-model="form.invoiceDate" value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="16" style="display: flex; align-items: start; justify-content: flex-end">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button plain type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="height: calc(100% - 192px)" show-summary :summary-method="getSummaries">
      <el-table-column prop="id" label="开票记录编号" width="200"></el-table-column>
      <el-table-column prop="companyAllName" label="保险公司" width="150">
      </el-table-column>
      <el-table-column prop="companyNameSimple" label="保险机构" width="150"></el-table-column>
      <el-table-column prop="invoiceNo" label="发票号" width="150"></el-table-column>
      <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
      <el-table-column prop="remainSettlementAmount" label="未结算金额" width="100"></el-table-column>
      <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
      <el-table-column prop="receivableAmount" label="应收金额" width="120"></el-table-column>
      <el-table-column prop="paymentReason" label="差额原因" width="120"></el-table-column>
      <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
      <el-table-column prop="receivableSupervisePremium" label="开票金额" width="120"></el-table-column>
      <el-table-column prop="settlementStatus" label="结算状态" width="120">
      </el-table-column>
      <el-table-column prop="settlementAmount" label="已结算金额" width="120"></el-table-column>
      <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
      <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
      <el-table-column label="操作" width="300" fixed="right" align="center">
        <template #default="scope">
          <div class="flex a-c ">
            <el-button link type="primary" :disabled="scope.row.settlementStatus == '已结算'"
              @click="handleCount(scope.row)">结算</el-button>
            <el-button link type="primary" :disabled="scope.row.settlementStatus == '已结算'"
              @click="handleDelete(scope.row)">删除</el-button>
            <el-button link type="primary" :disabled="scope.row.settlementStatus == '已结算'"
              @click="handleSettlement(scope.row)">标识结清</el-button>
            <el-dropdown placement="bottom-start" trigger="click">
              <span class="el-dropdown-link">
                明细查询
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :disabled="scope.row.settlementStatus == '未结算'"
                    @click="handleCountRecord(scope.row)">结算记录</el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.settlementStatus == '未结算'"
                    @click="handleInvoiceDetail(scope.row)">开票明细</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" v-model="countShow" width="600" title="结算">
      <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
        <el-form-item prop="invoiceParty" label="开票方">
          <el-input v-model="countForm.invoiceParty" disabled placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="receivableAmount" label="应收金额">
          <el-input v-model="countForm.receivableAmount" disabled placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="overinflatedAmount" label="虚增金额">
          <el-input v-model="countForm.overinflatedAmount" disabled placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item prop="remainSettlementAmount" label="未结算金额">
          <el-input v-model="countForm.remainSettlementAmount" disabled placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="taxPoint" label="税点">
          <el-input v-model="countForm.taxPoint" disabled placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="receivableSupervisePremium" label="开票金额">
          <el-input v-model="countForm.receivableSupervisePremium" disabled placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="actualReceivedAmount" label="实收金额">
          <el-input-number v-model="countForm.actualReceivedAmount" style="width: 100%;" :min="0"
            :max="countForm.remainSettlementAmount" :precision="2" controls-position="right" @change="handleChange()" />
        </el-form-item>
        <el-form-item label="回款差额">
          <el-input v-model="countForm.settlementPaymentDifference" disabled placeholder="自动计算" />
        </el-form-item>
        <el-form-item prop="settlementPaymentReason" label="差额原因">
          <el-input v-model="countForm.settlementPaymentReason" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="receivePaymentDate" label="收款日期">
          <el-date-picker v-model="countForm.receivePaymentDate" type="date" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
            <el-button size="large" icon="Plus" />
          </el-upload>
          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
            <img :src="item" style="width: 80px; height: 80px;" />
            <div class="model">
              <span class="icon-view" @click="handelViewImage(item, index)">
                <el-icon>
                  <View />
                </el-icon>
              </span>
              <span class="icon-del" @click="handelDelImage(item, index)">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="handelCancel">取消</el-button>
        <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
      </template>
    </el-dialog>
  </PageMain>
  <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />

</template>

<script setup lang="ts">

import api from "@/api";
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
let form = ref({})
let tableData = ref([])

let pages = ref(1)
let size = ref(10)
let total = ref(0)
const handleSizeChange = (size) => {
  size.value = size
  initList()
}
const handleCurrentChange = (page) => {
  pages.value = page
  initList()
}
const search = () => {
  pages.value = 1
  size.value = 10
  initList()
}
const reset = () => {
  form.value = {
    recordId: '',
    companyId: '',
    invoiceParty: '',
    accountsReceivable: '',
    settlementStatus: '',
    invoicePerson: '',
    invoiceDate: []
  }
  pages.value = 1
  size.value = 10
  initList()
}
const invoiceId = route.query.invoiceId
if (invoiceId) {
  form.value.recordId = invoiceId
}
let countShow = ref(false)
let countForm = ref({})
let countRules = ref({
  actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
  receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
  attachmentIds: [{ required: true, message: "请上传" }]
})
let imageUrl = ref([])
let attachmentIds = ref([])
let invoicingId = ref('')
const handleCount = (row) => {
  countShow.value = true
  imageUrl.value = []
  attachmentIds.value = []
  invoicingId.value = row.id
  countForm.value = {
    invoiceParty: row.invoiceParty,
    remainSettlementAmount: row.remainSettlementAmount,
    receivableAmount: row.receivableAmount,
    receivableSupervisePremium: row.receivableSupervisePremium,
    overinflatedAmount: row.overinflatedAmount,
    taxPoint: row.taxPoint,
  }
}
const uploadImage = async (file) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if (code == 200) {
    imageUrl.value.push(data.downloadUrl)
    attachmentIds.value.push(data.id)
  }
}

/** 计算实收金额与应收监管保费的差值，并将结果赋值给付款差额字段 */
const handleChange = async () => {
  const num = await calSub(countForm.value.actualReceivedAmount, countForm.value.receivableSupervisePremium)
  countForm.value.settlementPaymentDifference = num
}
/** 计算应收监管保费差额并更新虚增金额 */


/**
 * 计算两个数值的差值（被减数 - 减数）
 * @param minuend 被减数
 * @param subtrahend 减数
 * @returns 差值，若接口无数据则返回 0
 */
const calSub = async (minuend: number = 0, subtrahend: number) => {
  const res = await api.financeApi.calSub({ minuend, subtrahend })
  return res.data || 0
}
// 标识结清
const handleSettlement = (row: any) => {
  ElMessageBox.confirm(
    '确定结清吗',
    '结清',
    {
      confirmButtonText: '确定',
      type: 'warning',
      center: true,
      confirmButtonClass: 'el-button--primary',
    }
  )
    .then(() => {
      api.financeApi.updateSettlementStatus(row.id).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initList()
    } else {
    }
  })
    })
    .catch(() => {
    })

}
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除吗',
    '删除发票',
    {
      confirmButtonText: '确定',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.financeApi.deleteFollowInvoiceById(row.id).then((res: any) => {
        if (res.code == 200) {
          reset()
          ElMessage({
            message: res.msg,
            type: 'success'
          })
        } else {

        }
      })
    })
    .catch(() => {
    })
}
// 结算记录查询
const handleCountRecord = (row) => {
  router.push({
    path: '/receivable/documentary/documentaryReport',
    query: {
      activeName: '2',
      id: row.id
    }
  })
}
// 开票明细查询
const handleInvoiceDetail = (row) => {
  router.push({
    path: '/receivable/documentary/documentaryReport',
    query: {
      activeName: '3',
      id: row.id
    }
  })
}
// 列表
const initList = () => {
  api.invoiceRecordApi.invoiceRecord({
    pages: pages.value,
    size: size.value,
    invoiceType: '2',
    ...form.value
  }).then((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
    }
  })
}

// 保险公司
let companyList = ref([])
const initCompany = () => {
  api.insuranceApi.leftList('').then((res: any) => {
    if (res.code == 200) {
      companyList.value = res.data
    }
  })
}

let imageShow = ref(false)
let bigImageUrl = ref('')
const handelViewImage = (item, index) => {
  bigImageUrl.value = item
  imageShow.value = true
}
const handelDelImage = (item, index) => {
  imageUrl.value.splice(index, 1)
  attachmentIds.value.splice(index, 1)
}

let CountForm = ref()
const handelComfirm = (CountForm) => {
  countForm.value.attachmentIds = attachmentIds.value
  if (!CountForm) return
  CountForm.validate((valid) => {
    if (valid) {
      api.financeApi.followSettlement({
        invoicingId: invoicingId.value,
        actualReceivedAmount: countForm.value.actualReceivedAmount,
        receivePaymentDate: countForm.value.receivePaymentDate,
        attachmentIds: countForm.value.attachmentIds
      }).then((res: any) => {
        countShow.value = false
        if (res.code == 200) {
          reset()
          ElMessage({
            message: res.msg,
            type: 'success'
          })
        }
      })
    }
  })
}

const handelCancel = () => {
  countShow.value = false
  countForm.value = {
    invoiceParty: '',
    receivableSupervisePremium: '',
    overinflatedAmount: '',
    taxPoint: '',
    actualReceivedAmount: '',
    receivePaymentDate: [],
    attachmentIds: []
  }
  imageUrl.value = []
}

const optionObj = ref({})
const initOption = () => {
  let list = ['invoice_risk_type', 'invoice_party', 'settlement_status']
  list.forEach(item => {
    api.additionalApi.dictDetails(item).then((res: any) => {
      if (res.code == 200) {
        if (res.data) {
          optionObj.value[item] = res.data
        }
      }
    })
  })
}
const getSummaries = (param) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  // 指定需要计算的字段列表（可根据需求添加字段名）
  const specifiedFields = ['taxPoint', 'actualReceivedAmount'] // 替换为您需要的字段名

  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        '',
      ])
      return
    }
    // 计算数字类型字段和指定字段
    const values = data.map((item) => {
      const val = item[column.property]
      // 排除空值
      if (val === '' || val === null || val === undefined) {
        return NaN
      }
      // 如果是数字类型，直接参与计算
      if (typeof val === 'number') {
        return val
      }
      // 如果字段在指定列表中，尝试转换为数字
      if (specifiedFields.includes(column.property)) {
        const num = Number(val)
        return Number.isNaN(num) ? NaN : num
      }
      // 其他情况不参与计算
      return NaN
    })
    if (!values.every((value) => Number.isNaN(value))) {
      const total = values.reduce((prev, curr) => {
        if (!Number.isNaN(curr)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      // 保留五位小数
      sums[index] = ` ${total.toFixed(5)}`
    } else {
      sums[index] = '-'
    }
  })
  return sums
}
onMounted(() => {
  initList();
  initOption();
  initCompany();
});

</script>

<style scoped lang="scss">
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.upload-btn {
  :deep(.el-button) {
    width: 80px;
    height: 80px;
    font-size: 30px;
    color: #ccc;
  }
}

:deep(.el-dropdown-link) {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--el-color-primary);
  cursor: pointer;
}

.imageDiv {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 10px 10px 0;

  &:hover {
    .model {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, .3);
    }
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .model {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    display: none;
    top: 0;
    left: 0;

    .icon-view,
    .icon-del {
      color: #FFFFFF;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}

:deep(.el-upload-dragger) {
  padding: unset;
  border: unset;
  border-radius: unset;
}
</style>