人才库页面

src/api/personArchives.js

+import request from '@/utils/request'
+
+// 查询列表
+export function personL(data) {
+    return request({
+        url: '/djl-archives/personnel/query/list',
+        method: 'get',
+        params: data
+    })
+}
+// 查询详情
+export function details(data) {
+    return request({
+        url: '/djl-archives/personnel/query/detail',
+        method: 'get',
+        params: data
+    })
+}
\ No newline at end of file

src/router/index.js

@@ -123,6 +123,32 @@ export const constantRoutes = [
         meta: { title: 'C端账号管理', icon: 'people' }
       },
     ]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/person/archives',
+    // meta: { title: '项目', icon: 'redis' },
+    children: [
+      {
+        path: 'person/archives',
+        component: () => import('@/views/archives/personnel/index'),
+        name: 'person/archives',
+        meta: { title: '人才库', icon: 'peoples' }
+      },
+      {
+        "name": "details",
+        "path": "person/archives/details",
+        "hidden": true,
+        "component": () => import('@/views/archives/personnel/details'),
+        "meta": {
+          "title": "详情",
+          "icon": "online",
+          "preTitle":"人才库",
+          "activeMenu":"/person/archives"
+        }
+      },
+    ]
   }
   // {
   //   path: "/channel",

src/views/archives/personnel/details.vue

+<template>
+  <div class="app-container" style="padding: 20px 50px">
+    <div class="basic-info">
+      基本信息
+    </div>
+    <div class="submitForm">
+      <el-form :model="form" label-width="120px">
+        <el-row :gutter="80" type="flex">
+          <el-col :span="6">
+            <el-form-item label="姓名">
+              {{ form.name }}
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="证件号码">
+              {{ form.id_no }}
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="性别">
+              {{ form.sex }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="80" type="flex">
+          <el-col :span="6">
+            <el-form-item label="年龄">
+              {{ form.age }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="籍贯">
+              {{ form.register }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="联系电话">
+              {{ form.phone_number }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="80" type="flex">
+          <el-col :span="6">
+            <el-form-item label="在职状态">
+              {{ form.state }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="basic-info">
+      履历
+    </div>
+    <div class="submitForm timeline-container">
+      <el-timeline>
+        <el-timeline-item
+            v-for="(item, index) in records"
+            :key="index"
+            :timestamp="getTimestamp(item,index)"
+            placement="top"
+        >
+          <el-card>
+            <el-form :model="form" label-width="120px">
+              <el-row :gutter="80" type="flex">
+                <el-col :span="8">
+                  <el-form-item label="所在单位">
+                    {{ item.manufacturer }}
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-form-item label="所属派遣公司">
+                    {{ item.dispatch }}
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-form-item label="所属渠道">
+                    {{ item.channel }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="80" type="flex">
+                <el-col :span="8">
+                  <el-form-item label="岗位">
+                    {{ item.post }}
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-form-item label="宿舍">
+                    {{ item.dormitory }}
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                  <el-form-item label="车间">
+                    {{ item.workshop }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-card>
+
+        </el-timeline-item>
+      </el-timeline>
+
+    </div>
+  </div>
+
+</template>
+
+<script setup name="Post">
+import {details} from "@/api/personArchives";
+
+const { proxy } = getCurrentInstance();
+
+const list = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const records = ref([]);
+
+const data = reactive({
+  form: {},
+});
+const { form } = toRefs(data);
+
+//获取人员详情
+getDetails();
+function getDetails(){
+  loading.value = true;
+  details({id:proxy.$route.query.id}).then(response => {
+    form.value=response.data
+    records.value = response.data.record;
+    loading.value = false;
+  });
+}
+
+function getTimestamp(item,idx){
+  if (!item.quit_date && idx === 0) {
+    return item.entry_date + "~" + "至今";
+  } else if (item.quit_date) {
+    return item.entry_date + "~" + item.quit_date;
+  } else {
+    return item.entry_date
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.basic-info {
+  /* 基础信息样式 */
+  font-size: 16px;
+}
+.submitForm{
+  padding: 20px;
+}
+
+
+</style>

src/views/archives/personnel/index.vue

+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+        <el-form-item label="姓名" prop="name">
+          <el-input
+              v-model="queryParams.name"
+              clearable
+              style="width: 300px"
+              @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="证件号码" prop="id_no">
+          <el-input
+              v-model="queryParams.id_no"
+              clearable
+              style="width: 300px"
+              @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="state">
+          <el-select
+              v-model="queryParams.state"
+              placeholder="请选择"
+              style="width: 300px"
+          >
+            <el-option value="entry" label="在职" />
+            <el-option value="quit" label="离职" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="证件号码" align="left" prop="id_no" />
+        <el-table-column label="姓名" align="left" prop="name"  >
+          <template #default="{row}">
+            <el-button link type="primary" @click="handleDetail(row)">{{row.name}}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="性别" align="center" prop="sex" />
+        <el-table-column label="年龄" align="center" prop="age" />
+        <el-table-column label="籍贯" align="center" prop="register" />
+        <el-table-column label="状态" align="left" prop="state"  />
+        <el-table-column label="入库时间" align="left" prop="create_time" />
+        <el-table-column label="更新时间" align="left" prop="update_time" />
+      </el-table>
+  
+      <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.page"
+          v-model:limit="queryParams.limit"
+          @pagination="getList"
+      />
+
+    </div>
+  </template>
+  
+<script setup>
+
+  
+  import {personL} from "@/api/personArchives.js";
+
+  const { proxy } = getCurrentInstance();
+  
+  const list = ref([]);
+  const loading = ref(true);
+  const showSearch = ref(true);
+  const total = ref(0);
+
+
+  const data = reactive({
+    queryParams: {
+      page: 1,
+      limit: 10,
+    },
+  });
+  
+  const { queryParams } = toRefs(data);
+
+
+  /** 查询列表 */
+  function getList() {
+    loading.value = true;
+    personL(queryParams.value).then(response => {
+      list.value = response.data.data;
+      total.value = response.data.count;
+      loading.value = false;
+    });
+  }
+  
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    queryParams.value.page = 1;
+    queryParams.value.limit = 10;
+    getList();
+  }
+  /** 重置按钮操作 */
+  function resetQuery() {
+    proxy.resetForm("queryRef");
+    handleQuery();
+  }
+
+  function handleDetail(row) {
+    proxy.$router.push('/person/archives/details?id='+row.id)
+  }
+
+
+  getList();
+
+  </script>
+  
\ No newline at end of file