调整样式

2025-06-11 17:23:56 +08:00 · 2025-06-11 17:23:56 +08:00 · 4fef437728
commit 4fef437728
parent e3358736c3
6 changed files with 133 additions and 71 deletions
--- a/.env
+++ b/.env
@ -8,7 +8,7 @@ VITE_PORT=8080
 VITE_OPEN=true

 # 租户开关
-VITE_APP_TENANT_ENABLE=false
+VITE_APP_TENANT_ENABLE=true

 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=true
--- a/src/views/devices/devices_cards.vue
+++ b/src/views/devices/devices_cards.vue
@ -6,23 +6,26 @@
      <div class="device-info">
        <!-- 设备名称和操作按钮区域 -->
        <div class="name-section">
-          <h3 class="device-name">{{ deviceInfo.devicename }}</h3>   
-          <!-- 详情和数据按钮 -->
-          <div class="button-group">
+          <div class="name-with-detail">
+            <h3 class="device-name">{{ deviceInfo.devicename }}</h3>
            <el-button 
-              type="primary" 
+              type="info" 
              size="small"
              class="detail-btn"
              text
              @click="handleAction('details')"
            >
-              详情
+              <el-icon><View /></el-icon>
            </el-button>
+          </div>
+          <!-- 数据按钮 -->
+          <div class="button-group">
            <el-button 
-              type="primary" 
+              type="primary"
              size="small"
              class="data-btn"
-              text
+              :icon="DataLine"
+              plain
              @click="handleAction('data')"
            >
              数据
@ -95,7 +98,7 @@

 <script lang="ts" setup>
 import { defineProps, defineEmits } from 'vue'
