项目文件管理完成

src/api/firmCost.js

@@ -8,3 +8,11 @@ export const queryCostList = (data) => {
         data: data
     })
 }
+
+// 查询费用类型
+export const queryExpensesGenre = () => {
+    return service({
+        url: '/finance/queryExpensesGenre',
+        method: 'get'
+    })
+}

src/pinia/finance/finance.js

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
-import { queryProjectExpense, getAllProject } from "@/api/project"
+import {getAllProject, queryProjectExpense} from "@/api/project"
 import { getAllUsers } from "@/api/user"
+import { queryExpensesGenre } from "@/api/firmCost"
 export const useFinanceStore = defineStore('finance',() => {
     const currentCode = ref('')
     const currentName = ref('')
     const allProject = reactive([])
     const allUser = reactive([])
     const costInfo = reactive({})
+    const costTypeList = reactive([])
     const getAllInfo = () => {
         // 获取所有用户
         getAllUsers().then(res => {
@@ -38,6 +40,16 @@ export const useFinanceStore = defineStore('finance',() => {
             }
         })
     }
+    // 获取公司费用类型列表
+    const getCostTypeList = () => {
+       queryExpensesGenre().then(res => {
+           if (res.code === 0) {
+               // console.log('费用类型', res.data)
+               costTypeList.length = 0
+               costTypeList.push(...res.data)
+           }
+       })
+    }
     return {
         allProject,
         allUser,
@@ -45,6 +57,8 @@ export const useFinanceStore = defineStore('finance',() => {
         currentName,
         getAllInfo,
         changeCurrentCode,
-        costInfo
+        costInfo,
+        costTypeList,
+        getCostTypeList
     }
 })

src/view/finance/components/costDetail.vue

@@ -1,11 +1,174 @@
 <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="resetCostDetail">
+                <van-icon name="replay" />
+                <van-text-ellipsis content="重置" />
+              </van-col>
+            </van-row>
+          </template>
+        </van-cell>
+      </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-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="getFirmCostList" size="large">查询</van-button>
+          </van-col>
+        </van-row>
+        <van-row class="popupCheck">
+          <van-col :span="24">
+            <van-button size="large">费用类型</van-button>
+          </van-col>
+        </van-row>
+      </van-col>
+    </van-row>
+  </van-popup>
 </template>
 
 <script setup>
+import { queryCostList } from '@/api/firmCost'
+import { useFinanceStore } from '@/pinia/finance/finance'
 defineOptions({
   name: 'costDetail',
 })
+const useFinance = useFinanceStore()
+// 公司费用列表
 const condition = reactive({
   pageInfo: {
     page: 1,
@@ -17,9 +180,100 @@ const condition = reactive({
   monthTime: '',
   yearTime: ''
 })
-onMounted(() => {})
+const dateScreenShow = ref(false)
+const costList = reactive([])
+onMounted(() => {
+  getFirmCostList()
+})
+// 重置费用详情
+const resetCostDetail = () => {
+  const info = {
+    pageInfo: {
+      page: 1,
+      pageSize: 10
+    },
+    reimburser: 0,
+    genre: 0,
+    dayTime: '',
+    monthTime: '',
+    yearTime: ''
+  }
+  Object.assign(condition,info)
+  getFirmCostList()
+}
+// 时间类型
+const timeType = ref('day')
+const timeTypeList = [
+  { id:0, text: '按日期选择', value: "day" },
+  { id:1, text: '按月份选择', value: "month" },
+  { id:2, text: '按年份选择', value: "year" }
+]
+
+const changeTimeType = (val) => {
+  if (val === 'day') {
+    condition.monthTime = ''
+    condition.yearTime = ''
+  } else if(val === 'month') {
+    condition.dayTime = ''
+    condition.yearTime = ''
+  } else {
+    condition.dayTime = ''
+    condition.monthTime = ''
+  }
+}
+
+const getFirmCostList = () => {
+  queryCostList(condition).then(res => {
+    if (res.code === 0) {
+      const list = res.data.list
+      costList.length = 0
+      costList.push(...list)
+      dateScreenShow.value = false
+      console.log(list)
+    }
+  })
+}
+
+// 下拉刷新
+const loading = ref(false);
+const finished = ref(true);
+const refreshing = ref(false)
+const onRefresh = () => {}
+const onLoad = () => {
+}
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.checkCell{
+  height: 45px;
+  font-size: 16px;
+  .projectTitle{
+    width: 200px;
+  }
+  .resetDetailCell {
+    display: flex;
+    align-items: center;
+  }
+}
+.popupBox{
+  height: 500px;
+  .popupRow{
+    margin-top: 50px;
+  }
+  .popupCheck{
+    margin-top: 30px;
+  }
+}
+
+.firmCostCellGroup{
+  margin-top: 20px;
+  height: 512px;
+  .firmCostCell{
+    height: 64px;
+  }
+}
 
+.firmCostCell{
+  height: 64px;
+}
 </style>

src/view/finance/components/projectCost.vue

@@ -66,7 +66,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="选择器类型：" size="large">
+          <el-form-item label="时间类型：" size="large">
             <el-select placeholder="请选择日期选择器类型" v-model="timeTypeValue">
               <el-option
                   v-for="item in dateTypeColumns"

src/view/finance/finance.vue

@@ -13,6 +13,7 @@ defineOptions({
 onMounted(() => {
   getFinanceInfo()
   changeDropdown('/navigation/finance/workHours')
+  useFinance.getCostTypeList()
 })
 const useFinance = useFinanceStore()
 const router = useRouter()