diff --git a/src/App.vue b/src/App.vue
index f23afd34d825e711a25f8ebfaa0726f226bc7bc5..8004b16e0a6b1a1028eb098171e9e37b41fb9a94 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import contractCategory from './component/contractManagement/contractCategory/co
 import register from './component/userLogin/login-dialog-button.vue'
 import announcementType from './component/enterpriseAnnouncement/announcementType.vue';
 import departments from './component/humanResources/department.vue'
+import jobTitle from './component/humanResources/jobTitle.vue';
 </script>
 
 <template>
@@ -11,6 +12,7 @@ import departments from './component/humanResources/department.vue'
   <contract-list></contract-list>
   <!-- <announcementType></announcementType>
   <departments></departments> -->
+  <job-title></job-title>
   <el-row>
     <el-col>后台管理平台</el-col>
   </el-row>
diff --git a/src/api/api.ts b/src/api/api.ts
index 55511c7e8f7be6e6f8e7af147e78ae8e48b5566d..893cd92d3dee12e8138ac8ab768890b8c87a3c97 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -49,4 +49,6 @@ export function getContractListType(): Promise<AxiosResponse<any>>{
 
 export function getHumanResourcesDepartment(): Promise<AxiosResponse<any>>{
     return request.get(HUMAN_RESOURCES_DEPARTMENT, {});
-}
\ No newline at end of file
+}
+
+// export function 
\ No newline at end of file
diff --git a/src/component/humanResources/emp.vue b/src/component/humanResources/emp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b37b5f4cf5fda34d1097171972e2911b13a2224
--- /dev/null
+++ b/src/component/humanResources/emp.vue
@@ -0,0 +1,10 @@
+<script setup>
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/component/humanResources/jobTitle.vue b/src/component/humanResources/jobTitle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef6a2629fffe1ed87146fa09d9aace4b5e7d6da2
--- /dev/null
+++ b/src/component/humanResources/jobTitle.vue
@@ -0,0 +1,173 @@
+<script setup>
+import mains from '@/component/main/main.vue'
+import headers from '@/component/main/header/header.vue';
+import addDownload from '@/component/main/header/add_download/addDownload.vue';
+import buttoner from '@/component/main/header/add_download/button.vue';
+import downloadItem from '@/component/main/header/add_download/downloadItem.vue';
+import ejectDialog from '@/component/main/ejectDialog.vue';
+import { ref, provide, onMounted } from 'vue';
+import { getHumanResourcesDepartment } from '@/api/api';
+import { FlatToTree } from '@/util/toTree';
+import { deepClone } from '@/util/deepCode';
+import { computed } from '@vue/reactivity';
+
+let tableData = ref([
+])
+let respData = ref();
+const getData = () => {
+  getHumanResourcesDepartment().then((res)=>{
+    respData.value = res.data.data.data;
+    tableData.value = FlatToTree(deepClone(res.data.data.data)).tree;
+  })
+}
+onMounted(async () => {
+  getData();  
+})
+
+let tableType = ref([
+  {
+    name: "id号",
+    type: "id",
+    width: "150px",
+    isSort: false,
+    align: "center"
+  },
+  {
+    name: '上级ID',
+    type: "parentID",
+    width: "80px",
+    isSort: false,
+    align: "left"
+  },
+  {
+    name: '部门名称',
+    type: "departmentName",
+    width: "auto",
+    isSort: false,
+    align: "center"
+  },
+  {
+    name: "排序",
+    type: "sort",
+    width: "100px",
+    isSort: true,
+    align: "center"
+  },
+  {
+    name: '部门负责人',
+    type: "departmentHead",
+    width: "100px",
+    isSort: false,
+    align: "center"
+  },
+  {
+    name: '部门电话',
+    type: "departmentPhone",
+    width: "200px",
+    isSort: false,
+    align: "center"
+  },
+  {
+    name: '状态',
+    type: 'state',
+    width: '120px',
+  }
+]
+);
+let operation = ref({ type: ["details", "edit", "delete"], width: "220px" });
+
+const addDept = ref();
+const addSubDept = ref();
+const editDept = computed({
+  get: () => {
+    return row.value.departmentName;
+  },
+  set: (val) => {
+    row.value.departmentName = val;
+    getData();
+  }
+})
+
+
+
+
+
+
+const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+  if (column.property === "state") {
+    if (row.state == "正常")
+      return {
+        color: "#16b777"
+      };
+  }
+  return;
+}
+const addDialog = ref(false);
+const addSubcategoriesDialog = ref(false);
+const disabledDialog = ref(false);
+const detailsDialog = ref(false);
+const editDialog = ref(false);
+const deleteDialog = ref(false);
+const row = ref();
+provide("addSubcategoriesDialog", addSubcategoriesDialog);
+provide("disabledDialog", disabledDialog);
+provide("detailsDialog", detailsDialog);
+provide("editDialog", editDialog);
+provide("deleteDialog", deleteDialog);
+
+provide("tableData", tableData);
+provide("row", row);
+provide("changeState", () => {
+  console.log(1111);
+})
+provide("subString", "子部门");
+provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
+  if (column.property === "state") {
+    if (row.state == "正常") {
+      return {
+        color: "#16b777"
+      };
+    } else if (row.state == "禁用") {
+      return {
+        color: "#F56C6C"
+      }
+    }
+  }
+  return;
+});
+</script>
+
+<template>
+  <mains :tableType="tableType" :operation="operation">
+    <headers>
+      <!-- <headerFmainsorm></headerForm> -->
+      <addDownload>
+        <buttoner class="left" @openDialog="addDialog = true">
+          添加岗位
+        </buttoner>
+        <downloadItem></downloadItem>
+      </addDownload>
+    </headers>
+    <ejectDialog v-model:openDialog="addDialog">
+      <template #header>添加岗位</template>
+      <el-input v-model="addDept"></el-input>
+    </ejectDialog>
+    <ejectDialog v-model:openDialog="addSubcategoriesDialog">
+      <template #header>详情</template>
+      <el-input v-model="addSubDept"></el-input>
+    </ejectDialog>
+    <ejectDialog v-model:openDialog="editDialog">
+      <template #header>编辑</template>
+      <el-input v-model="editDept"></el-input>
+    </ejectDialog>
+    <ejectDialog v-model:openDialog="deleteDialog">
+      <template #header>删除</template>
+    </ejectDialog>
+  </mains>
+</template>
+
+<style scoped>
+.left {
+  margin-right: auto;
+}
+</style>
diff --git a/src/component/humanResources/personnelTransfer.vue b/src/component/humanResources/personnelTransfer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b37b5f4cf5fda34d1097171972e2911b13a2224
--- /dev/null
+++ b/src/component/humanResources/personnelTransfer.vue
@@ -0,0 +1,10 @@
+<script setup>
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/component/humanResources/resignation.vue b/src/component/humanResources/resignation.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b37b5f4cf5fda34d1097171972e2911b13a2224
--- /dev/null
+++ b/src/component/humanResources/resignation.vue
@@ -0,0 +1,10 @@
+<script setup>
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/component/materialApplication/deviceManagement/deviceManagement.vue b/src/component/materialApplication/deviceManagement/deviceManagement.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b37b5f4cf5fda34d1097171972e2911b13a2224
--- /dev/null
+++ b/src/component/materialApplication/deviceManagement/deviceManagement.vue
@@ -0,0 +1,10 @@
+<script setup>
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file