简柏林 / thingskit-front · Commits

Commit aa2120d8f984f08f86784cf8ea87a8c811479590

Authored by xp.Huang
2 parents e0168be8 4af920f0

Merge branch 'ww' into 'main' 

fix: BUG in teambition

See merge request huang/yun-teng-iot-front!459
Inline Side-by-side
Showing 5 changed files with 89 additions and 187 deletions
@@ -40,7 +40,7 @@ VITE_GLOB_API_URL_PREFIX=/yt @@ -40,7 +40,7 @@ VITE_GLOB_API_URL_PREFIX=/yt
40 VITE_GLOB_CONFIGURATION = /thingskit-drawio 40 VITE_GLOB_CONFIGURATION = /thingskit-drawio
41 41
42 # Content Security Policy 42 # Content Security Policy
43 -VITE_GLOB_CONTENT_SECURITY_POLICY = true 43 +VITE_GLOB_CONTENT_SECURITY_POLICY = false
44 44
45 # Alarm Notify Polling Interval Time 45 # Alarm Notify Polling Interval Time
46 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000 46 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
1 <template> 1 <template>
2 <BasicModal 2 <BasicModal
3 - width="82vw"  
4 - :height="compHeight" 3 + width="80%"
5 v-bind="$attrs" 4 v-bind="$attrs"
6 @register="registerModal" 5 @register="registerModal"
7 @ok="handleSubmit" 6 @ok="handleSubmit"
  7 + title="个人信息"
8 :draggable="false" 8 :draggable="false"
9 - class="basic-modal"  
10 - className="{styles.headSetPop}" 9 + wrap-class-name="personal-info-modal"
11 > 10 >
12 - <div  
13 - style="  
14 - height: 62vh;  
15 - width: 120vw;  
16 - display: flex;  
17 - flex-direction: row;  
18 - align-items: center;  
19 - justify-content: space-between;  
20 - "  
21 - >  
22 - <div style="width: 29vw; height: 62vh; border: 1px solid #e9edf6; box-shadow: 0 0 5px -5px">  
23 - <div style="width: 29vw; height: 4vh; border: 1px solid #e9edf6"  
24 - ><p style="font-size: 17px; margin-top: 7px; margin-left: 10px">个人信息</p></div  
25 - >  
26 - <div class="change-avatar" style="text-align: center">  
27 - <div class="mb-2" style="font-weight: 700">个人头像</div>  
28 - <div style="display: flex; align-items: center; justify-content: center">  
29 - <div>  
30 - <Upload  
31 - name="avatar"  
32 - list-type="picture-card"  
33 - class="avatar-uploader"  
34 - :show-upload-list="false"  
35 - :customRequest="customUploadqrcodePic"  
36 - :before-upload="beforeUploadqrcodePic"  
37 - >  
38 - <img  
39 - style="border-radius: 50%; height: 8.75rem; width: 10rem"  
40 - v-if="peresonalPic || headerImg"  
41 - :src="peresonalPic || headerImg"  
42 - alt="avatar"  
43 - />  
44 - <div v-else>  
45 - <div>  
46 - <LoadingOutlined style="font-size: 30px" v-if="loading" />  
47 - <PlusOutlined v-else style="font-size: 30px" />  
48 - </div> 11 + <div class="flex">
  12 + <div class="flex flex-col w-1/2 border border-gray-200">
  13 + <div class="text-center cursor-pointer">
  14 + <div class="text-left text-lg border-gray-200 p-2 border">个人头像</div>
  15 + <div class="flex items-center justify-center mt-4">
  16 + <Upload
  17 + name="avatar"
  18 + list-type="picture-card"
  19 + class="round !flex justify-center items-center"
  20 + :show-upload-list="false"
  21 + :customRequest="customUpload"
  22 + :before-upload="beforeUpload"
  23 + >
  24 + <img
  25 + class="round"
  26 + v-if="personalPicture || headerImg"
  27 + :src="personalPicture || headerImg"
  28 + alt="avatar"
  29 + />
  30 + <div v-else>
  31 + <div>
  32 + <LoadingOutlined class="text-3xl" v-if="loading" />
  33 + <PlusOutlined v-else class="text-3xl" />
