简柏林 / 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 40 VITE_GLOB_CONFIGURATION = /thingskit-drawio
41 41
42 42 # Content Security Policy
43   -VITE_GLOB_CONTENT_SECURITY_POLICY = true
  43 +VITE_GLOB_CONTENT_SECURITY_POLICY = false
44 44
45 45 # Alarm Notify Polling Interval Time
46 46 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
... ...
1 1 <template>
2 2 <BasicModal
3   - width="82vw"
4   - :height="compHeight"
  3 + width="80%"
5 4 v-bind="$attrs"
6 5 @register="registerModal"
7 6 @ok="handleSubmit"
  7 + title="个人信息"
8 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 34 </div>
50   - </Upload>
51   - </div>
  35 + </div>
  36 + </Upload>
52 37 </div>
53 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 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 45 <BasicForm @register="registerForm" />
76 46 </div>
77 47 </div>
... ... @@ -79,21 +49,22 @@
79 49 </BasicModal>
80 50 </template>
81 51 <script lang="ts">
82   - import { defineComponent, ref, computed } from 'vue';
  52 + import { defineComponent, ref, unref } from 'vue';
83 53 import { BasicModal, useModalInner } from '/@/components/Modal/index';
84 54 import { BasicForm, useForm } from '/@/components/Form/index';
85 55 import { formSchema } from './config';
86   - import { Description, DescItem } from '/@/components/Description/index';
  56 + import { Description, DescItem, useDescription } from '/@/components/Description/index';
