|
|
@@ -0,0 +1,252 @@
|
|
|
+<template>
|
|
|
+ <div class="_LoanBox">
|
|
|
+ <div class="searchBox">
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">借款单号：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.loanNumber"
|
|
|
+ placeholder="请输入借款单号"
|
|
|
+ style="width: 210px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">核销状态：</span>
|
|
|
+ <el-select
|
|
|
+ width="160px"
|
|
|
+ v-model="queryParams.isVerify"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="请选择核销状态"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-option :key="''" label="全部" :value="''" />
|
|
|
+ <el-option :key="1" label="已核销" :value="1" />
|
|
|
+ <el-option :key="0" label="未核销" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">状态：</span>
|
|
|
+ <el-select
|
|
|
+ width="160px"
|
|
|
+ v-model="queryParams.flowStatus"
|
|
|
+ class="m-2"
|
|
|
+ placeholder=""
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-option :key="''" label="全部" :value="''" />
|
|
|
+ <el-option :key="1" label="办理中" :value="1" />
|
|
|
+ <el-option :key="90" label="已借" :value="90" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">申请时间：</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="applyDate"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="from">
|
|
|
+ <div class="btnBox">
|
|
|
+ <el-button type="primary" style="background: #3485ff" @click="searchHandle">
|
|
|
+ <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
|
|
|
+ 查询</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
|
|
|
+ <img class="mr-8px" :src="getAssetURL(item.icon)" alt="" />
|
|
|
+ <p>{{ item.name }}：</p>
|
|
|
+ <h4 class="font-size-18px">{{ item.num }}</h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tableBox">
|
|
|
+ <div class="table" ref="tableRef">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :style="{ height: tableHeight + 'px' }"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#F7F8FA',
|
|
|
+ color: '#121518',
|
|
|
+ height: '50px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" width="60">
|
|
|
+ <template #default="scope">{{ scope.$index + 1 }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="loanNumber" label="借款单号" width="180" />
|
|
|
+ <el-table-column prop="applyDate" label="申请时间" width="120" />
|
|
|
+ <el-table-column prop="workerDept" label="借款人部门" width="100" />
|
|
|
+ <el-table-column prop="worker" label="借款人" width="120" />
|
|
|
+ <el-table-column prop="loanAmount" label="借款总金额" width="120" />
|
|
|
+ <el-table-column prop="verifyAmount" label="已核销金额" width="120" />
|
|
|
+ <el-table-column prop="loanBalance" label="借款余额" width="120" />
|
|
|
+ <el-table-column prop="agreedPayTime" label="约定付款期限" width="120" />
|
|
|
+ <el-table-column prop="isVerify" label="核销状态" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ verifyMap[scope.row.isVerify] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="verifyDate" label="核销时间" width="120" />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ prop="description"
|
|
|
+ label="借款说明"
|
|
|
+ width="360"
|
|
|
+ />
|
|
|
+ <el-table-column prop="flowStatus" label="状态" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ flowStatusMap[scope.row.flowStatus] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="operateBtn" @click="operateClick(scope.row)">
|
|
|
+ <span>查看</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pageBox">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="queryParams.pageNo"
|
|
|
+ :page-size="10"
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import moment from 'moment'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import request from '@/config/axios'
|
|
|
+import { getAssetURL } from '@/utils/auth'
|
|
|
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
+
|
|
|
+defineOptions({ name: 'LoanList' })
|
|
|
+const verifyMap: any = { 1: '已核销', 0: '未核销' }
|
|
|
+const flowStatusMap: any = { 1: '办理中', 90: '已借' }
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const { wsCache } = useCache()
|
|
|
+const user = wsCache.get(CACHE_KEY.USER)
|
|
|
+const userId = user.user.id ? user.user.id : ''
|
|
|
+const deptId = user.user.deptId ? user.user.deptId : ''
|
|
|
+const tableRef: any = ref(null)
|
|
|
+const tableHeight: any = ref(0)
|
|
|
+const queryParams = reactive<{
|
|
|
+ loanNumber: string
|
|
|
+ appyDate: string
|
|
|
+ workerDept: string
|
|
|
+ worker: string
|
|
|
+ loanAmount: number | string
|
|
|
+ verifyAmount: number | string
|
|
|
+ loanBalance: number | string
|
|
|
+ agreedPayTime: string
|
|
|
+ isVerify: any
|
|
|
+ verifyDate: string
|
|
|
+ description: string
|
|
|
+ flowStatus: any
|
|
|
+ pageNo: number
|
|
|
+ applyOn: string
|
|
|
+ applyOff: string
|
|
|
+ workerId: string
|
|
|
+}>({
|
|
|
+ loanNumber: '',
|
|
|
+ appyDate: '',
|
|
|
+ workerDept: '',
|
|
|
+ worker: '',
|
|
|
+ loanAmount: '',
|
|
|
+ verifyAmount: '',
|
|
|
+ loanBalance: '',
|
|
|
+ agreedPayTime: '',
|
|
|
+ isVerify: '',
|
|
|
+ verifyDate: '',
|
|
|
+ description: '',
|
|
|
+ flowStatus: '',
|
|
|
+ pageNo: 1,
|
|
|
+ applyOn: '',
|
|
|
+ applyOff: '',
|
|
|
+ workerId: userId
|
|
|
+})
|
|
|
+const applyDate = ref()
|
|
|
+const infoList: any = ref([
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzcz',
|
|
|
+ name: '已借款总金额(元)',
|
|
|
+ num: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzcb',
|
|
|
+ name: '已核销总金额(元)',
|
|
|
+ num: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzlr',
|
|
|
+ name: '借款总余额(元)',
|
|
|
+ num: '-100000.57'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+const handleCurrentChange = (pageNo: number) => {
|
|
|
+ queryParams.pageNo = pageNo
|
|
|
+ queryLoanListAjax()
|
|
|
+}
|
|
|
+const operateClick = (row: any) => {
|
|
|
+ router.push({
|
|
|
+ path: '/projectDetail',
|
|
|
+ query: { id: row.projectId, contractId: row.id }
|
|
|
+ })
|
|
|
+}
|
|
|
+const tableData = ref<Array<any>>([])
|
|
|
+const total = ref<number>()
|
|
|
+const searchHandle: () => void = () => {
|
|
|
+ queryLoanListAjax()
|
|
|
+}
|
|
|
+const queryLoanListAjax = async (): Promise<void> => {
|
|
|
+ const urlApi = `/loan/page`
|
|
|
+ if (applyDate.value && applyDate.value.length > 0) {
|
|
|
+ queryParams.applyOn = moment(applyDate.value[0]).format('YYYY-MM-DD')
|
|
|
+ queryParams.applyOff = moment(applyDate.value[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ const sendData = {
|
|
|
+ ...queryParams,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+ const result = await request.get({ url: urlApi, params: sendData }, '/business')
|
|
|
+ tableData.value = result['records']
|
|
|
+ total.value = result['total']
|
|
|
+}
|
|
|
+queryLoanListAjax()
|
|
|
+
|
|
|
+const filterNodeMethod = (value, data) => {
|
|
|
+ return data.name.includes(value)
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ tableHeight.value = tableRef.value.clientHeight
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import url(./loan.scss);
|
|
|
+@import url(./book.scss);
|
|
|
+._LoanBox {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #dee0e3;
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+</style>
|
ljy121