49 </div> 34 </div>
50 - </Upload>  
51 - </div> 35 + </div>
  36 + </Upload>
52 </div> 37 </div>
53 </div> 38 </div>
54 - <Description  
55 - class="mt-8"  
56 - :column="1"  
57 - :bordered="true"  
58 - :data="getPersonalDetailValue"  
59 - :schema="schema"  
60 - /> 39 +
  40 + <Description @register="registerDesc" class="mt-8 p-4" />
61 </div> 41 </div>
62 - <div  
63 - style="  
64 - width: 90vw;  
65 - height: 60vh;  
66 - border: 1px solid #e9edf6;  
67 - margin-top: -15px;  
68 - box-shadow: 0 0 5px -5px;  
69 - "  
70 - >  
71 - <div style="height: 4vh; border: 1px solid #e9edf6"  
72 - ><p style="font-size: 17px; margin-top: 7px; margin-left: 20px">基本资料</p></div  
73 - >  
74 - <div style="margin-left: 20px"> 42 + <div class="ml-4 border border-gray-200">
  43 + <div class="text-lg p-2 border border-gray-200"> 基本资料 </div>
  44 + <div class="ml-5">
75 <BasicForm @register="registerForm" /> 45 <BasicForm @register="registerForm" />
76 </div> 46 </div>
77 </div> 47 </div>
@@ -79,21 +49,22 @@ @@ -79,21 +49,22 @@
79 </BasicModal> 49 </BasicModal>
80 </template> 50 </template>
81 <script lang="ts"> 51 <script lang="ts">
82 - import { defineComponent, ref, computed } from 'vue'; 52 + import { defineComponent, ref, unref } from 'vue';
83 import { BasicModal, useModalInner } from '/@/components/Modal/index'; 53 import { BasicModal, useModalInner } from '/@/components/Modal/index';
84 import { BasicForm, useForm } from '/@/components/Form/index'; 54 import { BasicForm, useForm } from '/@/components/Form/index';
85 import { formSchema } from './config'; 55 import { formSchema } from './config';
86 - import { Description, DescItem } from '/@/components/Description/index'; 56 + import { Description, DescItem, useDescription } from '/@/components/Description/index';
87 import { uploadApi, personalPut } from '/@/api/personal/index'; 57 import { uploadApi, personalPut } from '/@/api/personal/index';
88 import { useMessage } from '/@/hooks/web/useMessage'; 58 import { useMessage } from '/@/hooks/web/useMessage';
89 - import { USER_INFO_KEY } from '/@/enums/cacheEnum';  
90 - import { getAuthCache } from '/@/utils/auth';  
91 import { Upload } from 'ant-design-vue'; 59 import { Upload } from 'ant-design-vue';
92 import { PlusOutlined } from '@ant-design/icons-vue'; 60 import { PlusOutlined } from '@ant-design/icons-vue';
93 import { useUserStore } from '/@/store/modules/user'; 61 import { useUserStore } from '/@/store/modules/user';
94 import type { FileItem } from '/@/components/Upload/src/typing'; 62 import type { FileItem } from '/@/components/Upload/src/typing';
95 import { LoadingOutlined } from '@ant-design/icons-vue'; 63 import { LoadingOutlined } from '@ant-design/icons-vue';
96 import headerImg from '/@/assets/images/logo.png'; 64 import headerImg from '/@/assets/images/logo.png';
  65 + import { getMyInfo } from '/@/api/sys/user';
  66 + import { UserInfoModel } from '/@/api/sys/model/userModel';
  67 + import { UserInfo } from '/#/store';
