labsop_scientific_h5/src/view/fund/claim/edit.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-24 09:17:15
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-08 16:28:03
 * @FilePath: \labsop_h5\src\view\instr\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <van-form ref="formRef" required="auto">
      <h4>到款信息</h4>
      <van-cell-group class="mt10">
        <van-field v-model="state.form.projectName" label="项目到款" readonly />
        <van-field v-model="state.form.amount" label="到款金额" readonly>
          <template #input>{{ formatAmount(state.form.amount) }}</template>
          <template #extra>元</template>
        </van-field>
        <van-field v-model="state.form.taxAmount" label="管理费" readonly>
          <template #input>{{ formatAmount(state.form.manageAmount) }}</template>
          <template #extra>元</template>
        </van-field>
        <van-field v-model="state.form.taxAmount" label="税费" readonly>
          <template #input>{{ formatAmount(state.form.taxAmount) }}</template>
          <template #extra>元</template>
        </van-field>
        <van-field v-model="state.form.unAmount" label="待认领金额" readonly>
          <template #input>{{ formatAmount(state.form.unAmount) }}</template>
          <template #extra>元</template>
        </van-field>
        <van-field v-model="state.form.date" label="到款日期" readonly>
          <template #input>{{ formatDate(new Date(state.form.date), 'YYYY-mm-dd') }}</template>
        </van-field>
        <van-field v-model="state.form.type" label="到款类型" readonly>
          <template #input>{{ getDictLabel(paymentReceivedTypeOptions, state.form.type) }}</template>
        </van-field>
        <van-field v-model="state.form.unit" label="打款单位" readonly />
      </van-cell-group>
      <h4>认领经费</h4>
      <van-cell-group class="mt10">
        <van-field v-for="item in state.detail" :key="item.id" :label="item.subjName" :placeholder="item.subjName" v-model="item.amount">
          <template #extra>元</template>
        </van-field>
      </van-cell-group>
    </van-form>
  </div>
  <van-action-bar placeholder>
    <van-action-bar-icon icon="wap-home-o" text="首页" @click="onRouterPush('/home')" />
    <van-action-bar-icon icon="balance-o" text="经费认领" @click="onRouterPush('/fund/claim')" />
    <van-action-bar-button class="w100" type="primary" text="提交" @click="onClickButton" />
  </van-action-bar>
</template>