-import { Delete } from '@element-plus/icons-vue'
+import { Delete, View, DataLine } from '@element-plus/icons-vue'

 // 定义组件属性
 const props = defineProps({
@ -229,7 +232,13 @@ const getDeviceTypeName = (type: string) => {
  flex-direction: column;
  gap: 10px;
  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;
  font-weight: 600;
  transition: color 0.3s ease;
-  white-space: nowrap; /* 防止文字换行 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 显示省略号 */
-  max-width: 150px; /* 最大宽度 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px; /* 稍微减小最大宽度，为按钮留出空间 */
 }

 /* 设备名称悬停效果 */
@ -391,4 +400,8 @@ const getDeviceTypeName = (type: string) => {
  display: flex;
  gap: 10px;
 }
+
+.detail-btn .el-icon {
+  font-size: 20px;  /* 调整图标大小 */
+}
 </style>
--- a/src/views/person/PersonFrom.vue
+++ b/src/views/person/PersonFrom.vue
@ -1,12 +1,6 @@
 <template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
@ -18,31 +12,41 @@
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" />
          </el-form-item>
-          <el-form-item label="地址" prop="address">
-            <el-input v-model="formData.address" placeholder="请输入地址" />
+          <el-form-item label="身份证号" prop="idcard">
+            <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
          </el-form-item>
+        </el-col>
+        <el-col :span="12">
          <el-form-item label="机构ID" prop="orgid">
            <el-input v-model="formData.orgid" placeholder="请输入机构ID" />
          </el-form-item>
          <el-form-item label="机构名称" prop="orgname">
            <el-input v-model="formData.orgname" placeholder="请输入机构名称" />
          </el-form-item>
-        </el-col>
-        <el-col :span="12">
          <el-form-item label="家庭组号" prop="familyid">
            <el-input v-model="formData.familyid" placeholder="请输入家庭组号" />
          </el-form-item>
          <el-form-item label="家庭关系" prop="familyrelation">
            <el-input v-model="formData.familyrelation" placeholder="请输入家庭关系" />
          </el-form-item>
-          <el-form-item label="身份证号" prop="idcard">
-            <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
-          </el-form-item>
-          <el-form-item label="创建人" prop="createby">
-            <el-input v-model="formData.createby" placeholder="请输入创建人" />
-          </el-form-item>
-          <el-form-item label="更新人" prop="updateby">
-            <el-input v-model="formData.updateby" placeholder="请输入更新人" />
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="地址" prop="address">
+            <div class="flex items-center gap-2">
+              <el-cascader
+                v-model="selectedOptions"
+                :options="options"
+                @change="handleAddressChange"
+                placeholder="请选择省/市/区"
+                clearable
+                class="w-[500px]"
+              />
+              <el-input
+                v-model="formData.detailAddress"
+                placeholder="请输入详细地址"
+                class="w-[400px]"
+              />
+            </div>
          </el-form-item>
        </el-col>
      </el-row>
@ -56,13 +60,18 @@
 <script setup lang="ts">
 import { PersonApi, PersonVO } from '@/api/person'
 import dayjs from 'dayjs'
+import {provinceAndCityData,
+pcTextArr,
+  regionData,
+  pcaTextArr,
+  codeToText,
+} from "element-china-area-data"

 /** 用户基本信息 表单 */
 defineOptions({ name: 'PersonForm' })
-
+const userdata = ref()//用户信息
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@ -72,7 +81,8 @@ const formData = ref({
  phone: undefined,
  password: undefined,
  name: undefined,
-  address: undefined,
+  address: '',
+  detailAddress: '',
  orgid: undefined,
  orgname: undefined,
  familyid: undefined,
@ -93,8 +103,42 @@ const formRules = reactive({
 })
 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
  dialogTitle.value = t('action.' + type)
  formType.value = type
@ -104,6 +148,27 @@ const open = async (type: string, id?: number) => {
    formLoading.value = true
    try {
      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 {
      formLoading.value = false
    }
@ -124,11 +189,13 @@ const submitForm = async () => {
    if (formType.value === 'create') {
      // 新增时设置创建时间
      data.createtime = datetime
+      data.createby = userdata.value.nickname
      await PersonApi.createPerson(data)
      message.success(t('common.createSuccess'))
    } else {
      // 修改时只更新更新时间
      data.updatetime = datetime
+      data.updateby = userdata.value.nickname
      await PersonApi.updatePerson(data)
      message.success(t('common.updateSuccess'))
    }
@ -147,7 +214,8 @@ const resetForm = () => {
    phone: undefined,
    password: undefined,
    name: undefined,
-    address: undefined,
+    address: '',
+    detailAddress: '',
    orgid: undefined,
    orgname: undefined,
    familyid: undefined,
@ -159,6 +227,7 @@ const resetForm = () => {
    createby: undefined,
    updateby: undefined,
  }
+  selectedOptions.value = []
  formRef.value?.resetFields()
 }
 </script>
--- a/src/views/person/index.vue
+++ b/src/views/person/index.vue
@ -95,13 +95,6 @@
            :show-overflow-tooltip="true"
            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">
            <template #default="scope">
              <el-tag :type="scope.row.isvip === 1 ? 'success' : 'info'">
@ -116,18 +109,6 @@
            :show-overflow-tooltip="true"
            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">
            <template #default="scope">
              <div class="flex items-center justify-center">
@ -212,8 +193,8 @@ const getList = async () => {
  loading.value = true
  try {
    //首先获取用户信息
-    const userProfile = await getUserProfile()
-    queryParams.orgid = userProfile.dept.id
+    userProfile.value = await getUserProfile()
+    queryParams.orgid = userProfile.value.dept.id
    const data = await PersonApi.getPersonPage(queryParams)
    list.value = data.list
    total.value = data.total
@ -237,7 +218,7 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value?.open(type, id)
+  formRef.value?.open(type, id, userProfile.value)
 }

 const handleSuccess = () => {
--- a/src/views/system/dept/DeptForm.vue
+++ b/src/views/system/dept/DeptForm.vue
@ -35,12 +35,12 @@
            @change="handleAddressChange"
            placeholder="请选择省/市/区"
            clearable
-            class="w-[450px]"
+            class="w-[500px]"
          />
          <el-input
            v-model="formData.detailAddress"
            placeholder="请输入详细地址"
-            class="w-[450px]"
+            class="w-[400px]"
          />
        </div>
      </el-form-item>
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -42,9 +42,6 @@
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
-        <el-button type="danger" plain @click="toggleExpandAll">
-          <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
-        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
@ -58,14 +55,16 @@
      :default-expand-all="isExpandAll"
      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="负责人">
        <template #default="scope">
          {{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
        </template>
      </el-table-column>
-      <el-table-column prop="sort" label="排序" />
-      <el-table-column prop="status" label="状态">
+      <el-table-column prop="sort" label="排序" align="center"/>
+      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
@ -73,11 +72,11 @@
      <el-table-column
        label="创建时间"
        align="center"
-        prop="createTime"
-        width="180"
+        prop="createTime" 
        :formatter="dateFormatter"
+        width="180"
      />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button
            link