1、定义 Hooks，装箱/封装/组合式函数
部门 Hooks，/hooks/useDepartment.ts
import { onMounted, onUnmounted, ref } from "vue";
import type { SelectOptions } from "@/interface";
import { departmentOptionsService } from "@/api/selectOptions";/*** 部门组合式函数 hooks，实现开箱即用的效果* @returns 状态（包含部门列表，部门编号，部门名称，获取部门列表方法，查找部门名称方法等）*/
export const useDepartment = () => {// 定义响应式变量// 部门列表const departmentList = ref<SelectOptions[]>([]);// 获取部门列表const fetchDepartmentList = async () => {let result = await departmentOptionsService();departmentList.value = result.data;};// 通过部门编号查找部门名称const lookupDepartmentName = (departmentNo: string) => {// 根据 departmentNo 值获取部门对象const department = departmentList.value.find((item) => item.value === departmentNo);// 返回部门名称return department ? (department.label as string) : "";};// 重置数据const resetData = () => {departmentList.value = [];};onMounted(async () => {// 获取部门列表await fetchDepartmentList();});onUnmounted(() => {// 重置数据resetData();});// 返回状态return { departmentList, fetchDepartmentList, lookupDepartmentName };
};
2、使用 Hooks，开箱即用
在组件 PurchaseChooseDialog.vue 中使用
<script setup lang="ts" name="PurchaseChooseDialog">
......
// 导入部门 hooks
import { useDepartment } from "@/hooks/useDepartment";// 部门 hooks，实现开箱即用的效果，这里是开箱（通过 useDepartment 开箱），后面是即用
const departmentHooks = useDepartment();
......
</script><template>
......<el-table-column prop="no" label="申购单" width="200" header-align="left" show-overflow-tooltip><template #default="scope"><div>{{ scope.row.no }} {{ scope.row.handlerId }}</div><!-- 部门 hooks，实现开箱即用的效果，前面是开箱，这里是即用（使用 lookupDepartmentName） --><div>{{ departmentHooks.lookupDepartmentName(scope.row.deptId) }}</div></template></el-table-column>
......
</template>3、应用效果，数据是部门编号，显示是部门名称