<script lang="ts" setup>
  import to from 'await-to-js'
  import { useRoute, useRouter } from 'vue-router'
  import { computed, onMounted, reactive, ref } from 'vue'
  import { formatDate } from '/@/utils/formatTime'
  import { showNotify } from 'vant'
  import { useUserInfo } from '/@/stores/userInfo'
  import { storeToRefs } from 'pinia'
  import instAppoint from '/@/api/instr/instAppoint'
  import { useConfigApi } from '/@/api/system/config'
  import { useFundApi } from '/@/api/fund'
  import { useDictApi } from '/@/api/system/dict'
  import { getDictLabel, formatAmountYuan } from '/@/utils/other'
  import { useClaimApi } from '/@/api/fund/claim'
  import { useLoginApi } from '/@/api/login'
  import { Local, Session } from '/@/utils/storage'
  const storesUseUserInfo = useUserInfo()
  const { userInfos, openId, unionId } = storeToRefs(storesUseUserInfo)
  const route = useRoute()
  const router = useRouter()
  const configApi = useConfigApi()
  const fundApi = useFundApi()
  const loginApi = useLoginApi()
  const dictApi = useDictApi()
  const claimApi = useClaimApi()
  const serviceList = ref([])
  const formRef = ref()
  const paymentReceivedTypeOptions = ref<RowDicDataType[]>([])
  const state = reactive({
    loading: false,
    isActiveService: false,
    showProject: false,
    shwoService: false,
    showExpenseCard: false,
    showAppointUser: false,
    isInstrHead: false,
    fundDetail: {} as any,
    detail: [] as any,
    form: {
      allotAmount: null,
      amount: null, //到款金额
      unAmount: 0, // 待认领金额
      manageAmount: 0,
      taxAmount: 0,
      projectName: '',
      createdName: '',
      createdTime: '',
      date: '',
      id: 0,
      remark: '',
      serialNo: '',
      type: '',
      unit: ''
    }
  })
  const getDict = () => {
    Promise.all([dictApi.getDictDataByType('PaymentReceivedType'), fundApi.getAllFirstSubj()]).then(([type, parList]) => {
      paymentReceivedTypeOptions.value = type?.data?.values || []
      state.detail =
        parList?.data.map((item: any) => ({
          ...item,
          amount: 0
        })) || []
    })
  }
  const AccountAmount = computed(() => {
    const amount = state.form.amount ? Number(state.form.amount * 100 - state.form.manageAmount * 100 - state.form.taxAmount * 100) : 0
    return (amount / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  })
  const formatAmount = (cellValue: number) => {
    cellValue = cellValue * 100
    return (cellValue / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  const getFundDetail = async (id: number) => {
    const [err, res]: ToResponse = await to(fundApi.getDetails({ id }))
    if (err) return
    state.fundDetail = res.data
    state.form = { ...state.form, ...res.data }
    state.form.unAmount = state.form.amount - state.form.manageAmount - state.form.taxAmount
    // state.form.projectName = res.data.projectName
    // state.form.amount = res.data.amount
    // state.form.manageAmount = res.data.manageAmount
    // state.form.taxAmount = res.data.taxAmount
    // state.form.date = res.data.date
    // state.form.type = res.data.type
    // state.form.unit = res.data.unit
  }
  const onRouterPush = (val: string, params?: any) => {
    router.push({
      path: val,
      query: { ...params }
    })
  }
  const onClickButton = async () => {
    const totalAmount = state.detail.reduce((acc, current) => {
      return acc + Number(current.amount * 100)
    }, 0)
    if (Number(state.form.amount * 100) / 100 != totalAmount / 100) {
      showNotify({
        type: 'warning',
        message: '认领金额必须等于本次到款总计金额'
      })
      return
    }
    state.loading = true
    const params = JSON.parse(JSON.stringify(state.form))
    params.fundId = state.form.id
    params.detail = state.detail
    params.amount = Number(params.amount)
    params.detail = params.detail.map((item: any) => ({
      ...item,
      amount: Number(item.amount * 100)
    }))
    params.externalAmount = Number(params.externalAmount)
    params.internalAmount = Number(params.internalAmount)
    const [err]: ToResponse = await to(claimApi.create(params))
    state.loading = false
    if (err) return
    showNotify({
      type: 'success',
      message: '操作成功'
    })
    router.push({
      path: '/fund/claim',
      query: {
        id: params.instId
      }
    })
  }
  onMounted(async () => {
    // 进行openId登录
    const code: string = route.query.code ? route.query.code.toString() : ''
    await storesUseUserInfo.setOpenId(code)
    let param = {
      code: openId.value,
      unionId: unionId.value,
    }

    if (openId.value) {
      const [err, res]: ToResponse = await to(loginApi.weChatLoginUnionId(param))
      if (err) {
        // 跳转到登录页面
        Local.remove('token')
        router.push('/login')
        return
      }
      // 存储 token 到浏览器缓存
      Local.set('token', res?.data?.token)
      Local.set('Tenant', res.data.tenant)
    }

    const id = route.query.id ? +route.query.id : 0
    getDict()
    getFundDetail(id)
  })
</script>

<style lang="scss" scoped>
  .container {
    flex: 1;
    padding: 10px;
    background-color: #f9f9f9;
    overflow-y: auto;
    h4 {
      height: 18px;
      line-height: 18px;
      display: flex;
      margin: 10px 0;
      span {
        font-weight: normal;
        margin-left: auto;
      }
      &::before {
        display: inline-block;
        content: '';
        width: 3px;
        height: 18px;
        background-color: #1c9bfd;
        margin-right: 4px;
        vertical-align: middle;
      }
    }
  }
</style>