抵扣借款金额

src/views/expense/finReimburse/index.vue

@@ -3,68 +3,76 @@
         <template #header>
             <div class="w-36">
                 <el-select v-model="searchForm.userIdVesting" block clearable placeholder="归属人" size="large">
-                    <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
+                    <el-option v-for="item in userList" :label="item.name" :value="item.id" />
                 </el-select>
             </div>
             <div class="w-72 ml-2">
                 <el-select v-model="searchForm.projectId" block clearable placeholder="项目名称" size="large">
-                    <el-option v-for="item in projectType" :label="item.projectName" :value="item.projectId"/>
+                    <el-option v-for="item in projectType" :label="item.projectName" :value="item.projectId" />
                 </el-select>
             </div>
             <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <HcIcon name="search-2"/>
+                <el-button type="primary" size="large" @click="searchClick">
+                    <HcIcon name="search-2" />
                     <span>搜索</span>
                 </el-button>
             </div>
             <div class="ml-2">
                 <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
+                    <HcIcon name="close-circle" />
                     <span>重置</span>
                 </el-button>
             </div>
         </template>
         <template #extra>
             <el-button size="large" type="warning" hc-btn @click="draftsClick">
-                <HcIcon name="draft"/>
-                <span>草稿箱{{draftNum > 0 ? `(${draftNum})` : ''}}</span>
+                <HcIcon name="draft" />
+                <span>草稿箱{{ draftNum > 0 ? `(${draftNum})` : '' }}</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
+                <HcIcon name="add" />
                 <span>新增报销记录</span>
             </el-button>
         </template>
 
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #frNumber="{row}">
-                <span class="text-blue " @click="rowNameTap(row)">{{row.frNumber}}</span>
+        <HcTable :is-index="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #frNumber="{ row }">
+                <span class="text-blue " @click="rowNameTap(row)">{{ row.frNumber }}</span>
             </template>
-            <template #action="{row,index}">
+            <template #action="{ row, index }">
                 <el-popconfirm title="是否确认撤销?" hide-icon @confirm="rowCancel(row)">
                     <template #reference>
-                        <el-button size="small" type="primary"
-                                   :disabled="row.status !== 1"
-                                   :loading="row.isCancelLoading"
-                        >撤销</el-button>
+                        <el-button
+                            size="small" type="primary"
+                            :disabled="row.status !== 1"
+                            :loading="row.isCancelLoading"
+                        >
+                            撤销
+                        </el-button>
                     </template>
                 </el-popconfirm>
             </template>
         </HcTable>
 
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
+            <HcPages :pages="searchForm" @change="pageChange" />
         </template>
 
-        <!--草稿箱-->
-        <HcDialog isToBody isTable bgColor="#ffffff" widths="62rem" :footer="false" :show="draftsModal"
-                  :title="draftNum > 0 ? `草稿箱(${draftNum})` : '草稿箱'" @close="draftsCloseClick"
+        <!-- 草稿箱 -->
+        <HcDialog
+            is-to-body is-table bg-color="#ffffff" widths="62rem" :footer="false" :show="draftsModal"
+            :title="draftNum > 0 ? `草稿箱(${draftNum})` : '草稿箱'" @close="draftsCloseClick"
         >
             <el-alert title="3个月内未更新的草稿将被自动删除" type="warning" show-icon />
             <div style="position: relative;height: calc(100% - 44px);">
-                <HcTable :isIndex="false" :column="tableDraftsColumn" :datas="tableDraftsData">
-                    <template #action="{row,index}">
-                        <el-button size="small" type="primary" @click="editDraftClick(row)">继续编辑</el-button>
-                        <el-button size="small" type="danger" @click="delDraftClick(row)">删除</el-button>
+                <HcTable :is-index="false" :column="tableDraftsColumn" :datas="tableDraftsData">
+                    <template #action="{ row, index }">
+                        <el-button size="small" type="primary" @click="editDraftClick(row)">
+                            继续编辑
+                        </el-button>
+                        <el-button size="small" type="danger" @click="delDraftClick(row)">
+                            删除
+                        </el-button>
                     </template>
                 </HcTable>
             </div>
@@ -73,14 +81,14 @@
 </template>
 
 <script setup>
