调整样式

This commit is contained in:
Flow 2025-06-11 17:23:56 +08:00
parent e3358736c3
commit 4fef437728
6 changed files with 133 additions and 71 deletions

2
.env
View File

@ -8,7 +8,7 @@ VITE_PORT=8080
VITE_OPEN=true VITE_OPEN=true
# 租户开关 # 租户开关
VITE_APP_TENANT_ENABLE=false VITE_APP_TENANT_ENABLE=true
# 验证码的开关 # 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true VITE_APP_CAPTCHA_ENABLE=true

View File

@ -6,23 +6,26 @@
<div class="device-info"> <div class="device-info">
<!-- 设备名称和操作按钮区域 --> <!-- 设备名称和操作按钮区域 -->
<div class="name-section"> <div class="name-section">
<h3 class="device-name">{{ deviceInfo.devicename }}</h3> <div class="name-with-detail">
<!-- 详情和数据按钮 --> <h3 class="device-name">{{ deviceInfo.devicename }}</h3>
<div class="button-group">
<el-button <el-button
type="primary" type="info"
size="small" size="small"
class="detail-btn" class="detail-btn"
text text
@click="handleAction('details')" @click="handleAction('details')"
> >
详情 <el-icon><View /></el-icon>
</el-button> </el-button>
</div>
<!-- 数据按钮 -->
<div class="button-group">
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
class="data-btn" class="data-btn"
text :icon="DataLine"
plain
@click="handleAction('data')" @click="handleAction('data')"
> >
数据 数据
@ -95,7 +98,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps, defineEmits } from 'vue' import { defineProps, defineEmits } from 'vue'
import { Delete } from '@element-plus/icons-vue' import { Delete, View, DataLine } from '@element-plus/icons-vue'
// //
const props = defineProps({ const props = defineProps({
@ -229,7 +232,13 @@ const getDeviceTypeName = (type: string) => {
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
flex: 1; flex: 1;
min-width: 0; /* 防止子元素溢出 */ min-width: 0;
}
.name-with-detail {
display: flex;
align-items: center;
gap: 10px;
} }
/* 设备名称样式 */ /* 设备名称样式 */
@ -239,10 +248,10 @@ const getDeviceTypeName = (type: string) => {
color: #303133; color: #303133;
font-weight: 600; font-weight: 600;
transition: color 0.3s ease; transition: color 0.3s ease;
white-space: nowrap; /* 防止文字换行 */ white-space: nowrap;
overflow: hidden; /* 超出部分隐藏 */ overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */ text-overflow: ellipsis;
max-width: 150px; /* 最大宽度 */ max-width: 120px; /* 稍微减小最大宽度,为按钮留出空间 */
} }
/* 设备名称悬停效果 */ /* 设备名称悬停效果 */
@ -391,4 +400,8 @@ const getDeviceTypeName = (type: string) => {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.detail-btn .el-icon {
font-size: 20px; /* 调整图标大小 */
}
</style> </style>

View File

@ -1,12 +1,6 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
@ -18,31 +12,41 @@
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" /> <el-input v-model="formData.name" placeholder="请输入姓名" />
</el-form-item> </el-form-item>
<el-form-item label="地址" prop="address"> <el-form-item label="身份证号" prop="idcard">
<el-input v-model="formData.address" placeholder="请输入地址" /> <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机构ID" prop="orgid"> <el-form-item label="机构ID" prop="orgid">
<el-input v-model="formData.orgid" placeholder="请输入机构ID" /> <el-input v-model="formData.orgid" placeholder="请输入机构ID" />
</el-form-item> </el-form-item>
<el-form-item label="机构名称" prop="orgname"> <el-form-item label="机构名称" prop="orgname">
<el-input v-model="formData.orgname" placeholder="请输入机构名称" /> <el-input v-model="formData.orgname" placeholder="请输入机构名称" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="家庭组号" prop="familyid"> <el-form-item label="家庭组号" prop="familyid">
<el-input v-model="formData.familyid" placeholder="请输入家庭组号" /> <el-input v-model="formData.familyid" placeholder="请输入家庭组号" />
</el-form-item> </el-form-item>
<el-form-item label="家庭关系" prop="familyrelation"> <el-form-item label="家庭关系" prop="familyrelation">
<el-input v-model="formData.familyrelation" placeholder="请输入家庭关系" /> <el-input v-model="formData.familyrelation" placeholder="请输入家庭关系" />
</el-form-item> </el-form-item>
<el-form-item label="身份证号" prop="idcard"> </el-col>
<el-input v-model="formData.idcard" placeholder="请输入身份证号" /> <el-col :span="24">
</el-form-item> <el-form-item label="地址" prop="address">
<el-form-item label="创建人" prop="createby"> <div class="flex items-center gap-2">
<el-input v-model="formData.createby" placeholder="请输入创建人" /> <el-cascader
</el-form-item> v-model="selectedOptions"
<el-form-item label="更新人" prop="updateby"> :options="options"
<el-input v-model="formData.updateby" placeholder="请输入更新人" /> @change="handleAddressChange"
placeholder="请选择省/市/区"
clearable
class="w-[500px]"
/>
<el-input
v-model="formData.detailAddress"
placeholder="请输入详细地址"
class="w-[400px]"
/>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -56,13 +60,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { PersonApi, PersonVO } from '@/api/person' import { PersonApi, PersonVO } from '@/api/person'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import {provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data"
/** 用户基本信息 表单 */ /** 用户基本信息 表单 */
defineOptions({ name: 'PersonForm' }) defineOptions({ name: 'PersonForm' })
const userdata = ref()//
const { t } = useI18n() // const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
const dialogVisible = ref(false) // const dialogVisible = ref(false) //
const dialogTitle = ref('') // const dialogTitle = ref('') //
const formLoading = ref(false) // 12 const formLoading = ref(false) // 12
@ -72,7 +81,8 @@ const formData = ref({
phone: undefined, phone: undefined,
password: undefined, password: undefined,
name: undefined, name: undefined,
address: undefined, address: '',
detailAddress: '',
orgid: undefined, orgid: undefined,
orgname: undefined, orgname: undefined,
familyid: undefined, familyid: undefined,
@ -93,8 +103,42 @@ const formRules = reactive({
}) })
const formRef = ref() // Ref const formRef = ref() // Ref
const selectedOptions = ref<string[]>([]) //
const options = ref<CascaderOption[]>(regionData as unknown as CascaderOption[])
interface CascaderOption {
value: string
label: string
children?: CascaderOption[]
}
/** 处理地址变化 */
const handleAddressChange = (value: any) => {
if (value && value.length === 3) {
const address = codeToText[value[0]] + '/' + codeToText[value[1]] + '/' + codeToText[value[2]]
if (formData.value.detailAddress) {
formData.value.address = address + '/' + formData.value.detailAddress
} else {
formData.value.address = address
}
}
}
//
watch(() => formData.value.detailAddress, (newValue) => {
if (selectedOptions.value && selectedOptions.value.length === 3) {
const address = codeToText[selectedOptions.value[0]] + '/' + codeToText[selectedOptions.value[1]] + '/' + codeToText[selectedOptions.value[2]]
if (newValue) {
formData.value.address = address + '/' + newValue
} else {
formData.value.address = address
}
}
})
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number, userProfile?: any) => {
userdata.value = userProfile
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
@ -104,6 +148,27 @@ const open = async (type: string, id?: number) => {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await PersonApi.getPerson(id) formData.value = await PersonApi.getPerson(id)
//
if (formData.value.address) {
const addressParts = formData.value.address.split('/')
if (addressParts.length >= 3) {
//
const provinceCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[0])
let cityCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[1])
if(provinceCode == '12'){
cityCode = '1201'
}
const areaCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[2])
if (provinceCode && cityCode && areaCode) {
selectedOptions.value = [provinceCode, cityCode, areaCode]
}
//
if (addressParts.length > 3) {
formData.value.detailAddress = addressParts.slice(3).join('/')
}
}
}
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
@ -124,11 +189,13 @@ const submitForm = async () => {
if (formType.value === 'create') { if (formType.value === 'create') {
// //
data.createtime = datetime data.createtime = datetime
data.createby = userdata.value.nickname
await PersonApi.createPerson(data) await PersonApi.createPerson(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
// //
data.updatetime = datetime data.updatetime = datetime
data.updateby = userdata.value.nickname
await PersonApi.updatePerson(data) await PersonApi.updatePerson(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
@ -147,7 +214,8 @@ const resetForm = () => {
phone: undefined, phone: undefined,
password: undefined, password: undefined,
name: undefined, name: undefined,
address: undefined, address: '',
detailAddress: '',
orgid: undefined, orgid: undefined,
orgname: undefined, orgname: undefined,
familyid: undefined, familyid: undefined,
@ -159,6 +227,7 @@ const resetForm = () => {
createby: undefined, createby: undefined,
updateby: undefined, updateby: undefined,
} }
selectedOptions.value = []
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>

View File

@ -95,13 +95,6 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
width="120" width="120"
/> />
<el-table-column label="家庭关系" align="center" prop="familyrelation" width="100">
<template #default="scope">
<el-tag :type="getFamilyRelationType(scope.row.familyrelation)">
{{ getFamilyRelationLabel(scope.row.familyrelation) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="是否会员" align="center" prop="isvip" width="100"> <el-table-column label="是否会员" align="center" prop="isvip" width="100">
<template #default="scope"> <template #default="scope">
<el-tag :type="scope.row.isvip === 1 ? 'success' : 'info'"> <el-tag :type="scope.row.isvip === 1 ? 'success' : 'info'">
@ -116,18 +109,6 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
min-width="180" min-width="180"
/> />
<el-table-column
label="创建人"
align="center"
prop="createby"
width="100"
/>
<el-table-column
label="更新人"
align="center"
prop="updateby"
width="100"
/>
<el-table-column label="操作" align="center" width="160" fixed="right"> <el-table-column label="操作" align="center" width="160" fixed="right">
<template #default="scope"> <template #default="scope">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
@ -212,8 +193,8 @@ const getList = async () => {
loading.value = true loading.value = true
try { try {
// //
const userProfile = await getUserProfile() userProfile.value = await getUserProfile()
queryParams.orgid = userProfile.dept.id queryParams.orgid = userProfile.value.dept.id
const data = await PersonApi.getPersonPage(queryParams) const data = await PersonApi.getPersonPage(queryParams)
list.value = data.list list.value = data.list
total.value = data.total total.value = data.total
@ -237,7 +218,7 @@ const resetQuery = () => {
/** 添加/修改操作 */ /** 添加/修改操作 */
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
formRef.value?.open(type, id) formRef.value?.open(type, id, userProfile.value)
} }
const handleSuccess = () => { const handleSuccess = () => {

View File

@ -35,12 +35,12 @@
@change="handleAddressChange" @change="handleAddressChange"
placeholder="请选择省/市/区" placeholder="请选择省/市/区"
clearable clearable
class="w-[450px]" class="w-[500px]"
/> />
<el-input <el-input
v-model="formData.detailAddress" v-model="formData.detailAddress"
placeholder="请输入详细地址" placeholder="请输入详细地址"
class="w-[450px]" class="w-[400px]"
/> />
</div> </div>
</el-form-item> </el-form-item>

View File

@ -42,9 +42,6 @@
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> </el-button>
<el-button type="danger" plain @click="toggleExpandAll">
<Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</ContentWrap> </ContentWrap>
@ -58,14 +55,16 @@
:default-expand-all="isExpandAll" :default-expand-all="isExpandAll"
v-if="refreshTable" v-if="refreshTable"
> >
<el-table-column prop="name" label="机构名称" /> <el-table-column prop="orgid" label="机构ID" align="center"/>
<el-table-column prop="name" label="机构名称" align="center"/>
<el-table-column prop="orgaddress" label="地址" align="center" width="500"/>
<el-table-column prop="leader" label="负责人"> <el-table-column prop="leader" label="负责人">
<template #default="scope"> <template #default="scope">
{{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }} {{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sort" label="排序" /> <el-table-column prop="sort" label="排序" align="center"/>
<el-table-column prop="status" label="状态"> <el-table-column prop="status" label="状态" align="center">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template> </template>
@ -73,11 +72,11 @@
<el-table-column <el-table-column
label="创建时间" label="创建时间"
align="center" align="center"
prop="createTime" prop="createTime"
width="180"
:formatter="dateFormatter" :formatter="dateFormatter"
width="180"
/> />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center" width="180">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link