97 68
98 const schema: DescItem[] = [ 69 const schema: DescItem[] = [
99 { 70 {
@@ -121,46 +92,41 @@ @@ -121,46 +92,41 @@
121 label: '创建时间：', 92 label: '创建时间：',
122 }, 93 },
123 ]; 94 ];
124 - const mockData: Recordable = {  
125 - username: 'test',  
126 - phoneNumber: 'VB',  
127 - email: '123',  
128 - realName: '15695909xxx',  
129 - accountExpireTime: '190848757@qq.com',  
130 - createTime: '厦门市思明区',  
131 - }; 95 +
132 export default defineComponent({ 96 export default defineComponent({
133 name: 'Index', 97 name: 'Index',
134 components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined }, 98 components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
135 - emits: ['refreshPersonl', 'register'], 99 + emits: ['refreshPersonal', 'register'],
136 setup(_, { emit }) { 100 setup(_, { emit }) {
137 const loading = ref(false); 101 const loading = ref(false);
138 - const userInfo = getAuthCache(USER_INFO_KEY);  
139 const { createMessage } = useMessage(); 102 const { createMessage } = useMessage();
140 - const getPersonalValue: any = ref({});  
141 - const getPersonalDetailValue: any = ref({});  
142 - const updatePersonalData: any = ref({});  
143 - const getBackendV: any = ref({});  
144 - const getData: any = ref({});  
145 - const updataPersonlData: any = ref({}); 103 +
146 const userStore = useUserStore(); 104 const userStore = useUserStore();
147 - const peresonalPic = ref(); 105 + const personalPicture = ref<string>();
  106 +
  107 + const personalInfo = ref<UserInfoModel>();
  108 +
  109 + const [registerDesc, { setDescProps }] = useDescription({
  110 + schema,
  111 + column: 1,
  112 + bordered: true,
  113 + });
148 114
149 - const customUploadqrcodePic = async ({ file }) => {  
150 - if (beforeUploadqrcodePic(file)) {  
151 - peresonalPic.value = ''; 115 + const customUpload = async ({ file }) => {
  116 + if (beforeUpload(file)) {
  117 + personalPicture.value = '';
152 loading.value = true; 118 loading.value = true;
153 const formData = new FormData(); 119 const formData = new FormData();
154 formData.append('file', file); 120 formData.append('file', file);
155 const response = await uploadApi(formData); 121 const response = await uploadApi(formData);
156 if (response.fileStaticUri) { 122 if (response.fileStaticUri) {
157 - peresonalPic.value = response.fileStaticUri; 123 + personalPicture.value = response.fileStaticUri;
158 loading.value = false; 124 loading.value = false;
159 } 125 }
160 } 126 }
161 }; 127 };
162 128
163 - const beforeUploadqrcodePic = (file: FileItem) => { 129 + const beforeUpload = (file: FileItem) => {
164 const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; 130 const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
165 if (!isJpgOrPng) { 131 if (!isJpgOrPng) {
166 createMessage.error('只能上传图片文件!'); 132 createMessage.error('只能上传图片文件!');
@@ -176,97 +142,55 @@ @@ -176,97 +142,55 @@
176 showActionButtonGroup: false, 142 showActionButtonGroup: false,
177 schemas: formSchema, 143 schemas: formSchema,
178 }); 144 });
179 - const refreshCacheGetData = () => {  
180 - const getItem = window.localStorage.getItem('updateUserInfo');  
181 - const newItem = JSON.parse(getItem);  
182 - updataPersonlData.value = newItem;  
183 - }; 145 +
184 const [registerModal, { closeModal }] = useModalInner(async () => { 146 const [registerModal, { closeModal }] = useModalInner(async () => {
185 - refreshCacheGetData();  
186 - const userInfo = userStore.getUserInfo;  
187 - try {  
188 - if (updataPersonlData.value != null) {  
189 - (peresonalPic.value = updataPersonlData.value.avatar),  
190 - setFieldsValue({  
191 - realName: updataPersonlData.value.realName,  
192 - phoneNumber: updataPersonlData.value.phoneNumber,  
193 - email: updataPersonlData.value.email,  
194 - });  
195 - getPersonalDetailValue.value = updataPersonlData.value;  
196 - } else {  
197 - if (userInfo) {  
198 - getPersonalDetailValue.value = userInfo;  
199 - peresonalPic.value = userInfo.avatar;  
200 - setFieldsValue({  
201 - realName: userInfo.realName,  
202 - phoneNumber: userInfo.phoneNumber,  
203 - email: userInfo.email,  
204 - });  
205 - }  
206 - }  
207 - } catch (e) {  
208 - return e;  
209 - }  
210 - if (Object.keys(updatePersonalData.value).length != 0) {  
211 - getPersonalDetailValue.value = updatePersonalData.value;  
212 - peresonalPic.value = updatePersonalData.value.avatar;  
213 - setFieldsValue({  
214 - realName: updatePersonalData.value.realName,  
215 - phoneNumber: updatePersonalData.value.phoneNumber,  
216 - email: updatePersonalData.value.email,  
217 - });  
218 - } 147 + const info = await getMyInfo();
  148 + personalInfo.value = info;
  149 + personalPicture.value = info.avatar;
  150 + setFieldsValue(info);
  151 + setDescProps({ data: info });
219 }); 152 });
  153 +
220 const handleSubmit = async () => { 154 const handleSubmit = async () => {
221 - const getUserInfo = await userInfo;  
222 - getPersonalValue.value = await validate();  
223 - getPersonalValue.value.id = getUserInfo.userId;  
224 - getPersonalValue.value.username = getBackendV.value.username;  
225 - getPersonalValue.value.avatar = peresonalPic.value;  
226 - getData.value = await personalPut(getPersonalValue.value);  
227 - console.log(getData.value.realName);  
228 - userStore.setUserInfo(getData.value);  
229 - updatePersonalData.value = getData.value; 155 + const value = await validate();
  156 + const userInfo = userStore.getUserInfo;
  157 + const record = await personalPut({
  158 + ...value,
  159 + id: userInfo.userId,
  160 + avatar: unref(personalPicture),
  161 + });
  162 +
  163 + userStore.setUserInfo(record as unknown as UserInfo);
230 createMessage.success('修改成功'); 164 createMessage.success('修改成功');
231 - const setUpdateUserInfo = JSON.stringify(getData.value);  
232 - window.localStorage.setItem('updateUserInfo', setUpdateUserInfo);  
233 closeModal(); 165 closeModal();
234 resetFields(); 166 resetFields();
235 - emit('refreshPersonl', updatePersonalData.value); 167 + emit('refreshPersonal', record);
236 }; 168 };
237 - const compHeight = computed(() => {  
238 - return 1000;  
239 - }); 169 +
240 return { 170 return {
241 - peresonalPic,  
242 - beforeUploadqrcodePic,  
243 - customUploadqrcodePic,  
244 - compHeight, 171 + personalInfo,
  172 + registerDesc,
  173 + personalPicture,
  174 + beforeUpload,
  175 + customUpload,
245 handleSubmit, 176 handleSubmit,
246 - getPersonalDetailValue,  
247 - schema,  
248 registerModal, 177 registerModal,
249 registerForm, 178 registerForm,
250 loading, 179 loading,
251 - mockData,  
252 headerImg, 180 headerImg,
253 }; 181 };
254 }, 182 },
255 }); 183 });
256 </script> 184 </script>
257 <style scoped lang="less"> 185 <style scoped lang="less">
258 - .change-avatar {  
259 - :deep .ant-upload-select-picture-card {  
260 - border-radius: 50%;  
261 - width: 10rem;  
262 - height: 10rem;  
263 - overflow: hidden;  
264 - cursor: pointer;  
265 - transition: border-color 0.3s ease;  
266 - } 186 + .round {
  187 + border-radius: 50%;
267 } 188 }
268 189
269 - .headSetPop :global(.ant-modal-header) {  
270 - padding: 27px 0 !important; 190 + .personal-info-modal:global(.ant-upload.ant-upload-select-picture-card) {
  191 + border-radius: 50%;
  192 + width: 160px;
  193 + height: 160px;
  194 + margin: 0 !important;
271 } 195 }
272 </style> 196 </style>
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 </Dropdown> 53 </Dropdown>
54 <LockAction @register="register" /> 54 <LockAction @register="register" />
55 <PersonalChild 55 <PersonalChild
56 - @refreshPersonl="refreshPersonlFunc" 56 + @refreshPersonal="refreshPersonalFunc"
57 ref="personalRef" 57 ref="personalRef"
58 @register="registerPersonal" 58 @register="registerPersonal"
59 /> 59 />
@@ -156,7 +156,7 @@ @@ -156,7 +156,7 @@
156 }; 156 };
157 refreshCacheGetData(); 157 refreshCacheGetData();
158 158
159 - const refreshPersonlFunc = (v) => { 159 + const refreshPersonalFunc = (v) => {
160 refreshPersonlData.avatar = v.avatar; 160 refreshPersonlData.avatar = v.avatar;
161 refreshPersonlData.realName = v.realName; 161 refreshPersonlData.realName = v.realName;
162 }; 162 };
@@ -168,7 +168,7 @@ @@ -168,7 +168,7 @@
168 return { 168 return {
169 updataPersonlData, 169 updataPersonlData,
170 refreshPersonlData, 170 refreshPersonlData,
171 - refreshPersonlFunc, 171 + refreshPersonalFunc,
172 personalRef, 172 personalRef,
173 registerPersonal, 173 registerPersonal,
174 openPersonalFunc, 174 openPersonalFunc,
@@ -14,7 +14,6 @@ @@ -14,7 +14,6 @@
14 v-if="treeData.length" 14 v-if="treeData.length"
15 checkable 15 checkable
16 toolbar 16 toolbar
17 - :expandedKeys="treeExpandData"  
18 ref="treeRef" 17 ref="treeRef"
19 :treeData="treeData" 18 :treeData="treeData"
20 :replace-fields="{ title: 'name', key: 'id' }" 19 :replace-fields="{ title: 'name', key: 'id' }"
@@ -52,7 +51,6 @@ @@ -52,7 +51,6 @@
52 components: { BasicDrawer, BasicForm, BasicTree, Spin }, 51 components: { BasicDrawer, BasicForm, BasicTree, Spin },
53 emits: ['success', 'register'], 52 emits: ['success', 'register'],
54 setup(_, { emit }) { 53 setup(_, { emit }) {
55 - const treeExpandData = ref<string[]>([]);  
56 const isUpdate = ref<boolean>(true); 54 const isUpdate = ref<boolean>(true);
57 const treeData = ref<TreeData[]>([]); 55 const treeData = ref<TreeData[]>([]);
58 const roleMenus = ref<string[]>([]); 56 const roleMenus = ref<string[]>([]);
@@ -100,10 +98,6 @@ @@ -100,10 +98,6 @@
100 // 获取全部的菜单 98 // 获取全部的菜单
101 const menuListModel = await getMenuList(); 99 const menuListModel = await getMenuList();
102 treeData.value = transformName(menuListModel as unknown as TreeData[]); 100 treeData.value = transformName(menuListModel as unknown as TreeData[]);
103 - //修复角色菜单新增-全部展开问题-只展开第一级即可  
104 - await nextTick();  
105 - const getExpandKeys = unref(treeData).map((item) => item.id);  
106 - treeExpandData.value = getExpandKeys;  
107 } 101 }
108 102
109 const keys = await getPermissionByRole(roleType); 103 const keys = await getPermissionByRole(roleType);
@@ -123,9 +117,6 @@ @@ -123,9 +117,6 @@
123 //通过角色id去获取角色对应的菜单的ids 117 //通过角色id去获取角色对应的菜单的ids
124 originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); 118 originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
125 119
126 - const getExpandKeys = unref(treeData).map((item) => item.id);  
127 - treeExpandData.value = getExpandKeys;  
128 -  
129 await nextTick(); 120 await nextTick();
130 treeRef.value.setCheckedKeys(roleMenus.value); 121 treeRef.value.setCheckedKeys(roleMenus.value);
131 setFieldsValue(data.record); 122 setFieldsValue(data.record);
@@ -246,7 +237,6 @@ @@ -246,7 +237,6 @@
246 treeRef, 237 treeRef,
247 handleCheckClick, 238 handleCheckClick,
248 allCheckedKeys, 239 allCheckedKeys,
249 - treeExpandData,  
250 }; 240 };
251 }, 241 },
252 }); 242 });
@@ -13,7 +13,6 @@ @@ -13,7 +13,6 @@
13 <BasicTree 13 <BasicTree
14 v-if="treeData.length" 14 v-if="treeData.length"
15 :treeData="treeData" 15 :treeData="treeData"
16 - :expandedKeys="treeExpandData"  
17 :replaceFields="{ title: 'name', key: 'id' }" 16 :replaceFields="{ title: 'name', key: 'id' }"
18 :checkedKeys="roleMenus" 17 :checkedKeys="roleMenus"
19 @check="handleCheckClick" 18 @check="handleCheckClick"
@@ -21,7 +20,6 @@ @@ -21,7 +20,6 @@
21 toolbar 20 toolbar
22 ref="treeRef" 21 ref="treeRef"
23 title="权限分配" 22 title="权限分配"
24 - :defaultExpandAll="true"  
25 /> 23 />
26 </Spin> 24 </Spin>
27 </template> 25 </template>
@@ -53,8 +51,6 @@ @@ -53,8 +51,6 @@
53 components: { BasicDrawer, BasicForm, BasicTree, Spin }, 51 components: { BasicDrawer, BasicForm, BasicTree, Spin },
54 emits: ['success', 'register'], 52 emits: ['success', 'register'],
55 setup(_, { emit }) { 53 setup(_, { emit }) {
56 - const treeExpandData = ref<string[]>([]);  
57 -  
58 const isUpdate = ref(true); 54 const isUpdate = ref(true);
59 const treeData = ref<TreeItem[]>([]); 55 const treeData = ref<TreeItem[]>([]);
60 const roleMenus = ref<string[]>([]); 56 const roleMenus = ref<string[]>([]);
@@ -100,10 +96,6 @@ @@ -100,10 +96,6 @@
100 // 获取全部的菜单 96 // 获取全部的菜单
101 const menuListModel = await getMenuList(); 97 const menuListModel = await getMenuList();
102 treeData.value = transformName(menuListModel as unknown as TreeData[]); 98 treeData.value = transformName(menuListModel as unknown as TreeData[]);
103 - //修复角色菜单新增-全部展开问题-只展开第一级即可  
104 - await nextTick();  
105 - const getExpandKeys = unref(treeData).map((item) => item.id);  
106 - treeExpandData.value = getExpandKeys;  
107 } 99 }
108 100
109 const keys = await getPermissionByRole(roleType); 101 const keys = await getPermissionByRole(roleType);
@@ -123,9 +115,6 @@ @@ -123,9 +115,6 @@
123 //通过角色id去获取角色对应的菜单的ids 115 //通过角色id去获取角色对应的菜单的ids
124 originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); 116 originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
125 117
126 - const getExpandKeys = unref(treeData).map((item) => item.id);  
127 - treeExpandData.value = getExpandKeys;  
128 -  
129 await nextTick(); 118 await nextTick();
130 treeRef.value.setCheckedKeys(roleMenus.value); 119 treeRef.value.setCheckedKeys(roleMenus.value);
131 setFieldsValue(data.record); 120 setFieldsValue(data.record);
@@ -250,7 +239,6 @@ @@ -250,7 +239,6 @@
250 roleMenus, 239 roleMenus,
251 treeRef, 240 treeRef,
252 handleCheckClick, 241 handleCheckClick,
253 - treeExpandData,  
254 }; 242 };
255 }, 243 },
256 }); 244 });