职位列表

components.d.ts

@@ -20,7 +20,7 @@ declare module 'vue' {
     CtPagination: typeof import('./src/components/CtPagination/index.vue')['default']
     CtSearch: typeof import('./src/components/CtSearch/index.vue')['default']
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
-    DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
+    DatePicker: typeof import('./src/components/FormUI/datePicker/index.vue')['default']
     Details: typeof import('./src/components/Enterprise/details.vue')['default']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']

src/layout/company/side.vue

@@ -19,23 +19,22 @@
           v-else
           color="primary"
           rounded="shaped"
-          :key="`${item.name}_${index}`"
-          :value="route.path.indexOf(item.name) > -1"
+          :key="`${item.path}_${item.title}`"
           :prepend-icon="item.icon"
         >
           <template v-slot:activator="{ props }">
             <v-list-item v-bind="props" :title="item.title"></v-list-item>
           </template>
           <v-list-item
-            v-for="(val, index) in item.children"
-            :key="index"
+            v-for="(val, i) in item.children"
+            :key="i"
             color="primary"
             :href="val.path"
             style="padding-left: 40px;"
             :to="val.path"
             :title="val.title"
             rounded="shaped"
-            :value="val.title"
+            :value="val.path"
           ></v-list-item>
         </v-list-group>
       </template>
@@ -46,10 +45,8 @@
 <script setup>
 defineOptions({ name: 'enterprise-side'})
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 import enterpriseRoute from '@/router/modules/enterprise'
 
-const route = useRoute()
 const list = computed(() => {
   return getList(enterpriseRoute)
 })

src/layout/enterprise.vue

@@ -3,7 +3,7 @@
     <Headers class="headers"></Headers>
     <div class="content">
       <side></side>
-      <div class="pa-3">
+      <div class="pa-3" style="flex: 1;">
         <router-view></router-view>
       </div>
     </div>

src/locales/en.js

@@ -65,7 +65,12 @@ export default {
     interview: 'Interview',
     interested: 'Interested',
     interestedInMe: 'Interested In Me',
-    haveSeenMe: 'Have Seen Me'
+    haveSeenMe: 'Have Seen Me',
+    pausePublishing: 'Pause Publishing',
+    expiredPosition: 'Expired Position',
+    recycleBin: 'Recycle Bin',
+    closed: 'Closed',
+    recruitmentInProgress: 'Recruitment In Progress'
   },
   enterprise: {
     moreBtn: 'View More Enterprises'

src/locales/zh-CN.js

@@ -65,7 +65,12 @@ export default {
     interview: '面试',
     interested: '感兴趣',
     interestedInMe: '对我感兴趣',
-    haveSeenMe: '看过我'
+    haveSeenMe: '看过我',
+    pausePublishing: '暂停发布',
+    expiredPosition: '到期职位',
+    recycleBin: '回收站',
+    closed: '已关闭',
+    recruitmentInProgress: '招聘中'
   },
   enterprise: {
     moreBtn: '查看更多企业'

src/router/modules/enterprise.js

@@ -55,7 +55,9 @@ const enterprise = [
     children: [
       {
         path: '/enterprise/position',
-        show: true,
+        meta: {
+          title: '职位列表'
+        },
         component: () => import('@/views/enterprise/positionManagement/index.vue')
       }
     ]

src/views/enterprise/positionManagement/components/item.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div v-for="val in list" :key="val.id" class="itemBox mb-3">
+      <div class="d-flex justify-space-between pa-5">
+        <div class="position">
+          <div>
+            <span class="position-name">{{ val.name }}</span>
+          </div>
+          <div class="mt-3 other-info ellipsis">
+            <span>{{ val.areaName }}</span>
+            <span class="lines"></span>
+            <span>{{ val.eduName }}</span>
+            <span class="lines"></span>
+            <span>{{ val.expName }}</span>
+            <span class="lines"></span>
+            <span>{{ val.salary }}</span>
+            <span class="lines"></span>
+            <span>{{ val.positionTypeName }}</span>
+          </div>
+        </div>
+        <div class="d-flex align-center">
+          <div class="resume">
+            <div class="resume-number">6</div>
+            <div>待筛选简历</div>
+          </div>
+          <div>
+            <v-btn color="primary" variant="tonal">人才搜索</v-btn>
+            <v-btn class="mx-3" color="primary">刷新职位</v-btn>
+            <v-btn color="primary">置顶职位</v-btn>
+          </div>
+        </div>
+      </div>
+      <div class="bottom pa-5 d-flex justify-space-between align-center">
+        <div>刷新时间：2024.5.30（90天后到期）</div>
+        <div>
+          <span class="cursor-pointer">招聘统计</span>
+          <span class="lines"></span>
+          <span class="cursor-pointer">编辑</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'enterprise-position-item'})
+import { ref } from 'vue'
+
+const list = ref([
+  {
+    id: '1',
+    name: '销售总监',
+    areaName: '广东 广州 越秀区',
+    eduName: '本科',
+    expName: '3年以上',
+    salary: '1万到1.5万',
+    positionTypeName: '销售总监'
+  },
+  {
+    id: '2',
+    name: '市场总监',
+    areaName: '广东 广州 越秀区',
+    eduName: '本科',
+    expName: '3年以上',
+    salary: '1万到1.5万',
+    positionTypeName: '销售总监'
+  },
+  {
+    id: '3',
+    name: '行政总监',
+    areaName: '广东 广州 越秀区',
+    eduName: '本科',
+    expName: '3年以上',
+    salary: '1万到1.5万',
+    positionTypeName: '销售总监'
+  }
+])
+</script>
+
+<style scoped lang="scss">
+.itemBox {
+  border: 1px solid #e5e6eb;
+  height: 145px;
+}
+.position-name {
+  color: #333;
+  font-size: 19px;
+  cursor: pointer;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.position {
+  max-width: 46%;
+}
+.lines {
+  display: inline-block;
+  width: 1px;
+  height: 17px;
+  vertical-align: middle;
+  background-color: #e0e0e0;
+  margin: 0 10px;
+}
+.other-info {
+  font-size: 15px;
+  color: #666;
+}
+.bottom {
+  height: 40px;
+  background-color: #f7f8fa;
+  font-size: 14px;
+  color: #888;
+}
+.resume {
+  display: flex;
+  font-size: 13px;
+  flex-direction: column;
+  align-items: center;
+  color: #888;
+  margin-right: 100px;
+  cursor: pointer;
+}
+.resume-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: #999;
+}
+</style>

src/views/enterprise/positionManagement/index.vue

@@ -1,11 +1,65 @@
 <template>
-  <div>职位管理</div>
+  <div>
+    <v-card class="card-box pa-5">
+      <div class="text-end">
+        <v-btn class="btn mr-3" prepend-icon="mdi-filter-outline" color="primary" variant="outlined">筛选</v-btn>
+        <v-btn class="btn" prepend-icon="mdi-plus" color="primary">新增职位</v-btn>
+      </div>
+      <div class="d-flex justify-center mt-3">
+        <TextUI :item="textItem"></TextUI>
+      </div>
+      <div>
+        <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff">
+          <v-tab :value="1">{{ $t('position.recruitmentInProgress') }}</v-tab>
+          <v-tab :value="2">{{ $t('position.closed') }}</v-tab>
+          <v-tab :value="3">{{ $t('position.pausePublishing') }}</v-tab>
+          <v-tab :value="4">{{ $t('position.expiredPosition') }}</v-tab>
+          <v-tab :value="5">{{ $t('position.recycleBin') }}</v-tab>
+        </v-tabs>
+        <v-window v-model="tab" class="mt-3">
+          <v-window-item :value="1">
+            <PositionItem></PositionItem>
+          </v-window-item>
+          <v-window-item :value="2">
+            <PositionItem></PositionItem>
+          </v-window-item>
+          <v-window-item :value="3">
+            <PositionItem></PositionItem>
+          </v-window-item>
+          <v-window-item :value="4">
+            <PositionItem></PositionItem>
+          </v-window-item>
+          <v-window-item :value="5">
+            <PositionItem></PositionItem>5
+          </v-window-item>
+        </v-window>
+      </div>
+    </v-card>
+  </div>
 </template>
 
 <script setup>
-defineOptions({ name: 'formPage'})
+defineOptions({ name: 'enterprise-position-list'})
+import { ref } from 'vue'
+import TextUI from '@/components/FormUI/TextInput'
+import PositionItem from './components/item.vue'
+
+const tab = ref(1)
+const textItem = ref({
+  type: 'text',
+  width: 600,
+  value: '',
+  label: '请输入职位名称',
+  appendInnerIcon: 'mdi-magnify'
+})
 </script>
 
 <style scoped lang="scss">
-
+.card-box {
+  width: 100%;
+  height: 100%;
+}
+.btn {
+  width: 116px;
+}
 </style>