分页组件

src/components/CtVuetify/CtPagination/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="d-flex justify-center align-center pa-5">
+    <v-pagination
+      v-model="currentPage"
+      :length="pageLength"
+      @update:model-value="handleCurrentChange"
+      v-bind="$attrs"
+      :total-visible="props.totalVisible"
+      active-color="primary"
+      color="primary"
+      size="small"
+    ></v-pagination>
+    <span style="color: #666;">共{{ props.total }}条数据</span>
+    <div class="search px-3">
+      <v-text-field
+        v-model="currentJump"
+        type="number"
+        hide-details
+        variant="outlined"
+        density="compact"
+        label=""
+        placeholder=""
+        hide-spin-buttons
+      ></v-text-field>
+    </div>
+    <div>
+      <v-btn color="primary" rounded class="half-button" @click="handleCurrentJump">跳转</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'pagination-page' })
+import { ref, watch, computed } from 'vue'
+const emits = defineEmits(['handleChange'])
+
+const props = defineProps({
+  total: {
+    type: [String, Number],
+    default: 0
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 10
+  },
+  pageSizes: {
+    type: Array,
+    default: () => [5, 10, 15, 20]
+  },
+  layout: {
+    type: String,
+    default: 'total, prev, pager, next, jumper'
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  },
+  totalVisible: {
+    type: Number,
+    default: 7
+  }
+})
+
+const currentPage = ref(1)
+const currentJump = ref(null)
+currentPage.value = props.page
+
+watch(() => props.page, (newVal) => {
+  currentPage.value = newVal
+}, { deep: true })
+
+
+const pageLength = computed(() => {
+  return Math.ceil(props.total / props.limit)
+})
+
+const handleCurrentChange = () => {
+  emits('handleChange', currentPage.value)
+}
+
+const handleCurrentJump = () => {
+  if (currentJump.value > pageLength.value) currentJump.value = pageLength.value
+  if (currentJump.value < 1) currentJump.value = 1
+  currentPage.value = +currentJump.value
+  emits('handleChange', currentPage.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  width: 80px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+// ::v-deep  .v-text-field--outlined.v-input--dense.v-text-field--outlined > .v-input__control > .v-input__slot {
+//   min-height: 35px;
+// }
+</style>

src/components/Enterprise/components/positions.vue

@@ -2,19 +2,66 @@
   <div>
     <div class="top">检索</div>
     <div class="bottom">
-      <div v-for="(val, i) in list" :key="i">
-        <div class="d-flex justify-space-between">
+      <div v-for="(val, i) in list" :key="i" :class="['bottom-item', {'border-bottom-dashed': i !== list.length -1}, 'd-flex', 'justify-space-between']" @mouseenter="val.active = true" @mouseleave="val.active = false">
+        <div>
           <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
+          <div style="line-height: 40px;">
+            <span v-for="k in desc" :key="k.mdi" class="mr-5">
+              <v-icon color="#666" size="15">{{ k.mdi }}</v-icon>
+              <span class="ml-1 tag-text">{{ val[k.value] }}</span>
+            </span>
+          </div>
+        </div>
+        <div v-if="!val.active" class="text-right">
           <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
+          <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
+        </div>
+        <div v-else class="account-info">
+          <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
+          <span class="account-label">陈北方 · 人事经理</span>
+          <span>
+            <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
+          </span>
         </div>
       </div>
+      <MPagination
+        :total="total"
+        :page="pageInfo.current"
+        :limit="pageInfo.size"
+        @handleChange="handleChangePage"
+      ></MPagination>
     </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'recruitment-positions'})
-const list = [
+import { ref } from 'vue'
+import { timesTampChange } from '@/utils/date'
+import MPagination from '@/components/CtVuetify/CtPagination'
+
+const total = ref(12)
+const pageInfo = ref({
+  size: 3,
+  current: 1
+})
+
+const handleChangePage = (index) => {
+  console.log(index, 'handle-page')
+}
+
+const list = ref([
+  {
+    name: '产品经理',
+    payFrom: 6,
+    payTo: 11,
+    payName: '月',
+    updateTime: 1716175909224,
+    areaName: '广州',
+    eduName: '本科',
+    expName: '1-3年',
+    active: false
+  },
   {
     name: '产品经理',
     payFrom: 6,
@@ -37,10 +84,20 @@ const list = [
     expName: '1-3年',
     active: false
   }
+])
+const desc = [
+  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
+  { mdi: 'mdi-school-outline', value: 'eduName' },
+  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
 ]
 </script>
 
 <style scoped lang="scss">
+.bottom-item {
+  width: 100%;
+  height: 82px;
+  padding: 12px 0;
+}
 .name {
   position: relative;
   max-width: 200px;
@@ -49,9 +106,6 @@ const list = [
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
-  &:hover {
-    color: var(--v-primary-base);
-  }
 }
 .salary {
   font-size: 16px;
@@ -60,4 +114,22 @@ const list = [
   line-height: 22px;
   flex: none;
 }
+.tag-text {
+  color: #222;
+  font-size: 14px;
+}
+.update-time {
+  color: #666;
+  font-size: 14px;
+  line-height: 40px;
+}
+.account-info {
+  line-height: 52px;
+  .account-label {
+    color: #666;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 10px;
+  }
+}
 </style>

src/config/axios/service.js

@@ -54,12 +54,10 @@ service.interceptors.request.use(
       ;(config).headers.Authorization = 'Bearer ' + getToken() // 让每个请求携带自定义token
     }
     // 设置租户
-    console.log('tenantEnable', import.meta.env.VITE_TENANTCODE)
     if (tenantEnable && tenantEnable === 'true') {
       const tenantId = import.meta.env.VITE_TENANTCODE
       if (tenantId) config.headers['tenant-id'] = tenantId
     }
-    console.log(config)
     const params = config.params || {}
     const data = config.data || false
     if (

src/views/login/index.vue

@@ -59,7 +59,7 @@ import Snackbar from '@/plugins/snackbar'
 defineOptions({ name: 'login-index' })
 
 const router = useRouter()
-console.log('更新')
+
 const phone = ref()
 let isPhone = ref(false)
 const handlePhone = () => {