|
@@ -3,27 +3,40 @@
|
|
|
<div class="searchBox">
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销单号:</span>
|
|
|
- <el-input v-model="queryParams.commonCostNo" placeholder="请输入报销单号" />
|
|
|
+ <el-input v-model="queryParams.travelCostNo" placeholder="请输入报销单号" />
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销人:</span>
|
|
|
- <el-input v-model="queryParams.userId" placeholder="请输入报销人" />
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.userId"
|
|
|
+ :data="userList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ default-expand-all
|
|
|
+ node-key="id"
|
|
|
+ placeholder="请选择人员"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销人部门:</span>
|
|
|
- <el-select width="160px" v-model="queryParams.deptId" placeholder="请选择部门">
|
|
|
- <el-option
|
|
|
- v-for="item in industryListAll"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.deptId"
|
|
|
+ :data="deptList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ clearable
|
|
|
+ default-expand-all
|
|
|
+ node-key="id"
|
|
|
+ placeholder="请选择部门"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="form" style="width: 380px">
|
|
|
<span class="formSpan">申请时间:</span>
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.applyTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
type="daterange"
|
|
|
unlink-panels
|
|
|
range-separator="到"
|
|
@@ -33,15 +46,27 @@
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">项目部门:</span>
|
|
|
- <el-input v-model="queryParams.projectDeptId" placeholder="请输入项目部门" />
|
|
|
- </div>
|
|
|
- <div class="form">
|
|
|
- <span class="formSpan">报销类型:</span>
|
|
|
- <el-input v-model="queryParams.costType" placeholder="请输入报销类型" />
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.projectDeptId"
|
|
|
+ :data="deptList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ clearable
|
|
|
+ default-expand-all
|
|
|
+ node-key="id"
|
|
|
+ placeholder="请选择项目部门"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">状态:</span>
|
|
|
- <el-input v-model="queryParams.status" />
|
|
|
+ <el-select v-model="queryParams.status" placeholder="状态" clearable class="!w-240px">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getIntDictOptions(DICT_TYPE.FINANCE_STATUS)"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
<span class="formSpan">报销总金额:</span>
|
|
@@ -53,10 +78,6 @@
|
|
|
<img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
|
|
|
查询</el-button
|
|
|
>
|
|
|
- <el-button type="primary">
|
|
|
- <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
|
|
|
- 导出</el-button
|
|
|
- >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -64,7 +85,7 @@
|
|
|
<ul>
|
|
|
<li v-for="(item, index) in infoList" :key="index" class="mr-40px">
|
|
|
<p>{{ item.name }}:</p>
|
|
|
- <h4 class="font-size-18px">{{ item.num }}</h4>
|
|
|
+ <h4 class="font-size-18px">{{ item.num.toFixed(2) }}</h4>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -116,7 +137,6 @@
|
|
|
<span>{{ dateFormatter2(null, null, scope.row.endTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center" prop="partnerNames" label="同行人" />
|
|
|
<el-table-column align="center" prop="status" label="状态" />
|
|
|
<el-table-column align="center" label="操作" fixed="right" width="80">
|
|
|
<template #default="scope">
|
|
@@ -141,15 +161,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
|
import * as TravelCostApi from '@/api/oa/travelCost'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
import { dateFormatter2 } from '@/utils/formatTime'
|
|
|
+import { defaultProps, handleTree } from '@/utils/tree'
|
|
|
import TableLayout from '../../oaViews/layout/TableLayout.vue'
|
|
|
|
|
|
defineOptions({ name: 'TravelCost' })
|
|
|
const queryParams = reactive({
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
- commonCostNo: undefined,
|
|
|
+ travelCostNo: undefined,
|
|
|
userId: undefined,
|
|
|
deptId: undefined,
|
|
|
applyTime: [],
|
|
@@ -161,20 +184,22 @@ const queryParams = reactive({
|
|
|
const infoList: any = ref([
|
|
|
{
|
|
|
name: '报销总金额(元)',
|
|
|
- num: '0'
|
|
|
+ num: 0
|
|
|
},
|
|
|
{
|
|
|
name: '已报销总金额(元)',
|
|
|
- num: '0'
|
|
|
+ num: 0
|
|
|
},
|
|
|
{
|
|
|
name: '办理中总金额(元)',
|
|
|
- num: '0'
|
|
|
+ num: 0
|
|
|
}
|
|
|
])
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
const total = ref(0) // 列表的总页数
|
|
|
const list = ref([]) // 列表的数
|
|
|
+const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
+const userList = ref<Tree[]>([]) // 树形结构
|
|
|
|
|
|
/** 查询列表 */
|
|
|
const getList = async () => {
|
|
@@ -188,6 +213,20 @@ const getList = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/** 用户列表 */
|
|
|
+const initTreeUsers = async () => {
|
|
|
+ DeptApi.getSimpleDeptUserAllList().then((res) => {
|
|
|
+ userList.value = handleTree(res)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 部门列表 */
|
|
|
+const initTreeDeps = async () => {
|
|
|
+ DeptApi.getSimpleDeptList().then((res) => {
|
|
|
+ deptList.value = handleTree(res)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
/** 查询概况 */
|
|
|
const getOverview = async () => {
|
|
|
const data = await TravelCostApi.getTravelCostOverview(queryParams)
|
|
@@ -211,6 +250,8 @@ const handleCurrentChange = (pageNo: number) => {
|
|
|
|
|
|
/** 初始化 */
|
|
|
onMounted(() => {
|
|
|
+ initTreeDeps()
|
|
|
+ initTreeUsers()
|
|
|
getList()
|
|
|
getOverview()
|
|
|
})
|