feat: 新增 招聘需求列表页

client/src/interface/demand.ts

@@ -0,0 +1,81 @@
+export interface RecruitListDTO {
+  pageNo: number
+  pageSize: number
+  year?: string
+  deptId?: string
+  post?: string
+  type?: number //所属类别 1新增 2替补 3储备
+  status?: number
+}
+
+export interface OrderItem {
+  asc?: boolean | null
+  column?: null | string
+}
+
+export interface Recruit {
+  /**
+   * 能力等级
+   */
+  abilityLevel?: number | null
+  /**
+   * 部门id
+   */
+  deptId?: null | string
+  /**
+   * 已招人数
+   */
+  deptName?: null | string
+  id?: null | string
+  /**
+   * 任职要求
+   */
+  jobRequest?: null | string
+  pageNo: number
+  pageSize: number
+  /**
+   * 岗位
+   */
+  post?: null | string
+  /**
+   * 岗位职责
+   */
+  postDuty?: null | string
+  /**
+   * 已招人数
+   */
+  recruitNum?: number | null
+  /**
+   * 需求人数
+   */
+  requireNum?: number | null
+  /**
+   * 所属类别 1新增 2替补 3储备
+   */
+  type?: number | null
+  /**
+   * 用户id
+   */
+  userId?: null | string
+  /**
+   * 用户昵称
+   */
+  userNickname?: null | string
+  /**
+   * 年份
+   */
+  year?: number | null
+}
+
+export interface PageRecruitPage {
+  countId?: null | string
+  current?: number | null
+  maxLimit?: number | null
+  optimizeCountSql?: boolean | null
+  optimizeJoinOfCountSql?: boolean | null
+  orders?: OrderItem[] | null
+  records?: Recruit[] | null
+  searchCount?: boolean | null
+  size?: number | null
+  total?: number | null
+}

client/src/service/demand.ts

@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+import { PageRecruitPage, RecruitListDTO } from '@/interface/demand'
+
+export const getRecruitList = (params: RecruitListDTO): Promise<PageRecruitPage> => {
+  return request.get({ url: '/recruit/page', params }, '/business')
+}

client/src/views/OaSystem/personnelManagement/zpxqspPage/index.vue

@@ -1,17 +1,161 @@
 <template>
-  <div class="purchaseContractBox">
-    <img src="@/assets/imgs/kfz.jpg" />
+  <div class="_ptbxBook">
+    <div class="searchBox">
+      <div class="form">
+        <span class="formSpan">报销单号：</span>
+        <el-input v-model="queryParams.commonCostNo" placeholder="请输入报销单号" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销人：</span>
+        <el-input v-model="queryParams.userId" placeholder="请输入报销人" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销人部门：</span>
+        <el-select width="160px" v-model="queryParams.deptId" placeholder="请选择部门">
+          <el-option
+            v-for="item in industryListAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="form" style="width: 380px">
+        <span class="formSpan">申请时间：</span>
+        <el-date-picker
+          v-model="queryParams.applyTime"
+          type="daterange"
+          unlink-panels
+          range-separator="到"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="form">
+        <span class="formSpan">项目部门：</span>
+        <el-input v-model="queryParams.projectDeptId" placeholder="请输入项目部门" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销类型：</span>
+        <el-input v-model="queryParams.costType" placeholder="请输入报销类型" />
+      </div>
+      <div class="form">
+        <span class="formSpan">状态：</span>
+        <el-input v-model="queryParams.status" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销总金额：</span>
+        <el-input v-model="queryParams.totalAmount" placeholder="请输入报销总金额" />
+      </div>
+      <div class="from">
+        <div class="btnBox">
+          <el-button type="primary" style="background: #3485ff" @click="handleQuery">
+            <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
+            查询
+          </el-button>
+          <el-button type="primary">
+            <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
+            导出
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="infoBox">
+      <ul>
+        <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
+          <p>{{ item.name }}：</p>
+          <h4 class="font-size-18px">{{ item.num }}</h4>
+        </li>
+      </ul>
+    </div>
+    <div class="tableBox">
+      <TableLayout :is-loading="isLoading" :data="data?.records">
+        <el-table-column type="index" />
+        <el-table-column show-overflow-tooltip="true" align="center" prop="deptName" label="部门" />
+        <el-table-column show-overflow-tooltip="true" align="center" prop="post" label="岗位" />
+        <el-table-column align="center" prop="requireNum" label="需求人数" />
+        <el-table-column align="center" prop="abilityLevel" label="能力等级" />
+        <el-table-column
+          show-overflow-tooltip="true"
+          align="center"
+          prop="jobRequest"
+          label="任职要求"
+        />
+        <el-table-column
+          show-overflow-tooltip="true"
+          align="center"
+          prop="postDuty"
+          label="岗位职责"
+        />
+        <el-table-column show-overflow-tooltip="true" align="center" prop="type" label="所属类别" />
+        <!--        <el-table-column align="center" label="差旅起止时间" width="240">-->
+        <!--          <template #default="scope">-->
+        <!--            <span>{{ dateFormatter2(null, null, scope.row.startTime) }}</span>-->
+        <!--            - -->
+        <!--            <span>{{ dateFormatter2(null, null, scope.row.endTime) }}</span>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <el-table-column align="center" label="操作" fixed="right" width="80">
+          <!--          <template #default="scope">-->
+          <!--            <div class="operateBtn">-->
+          <!--              <span>查看</span>-->
+          <!--            </div>-->
+          <!--          </template>-->
+        </el-table-column>
+      </TableLayout>
+      <div class="pageBox">
+        <el-pagination
+          v-model:current-page="queryParams.pageNo"
+          :page-size="10"
+          background
+          layout="total, prev, pager, next, jumper"
+          :total="data?.total ?? 0"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.purchaseContractBox {
-  margin-top: 20px;
-  height: calc(100% - 20px);
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 20px;
-  position: relative;
-  text-align: center;
+<script setup lang="ts">
+import { dateFormatter2 } from '@/utils/formatTime'
+import TableLayout from '../../oaViews/layout/TableLayout.vue'
+import { RecruitListDTO } from '@/interface/demand'
+import { useQuery } from '@tanstack/vue-query'
+import { getRecruitList } from '@/service/demand'
+
+defineOptions({ name: 'TravelCost' })
+const queryParams = reactive<RecruitListDTO>({
+  pageNo: 1,
+  pageSize: 10
+})
+const infoList: any = ref([
+  {
+    name: '报销总金额(元)',
+    num: '0'
+  },
+  {
+    name: '已报销总金额(元)',
+    num: '0'
+  },
+  {
+    name: '办理中总金额(元)',
+    num: '0'
+  }
+])
+
+const { data, isLoading } = useQuery(
+  [getRecruitList.name, queryParams],
+  async () => await getRecruitList(queryParams)
+)
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+}
+
+/** 分页操作 */
+const handleCurrentChange = (pageNo: number) => {
+  queryParams.pageNo = pageNo
 }
-</style>
+</script>