Commit 29b696f119520c1649bee6ac31f1b37965cd9299

Authored by xp.Huang
2 parents 1a4eb284 a4ada4e0

Merge branch 'ft-dev' into 'main'

fix: 修复视频管理关闭时还有声音问题,和清除控制台报黄问题, fix: 修复个人资料头像不全问题和限制用户名称问题

See merge request huang/yun-teng-iot-front!219
1 import { FormSchema } from '/@/components/Table'; 1 import { FormSchema } from '/@/components/Table';
2 -import { phoneRule, emailRule } from '/@/utils/rules'; 2 +import { phoneRule, emailRule, ChineseRegVerify } from '/@/utils/rules';
3 3
4 export const formSchema: FormSchema[] = [ 4 export const formSchema: FormSchema[] = [
5 { 5 {
@@ -9,8 +9,10 @@ export const formSchema: FormSchema[] = [ @@ -9,8 +9,10 @@ export const formSchema: FormSchema[] = [
9 required: true, 9 required: true,
10 component: 'Input', 10 component: 'Input',
11 componentProps: { 11 componentProps: {
  12 + maxLength: 10,
12 placeholder: '请输入用户昵称', 13 placeholder: '请输入用户昵称',
13 }, 14 },
  15 + rules: ChineseRegVerify,
14 }, 16 },
15 { 17 {
16 field: 'phoneNumber', 18 field: 'phoneNumber',
@@ -24,28 +24,29 @@ @@ -24,28 +24,29 @@
24 > 24 >
25 <div class="change-avatar" style="text-align: center"> 25 <div class="change-avatar" style="text-align: center">
26 <div class="mb-2" style="font-weight: 700">个人头像</div> 26 <div class="mb-2" style="font-weight: 700">个人头像</div>
27 - <div style="text-align: center; width: 100%">  
28 - <Upload  
29 - style="width: 20vw"  
30 - name="avatar"  
31 - list-type="picture-card"  
32 - class="avatar-uploader"  
33 - :show-upload-list="false"  
34 - :customRequest="customUploadqrcodePic"  
35 - :before-upload="beforeUploadqrcodePic"  
36 - >  
37 - <img  
38 - style="text-align: center; border-radius: 50%"  
39 - v-if="peresonalPic"  
40 - :src="peresonalPic"  
41 - alt="avatar"  
42 - />  
43 - <div v-else>  
44 - <div style="margin-top: 5.2vh; margin-left: 3.21vw">  
45 - <PlusOutlined style="font-size: 30px" /> 27 + <div style="display: flex; align-items: center; justify-content: center; width: 35.6rem">
  28 + <div>
  29 + <Upload
  30 + name="avatar"
  31 + list-type="picture-card"
  32 + class="avatar-uploader"
  33 + :show-upload-list="false"
  34 + :customRequest="customUploadqrcodePic"
  35 + :before-upload="beforeUploadqrcodePic"
  36 + >
  37 + <img
  38 + style="border-radius: 50%; height: 8.75rem; width: 10rem"
  39 + v-if="peresonalPic"
  40 + :src="peresonalPic"
  41 + alt="avatar"
  42 + />
  43 + <div v-else>
  44 + <div style="margin-top: 5.2vh; margin-left: 3.21vw">
  45 + <PlusOutlined style="font-size: 30px" />
  46 + </div>
46 </div> 47 </div>
47 - </div>  
48 - </Upload> 48 + </Upload>
  49 + </div>
49 </div> 50 </div>
50 </div> 51 </div>
51 <Description 52 <Description
@@ -245,22 +246,9 @@ @@ -245,22 +246,9 @@
245 <style scoped lang="less"> 246 <style scoped lang="less">
246 .change-avatar { 247 .change-avatar {
247 :deep .ant-upload-select-picture-card { 248 :deep .ant-upload-select-picture-card {
248 - display: inherit;  
249 - float: none;  
250 - width: 35%;  
251 - height: 0;  
252 - padding-bottom: 35%;  
253 - margin: 0;  
254 -  
255 - // width: 8.6vw;  
256 - // height: 17vh;  
257 - // margin-right: 0.2vw;  
258 - // margin-bottom: 0.2vw;  
259 - text-align: center;  
260 - vertical-align: top;  
261 - background-color: #fafafa;  
262 - border: 1px dashed #d9d9d9;  
263 border-radius: 50%; 249 border-radius: 50%;
  250 + width: 10rem;
  251 + overflow: hidden;
264 cursor: pointer; 252 cursor: pointer;
265 transition: border-color 0.3s ease; 253 transition: border-color 0.3s ease;
266 } 254 }
@@ -65,6 +65,21 @@ export const EmailRegexp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a @@ -65,6 +65,21 @@ export const EmailRegexp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a
65 // 手机号正则 65 // 手机号正则
66 export const PhoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; 66 export const PhoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
67 67
  68 +//中文正则
  69 +export const ChineseRegVerify: Rule[] = [
  70 + {
  71 + required: true,
  72 + validator: (_, value: string) => {
  73 + const ChineseRegexp = /[\u4E00-\u9FA5]/;
  74 + if (!ChineseRegexp.test(value)) {
  75 + return Promise.reject('用户名只能是中文');
  76 + }
  77 + return Promise.resolve();
  78 + },
  79 + validateTrigger: 'blur',
  80 + },
  81 +];
  82 +
68 /** 83 /**
69 * 视频管理 84 * 视频管理
70 */ 85 */
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 > 11 >
12 <div class="video-sty"> 12 <div class="video-sty">
13 <div> 13 <div>
14 - <vue3videoPlay v-bind="options" :poster="videoPoster" /> 14 + <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" />
15 </div> 15 </div>
16 </div> 16 </div>
17 </BasicModal> 17 </BasicModal>
@@ -32,11 +32,14 @@ @@ -32,11 +32,14 @@
32 emits: ['success', 'register'], 32 emits: ['success', 'register'],
33 setup() { 33 setup() {
34 let options: any = reactive({}); 34 let options: any = reactive({});
  35 + const videoRef: any = ref(null);
  36 + const videoUrl = ref<String>('');
35 const videoPoster = ref(''); 37 const videoPoster = ref('');
36 const heightNum = ref(800); 38 const heightNum = ref(800);
37 const [register] = useModalInner(async (data) => { 39 const [register] = useModalInner(async (data) => {
38 if (data) { 40 if (data) {
39 if (data.record.videoUrl) { 41 if (data.record.videoUrl) {
  42 + videoUrl.value = data.record.videoUrl;
40 nextTick(() => { 43 nextTick(() => {
41 /** 44 /**
42 * options配置项(使用vue3-video-play插件) 45 * options配置项(使用vue3-video-play插件)
@@ -73,13 +76,18 @@ @@ -73,13 +76,18 @@
73 } 76 }
74 } 77 }
75 }); 78 });
76 - const handleCancel = () => {}; 79 + const handleCancel = () => {
  80 + //关闭暂停播放视频
  81 + videoRef.value.pause();
  82 + };
77 return { 83 return {
78 register, 84 register,
79 handleCancel, 85 handleCancel,
80 options, 86 options,
81 heightNum, 87 heightNum,
82 videoPoster, 88 videoPoster,
  89 + videoRef,
  90 + videoUrl,
83 }; 91 };
84 }, 92 },
85 }); 93 });
@@ -2,7 +2,6 @@ @@ -2,7 +2,6 @@
2 <div> 2 <div>
3 <BasicTable 3 <BasicTable
4 :rowSelection="{ type: 'checkbox' }" 4 :rowSelection="{ type: 'checkbox' }"
5 - @selection-change="useSelectionChange"  
6 @register="registerTable" 5 @register="registerTable"
7 :clickToRowSelect="false" 6 :clickToRowSelect="false"
8 > 7 >