-import {onActivated, ref} from "vue";
-import {useRouter} from 'vue-router'
-import mainApi from "~api/expense/finReimburse";
-import {getProjectList,getuserList} from "~api/other";
-import {getArrValue} from "js-fast-way";
-import {delMessage} from "~uti/tools";
-import {useAppStore} from "~src/store";
-const useAppState = useAppStore();
+import { onActivated, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import mainApi from '~api/expense/finReimburse'
+import { getProjectList, getuserList } from '~api/other'
+import { getArrValue } from 'js-fast-way'
+import { delMessage } from '~uti/tools'
+import { useAppStore } from '~src/store'
+const useAppState = useAppStore()
 
 const router = useRouter()
 
@@ -99,7 +107,7 @@ const getApi = () => {
 //项目类型
 const projectType = ref([])
 const getProjectData = async () => {
-    const {error, code, data} = await getProjectList()
+    const { error, code, data } = await getProjectList()
     //判断状态
     if (!error && code === 200) {
         projectType.value = getArrValue(data)
@@ -108,9 +116,9 @@ const getProjectData = async () => {
     }
 }
 //获取所有员工
-const userList=ref([])
-const getUserDict=async()=>{
-    const {error, code, data} = await getuserList({tenantId:useAppState.tenantId})
+const userList = ref([])
+const getUserDict = async ()=>{
+    const { error, code, data } = await getuserList({ tenantId:useAppState.tenantId })
     if (!error && code === 200) {
         userList.value = getArrValue(data)
 
@@ -120,22 +128,22 @@ const getUserDict=async()=>{
     }
 }
 //搜索表单
-const searchForm = ref({userIdVesting: null, projectId: null, current: 1, size: 20, total: 0})
+const searchForm = ref({ userIdVesting: null, projectId: null, current: 1, size: 20, total: 0 })
 
 //搜索
 const searchClick = () => {
-    searchForm.value.current = 1;
+    searchForm.value.current = 1
     getTableData()
 }
 
 //重置搜索表单
 const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
+    searchForm.value = { current: 1, size: 20, total: 0 }
     getTableData()
 }
 
 //分页被点击
-const pageChange = ({current, size}) => {
+const pageChange = ({ current, size }) => {
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -144,22 +152,22 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'frNumber', name: '报销编号', width: '120', align: 'center'},
-    {key: 'frType', name: '报销类型', width: '140'},
-    {key: 'projectName', name: '项目名称', minWidth: '200'},
-    {key: 'frMoney', name: '报销金额', width: '160', align: 'center'},
-    {key: 'userNameVesting', name: '归属人', width: '140', align: 'center'},
-    {key: 'approvalResultName', name: '审批结果', width: '140', align: 'center'},
-    {key: 'approvalStatusName', name: '审批状态', width: '140', align: 'center'},
-    {key: 'frDate', name: '报销时间', width: '160', align: 'center'},
-    {key: 'createName', name: '创建人', width: '140', align: 'center'},
-    {key: 'createTime', name: '创建时间', width: '180', align: 'center'},
-    {key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right'},
+    { key: 'frNumber', name: '报销编号', width: '120', align: 'center' },
+    { key: 'frTypeName', name: '报销类型', width: '140' },
+    { key: 'projectName', name: '项目名称', minWidth: '200' },
+    { key: 'frMoney', name: '报销金额', width: '160', align: 'center' },
+    { key: 'userNameVesting', name: '归属人', width: '140', align: 'center' },
+    { key: 'approvalResultName', name: '审批结果', width: '140', align: 'center' },
+    { key: 'approvalStatusName', name: '审批状态', width: '140', align: 'center' },
+    { key: 'frDate', name: '报销时间', width: '160', align: 'center' },
+    { key: 'createName', name: '创建人', width: '140', align: 'center' },
+    { key: 'createTime', name: '创建时间', width: '180', align: 'center' },
+    { key: 'action', name: '操作', width: '90', align: 'center', fixed: 'right' },
 ]
 const tableData = ref([])
 const getTableData = async () => {
     tableLoading.value = true
-    const {error, code, data} = await mainApi.page(searchForm.value)
+    const { error, code, data } = await mainApi.page(searchForm.value)
     //判断状态
     tableLoading.value = false
     if (!error && code === 200) {
@@ -172,15 +180,15 @@ const getTableData = async () => {
 }
 
 //预览
-const rowNameTap = ({id}) => {
+const rowNameTap = ({ id }) => {
     // window.$message?.error('未知功能')
 }
 
 //撤销
 const rowCancel = async (row) => {
     row.isCancelLoading = true
-    const {error, code, msg} = await mainApi.cancel({
-        id: row.id
+    const { error, code, msg } = await mainApi.cancel({
+        id: row.id,
     })
     //判断状态
     row.isCancelLoading = false
@@ -196,7 +204,7 @@ const rowCancel = async (row) => {
 const addRowClick = () => {
     router.push({
         name: 'expense-finReimburse-record',
-        query: {type: 'add'}
+        query: { type: 'add' },
     })
 }
 
@@ -214,15 +222,15 @@ const draftsCloseClick = () => {
 //草稿箱数据
 const draftNum = ref(0)
 const tableDraftsColumn = [
-    {key: 'title', name: '标题'},
-    {key: 'updateTime', name: '更新时间', width: '200'},
-    {key: 'action', name: '操作', width: '170', align: 'center'},
+    { key: 'title', name: '标题' },
+    { key: 'updateTime', name: '更新时间', width: '200' },
+    { key: 'action', name: '操作', width: '170', align: 'center' },
 ]
 const tableDraftsData = ref([])
 
 //获取草稿数量
 const getDraftNum = async () => {
-    const {error, code, data} = await mainApi.draft()
+    const { error, code, data } = await mainApi.draft()
     //判断状态
     if (!error && code === 200) {
         const res = getArrValue(data)
@@ -235,19 +243,19 @@ const getDraftNum = async () => {
 }
 
 //继续编辑
-const editDraftClick = ({emdraftIds}) => {
+const editDraftClick = ({ emdraftIds }) => {
     draftsModal.value = false
     router.push({
         name: 'expense-finReimburse-record',
-        query: {id: emdraftIds, type: 'draft'}
+        query: { id: emdraftIds, type: 'draft' },
     })
 }
 
 //删除草稿
-const delDraftClick = ({groupId}) => {
+const delDraftClick = ({ groupId }) => {
     delMessage(async () => {
-        const {error, code, msg} = await mainApi.remove({
-            groupId: groupId
+        const { error, code, msg } = await mainApi.remove({
+            groupId: groupId,
         })
         //判断状态
         if (!error && code === 200) {

src/views/expense/finReimburse/record.vue

@@ -87,7 +87,7 @@
                                 </el-select>
                             </el-form-item>
                             <el-form-item label="选择借款项">
-                                <el-select v-model="detailsData.deductLoanId" clearable>
+                                <el-select v-model="detailsData.deductLoanId" clearable @change="changeDeductLoan">
                                     <el-option v-for="item in loanListData" :label="item.loanName" :value="item.id" />
                                 </el-select>
                             </el-form-item>
@@ -202,7 +202,7 @@ onActivated(() => {
 const detailsData = ref({})//详情数据
 //深度监听
 watch(() => [
-    detailsData.value.details,
+    detailsData.value?.details,
 ], ([datas]) => {
     let num = 0
    datas.forEach((ele)=>{
@@ -212,6 +212,7 @@ watch(() => [
     
    })
    totalFrMoney.value = num
+   changeDeductLoan(detailsData.value.deductLoanId)
 }, { deep: true })
 //请求接口
 const getApi = () => {
@@ -279,6 +280,21 @@ const getLoanListData = async () => {
         loanListData.value = []
     }
 }
+//抵款
+const changeDeductLoan = (val)=>{
+ if (val) {
+    loanListData.value.forEach((ele)=>{
+        if (ele.id === val) {
+            detailsData.value.frMoneyActual = totalFrMoney.value - Number(ele.loanMoney)
+        }
+    })
+ } else {
+    detailsData.value.frMoneyActual = null
+ }
+
+  
+}
+
 //获取所有员工
 const userList = ref([])
 const getUserDict = async ()=>{
@@ -384,6 +400,7 @@ const getDetailsData = async () => {
             })
             newDetails.details = newDetailsArr
             totalFrMoney.value = frMoney
+            newDetails.frMoney = frMoney
             detailsData.value = newDetails
         } else {
             totalFrMoney.value = 0