新增租户备注功能
This commit is contained in:
@@ -1,11 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mobile-pagination">
|
<div class="mobile-pagination">
|
||||||
|
<!-- 每页条数选择 -->
|
||||||
|
<div class="per-page">
|
||||||
|
<span class="label">{{ $t('common.perPage') || '每页' }}</span>
|
||||||
|
<el-select class="limit-select" :model-value="props.limit" size="small" @change="onLimitChange">
|
||||||
|
<el-option v-for="s in props.pageSizes" :key="s" :label="`${s} / 页`" :value="s" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-button type="primary" size="small" :disabled="currentPage <= 1" @click="loadPreviousPage">
|
<el-button type="primary" size="small" :disabled="currentPage <= 1" @click="loadPreviousPage">
|
||||||
{{ $t('employee.previous') || '上一页' }}
|
{{ $t('employee.previous') || '上一页' }}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<span class="page-info">
|
<span class="page-info">
|
||||||
{{ currentPage }} / {{ totalPages }}
|
{{ currentPage }} / {{ totalPages }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<el-button type="primary" size="small" :disabled="currentPage >= totalPages" @click="loadNextPage">
|
<el-button type="primary" size="small" :disabled="currentPage >= totalPages" @click="loadNextPage">
|
||||||
{{ $t('employee.loadNext') || '下一页' }}
|
{{ $t('employee.loadNext') || '下一页' }}
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -14,32 +24,55 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, defineProps, defineEmits } from 'vue'
|
import { computed, defineProps, defineEmits } from 'vue'
|
||||||
const { t } = useI18n() // 国际化
|
import { useI18n } from 'vue-i18n' // 如你项目已做自动导入可去掉
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
page: { type: Number, required: true },
|
page: { type: Number, required: true },
|
||||||
limit: { type: Number, required: true },
|
limit: { type: Number, required: true },
|
||||||
total: { type: Number, required: true }
|
total: { type: Number, required: true },
|
||||||
|
// 新增:可配置每页条数选项
|
||||||
|
pageSizes: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [10, 20, 50, 100]
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const emits = defineEmits(['update:page', 'load', 'loadPre'])
|
const emits = defineEmits([
|
||||||
|
'update:page',
|
||||||
|
'update:limit', // 新增:v-model:limit
|
||||||
|
'size-change', // 新增:告知父组件条数变化
|
||||||
|
'load',
|
||||||
|
'loadPre'
|
||||||
|
])
|
||||||
|
|
||||||
const totalPages = computed(() => Math.ceil(props.total / props.limit))
|
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.limit)))
|
||||||
const currentPage = computed(() => props.page)
|
const currentPage = computed(() => props.page)
|
||||||
|
|
||||||
const loadNextPage = () => {
|
const loadNextPage = () => {
|
||||||
if (currentPage.value < totalPages.value) {
|
if (currentPage.value < totalPages.value) {
|
||||||
emits('update:page', currentPage.value)
|
emits('update:page', currentPage.value + 1) // 修复:改为 +1
|
||||||
emits('load') // 触发外部方法加载下一页数据
|
emits('load') // 触发外部方法加载下一页数据
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadPreviousPage = () => {
|
const loadPreviousPage = () => {
|
||||||
if (currentPage.value > 1) {
|
if (currentPage.value > 1) {
|
||||||
emits('update:page', currentPage.value)
|
emits('update:page', currentPage.value - 1) // 修复:改为 -1
|
||||||
emits('loadPre')
|
emits('loadPre')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 新增:每页条数变化
|
||||||
|
const onLimitChange = (val) => {
|
||||||
|
if (val !== props.limit) {
|
||||||
|
emits('update:limit', val)
|
||||||
|
// 通常切换每页条数后回到第一页避免越界
|
||||||
|
if (currentPage.value !== 1) emits('update:page', 1)
|
||||||
|
emits('size-change', val)
|
||||||
|
emits('load') // 重新加载数据
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -49,6 +82,22 @@ const loadPreviousPage = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.per-page {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.per-page .label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.limit-select {
|
||||||
|
width: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-info {
|
.page-info {
|
||||||
|
|||||||
@@ -54,7 +54,8 @@ export default {
|
|||||||
updateTime: 'Update Time',
|
updateTime: 'Update Time',
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
copySuccess: 'Copy Success',
|
copySuccess: 'Copy Success',
|
||||||
copyError: 'Copy Error'
|
copyError: 'Copy Error',
|
||||||
|
perPage: 'Number page',
|
||||||
},
|
},
|
||||||
lock: {
|
lock: {
|
||||||
lockScreen: 'Lock screen',
|
lockScreen: 'Lock screen',
|
||||||
@@ -549,7 +550,8 @@ export default {
|
|||||||
remark: 'Remark',
|
remark: 'Remark',
|
||||||
flag:'Flag',
|
flag:'Flag',
|
||||||
loadNext:'Next',
|
loadNext:'Next',
|
||||||
previous:'上一页',
|
previous: 'Previous',
|
||||||
|
updateTime: 'Update Time',
|
||||||
|
|
||||||
},
|
},
|
||||||
country: {
|
country: {
|
||||||
|
|||||||
@@ -58,7 +58,9 @@ export default {
|
|||||||
updateTime: '更新时间',
|
updateTime: '更新时间',
|
||||||
copy: '复制',
|
copy: '复制',
|
||||||
copySuccess: '复制成功',
|
copySuccess: '复制成功',
|
||||||
copyError: '复制失败'
|
copyError: '复制失败',
|
||||||
|
perPage: '每页',
|
||||||
|
|
||||||
},
|
},
|
||||||
lock: {
|
lock: {
|
||||||
lockScreen: '锁定屏幕',
|
lockScreen: '锁定屏幕',
|
||||||
@@ -528,6 +530,7 @@ export default {
|
|||||||
createTime: '创建时间',
|
createTime: '创建时间',
|
||||||
updataTime: '更新时间',
|
updataTime: '更新时间',
|
||||||
userId: '用户 Id',
|
userId: '用户 Id',
|
||||||
|
updateTime: '更新时间',
|
||||||
placeAllocationUser: '请选择分配的员工',
|
placeAllocationUser: '请选择分配的员工',
|
||||||
invitationType: '邀请类型',
|
invitationType: '邀请类型',
|
||||||
placeInvitationType: '请选择邀请类型',
|
placeInvitationType: '请选择邀请类型',
|
||||||
|
|||||||
@@ -197,6 +197,7 @@ onMounted(async () => {
|
|||||||
// 每次页面“再次显示”时都会触发(前提:该路由组件被 keep-alive 缓存)
|
// 每次页面“再次显示”时都会触发(前提:该路由组件被 keep-alive 缓存)
|
||||||
onActivated(async () => {
|
onActivated(async () => {
|
||||||
await fetchDailyHostsCount()
|
await fetchDailyHostsCount()
|
||||||
|
await fetchAllHostsCount()
|
||||||
})
|
})
|
||||||
// import { useGlobalWebSocket } from '@/components/useGlobalWebSocket'
|
// import { useGlobalWebSocket } from '@/components/useGlobalWebSocket'
|
||||||
// let messageList = useGlobalWebSocket().messageList
|
// let messageList = useGlobalWebSocket().messageList
|
||||||
|
|||||||
@@ -220,12 +220,12 @@
|
|||||||
<div class="card-row"><b>{{ $t('employee.updateTime') }}:</b>{{ formatTimestamp(item.updateTime) }}</div>
|
<div class="card-row"><b>{{ $t('employee.updateTime') }}:</b>{{ formatTimestamp(item.updateTime) }}</div>
|
||||||
<div class="card-row action-row">
|
<div class="card-row action-row">
|
||||||
<el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
|
<el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
|
||||||
}}</el-button>
|
}}</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MobilePagination v-if="isMobile" :page="queryParams.pageNo" :limit="queryParams.pageSize" :total="total"
|
<MobilePagination v-if="isMobile" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||||
@update:page="val => queryParams.pageNo = val" @load="loadList" @loadPre="loadpreviousList" />
|
:total="total" :page-sizes="[10, 20, 30, 50]" @size-change="getList()" @load="getList()" @loadPre="getList()" />
|
||||||
|
|
||||||
<!-- ✅ PC 显示分页,移动端隐藏 -->
|
<!-- ✅ PC 显示分页,移动端隐藏 -->
|
||||||
<Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
<Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||||
@@ -413,15 +413,12 @@ function openHtml(item, id) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
const loadList = () => {
|
const loadList = () => {
|
||||||
if (queryParams.pageNo < Math.ceil(total.value / queryParams.pageSize)) {
|
|
||||||
queryParams.pageNo++
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadpreviousList = () => {
|
const loadpreviousList = () => {
|
||||||
if (queryParams.pageNo > 1) {
|
if (queryParams.pageNo > 1) {
|
||||||
queryParams.pageNo--
|
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -30,6 +30,9 @@
|
|||||||
<el-form-item label="绑定域名" prop="website">
|
<el-form-item label="绑定域名" prop="website">
|
||||||
<el-input v-model="formData.website" placeholder="请输入绑定域名" />
|
<el-input v-model="formData.website" placeholder="请输入绑定域名" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="租户状态" prop="status">
|
<el-form-item label="租户状态" prop="status">
|
||||||
<el-radio-group v-model="formData.status">
|
<el-radio-group v-model="formData.status">
|
||||||
<el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :value="dict.value">
|
<el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :value="dict.value">
|
||||||
@@ -96,6 +99,7 @@ const formData = ref({
|
|||||||
// 新增专属
|
// 新增专属
|
||||||
username: undefined,
|
username: undefined,
|
||||||
password: undefined,
|
password: undefined,
|
||||||
|
remark: undefined
|
||||||
|
|
||||||
})
|
})
|
||||||
const userData = ref({} as userApi.UserVO)
|
const userData = ref({} as userApi.UserVO)
|
||||||
|
|||||||
@@ -16,6 +16,10 @@
|
|||||||
<el-input v-model="queryParams.contactMobile" placeholder="请输入联系手机" clearable @keyup.enter="handleQuery"
|
<el-input v-model="queryParams.contactMobile" placeholder="请输入联系手机" clearable @keyup.enter="handleQuery"
|
||||||
class="!w-240px" />
|
class="!w-240px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery"
|
||||||
|
class="!w-240px" />
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="租户状态" prop="status">
|
<el-form-item label="租户状态" prop="status">
|
||||||
<el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable class="!w-240px">
|
<el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable class="!w-240px">
|
||||||
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
|
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
|
||||||
@@ -85,6 +89,7 @@
|
|||||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" />
|
||||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180" :formatter="dateFormatter" />
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180" :formatter="dateFormatter" />
|
||||||
<el-table-column label="操作" align="center" min-width="110" fixed="right">
|
<el-table-column label="操作" align="center" min-width="110" fixed="right">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
@@ -129,6 +134,8 @@ const queryParams = reactive({
|
|||||||
contactName: undefined,
|
contactName: undefined,
|
||||||
contactMobile: undefined,
|
contactMobile: undefined,
|
||||||
status: undefined,
|
status: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
|
||||||
createTime: []
|
createTime: []
|
||||||
})
|
})
|
||||||
const queryFormRef = ref() // 搜索的表单
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
|||||||
Reference in New Issue
Block a user