lc_finance/web/src/view/finance/firmPay/components/departmentList.vue

<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-date-picker
          v-model="monthData"
          type="month"
          placeholder="选择月份"
          value-format="YYYY-MM"
          value-on-clear=""
          @change="choiceMonth"
        />
      </el-col>
      <el-col
        :span="3"
        :offset="1"
      >
        <el-date-picker
          v-model="yearData"
          type="year"
          placeholder="选择年份"
          value-format="YYYY"
          value-on-clear=""
          @change="choiceYear"
        />
      </el-col>
      <el-col
        :span="3"
        :offset="1"
      >
        <el-select
          v-model="feeGenre"
          clearable
          filterable
          value-on-clear=""
          placeholder="请选择公司费用类型"
          @change="changeFeeGenre"
        >
          <el-option
            v-for="item in feeGenreData"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          />
        </el-select>
      </el-col>
      <el-col
        :span="2"
        :offset="1"
      >
        <el-button
          type="primary"
          icon="Refresh"
          @click="costListReset"
        >重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="12">
        <el-table
          :data="monthFee"
          max-height="400px"
          height="400px"
          table-layout="auto"
          show-summary
        >
          <el-table-column
            prop="department.name"
            label="部门"
            width="200"
            align="center"
          />
          <el-table-column
            prop="totalExpenditure"
            label="支出金额"
            align="center"
          />
          <el-table-column
            prop="totalDeposit"
            label="支入金额"
            align="center"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { queryMonthExpenses } from '@/api/cost'
import { queryExpensesGenre } from '@/api/finance'
defineOptions({
  name: 'DepartmentList'
})
onMounted(() => {
  queryData()
})
const feeGenre = ref('')
const feeGenreData = reactive([])
const monthFee = reactive([])
const monthData = ref('')
const yearData = ref('')
const changeFeeGenre = () => {
  queryData()
}

const choiceMonth = () => {
  queryData()
}

const choiceYear = () => {
  queryData()
}
const costListReset = () => {
  feeGenre.value = ''
  monthData.value = ''
  yearData.value = ''
  queryData()
}
const queryData = () => {
  queryMonthExpenses(monthData.value, yearData.value, feeGenre.value).then(res => {
    if (res.code === 0) {
      monthFee.length = 0
      monthFee.push(...res.data)
    }
  })
  queryExpensesGenre().then(res => {
    if (res.code === 0) {
      feeGenreData.length = 0
      feeGenreData.push(...res.data)
    }
  })
}
</script>

<style scoped>

</style>