|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="cost_box">
|
|
|
+ <div class="searchBox">
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">用款单号：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.useMoneyNo"
|
|
|
+ placeholder="请输入用款单号"
|
|
|
+ style="width: 210px"
|
|
|
+ />
|
|
|
+ </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="tableBox">
|
|
|
+ <div class="table" ref="tableRef">
|
|
|
+ <el-table
|
|
|
+ stripe
|
|
|
+ max-height="480"
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#E5F0FB',
|
|
|
+ color: '#233755',
|
|
|
+ height: '50px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" width="80">
|
|
|
+ <template #default="scope">{{ scope.$index + 1 }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ prop="useMoneyNo"
|
|
|
+ label="用款单号"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column prop="userNickname" label="申请人" width="120" />
|
|
|
+ <el-table-column prop="deptName" label="申请部门" />
|
|
|
+ <el-table-column
|
|
|
+ prop="applyTime"
|
|
|
+ :formatter="dateFormatter2"
|
|
|
+ label="申请时间"
|
|
|
+ width="120"
|
|
|
+ />
|
|
|
+ <el-table-column prop="totalAmount" label="用款总金额" width="120" />
|
|
|
+ <el-table-column
|
|
|
+ prop="agreedPayTime"
|
|
|
+ :formatter="dateFormatter2"
|
|
|
+ label="约定付款期限"
|
|
|
+ width="120"
|
|
|
+ />
|
|
|
+ <el-table-column prop="status" label="状态" align="center" width="120" />
|
|
|
+ <el-table-column label="操作" fixed="right" align="center" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="operateBtn" @click="operateClick(scope.row)">
|
|
|
+ <span style="color: #2e77e6; cursor: pointer">查看流程</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 { dateFormatter2 } from '@/utils/formatTime'
|
|
|
+import * as UseMoneyApi from '@/api/oa/useMoney'
|
|
|
+import { getAssetURL } from '@/utils/auth'
|
|
|
+
|
|
|
+defineOptions({ name: 'UseMoneyCost' })
|
|
|
+
|
|
|
+const tableRef: any = ref(null)
|
|
|
+const tableHeight: any = ref(0)
|
|
|
+const queryParams = reactive<{
|
|
|
+ useMoneyNo: string
|
|
|
+ totalAmount: string
|
|
|
+ finishOn: string
|
|
|
+ finishOff: string
|
|
|
+ project: string[]
|
|
|
+ pageNo: number
|
|
|
+ pageSize: number
|
|
|
+}>({
|
|
|
+ useMoneyNo: '',
|
|
|
+ totalAmount: '',
|
|
|
+ finishOn: '',
|
|
|
+ finishOff: '',
|
|
|
+ project: [],
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+const handleCurrentChange = (pageNo: number) => {
|
|
|
+ queryParams.pageNo = pageNo
|
|
|
+ getListAjax()
|
|
|
+}
|
|
|
+const tableData = ref<Array<any>>([])
|
|
|
+const total = ref<number>()
|
|
|
+const searchHandle: () => void = () => {
|
|
|
+ getListAjax()
|
|
|
+}
|
|
|
+
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
+const initDetailCoast = (projectIds: string[], countDate: string) => {
|
|
|
+ queryParams.project = projectIds
|
|
|
+ queryParams.finishOn = moment(countDate).startOf('months').format('YYYY-MM-DD')
|
|
|
+ queryParams.finishOff = moment(countDate).endOf('months').format('YYYY-MM-DD')
|
|
|
+ getListAjax()
|
|
|
+}
|
|
|
+const getListAjax = async (): Promise<void> => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await UseMoneyApi.getUseMoneyPage(queryParams)
|
|
|
+ tableData.value = data.list
|
|
|
+ total.value = data.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+const router = useRouter()
|
|
|
+const operateClick = (row: any) => {
|
|
|
+ router.push({
|
|
|
+ path: '/processLook',
|
|
|
+ query: {
|
|
|
+ url:
|
|
|
+ `${
|
|
|
+ import.meta.env.VITE_PROCESS_DETAIL_URI
|
|
|
+ }/IFlowInstance/redirectFlowPage?flowInstanceId=` + row.instanceId
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ tableHeight.value = tableRef.value.clientHeight
|
|
|
+})
|
|
|
+defineExpose({
|
|
|
+ initDetailCoast
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.cost_box {
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .oa-sys-top-search,
|
|
|
+ .searchBox {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 30px;
|
|
|
+ background: #eaf5fd;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .form {
|
|
|
+ display: flex;
|
|
|
+ width: 240px;
|
|
|
+ margin: 5px 0;
|
|
|
+ margin-right: 16px;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ &.form-time-range {
|
|
|
+ width: 380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input) {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table--default) {
|
|
|
+ .el-table thead th {
|
|
|
+ .cell {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__cell {
|
|
|
+ padding: 14px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .formSpan {
|
|
|
+ width: 80px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #505a69;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableBox {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ margin-top: 20px;
|
|
|
+ flex: 1;
|
|
|
+ > .table {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > .pageBox {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
