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