|
|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row
|
|
|
+ class="bg-white"
|
|
|
+ style="height: 80px"
|
|
|
+ align="middle"
|
|
|
+ justify="space-around"
|
|
|
+ >
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ class="flex align-center justify-around"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="expense"
|
|
|
+ style="width: 50px;height: 50px"
|
|
|
+ />
|
|
|
+ <el-text style="font-size: 20px;font-weight: 550;color: #409eff">备用金收支</el-text>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="21">
|
|
|
+ <el-row align="middle">
|
|
|
+ <el-col
|
|
|
+ :span="4"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ >
|
|
|
+ <el-text
|
|
|
+ style="font-size: 20px;color: #409eff;"
|
|
|
+ tag="b"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ {{ reserve.reserveAmount }}元
|
|
|
+ </el-text>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ style="margin-top: 8px"
|
|
|
+ >
|
|
|
+ <el-text>备用金支入</el-text>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ >
|
|
|
+ <el-text
|
|
|
+ style="font-size: 20px;color: #409eff;"
|
|
|
+ tag="b"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ {{ reserve.expenditureAmount }}元
|
|
|
+ </el-text>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ style="margin-top: 8px"
|
|
|
+ >
|
|
|
+ <el-text>备用金支出</el-text>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ >
|
|
|
+ <el-text
|
|
|
+ style="font-size: 20px;color: #409eff;"
|
|
|
+ tag="b"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ {{ reserve.balance }}元
|
|
|
+ </el-text>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ justify="center"
|
|
|
+ align="middle"
|
|
|
+ style="margin-top: 8px"
|
|
|
+ >
|
|
|
+ <el-text>备用金余额</el-text>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ class="bg-white"
|
|
|
+ style="height: 600px;margin-top: 20px"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ style="margin: 5px 0 15px 0;height: 40px"
|
|
|
+ >
|
|
|
+ <el-form-item label="时间类型:">
|
|
|
+ <el-select
|
|
|
+ v-model="timeTypeValue"
|
|
|
+ placeholder="请选择日期选择器"
|
|
|
+ @change="changeTimeType"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in timeTypeList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="timeTypeValue === 'date'"
|
|
|
+ label="日期:"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.dayTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ clearable
|
|
|
+ @clear="condition.dayTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="timeTypeValue === 'month'"
|
|
|
+ label="月份:"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.monthTime"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ format="YYYY-MM"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ clearable
|
|
|
+ @clear="condition.monthTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="timeTypeValue === 'year'"
|
|
|
+ label="年份:"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.yearTime"
|
|
|
+ type="year"
|
|
|
+ placeholder="请选择年份"
|
|
|
+ format="YYYY"
|
|
|
+ value-format="YYYY"
|
|
|
+ clearable
|
|
|
+ @clear="condition.yearTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目:">
|
|
|
+ <el-select
|
|
|
+ v-model="projectSelect"
|
|
|
+ placeholder="请选择项目"
|
|
|
+ clearable
|
|
|
+ @clear="clearProjectSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="人员:">
|
|
|
+ <el-select
|
|
|
+ v-model="projectSelect"
|
|
|
+ placeholder="请选择人员名称"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ @clear="clearPeopleSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in userList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.nickName"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-dropdown
|
|
|
+ split-button
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ 操作
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Search"
|
|
|
+ @click="consultPayList"
|
|
|
+ >查询</el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Refresh"
|
|
|
+ @click="payListReset"
|
|
|
+ >重置</el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Plus"
|
|
|
+ @click="addDetailRecord"
|
|
|
+ >添加</el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="costTypePopup = true"
|
|
|
+ >费用类型</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { getStandbyMoney } from '@/api/cost'
|
|
|
+import { getAllProject } from '@/api/project'
|
|
|
+import { onMounted, reactive, ref } from 'vue'
|
|
|
+import expense from '@/assets/expenses.png'
|
|
|
+defineOptions({
|
|
|
+ name: 'Standby'
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ queryAllProject()
|
|
|
+ queryStandbyMoney()
|
|
|
+})
|
|
|
+// 备用金汇总
|
|
|
+const reserve = reactive({})
|
|
|
+const queryStandbyMoney = () => {
|
|
|
+ getStandbyMoney().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ console.log(res.data)
|
|
|
+ Object.assign(reserve, res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 搜索条件
|
|
|
+const condition = reactive({
|
|
|
+ pageInfo: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 8
|
|
|
+ },
|
|
|
+ reimburser: 0,
|
|
|
+ projectCode: '',
|
|
|
+ genre: 0,
|
|
|
+ dayTime: '',
|
|
|
+ monthTime: '',
|
|
|
+ yearTime: ''
|
|
|
+})
|
|
|
+// 日期查询
|
|
|
+const timeTypeValue = ref('date')
|
|
|
+const timeTypeList = reactive([
|
|
|
+ { label: '按日期查询', value: 'date' },
|
|
|
+ { label: '按月份查询', value: 'month' },
|
|
|
+ { label: '按年份查询', value: 'year' }
|
|
|
+])
|
|
|
+const changeTimeType = (value) => {
|
|
|
+ if (value === 'year') {
|
|
|
+ condition.monthTime = ''
|
|
|
+ condition.dayTime = ''
|
|
|
+ } else if (value === 'month') {
|
|
|
+ condition.yearTime = ''
|
|
|
+ condition.dayTime = ''
|
|
|
+ } else {
|
|
|
+ condition.yearTime = ''
|
|
|
+ condition.monthTime = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 查询所有项目
|
|
|
+const projectSelect = ref('')
|
|
|
+const projectList = reactive([])
|
|
|
+const queryAllProject = () => {
|
|
|
+ getAllProject().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ projectList.length = 0
|
|
|
+ projectList.push(res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 删除项目
|
|
|
+const clearPeopleSelect = () => {}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
