oaPhone/src/view/finance/components/projectCost.vue

<template>
  <van-row style="margin-top: 20px" @click="dateScreenShow = true">
    <van-col :span="24">
      <van-cell-group>
        <van-cell title="筛选条件" is-link size="large" class="checkCell">
          <template #value>
            <van-text-ellipsis content="内容" class="cellContent"/>
          </template>
          <template #right-icon>
            <van-icon
              class="closeIcon"
              name="close"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </van-col>
  </van-row>
  <van-cell-group>
    <van-cell
        v-for="item in projectCostList"
        :key="item.ID"
        :title="item.user.nickName"
        :label="item.feeTime"
        is-link
        class="costCell"
        @click="openCostDetail(item)"
    >
      <template #value>
        <van-text-ellipsis :content="item.projectFeeGenre.name"/>
      </template>
    </van-cell>
  </van-cell-group>
  <van-popup
      v-model:show="dateScreenShow"
      position="bottom"
      style="height: 70vh"
      closeable
      close-icon-position="top-right"
  >
    <van-row style="margin-top: 8vh">
      <van-col :span="22" :offset="1">
        <el-form label-width="100" label-position="left" size="large">
          <el-form-item label="项目：" size="large">
            <el-select
                placeholder="请选择项目"
                v-model="projectCostBody.projectCode"
                clearable
                @clear="projectCostBody.projectCode = ''"
            >
              <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="选择器类型：" size="large">
            <el-select placeholder="请选择日期选择器类型" v-model="timeTypeValue">
              <el-option
                  v-for="item in dateTypeColumns"
                  :key="item.id"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
              v-if="timeTypeValue === 'day'"
              label="日期："
              size="large">
            <el-date-picker
                v-model="projectCostBody.dayTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                clearable
                @clear="projectCostBody.dayTime = ''"
            />
          </el-form-item>
          <el-form-item
              v-if="timeTypeValue === 'month'"
              label="月份:"
          >
            <el-date-picker
                v-model="projectCostBody.monthTime"
                type="month"
                placeholder="请选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                clearable
                @clear="projectCostBody.monthTime = ''"
            />
          </el-form-item>
          <el-form-item
              v-if="timeTypeValue === 'year'"
              label="年份:"
          >
            <el-date-picker
                v-model="projectCostBody.yearTime"
                type="year"
                placeholder="请选择年份"
                format="YYYY"
                value-format="YYYY"
                clearable
                @clear="projectCostBody.yearTime = ''"
            />
          </el-form-item>
          <el-form-item label="费用类型：" size="large">
            <el-select
                v-model="projectCostBody.genre"
                placeholder="请选择费用类型"
                clearable
                @clear="projectCostBody.genre = 0"
            >
              <el-option
                  v-for="item in costTypeList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="人员：" size="large">
            <el-select
                placeholder="请选择人员"
                v-model="projectCostBody.reimburser"
                clearable
                @clear="projectCostBody.reimburser = 0"
            >
              <el-option
                  v-for="item in userList"
                  :key="item.ID"
                  :label="item.nickName"
                  :value="item.ID"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </van-col>
    </van-row>
    <van-row style="margin-top: 3vh">
      <el-col
          :span="22"
          :offset="1"
          style="display: flex;justify-content: end">
        <el-button
            style="width: 25vw"
            @click="queryProjectCost"
            type="primary"
            size="large"
        >
          确认
        </el-button>
      </el-col>
    </van-row>
  </van-popup>
  <van-popup
      v-model:show="detailShow"
      position="bottom"
      style="height: 50vh;"
  >
    <van-cell-group style="font-size: 16px">
      <van-cell size="large" title="部门：">
        <template #value>
          <van-text-ellipsis :content="detailInfo.department.name"/>
        </template>
      </van-cell>
      <van-cell size="large" title="支入金额：">
        <template #value>
          <van-text-ellipsis :content="detailInfo.depositAmount"/>
        </template>
      </van-cell>
      <van-cell size="large" title="支出金额：">
        <template #value>
          <van-text-ellipsis :content="detailInfo.expenditureAmount"/>
        </template>
      </van-cell>
      <van-cell size="large" title="余额：">
        <template #value>
          <van-text-ellipsis :content="detailInfo.thenBalance"/>
        </template>
      </van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script setup>
import { getProjectCostType, getAllProject, getProjectCost } from '@/api/project.js'
import { getAllUsers } from "@/api/user.js"
defineOptions({
  name: 'projectCost',
})
onMounted(() => {
  queryProjectCostType()
  queryAllUsers()
  queryAllProject()
  queryProjectCost()
})
// 条件显示
const projectCostBody = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  reimburser: 0,
  projectCode: "",
  genre: 0,
  dayTime: "",
  monthTime: "",
  yearTime: ""
})
// 费用类型
const costTypeList = reactive([])
const queryProjectCostType = () => {
  getProjectCostType().then(res => {
    if (res.code === 0) {
      costTypeList.push(...res.data)
    }
  })
}
// 项目
const projectList = reactive([])
const queryAllProject = () => {
  getAllProject().then(res => {
    if (res.code === 0) {
      const list = res.data
      projectList.push(...list)
    }
  })
}
// 人员
const userList = reactive([])
const queryAllUsers = () => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      userList.push(...res.data)
    }
  })
}

const dateScreenShow = ref(false)
const openScreen = () => {}

const dateType = ref([])

const currentDate = ref([])

const dateTypeColumns = [
  { id:0, text: '按日期选择', value: "day" },
  { id:1, text: '按月份选择', value: "month" },
  { id:2, text: '按年份选择', value: "year" }
]

const changeDateType = (val) => {
  const index = val.selectedIndexes[0]
  const obj = {
    0: [],
    1: ['year'],
    2: ['year','month'],
    3: ['year','month','day'],
  }
  dateType.value = obj[index]
}

// 查询项目费用
const timeTypeValue = ref('day')

const projectCostList = reactive([])

const queryProjectCost = () => {
  getProjectCost(projectCostBody).then(res => {
    if (res.code === 0) {
      dateScreenShow.value = false
      projectCostList.push(...res.data.list)
      console.log(projectCostList)
    }
  })
}

const detailShow = ref(false)
const detailInfo = reactive({})
const openCostDetail = (item) => {
  const { depositAmount,expenditureAmount,thenBalance } = item
  item.depositAmount = depositAmount.toString()
  item.expenditureAmount = expenditureAmount.toString()
  item.thenBalance = thenBalance.toString()
  detailShow.value = true
  Object.assign(detailInfo,item)
}
</script>

<style scoped lang="less">
.costCell{
  height: 64px;
}
.checkCell{
  height: 45px;
}
.closeIcon{
  font-size: 24px;
  line-height: inherit;
}
.cellContent{
  margin-right: 10px;
  line-height: inherit;
}
</style>