feat: 新增 招聘需求编辑与删除功能

调试接口与字典字段展示

client/src/hooks/web/useDict.ts

@@ -9,6 +9,15 @@ import { Ref } from 'vue'
  */
 export const useDict = (
   dictType: string
-): { data: Ref<DictRecord[] | undefined>; isLoading: Ref<boolean> } => {
-  return useQuery(['dictList', dictType], async () => await getDict(dictType))
+): [data: Ref<DictRecord[] | undefined>, isLoading: Ref<boolean>] => {
+  const { data, isLoading } = useQuery(['dictList', dictType], async () => await getDict(dictType))
+  return [data, isLoading]
+}
+
+/**
+ * 获取对应字典label
+ * */
+export const getDictName = (value: number, targetDict: DictRecord[]): string => {
+  const target = targetDict?.find((item) => String(item.value) === String(value))
+  return target?.label ?? ''
 }

client/src/service/demand.ts

@@ -1,6 +1,26 @@
 import request from '@/config/axios'
-import { PageRecruitPage, RecruitListDTO } from '@/interface/demand'
+import { PageRecruitPage, Recruit, RecruitListDTO } from '@/interface/demand'
 
+/**
+ * 招聘需求列表
+ * @param params
+ */
 export const getRecruitList = (params: RecruitListDTO): Promise<PageRecruitPage> => {
   return request.get({ url: '/recruit/page', params }, '/business')
 }
+
+/**
+ * 更新招聘需求
+ * @param data
+ */
+export const updateRecruit = (data: Recruit): Promise<string> => {
+  return request.post({ url: '/recruit/update', data }, '/business')
+}
+
+/**
+ * 删除招聘需求
+ * @param id
+ */
+export const deleteRecruit = (id: string): Promise<string> => {
+  return request.delete({ url: '/recruit/delete', params: { id } }, '/business')
+}

client/src/service/system.ts

@@ -68,6 +68,5 @@ export const getDict = async (dictType: string): Promise<DictRecord[]> => {
     },
     '/admin-api/system'
   )
-  console.log('data: ', data)
   return data?.list ?? []
 }

client/src/views/OaSystem/oaLayout/content.scss

@@ -40,6 +40,7 @@
             white-space: nowrap;
           }
         }
+
         .el-table__cell {
           padding: 14px 0;
         }
@@ -89,6 +90,7 @@
           background: #f7f7f7;
         }
       }
+
       .operateBtnGroup {
         > span {
           color: #2e77e6;
@@ -97,6 +99,13 @@
           cursor: pointer;
         }
       }
