Bläddra i källkod

perf(views): 优化主题色显示异常问题

wangshun 1 dag sedan
förälder
incheckning
0eb7c48883

+ 2 - 2
src/views/create-customer/CreateCustomer.vue

@@ -13,10 +13,10 @@ import type { CreateCustomer, FormRules, RegisterGatewayForm, UseGuideStepItem }
 const useForm = reactive<CreateCustomer>({
   orgName: '',
   logo: '',
-  themeColor: '#32bac0',
+  themeColor: '#32BAC0',
   id: undefined,
   imageUrl: '',
-  selectedColor: '#e2550d',
+  selectedColor: '#E2550D',
   leaseTerm: [dayjs(), dayjs()],
   stationsNumber: 0,
   dataValidityPeriod: '',

+ 23 - 14
src/views/create-customer/EstablishOrganization.vue

@@ -55,8 +55,8 @@ const equipmentType = ref<EquipmentTypeItem[]>([]);
 const props = defineProps<UseGuideStepItemProps<CreateCustomer>>();
 const colorStyle: ColorStyle[] = [
   {
-    background: 'background:#32bac0',
-    border: 'border:1px solid #32bac0',
+    background: 'background:#32BAC0',
+    border: 'border:1px solid #32BAC0',
     color: '#32BAC0',
     index: 0,
   },
@@ -202,17 +202,27 @@ const getInfoListByOrg = () => {
     if (props.form.id) {
       equipmentLimitationsList.value = [];
       const data = await getInfoListByOrgId(props.form.id);
-      data.forEach((item) => {
-        if (item.deviceGlobalId === -1) {
-          props.form.stationsNumber = item.upperLimit;
-        }
-        if (item.deviceGlobalId !== -1) {
-          equipmentLimitationsList.value.push({
-            deviceGlobalId: item.deviceGlobalId,
-            upperLimit: item.upperLimit,
-          });
-        }
-      });
+      setTimeout(() => {
+        setColorPrimary?.(props.form.themeColor);
+      }, 500);
+      if (data.length) {
+        data.forEach((item) => {
+          if (item.deviceGlobalId === -1) {
+            props.form.stationsNumber = item.upperLimit;
+          }
+          if (item.deviceGlobalId !== -1) {
+            equipmentLimitationsList.value.push({
+              deviceGlobalId: item.deviceGlobalId,
+              upperLimit: item.upperLimit,
+            });
+          }
+        });
+      } else {
+        equipmentLimitationsList.value.push({
+          deviceGlobalId: undefined,
+          upperLimit: 0,
+        });
+      }
     }
   });
 };
@@ -232,7 +242,6 @@ onMounted(() => {
     equipmentType.value = await groupList({
       dataType: 1,
     });
-    getInfoListByOrg();
   });
 });
 </script>

+ 32 - 7
src/views/organization-manage/OrganizationManage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue';
+import { computed, inject, onMounted, reactive, ref, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
@@ -8,14 +8,16 @@ import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import { useRequest } from '@/hooks/request';
 import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
-import { getDownloadLogo, getOrganizationAllList, getOrgInfo } from '@/api';
+import { getDownloadLogo, getLoginData, getOrganizationAllList, getOrgInfo } from '@/api';
 import { OperatePermission } from '@/utils/permission-type';
+import { SET_COLOR_PRIMARY } from '@/constants/inject-key';
 
 import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
 
 import type { FormInstance } from 'ant-design-vue';
 import type { CreateCustomer, FormRules, OrganizationListItem, RegisterGatewayForm } from '@/types';
 
+const setColorPrimary = inject(SET_COLOR_PRIMARY, undefined);
 const { booleanPermission } = useUserInfoStore();
 const organizationOpen = ref<boolean>(false);
 const establishOrganizationRef = useTemplateRef('establishOrganization');
@@ -29,10 +31,10 @@ const modalComponentRef = useTemplateRef('modalComponent');
 const useForm = reactive<CreateCustomer>({
   orgName: '',
   logo: '',
-  themeColor: '#32bac0',
+  themeColor: '#32BAC0',
   id: undefined,
   imageUrl: '',
-  selectedColor: '#e2550d',
+  selectedColor: '#E2550D',
   leaseTerm: [dayjs(), dayjs()],
   stationsNumber: 0,
   dataValidityPeriod: '',
@@ -118,7 +120,7 @@ const addOrganization = () => {
   useForm.leaseTerm = [dayjs(), dayjs()];
   useForm.dataValidityPeriod = '';
   useForm.stationsNumber = 0;
-  useForm.selectedColor = '#e2550d';
+  useForm.selectedColor = '#E2550D';
   useForm.imageUrl = '';
 };
 const addQuery = () => {
@@ -129,6 +131,19 @@ const addReset = () => {
   getOrganizationAll();
 };
 
+const getFormattedDate = () => {
+  const date = new Date(); // 获取当前时间
+  const year = date.getFullYear(); // 年(四位数)
+
+  // 月(补零处理:1-12 → 01-12)
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+
+  // 日(补零处理:1-31 → 01-31)
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`; // 拼接成指定格式
+};
+
 const organizationEditor = (id: number) => {
   organizationOpen.value = true;
   organizationTitle.value = false;
@@ -141,7 +156,7 @@ const organizationEditor = (id: number) => {
     const colorList = ['#32BAC0', '#256AFE', '#00A94D', '#7866FF'];
     if (colorList.includes(themeColor)) {
       useForm.themeColor = themeColor;
-      useForm.selectedColor = '#e2550d';
+      useForm.selectedColor = '#E2550D';
     } else {
       useForm.selectedColor = themeColor;
       useForm.themeColor = themeColor;
@@ -150,7 +165,10 @@ const organizationEditor = (id: number) => {
     useForm.orgName = orgName;
 
     useForm.logo = logo;
-    useForm.leaseTerm = [dayjs(startTenancy, 'YYYY-MM-DD'), dayjs(endTenancy, 'YYYY-MM-DD')];
+    useForm.leaseTerm = [
+      dayjs(startTenancy ? startTenancy : getFormattedDate(), 'YYYY-MM-DD'),
+      dayjs(endTenancy ? endTenancy : getFormattedDate(), 'YYYY-MM-DD'),
+    ];
     useForm.dataValidityPeriod = dataValidityPeriod;
   });
 };
@@ -162,6 +180,13 @@ const clickOrganizationChange = () => {
   getOrganizationAll();
 };
 const cancelOrganization = () => {
+  handleRequest(async () => {
+    const { orgThemeColor } = await getLoginData();
+    setTimeout(() => {
+      setColorPrimary?.(orgThemeColor);
+    }, 500);
+  });
+
   organizationOpen.value = false;
 };
 const saveOrganization = async () => {