87 57 import { uploadApi, personalPut } from '/@/api/personal/index';
88 58 import { useMessage } from '/@/hooks/web/useMessage';
89   - import { USER_INFO_KEY } from '/@/enums/cacheEnum';
90   - import { getAuthCache } from '/@/utils/auth';
91 59 import { Upload } from 'ant-design-vue';
92 60 import { PlusOutlined } from '@ant-design/icons-vue';
93 61 import { useUserStore } from '/@/store/modules/user';
94 62 import type { FileItem } from '/@/components/Upload/src/typing';
95 63 import { LoadingOutlined } from '@ant-design/icons-vue';
96 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 69 const schema: DescItem[] = [
99 70 {
... ... @@ -121,46 +92,41 @@
121 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 96 export default defineComponent({
133 97 name: 'Index',
134 98 components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
135   - emits: ['refreshPersonl', 'register'],
  99 + emits: ['refreshPersonal', 'register'],
136 100 setup(_, { emit }) {
137 101 const loading = ref(false);
138   - const userInfo = getAuthCache(USER_INFO_KEY);
139 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 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 118 loading.value = true;
153 119 const formData = new FormData();
154 120 formData.append('file', file);
155 121 const response = await uploadApi(formData);
156 122 if (response.fileStaticUri) {
157   - peresonalPic.value = response.fileStaticUri;
  123 + personalPicture.value = response.fileStaticUri;
158 124 loading.value = false;
159 125 }
160 126 }
161 127 };
162 128
163   - const beforeUploadqrcodePic = (file: FileItem) => {
  129 + const beforeUpload = (file: FileItem) => {
164 130 const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
165 131 if (!isJpgOrPng) {
166 132 createMessage.error('只能上传图片文件!');
... ... @@ -176,97 +142,55 @@
176 142 showActionButtonGroup: false,
177 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 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 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 164 createMessage.success('修改成功');
231   - const setUpdateUserInfo = JSON.stringify(getData.value);
232   - window.localStorage.setItem('updateUserInfo', setUpdateUserInfo);
233 165 closeModal();
234 166 resetFields();
235   - emit('refreshPersonl', updatePersonalData.value);
  167 + emit('refreshPersonal', record);
236 168 };
237   - const compHeight = computed(() => {
238   - return 1000;
239   - });
  169 +
240 170 return {
241   - peresonalPic,
242   - beforeUploadqrcodePic,
243   - customUploadqrcodePic,
244   - compHeight,
  171 + personalInfo,
  172 + registerDesc,
  173 + personalPicture,
  174 + beforeUpload,
  175 + customUpload,
245 176 handleSubmit,
246   - getPersonalDetailValue,
247   - schema,
248 177 registerModal,
249 178 registerForm,
250 179 loading,
251   - mockData,
252 180 headerImg,
253 181 };
254 182 },
255 183 });
256 184 </script>
257 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 196 </style>
... ...
... ... @@ -53,7 +53,7 @@
53 53 </Dropdown>
54 54 <LockAction @register="register" />
55 55 <PersonalChild
56   - @refreshPersonl="refreshPersonlFunc"
  56 + @refreshPersonal="refreshPersonalFunc"
57 57 ref="personalRef"
58 58 @register="registerPersonal"
59 59 />
... ... @@ -156,7 +156,7 @@
156 156 };
157 157 refreshCacheGetData();
158 158
159   - const refreshPersonlFunc = (v) => {
  159 + const refreshPersonalFunc = (v) => {
160 160 refreshPersonlData.avatar = v.avatar;
161 161 refreshPersonlData.realName = v.realName;
162 162 };
... ... @@ -168,7 +168,7 @@
168 168 return {
169 169 updataPersonlData,
170 170 refreshPersonlData,
171   - refreshPersonlFunc,
  171 + refreshPersonalFunc,
172 172 personalRef,
173 173 registerPersonal,
174 174 openPersonalFunc,
... ...
... ... @@ -14,7 +14,6 @@
14 14 v-if="treeData.length"
15 15 checkable
16 16 toolbar
17   - :expandedKeys="treeExpandData"
18 17 ref="treeRef"
19 18 :treeData="treeData"
20 19 :replace-fields="{ title: 'name', key: 'id' }"
... ... @@ -52,7 +51,6 @@
52 51 components: { BasicDrawer, BasicForm, BasicTree, Spin },
53 52 emits: ['success', 'register'],
54 53 setup(_, { emit }) {
55   - const treeExpandData = ref<string[]>([]);
56 54 const isUpdate = ref<boolean>(true);
57 55 const treeData = ref<TreeData[]>([]);
58 56 const roleMenus = ref<string[]>([]);
... ... @@ -100,10 +98,6 @@
100 98 // 获取全部的菜单
101 99 const menuListModel = await getMenuList();
102 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 103 const keys = await getPermissionByRole(roleType);
... ... @@ -123,9 +117,6 @@
123 117 //通过角色id去获取角色对应的菜单的ids
124 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 120 await nextTick();
130 121 treeRef.value.setCheckedKeys(roleMenus.value);
131 122 setFieldsValue(data.record);
... ... @@ -246,7 +237,6 @@
246 237 treeRef,
247 238 handleCheckClick,
248 239 allCheckedKeys,
249   - treeExpandData,
250 240 };
251 241 },
252 242 });
... ...
... ... @@ -13,7 +13,6 @@
13 13 <BasicTree
14 14 v-if="treeData.length"
15 15 :treeData="treeData"
16   - :expandedKeys="treeExpandData"
17 16 :replaceFields="{ title: 'name', key: 'id' }"
18 17 :checkedKeys="roleMenus"
19 18 @check="handleCheckClick"
... ... @@ -21,7 +20,6 @@
21 20 toolbar
22 21 ref="treeRef"
23 22 title="权限分配"
24   - :defaultExpandAll="true"
25 23 />
26 24 </Spin>
27 25 </template>
... ... @@ -53,8 +51,6 @@
53 51 components: { BasicDrawer, BasicForm, BasicTree, Spin },
54 52 emits: ['success', 'register'],
55 53 setup(_, { emit }) {
56   - const treeExpandData = ref<string[]>([]);
57   -
58 54 const isUpdate = ref(true);
59 55 const treeData = ref<TreeItem[]>([]);
60 56 const roleMenus = ref<string[]>([]);
... ... @@ -100,10 +96,6 @@
100 96 // 获取全部的菜单
101 97 const menuListModel = await getMenuList();
102 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 101 const keys = await getPermissionByRole(roleType);
... ... @@ -123,9 +115,6 @@
123 115 //通过角色id去获取角色对应的菜单的ids
124 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 118 await nextTick();
130 119 treeRef.value.setCheckedKeys(roleMenus.value);
131 120 setFieldsValue(data.record);
... ... @@ -250,7 +239,6 @@
250 239 roleMenus,
251 240 treeRef,
252 241 handleCheckClick,
253   - treeExpandData,
254 242 };
255 243 },
256 244 });
... ...