项目文件管理完成

src/api/firmCost.js

@@ -16,3 +16,12 @@ export const queryExpensesGenre = () => {
         method: 'get'
     })
 }
+
+// 查询费用按人
+export const peopleCost = (data) => {
+    return service({
+        url: '/expenses/queryExpensesSumByPeople',
+        method: 'post',
+        data: data
+    })
+}

src/view/finance/components/costDetail.vue

@@ -18,29 +18,29 @@
       </van-cell-group>
     </van-col>
   </van-row>
-  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-    <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-    >
-      <van-cell
-          v-for="item in costList"
-          :key="item.ID"
-          class="firmCostCell">
-        <template #title>
-          <van-text-ellipsis :content="item.expensesGenre.name"/>
-        </template>
-        <template #value>
-          <van-text-ellipsis :content="item.user.nickName"/>
-        </template>
-        <template #label>
-          <van-text-ellipsis :content="item.feeTime"/>
-        </template>
-      </van-cell>
-    </van-list>
-  </van-pull-refresh>
+  <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      :offset="20"
+      finished-text="没有更多了"
+      @load="onLoad"
+  >
+    <van-cell
+        v-for="item in costList"
+        :key="item.ID"
+        @click="openDetailInfo(item)"
+        class="firmCostCell">
+      <template #title>
+        <van-text-ellipsis :content="item.expensesGenre.name"/>
+      </template>
+      <template #value>
+        <van-text-ellipsis :content="item.user.nickName"/>
+      </template>
+      <template #label>
+        <van-text-ellipsis :content="item.feeTime"/>
+      </template>
+    </van-cell>
+  </van-list>
   <van-popup
       v-model:show="dateScreenShow"
       position="bottom"
@@ -159,6 +159,34 @@
       </van-col>
     </van-row>
   </van-popup>
+  <van-popup
+      v-model:show="detailInfoShow"
+      position="bottom"
+      class="detailBox"
+  >
+    <van-cell-group>
+      <van-cell size="large" title="部门：">
+        <template #value>
+          <van-text-ellipsis :content="detailInfo.department.name" class="costCellValue"/>
+        </template>
+      </van-cell>
+      <van-cell size="large" title="支入金额：">
+        <template #value>
+          <van-text-ellipsis :content="income(detailInfo.depositAmount)" class="costCellValue"/>
+        </template>
+      </van-cell>
+      <van-cell size="large" title="支出金额：">
+        <template #value>
+          <van-text-ellipsis :content="expenditure(detailInfo.expenditureAmount)" class="costCellValue"/>
+        </template>
+      </van-cell>
+      <van-cell size="large" title="余额：">
+        <template #value>
+          <van-text-ellipsis :content="balance(detailInfo.thenBalance)" class="costCellValue"/>
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </van-popup>
 </template>
 
 <script setup>
@@ -181,6 +209,7 @@ const condition = reactive({
   yearTime: ''
 })
 const dateScreenShow = ref(false)
+const costPage = ref(0)
 const costList = reactive([])
 onMounted(() => {
   getFirmCostList()
@@ -228,19 +257,53 @@ const getFirmCostList = () => {
       const list = res.data.list
       costList.length = 0
       costList.push(...list)
+      const total = res.data.total
+      const divisor = Math.floor(total / 10)
+      const remainder = total % 10
+      costPage.value = remainder > 0 ? divisor + 1 : divisor
+      finished.value = costPage.value === condition.pageInfo.page
       dateScreenShow.value = false
-      console.log(list)
     }
   })
 }
 
-// 下拉刷新
+// 上拉加载
 const loading = ref(false);
-const finished = ref(true);
-const refreshing = ref(false)
-const onRefresh = () => {}
+const finished = ref(false);
 const onLoad = () => {
+  loading.value = true
+  condition.pageInfo.page += 1
+  queryCostList(condition).then(res => {
+    if (res.code === 0) {
+      const list = res.data.list
+      costList.push(...list)
+      finished.value = costPage.value === condition.pageInfo.page
+      loading.value = false
+    }
+  })
+}
+
+// 详细信息
+const detailInfoShow = ref(false)
+const detailInfo = reactive({})
+const openDetailInfo = (item) => {
+  detailInfoShow.value = true
+  Object.assign(detailInfo, item)
+  console.log(detailInfo)
 }
+
+// 计算属性
+const income = computed(() => {
+  return (amount) => `${amount}`
+})
+
+const expenditure = computed(() => {
+  return (amount) => `${amount}`
+})
+
+const balance = computed(() => {
+  return (amount) => `${amount}`
+})
 </script>
 
 <style scoped lang="less">
