项目文件管理完成

src/App.vue

@@ -1,9 +1,13 @@
 <script setup>
-
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { ElConfigProvider } from 'element-plus'
+const locale = zhCn
 </script>
 
 <template>
-  <router-view />
+  <el-config-provider :locale="locale">
+    <router-view />
+  </el-config-provider>
 </template>
 
 <style scoped>

src/api/project.js

@@ -43,3 +43,20 @@ export const previewProjectFile = (data) => {
         responseType: 'blob'
     })
 }
+
+// 查询项目费用类型
+export const getProjectCostType = () => {
+    return service({
+        url: '/finance/queryProjectFeeGenre',
+        method: 'get'
+    })
+}
+
+// 查询项目费用
+export const getProjectCost = (data) => {
+    return service({
+        url: '/expenses/queryProjectFeeList',
+        method: 'post',
+        data
+    })
+}

src/view/finance/components/projectCost.vue

@@ -1,36 +1,200 @@
 <template>
   <van-row style="margin-top: 1rem" @click="dateScreenShow = true">
     <van-col :span="24">
-      <van-cell title="筛选条件" is-link size="large" style="background-color: #dadadd">
+      <van-cell title="筛选条件" is-link size="large">
         <template #value>
-          <van-text-ellipsis content="内容"></van-text-ellipsis>
+          <van-text-ellipsis content="内容" class="cellContent"/>
+        </template>
+        <template #right-icon>
+          <van-icon
+              class="closeIcon"
+              name="close"
+          />
         </template>
       </van-cell>
     </van-col>
   </van-row>
-  <van-popup v-model:show="dateScreenShow" position="bottom">
-    <van-picker-group
-        title="费用检索"
-        :tabs="['选择器类型', '选择日期']"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-    >
-      <van-picker
-          :columns="dateTypeColumns"
-          @change="changeDateType"
-      />
-      <van-date-picker
-          v-model="currentDate"
-          :columns-type="dateType"
-      />
-    </van-picker-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
+                placeholder="请选择费用类型"
+                v-model="projectCostBody.genre"
+                clearable
+                @clear="projectCostBody.genre = ''"
+            >
+              <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 = ''"
+            >
+              <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>
 </template>
 
 <script setup>
+import { getProjectCostType } from '@/api/project.js'
+import { getAllUsers } from "@/api/user.js"
+import { getAllProject } from "@/api/project.js";
+
 defineOptions({
   name: 'projectCost',
 })
+onMounted(() => {
+  queryProjectCostType()
+  queryAllUsers()
+  queryAllProject()
+})
+const projectCostBody = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 8
+  },
+  reimburser: "",
+  projectCode: "",
+  genre: "",
+  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) {
+      projectList.push(...res.data)
+      console.log(projectCostBody.projectCode)
+    }
+  })
+}
+
+// 人员
+const userList = reactive([])
+const queryAllUsers = () => {
+  getAllUsers().then(res => {
+    if (res.code === 0) {
+      userList.push(...res.data)
+    }
+  })
+}
 
 const dateScreenShow = ref(false)
 const openScreen = () => {}
@@ -40,28 +204,39 @@ const dateType = ref([])
 const currentDate = ref([])
 
 const dateTypeColumns = [
-  { text: '按年份选择', value: 0 },
-  { text: '按月份选择', value: 1 },
-  { text: '按日期选择', value: 2 },
+  { id:0, text: '按日期选择', value: "day" },
+  { id:1, text: '按月份选择', value: "month" },
+  { id:2, text: '按年份选择', value: "year" }
 ]
 
 const changeDateType = (val) => {
-  console.log(val.selectedIndexes[0])
   const index = val.selectedIndexes[0]
   const obj = {
-    0: ['year'],
-    1: ['year','month'],
-    2: ['year','month','day'],
+    0: [],
+    1: ['year'],
+    2: ['year','month'],
+    3: ['year','month','day'],
   }
-  console.log(obj[index])
   dateType.value = obj[index]
 }
 
-const onConfirm = () => {}
+// 查询项目费用
+const timeTypeValue = ref('day')
+
+const queryProjectCost = () => {
+  console.log('数据')
+}
+
 
-const onCancel = () => {}
 </script>
 
 <style scoped>
-
+.closeIcon{
+  font-size: 1.5rem;
+  line-height: inherit;
+}
+.cellContent{
+  margin-right: 10px;
+  line-height: inherit;
+}
 </style>