feat: 新增 字典查询hook

调试 招聘需求页样式

client/src/components/DeptSelect/index.vue

@@ -4,16 +4,25 @@
  */
 import * as DeptApi from '@/api/system/dept'
 import { defaultProps, handleTree } from '@/utils/tree'
+
 interface ISelect {
+  modelValue: any
   multiple?: boolean // 是否多选 默认false
   onChange?: (any) => any
   defaultValue?: string | any[]
 }
-const { multiple = false, onChange, defaultValue = '' } = defineProps<ISelect>()
+
+const props = defineProps<ISelect>()
+const { multiple = false, onChange, defaultValue = '' } = props
+const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
 const deptTree = ref<any[]>([]) // 树形结构
-const deptId = ref(defaultValue)
+const deptId = computed({
+  get: () => props.modelValue,
+  set: (nVal: string) => emit('update:modelValue', nVal)
+})
 
 onMounted(() => {
+  if (defaultValue !== '') deptId.value = defaultValue
   getDeptTree()
 })
 
@@ -36,6 +45,7 @@ const getDeptTree = async () => {
 watch(
   () => deptId.value,
   () => {
+    console.log('deptId.value', deptId.value)
     // 选中数据发生变化时触发
     onChange?.(deptId.value)
   }

client/src/hooks/web/useDict.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/vue-query'
+import { getDict } from '@/service/system'
+import { DictRecord } from '@/interface/dict'
+import { Ref } from 'vue'
+
+/**
+ * 根据类型获取字典
+ * @param dictType
+ */
+export const useDict = (
+  dictType: string
+): { data: Ref<DictRecord[] | undefined>; isLoading: Ref<boolean> } => {
+  return useQuery(['dictList', dictType], async () => await getDict(dictType))
+}

client/src/interface/dict.ts

@@ -0,0 +1,6 @@
+export interface DictRecord {
+  dictType: string
+  id: number
+  label: string
+  value: string
+}

client/src/main.ts

@@ -54,16 +54,16 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入所有图
 import LinkRouteMap from './LinkRouteMap';
 //监听iframe postMessage发送的信息
 window.addEventListener("message", (evt) => {
-  const eData = JSON.parse(evt.data)
-  const payload = eData.data;
-  if (payload && payload['title']) {
-    const lRoutePayload = LinkRouteMap[payload['title']]
-    if (lRoutePayload) {
-      lRoutePayload['id'] = payload['id']
-      lRoutePayload['url'] = payload['url']
-      subscribe.emit(lRoutePayload['path'], lRoutePayload)
-    }
-  }
+  // const eData = JSON.parse(evt.data)
+  // const payload = eData.data;
+  // if (payload && payload['title']) {
+  //   const lRoutePayload = LinkRouteMap[payload['title']]
+  //   if (lRoutePayload) {
+  //     lRoutePayload['id'] = payload['id']
+  //     lRoutePayload['url'] = payload['url']
+  //     subscribe.emit(lRoutePayload['path'], lRoutePayload)
+  //   }
+  // }
 }, false);
 // 创建实例
 const setupAll = async () => {

client/src/service/system.ts

@@ -1,5 +1,6 @@
 import request from '@/config/axios'
 import { handleTree } from '@/utils/tree'
+import { DictRecord } from '@/interface/dict'
 
 /**
  * 获取组织架构
@@ -49,3 +50,24 @@ export const getAreaTree = async () => {
     url: '/system/area/tree'
   })
 }
+
+/**
+ * 获取字典
+ */
+export const getDict = async (dictType: string): Promise<DictRecord[]> => {
+  const params = {
+    pageNo: 1,
+    pageSize: 100,
+    status: 0,
+    dictType
+  }
+  const data = await request.get(
+    {
+      url: '/dict-data/page',
+      params
+    },
+    '/admin-api/system'
+  )
+  console.log('data: ', data)
+  return data?.list ?? []
+}

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

@@ -1,51 +1,33 @@
 <template>
-  <div class="_ptbxBook">
+  <div class="oa-sys-list-view">
     <div class="searchBox">
       <div class="form">
-        <span class="formSpan">报销单号：</span>
-        <el-input v-model="queryParams.commonCostNo" placeholder="请输入报销单号" />
+        <span class="formSpan">申请时间：</span>
+        <el-date-picker v-model="queryParams.year" type="year" />
       </div>
       <div class="form">
-        <span class="formSpan">报销人：</span>
-        <el-input v-model="queryParams.userId" placeholder="请输入报销人" />
+        <span class="formSpan">申请部门：</span>
+        <DeptSelect v-model="queryParams.deptId" />
       </div>
+
       <div class="form">
-        <span class="formSpan">报销人部门：</span>
-        <el-select width="160px" v-model="queryParams.deptId" placeholder="请选择部门">
+        <span class="formSpan">申请岗位：</span>
+        <el-select v-model="queryParams.post" :options placeholder="请选择岗位">
           <el-option
-            v-for="item in industryListAll"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="{ label, value } in postDict"
+            :key="value"
+            :label="label"
+            :value="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="请输入项目部门" />
+        <span class="formSpan">所属类别：</span>
+        <el-input v-model="queryParams.type" 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="请输入报销总金额" />
+        <span class="formSpan">项目部门：</span>
+        <el-input v-model="queryParams.status" placeholder="请输入项目部门" />
       </div>
       <div class="from">
         <div class="btnBox">
@@ -69,7 +51,7 @@
       </ul>
     </div>
     <div class="tableBox">
-      <TableLayout :is-loading="isLoading" :data="data?.records">
+      <TableLayout :is-loading="isLoading" :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="岗位" />
@@ -109,7 +91,7 @@
           :page-size="10"
           background
           layout="total, prev, pager, next, jumper"
-          :total="data?.total ?? 0"
+          :total="data?.page?.total ?? 0"
           @current-change="handleCurrentChange"
         />
       </div>
@@ -123,11 +105,19 @@ import TableLayout from '../../oaViews/layout/TableLayout.vue'
 import { RecruitListDTO } from '@/interface/demand'
 import { useQuery } from '@tanstack/vue-query'
 import { getRecruitList } from '@/service/demand'
+import DeptSelect from '@/components/DeptSelect/index.vue'
+import { useDict } from '@/hooks/web/useDict'
 
 defineOptions({ name: 'TravelCost' })
+const { data: postDict } = useDict('post_type')
 const queryParams = reactive<RecruitListDTO>({
   pageNo: 1,
-  pageSize: 10
+  pageSize: 10,
+  year: '',
+  deptId: '',
+  post: '',
+  type: '',
+  status: ''
 })
 const infoList: any = ref([
   {
@@ -146,7 +136,11 @@ const infoList: any = ref([
 
 const { data, isLoading } = useQuery(
   [getRecruitList.name, queryParams],
-  async () => await getRecruitList(queryParams)
+  async () =>
+    await getRecruitList({
+      ...queryParams,
+      year: (queryParams?.year ?? '') !== '' ? new Date(queryParams?.year)?.getFullYear() : ''
+    })
 )
 
 /** 搜索按钮操作 */