|
|
@@ -0,0 +1,338 @@
|
|
|
+<template>
|
|
|
+ <div class="cost_box">
|
|
|
+ <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="结束日期"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="form">
|
|
|
+ <span class="formSpan">报销总金额：</span>
|
|
|
+ <el-input v-model="queryParams.xmbh" placeholder="请输入报销总金额" style="width: 160px" />
|
|
|
+ </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
|
|
|
+ stripe
|
|
|
+ :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">
|
|
|
+ <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">
|
|
|
+ <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 request from '@/config/axios'
|
|
|
+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 : ''
|
|
|
+const tableRef: any = ref(null)
|
|
|
+const tableHeight: any = ref(0)
|
|
|
+const queryParams = reactive<{
|
|
|
+ xmbh: string
|
|
|
+ xmmc: string
|
|
|
+ xmlbId: string
|
|
|
+ lxsjOn: string
|
|
|
+ lxsjOff: string
|
|
|
+ pageNo: number
|
|
|
+ xzqdm: number | string
|
|
|
+ pageSize: number
|
|
|
+ isSign: any
|
|
|
+ xmzt: any
|
|
|
+ hyId: any
|
|
|
+ deptId: string
|
|
|
+}>({
|
|
|
+ xmbh: '',
|
|
|
+ xmmc: '',
|
|
|
+ xmlbId: '15',
|
|
|
+ lxsjOn: '',
|
|
|
+ lxsjOff: '',
|
|
|
+ pageNo: 1,
|
|
|
+ xzqdm: '',
|
|
|
+ pageSize: 15,
|
|
|
+ isSign: '',
|
|
|
+ xmzt: '',
|
|
|
+ hyId: 0,
|
|
|
+ deptId: deptId
|
|
|
+})
|
|
|
+const infoList: any = ref([
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzcz',
|
|
|
+ name: '报销总金额(元)',
|
|
|
+ num: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzcb',
|
|
|
+ name: '已报销总金额(元)',
|
|
|
+ num: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'xmzx/xmzlr',
|
|
|
+ name: '办理中总金额(元)',
|
|
|
+ num: '0'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+const handleCurrentChange = (pageNo: number) => {
|
|
|
+ queryParams.pageNo = pageNo
|
|
|
+ queryProjectListAjax()
|
|
|
+}
|
|
|
+const operateClick = (row: any) => {}
|
|
|
+const tableData = ref<Array<any>>([])
|
|
|
+const total = ref<number>()
|
|
|
+const searchHandle: () => void = () => {
|
|
|
+ queryProjectListAjax()
|
|
|
+}
|
|
|
+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 result = await request.get({ url: urlApi, params: sendData }, '/business')
|
|
|
+ tableData.value = result['records']
|
|
|
+ total.value = result['total']
|
|
|
+}
|
|
|
+queryProjectListAjax()
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ tableHeight.value = tableRef.value.clientHeight
|
|
|
+})
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-sys-list-content,
|
|
|
+ .tableBox {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100% - 100px);
|
|
|
+ margin-top: 20px;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ ._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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .infoBox {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ list-style: none;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ljy121