lc_finance/web/src/view/standby/standby.vue

<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: 700px;margin-top: 20px"
    >
      <el-col :span="24">
        <el-row style="margin-top: 15px;margin-left: 30px">
          <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="condition.projectCode"
                  filterable
                  placeholder="请选择项目"
                  clearable
                >
                  <el-option
                    v-for="item in projectList"
                    :key="item.ID"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="人员:">
                <el-select
                  v-model="peopleSelect"
                  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-button
                  type="primary"
                  icon="Search"
                  @click="consultPayList"
                >查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="Refresh"
                  @click="payListReset"
                >重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;margin-left: 30px">
          <el-col :span="23">
            <el-table
              :data="pay.projectCostList"
              stripe
              border
            >
              <el-table-column
                label="人员名称"
                align="center"
                prop="user.nickName"
                width="180"
              />
              <el-table-column
                label="费用类型"
                align="center"
                prop="projectFeeGenre.name"
                width="180"
              />
              <el-table-column
                label="所属项目"
                align="center"
                prop="project.name"
                width="180"
              />
              <el-table-column
                label="时间"
                align="center"
                prop="feeTime"
                width="180"
              />
              <el-table-column
                label="部门"
                align="center"
                prop="department.name"
              />
              <el-table-column
                label="支入金额(元)"
                align="center"
                prop="depositAmount"
              />
              <el-table-column
                label="支出金额(元)"
                align="center"
                prop="expenditureAmount"
              />
              <el-table-column
                label="当前余额(元)"
                align="center"
                prop="thenBalance"
              />
              <el-table-column
                label="操作"
                align="center"
              >
                <template #default="scope">
                  <el-popover
                    placement="top"
                    :width="300"
                    trigger="click"
                    :content="scope.row.expenseDetail"
                  >
                    <template #reference>
                      <el-button
                        text
                        type="primary"
                        icon="Notebook"
                      >
                        明细
                      </el-button>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          v-show="pay.costListTotal > 8"
        >
          <el-col
            :span="23"
            class="flex justify-end"
          >
            <el-pagination
              v-model:current-page="condition.pageInfo.page"
              v-model:page-size="condition.pageInfo.pageSize"
              background
              layout="prev, pager, next"
              :total="pay.costListTotal"
              @change="changeCostPage"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getStandbyMoney, projectCostTypeList } from '@/api/cost'
import { getAllProject } from '@/api/project'
import { onMounted, reactive, ref } from 'vue'
import expense from '@/assets/expenses.png'
import { getAllUsers } from '@/api/user'
import { payData } from '@/pinia/cost/cost'
defineOptions({
  name: 'Standby'
})
const pay = payData()
// 搜索条件
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  reimburser: 0,
  projectCode: '',
  genre: 0,
  dayTime: '',
  monthTime: '',
  yearTime: ''
})
// 搜索与重置
const consultPayList = () => {
  condition.reimburser = peopleSelect.value === '' ? 0 : peopleSelect.value
  pay.getCostList(condition)
}

const payListReset = () => {
  const initialCondition = {
    pageInfo: {
      page: 1,
      pageSize: 8
    },
    reimburser: 0,
    projectCode: '',
    genre: condition.genre,
    dayTime: '',
    monthTime: '',
    yearTime: ''
  }
  Object.assign(condition, initialCondition)
  peopleSelect.value = ''
  pay.getCostList(condition)
}

onMounted(() => {
  queryAllProject()
  queryStandbyMoney()
  getUserList()
  appointType()
})

// 指定费用类型
const appointType = () => {
  projectCostTypeList().then(res => {
    if (res.code === 0) {
      console.log('费用类型列表', res.data)
      const list = res.data
      list.forEach(item => {
        if (item.name === '备用金支出') {
          condition.genre = item.ID
          pay.getCostList(condition)
        }
      })
    }
  })
}

// 备用金汇总
const reserve = reactive({})
const queryStandbyMoney = () => {
  getStandbyMoney().then(res => {
    if (res.code === 0) {
      Object.assign(reserve, res.data)
    }
  })
}
// 日期查询
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 projectList = reactive([])
const queryAllProject = () => {
  getAllProject().then(res => {
    if (res.code === 0) {
      projectList.length = 0
      projectList.push(...res.data)
    }
  })
}

// 人员搜索
const peopleSelect = ref('')
const userList = reactive([])
const clearPeopleSelect = () => {
  peopleSelect.value = ''
  condition.reimburser = 0
}
const getUserList = () => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      userList.length = 0
      userList.push(...res.data)
    }
  })
}

// 改变页码
const changeCostPage = (val) => {
  condition.pageInfo.page = val
  consultPayList()
}
</script>

<style scoped>

</style>