@@ -276,4 +339,11 @@ const onLoad = () => {
 .firmCostCell{
   height: 64px;
 }
+
+.detailBox{
+  height: 400px;
+  .costCellValue{
+    font-size: 16px;
+  }
+}
 </style>

src/view/finance/components/staffCost.vue

@@ -1,11 +1,277 @@
+<template>
+  <van-row style="margin-top: 20px" @click="dateScreenShow = true">
+    <van-col :span="24">
+      <van-cell-group>
+        <van-cell size="large" class="checkCell" title-class="projectTitle">
+          <template #title>
+            <van-text-ellipsis content="筛选条件"/>
+          </template>
+          <template #value>
+            <van-row justify="end">
+              <van-col class="resetDetailCell" @click.stop="resetStaffCost">
+                <van-icon name="replay" />
+                <van-text-ellipsis content="重置" />
+              </van-col>
+            </van-row>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-col>
+  </van-row>
+  <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      :offset="20"
+      finished-text="没有更多了"
+      @load="onLoad"
+  >
+    <van-collapse v-model="activeNames" class="collapseBox">
+      <van-collapse-item title="标题1" name="1">
+        代码是写出来给人看的，附带能在机器上运行。
+      </van-collapse-item>
+      <van-collapse-item title="标题2" name="2">
+        技术无非就是那些开发它的人的共同灵魂。
+      </van-collapse-item>
+      <van-collapse-item title="标题3" name="3">
+        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+      </van-collapse-item>
+    </van-collapse>
+  </van-list>
+  <van-popup
+      v-model:show="dateScreenShow"
+      position="bottom"
+      class="popupBox"
+      closeable
+      close-icon-position="top-right"
+  >
+    <van-row class="popupRow">
+      <van-col :span="22" :offset="1">
+        <el-form label-width="90" label-position="left">
+          <el-form-item label="时间类型：" size="large">
+            <el-select
+                placeholder="请选择日期选择器类型"
+                v-model="timeType"
+                @change="changeTimeType"
+            >
+              <el-option
+                  v-for="item in timeTypeList"
+                  :key="item.id"
+                  :label="item.text"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              v-if="timeType === 'day'"
+              label="日期："
+              size="large">
+            <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="timeType === 'month'"
+              label="月份:"
+              size="large"
+          >
+            <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="timeType === 'year'"
+              label="年份:"
+              size="large"
+          >
+            <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="类型:"
+              size="large"
+          >
+            <el-select
+                v-model="condition.genre"
+                placeholder="请选择费用类型"
+                clearable
+                @clear="condition.genre = 0"
+            >
+              <el-option
+                  v-for="item in useFinance.costTypeList"
+                  :key="item.ID"
+                  :label="item.name"
+                  :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              label="人员："
+              size="large"
+          >
+            <el-select
+                v-model="condition.reimburser"
+                placeholder="请选择费用类型"
+                clearable
+                @clear="condition.reimburser = 0"
+            >
+              <el-option
+                  v-for="item in useFinance.allUser"
+                  :key="item.ID"
+                  :label="item.nickName"
+                  :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <van-row class="popupCheck">
+          <van-col :span="24">
+            <van-button type="primary" @click="getStaffCostList" size="large">查询</van-button>
+          </van-col>
+        </van-row>
+      </van-col>
+    </van-row>
+  </van-popup>
+</template>
+
 <script setup>
+import { useFinanceStore } from "@/pinia/finance/finance";
+import { peopleCost } from "@/api/firmCost"
+const useFinance = useFinanceStore()
+defineOptions({
+  name: 'costDetail',
+})
+const dateScreenShow = ref(false)
+const resetStaffCost = () => {}
 
-</script>
+// 时间类型
+const timeType = ref('day')
+const timeTypeList = [
+  { id:0, text: '按日期选择', value: "day" },
+  { id:1, text: '按月份选择', value: "month" },
+  { id:2, text: '按年份选择', value: "year" }
+]
 
-<template>
+const changeTimeType = (val) => {
+  if (val === 'day') {
+    condition.monthTime = ''
+    condition.yearTime = ''
+  } else if (val === 'month') {
+    condition.dayTime = ''
+    condition.yearTime = ''
+  } else {
+    condition.dayTime = ''
+    condition.monthTime = ''
+  }
+}
 
-</template>
+const condition = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 10
+  },
+  reimburser: 0,
+  projectId: 0,
+  genre: 0,
+  dayTime: '',
+  monthTime: '',
+  yearTime: ''
+})
+
+onMounted(() => {
+  getStaffCostList()
+})
+// 查询人员费用
+const staffCostPage = ref(0)
+const staffCostList = reactive([])
+const getStaffCostList = () => {
+  peopleCost(condition).then(res => {
+    if (res.code === 0) {
+      const list = res.data.list
+      const total = res.data.total
+      console.log(total)
+      const divisor = Math.floor(total / 10)
+      const remainder = total % 10
+      console.log("整数：", divisor)
+      console.log("余数：",remainder)
+      staffCostPage.value = remainder > 0 ? divisor + 1 : divisor
+      console.log("staffCostPage", staffCostPage.value)
+      console.log("page",condition.pageInfo.page)
+      // finished.value = staffCostPage.value === condition.pageInfo.page
+      // console.log("初次确认", finished.value)
+      // staffCostList.length = 0
+      // staffCostList.push(...list)
+      // dateScreenShow.value = false
+    }
+  })
+}
+
+// 人员费用列表
+const activeNames = ref(['1'])
+// 上拉加载
+const loading = ref(false);
+const finished = ref(false);
+const onLoad = () => {
+  setTimeout(() => {
+    loading.value = true
+    condition.pageInfo.page += 1
+    peopleCost(condition).then(res => {
+      console.log('res',res)
+      if (res.code === 0) {
+        const list = res.data.list
+        if (list !== null) {
+          staffCostList.push(...list)
+          finished.value = staffCostPage.value === condition.pageInfo.page
+        }
+        loading.value = false
+      }
+    })
+  },500)
+}
+</script>
+
+<style scoped lang="less">
+.checkCell{
+  height: 45px;
+  font-size: 16px;
+  .projectTitle{
+    width: 200px;
+  }
+  .resetDetailCell {
+    display: flex;
+    align-items: center;
+  }
+}
 
-<style scoped>
+.popupBox{
+  height: 500px;
+  .popupRow{
+    margin-top: 50px;
+  }
+  .popupCheck{
+    margin-top: 30px;
+  }
+}
 
+.collapseBox{
+  margin-top: 20px;
+}
 </style>