|
@@ -3,32 +3,19 @@
|
|
|
<div class="searchBox">
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销单号:</span>
|
|
|
- <el-input v-model="queryParams.xmmc" placeholder="请输入报销单号" style="width: 210px" />
|
|
|
- </div>
|
|
|
- <div class="form">
|
|
|
- <span class="formSpan">申请时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.xmbh"
|
|
|
- type="daterange"
|
|
|
- range-separator="To"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="form form-time-range">
|
|
|
- <span class="formSpan">立项时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="lxsjObj"
|
|
|
- type="daterange"
|
|
|
- unlink-panels
|
|
|
- range-separator="To"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.travelCostNo"
|
|
|
+ placeholder="请输入报销单号"
|
|
|
+ style="width: 210px"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销总金额:</span>
|
|
|
- <el-input v-model="queryParams.xmbh" placeholder="请输入报销总金额" style="width: 160px" />
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.totalAmount"
|
|
|
+ placeholder="请输入用款总金额"
|
|
|
+ style="width: 160px"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="from">
|
|
|
<div class="btnBox">
|
|
@@ -43,8 +30,8 @@
|
|
|
<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>
|
|
|
+ <p>{{ item.name }}({{ totalAmount > 100000 ? '万元' : '元' }}):</p>
|
|
|
+ <h4 class="font-size-18px">{{ item.num / (totalAmount > 100000 ? 10000 : 1) }}</h4>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -52,29 +39,43 @@
|
|
|
<div class="table" ref="tableRef">
|
|
|
<el-table
|
|
|
stripe
|
|
|
+ max-height="480"
|
|
|
:data="tableData"
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- :style="{ height: tableHeight + 'px' }"
|
|
|
:header-cell-style="{
|
|
|
background: '#E5F0FB',
|
|
|
color: '#233755',
|
|
|
height: '50px'
|
|
|
}"
|
|
|
>
|
|
|
- <el-table-column label="序号" width="60">
|
|
|
+ <el-table-column label="序号" width="80">
|
|
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column :show-overflow-tooltip="true" prop="xmmc" label="报销单号" />
|
|
|
- <el-table-column prop="xmbh" label="报销人" width="180" />
|
|
|
- <el-table-column prop="projectTypeName" label="报销人部门" width="120" />
|
|
|
- <el-table-column prop="zrbm" label="申请时间(元)" width="200" />
|
|
|
- <el-table-column prop="lxsj" label="项目名称" width="120" />
|
|
|
- <el-table-column prop="yssj" label="项目部门" width="120" />
|
|
|
- <el-table-column prop="xmzt" label="状态" width="120" />
|
|
|
- <el-table-column label="操作" fixed="right" width="80">
|
|
|
+ <el-table-column
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ prop="travelCostNo"
|
|
|
+ label="报销单号"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column prop="userNickname" label="报销人" width="120" />
|
|
|
+ <el-table-column prop="deptName" label="报销部门" />
|
|
|
+ <el-table-column prop="totalAmount" label="报销总金额" width="120" />
|
|
|
+ <el-table-column align="center" label="差旅起止时间" width="240">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ dateFormatter2(null, null, scope.row.startTime) }}</span>
|
|
|
+ -
|
|
|
+ <span>{{ dateFormatter2(null, null, scope.row.endTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否代办" align="center" prop="isAgent">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.COMMON_STATE" :value="scope.row.isAgent" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <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>查看流程</span>
|
|
|
+ <span style="color: #2e77e6">查看流程</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -95,42 +96,29 @@
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import moment from 'moment'
|
|
|
-import request from '@/config/axios'
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
+import { dateFormatter2 } from '@/utils/formatTime'
|
|
|
+import * as TravelCostApi from '@/api/oa/travelCost'
|
|
|
import { getAssetURL } from '@/utils/auth'
|
|
|
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
|
|
|
-defineOptions({ name: 'ProjectBook' })
|
|
|
-const { wsCache } = useCache()
|
|
|
-const user = wsCache.get(CACHE_KEY.USER)
|
|
|
-const deptId = user.user.deptId ? user.user.deptId : ''
|
|
|
+defineOptions({ name: 'NormalCost' })
|
|
|
+
|
|
|
const tableRef: any = ref(null)
|
|
|
const tableHeight: any = ref(0)
|
|
|
const queryParams = reactive<{
|
|
|
- xmbh: string
|
|
|
- xmmc: string
|
|
|
- xmlbId: string
|
|
|
- lxsjOn: string
|
|
|
- lxsjOff: string
|
|
|
+ travelCostNo: string
|
|
|
+ totalAmount: string
|
|
|
+ flowFinishtime: string[]
|
|
|
+ projectIds: string[]
|
|
|
pageNo: number
|
|
|
- xzqdm: number | string
|
|
|
pageSize: number
|
|
|
- isSign: any
|
|
|
- xmzt: any
|
|
|
- hyId: any
|
|
|
- deptId: string
|
|
|
}>({
|
|
|
- xmbh: '',
|
|
|
- xmmc: '',
|
|
|
- xmlbId: '15',
|
|
|
- lxsjOn: '',
|
|
|
- lxsjOff: '',
|
|
|
+ travelCostNo: '',
|
|
|
+ totalAmount: '',
|
|
|
+ flowFinishtime: [],
|
|
|
+ projectIds: [],
|
|
|
pageNo: 1,
|
|
|
- xzqdm: '',
|
|
|
- pageSize: 15,
|
|
|
- isSign: '',
|
|
|
- xmzt: '',
|
|
|
- hyId: 0,
|
|
|
- deptId: deptId
|
|
|
+ pageSize: 10
|
|
|
})
|
|
|
const infoList: any = ref([
|
|
|
{
|
|
@@ -149,42 +137,62 @@ const infoList: any = ref([
|
|
|
num: '0'
|
|
|
}
|
|
|
])
|
|
|
-
|
|
|
const handleCurrentChange = (pageNo: number) => {
|
|
|
queryParams.pageNo = pageNo
|
|
|
- queryProjectListAjax()
|
|
|
+ getListAjax()
|
|
|
}
|
|
|
-const operateClick = (row: any) => {}
|
|
|
const tableData = ref<Array<any>>([])
|
|
|
const total = ref<number>()
|
|
|
const searchHandle: () => void = () => {
|
|
|
- queryProjectListAjax()
|
|
|
+ getListAjax()
|
|
|
}
|
|
|
-const queryProjectListAjax = async (): Promise<void> => {
|
|
|
- const urlApi = `/project/page`
|
|
|
- if (lxsjObj.value && lxsjObj.value.length > 0) {
|
|
|
- queryParams.lxsjOn = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
|
|
|
- queryParams.lxsjOff = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
|
|
|
- } else {
|
|
|
- queryParams.lxsjOn = ''
|
|
|
- queryParams.lxsjOff = ''
|
|
|
- }
|
|
|
- const sendData = {
|
|
|
- ...queryParams,
|
|
|
- pageSize: 15
|
|
|
- }
|
|
|
- if (sendData['hyId'] == 0) {
|
|
|
- sendData['hyId'] = null
|
|
|
+
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
+const totalAmount = ref<number>(0)
|
|
|
+const initDetailCoast = (projectIds: string[], countDate: string) => {
|
|
|
+ queryParams.projectIds = projectIds
|
|
|
+ queryParams.flowFinishtime = [
|
|
|
+ moment(countDate).startOf('months').format('YYYY-MM-DD'),
|
|
|
+ moment(countDate).endOf('months').format('YYYY-MM-DD')
|
|
|
+ ]
|
|
|
+ getOverview()
|
|
|
+ getListAjax()
|
|
|
+}
|
|
|
+/** 查询概况 */
|
|
|
+const getOverview = async () => {
|
|
|
+ const data = await TravelCostApi.getTravelCostOverview(queryParams)
|
|
|
+ infoList.value[0].num = data.totalAmount
|
|
|
+ infoList.value[1].num = data.totalUseAmount
|
|
|
+ infoList.value[2].num = data.totalApplyAmount
|
|
|
+}
|
|
|
+const getListAjax = async (): Promise<void> => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await TravelCostApi.getTravelCostPage(queryParams)
|
|
|
+ tableData.value = data.list
|
|
|
+ total.value = data.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
}
|
|
|
- const result = await request.get({ url: urlApi, params: sendData }, '/business')
|
|
|
- tableData.value = result['records']
|
|
|
- total.value = result['total']
|
|
|
}
|
|
|
-queryProjectListAjax()
|
|
|
-
|
|
|
+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>
|
|
@@ -249,70 +257,19 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .oa-sys-list-content,
|
|
|
.tableBox {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- // height: calc(100% - 100px);
|
|
|
+ height: calc(100% - 100px);
|
|
|
margin-top: 20px;
|
|
|
flex: 1;
|
|
|
-
|
|
|
- ._table,
|
|
|
- .table {
|
|
|
+ > .table {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- :deep(.el-table) {
|
|
|
- .el-table__inner-wrapper::before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table__header-wrapper {
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- tr.el-table__row--striped td.el-table__cell {
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .operateBtnGroup {
|
|
|
- > span {
|
|
|
- color: #2e77e6;
|
|
|
- white-space: nowrap;
|
|
|
- margin: 0px 10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .flex-btns {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .operateBtn {
|
|
|
- display: flex;
|
|
|
- width: 54px;
|
|
|
- height: 24px;
|
|
|
- cursor: pointer;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #2e77e6;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
- .pageBox {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- bottom: 0px;
|
|
|
- text-align: right;
|
|
|
+ > .pageBox {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
|