+
+      .flex-btns {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
       .operateBtn {
         display: flex;
         width: 54px;

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

@@ -10,9 +10,9 @@
         <DeptSelect v-model="queryParams.deptId" />
       </div>
 
-      <div class="form">
+      <div class="form" v-if="(postDict?.length ?? 0) !== 0">
         <span class="formSpan">申请岗位：</span>
-        <el-select v-model="queryParams.post" :options placeholder="请选择岗位">
+        <el-select v-model="queryParams.post" placeholder="请选择岗位" clearable>
           <el-option
             v-for="{ label, value } in postDict"
             :key="value"
@@ -21,13 +21,16 @@
           />
         </el-select>
       </div>
-      <div class="form">
+      <div class="form" v-if="(recruitType?.length ?? 0) !== 0">
         <span class="formSpan">所属类别：</span>
-        <el-input v-model="queryParams.type" placeholder="请输入报销人" />
-      </div>
-      <div class="form">
-        <span class="formSpan">项目部门：</span>
-        <el-input v-model="queryParams.status" placeholder="请输入项目部门" />
+        <el-select v-model="queryParams.post" placeholder="请选择类别" clearable>
+          <el-option
+            v-for="{ label, value } in recruitType"
+            :key="value"
+            :label="label"
+            :value="value"
+          />
+        </el-select>
       </div>
       <div class="from">
         <div class="btnBox">
@@ -35,64 +38,88 @@
             <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 v-for="({ label, value }, index) in infoList" :key="index" class="mr-40px">
+          <p>{{ label }}：</p>
+          <h4 class="font-size-18px">{{ data?.total?.[value] }}</h4>
         </li>
       </ul>
     </div>
+
     <div class="tableBox">
-      <TableLayout :is-loading="isLoading" :data="data?.page?.records">
+      <TableLayout :data="data?.page?.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 show-overflow-tooltip align="center" prop="deptName" label="部门" />
+        <el-table-column align="center" label="岗位">
+          <template #default="scope">
+            <span>{{ getDictName(scope.row.post, postDict) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="所属类别">
+          <template #default="scope">
+            <span>{{ getDictName(scope.row.type, recruitType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="能力等级">
+          <template #default="scope">
+            <span>{{ getDictName(scope.row.abilityLevel, abilityLevel) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column show-overflow-tooltip align="center" prop="jobRequest" label="任职要求" />
+        <el-table-column show-overflow-tooltip align="center" prop="postDuty" 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 width="140" align="center" label="招聘人数">
+          <template #default="scope">
+            <el-input-number
+              style="width: 110px"
+              v-if="editRowData?.id === scope.row.id"
+              v-model="editRowData.recruitNum"
+              :min="0"
+              :max="scope.row.requireNum"
+            />
+            <span v-else>{{ scope.row.recruitNum }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="操作" fixed="right" width="120">
+          <template #default="scope">
+            <template v-if="editRowData?.id === scope.row.id">
+              <div class="flex-btns">
+                <div class="operateBtn" @click="handleRowSubmit">
+                  <span>保存</span>
+                </div>
+                <div class="operateBtn" @click="handleEditRow(null)">
+                  <span>取消</span>
+                </div>
+              </div>
+            </template>
+            <div class="flex-btns" v-else v-show="(editRowData?.id ?? '') === ''">
+              <div class="operateBtn" @click="handleEditRow(scope.row)">
+                <span>编辑</span>
+              </div>
+              <!--              <el-popconfirm title="确定删除本条数据？" @confirm="deleteRow(scope.row.id)">-->
+              <!--                <template #reference>-->
+              <!--                  <div class="operateBtn">-->
+              <!--                    <span>删除</span>-->
+              <!--                  </div>-->
+              <!--                </template>-->
+              <!--              </el-popconfirm>-->
+            </div>
+          </template>
         </el-table-column>
       </TableLayout>
+
       <div class="pageBox">
         <el-pagination
-          v-model:current-page="queryParams.pageNo"
-          :page-size="10"
+          v-model:current-page="pageParams.pageNo"
+          :page-size="pageParams.pageSize"
           background
           layout="total, prev, pager, next, jumper"
-          :total="data?.page?.total ?? 0"
-          @current-change="handleCurrentChange"
+          :total="dataTotal"
         />
       </div>
     </div>
@@ -100,56 +127,75 @@
 </template>
 
 <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'
+import { Recruit, RecruitListDTO } from '@/interface/demand'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { deleteRecruit, getRecruitList, updateRecruit } from '@/service/demand'
 import DeptSelect from '@/components/DeptSelect/index.vue'
-import { useDict } from '@/hooks/web/useDict'
+import { useDict, getDictName } from '@/hooks/web/useDict'
 
+const infoList = [
+  { label: '需求总数', value: 'requireSum' },
+  { label: '招聘总数', value: 'recruitSum' }
+]
 defineOptions({ name: 'TravelCost' })
-const { data: postDict } = useDict('post_type')
-const queryParams = reactive<RecruitListDTO>({
+const [postDict] = useDict('post_type') //职位
+const [recruitType] = useDict('RECRUIT_TYPE') // 需求类别
+const [abilityLevel] = useDict('ABILITY_LEVEL') //能力等级
+
+const pageParams = ref({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 10
+})
+const queryParams = reactive<RecruitListDTO>({
   year: '',
   deptId: '',
   post: '',
   type: '',
   status: ''
 })
-const infoList: any = ref([
-  {
-    name: '报销总金额(元)',
-    num: '0'
-  },
-  {
-    name: '已报销总金额(元)',
-    num: '0'
-  },
-  {
-    name: '办理中总金额(元)',
-    num: '0'
-  }
-])
+const dataTotal = ref(0)
 
-const { data, isLoading } = useQuery(
-  [getRecruitList.name, queryParams],
+const { data, isLoading, refetch } = useQuery(
+  [getRecruitList.name, pageParams],
   async () =>
     await getRecruitList({
       ...queryParams,
+      ...pageParams.value,
       year: (queryParams?.year ?? '') !== '' ? new Date(queryParams?.year)?.getFullYear() : ''
-    })
+    }),
+  {
+    onSuccess: (tData) => {
+      dataTotal.value = tData?.page?.total
+    }
+  }
 )
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
+const handleQuery = (): void => {
+  pageParams.value.pageNo = 1
+  refetch()
 }
 
-/** 分页操作 */
-const handleCurrentChange = (pageNo: number) => {
-  queryParams.pageNo = pageNo
+//更新招聘需求
+const { mutate: updateRow } = useMutation(updateRecruit, {
+  onSuccess: (tData) => {
+    console.log('tData: ', tData)
+    editRowData.value = null
+    refetch()
+  }
+})
+
+//待编辑数据
+let editRowData = ref<Recruit>({ recruitNum: 0 })
+const handleEditRow = (row: Recruit) => {
+  editRowData.value = { ...row }
+}
+
+const handleRowSubmit = (): void => {
+  updateRow(editRowData.value)
 }
+
+//删除招聘需求
+const { mutate: deleteRow } = useMutation(deleteRecruit, { onSuccess: () => refetch() })
 </script>