Skip to content

L
live-management-web
Commit 057391f4 by haojie
Options

form表单改为自定义组件

parent 650d8ce0
Showing with 127 additions and 79 deletions
src/components/AddVideoPlay.vue
...@@ -228,7 +228,7 @@ const confirm = () => { ...@@ -228,7 +228,7 @@ const confirm = () => {
findLastAction(); findLastAction();
if (isDev()) { if (isDev()) {
// 测试将视频进度改为160 // 测试将视频进度改为160
videoFirst.value[currentPlayMainIndex.value].currentTime = 170; videoFirst.value[currentPlayMainIndex.value].currentTime = 50;
} }
}; };
...@@ -326,6 +326,8 @@ const nextVideoToPlay = (status: boolean = true) => { ...@@ -326,6 +326,8 @@ const nextVideoToPlay = (status: boolean = true) => {
// 主视频播放完毕 // 主视频播放完毕
const firstVideoEnded = (index: number) => { const firstVideoEnded = (index: number) => {
if (videoFirst.value[index].ended) { if (videoFirst.value[index].ended) {
// 强制关闭自己的播放状态，防止loop生效
mainVideoPlayChange(false, index);
// 播放状态 // 播放状态
emit('mainVideoListChange', { emit('mainVideoListChange', {
index: index, index: index,
...@@ -345,8 +347,6 @@ const firstVideoEnded = (index: number) => { ...@@ -345,8 +347,6 @@ const firstVideoEnded = (index: number) => {
videoKey: 'status', videoKey: 'status',
videoValue: true, videoValue: true,
}); });
// 强制关闭自己的播放状态，防止loop生效
mainVideoPlayChange(false);
// 最后一个视频是否是主视频 // 最后一个视频是否是主视频
if (props.endVideoIsMain) { if (props.endVideoIsMain) {
// 找下一个 // 找下一个
......
src/components/form/index.tsx
import { DataType } from '@/utils/tool'; import { DataType } from '@/utils/tool';
import './index.less'; import './index.less';
import { defineComponent, provide, ref } from 'vue'; import { defineComponent, provide, ref, watch } from 'vue';
export default defineComponent({ export default defineComponent({
props: { props: {
data: Object, data: Object,
...@@ -21,19 +21,91 @@ export default defineComponent({ ...@@ -21,19 +21,91 @@ export default defineComponent({
newRule.value[key].push(item); newRule.value[key].push(item);
}); });
}); });
console.log(newRule.value);
// 注入规则，提供给item使用 // 注入规则，提供给item使用
provide('leRules', rules); provide('leRules', newRule);
}; };
// //
ewriteRules(); ewriteRules();
const onSubmit = () => { // 表单校验
const formValidation = (rule: any, value: any) => {
// 必填时
if (rule.required) {
if (value) {
return true;
} else {
return false;
}
}
// 正则时
};
// data改变重新校验状态
const formAgainValidation = () => {
const { data } = props;
// 校验 // 校验
const keys = Object.keys(newRule.value);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const list = newRule.value[key];
if (DataType(list, 'array')) {
for (let j = 0; j < list.length; j++) {
// 单条规则
const rule = list[j];
if (DataType(rule, 'object')) {
// 校验
if (formValidation(rule, data[key])) {
rule.leShow = false;
} else {
rule.leShow = true;
}
}
}
}
}
};
// 提交
const onSubmit = (event: any) => {
const { data } = props;
// 阻止表单跳转
event.preventDefault();
// 校验
const keys = Object.keys(newRule.value);
// 记录状态
let status = true;
// 记录第一个message
let message = [];
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const list = newRule.value[key];
if (DataType(list, 'array')) {
for (let j = 0; j < list.length; j++) {
// 单条规则
const rule = list[j];
if (DataType(rule, 'object')) {
// 第一条不通过的
if (!formValidation(rule, data[key])) {
rule.leShow = true;
status = false;
message.push(rule.message);
break;
}
}
}
}
}
// 通知tab_panel // 通知tab_panel
emit('submit'); emit('submit', {
result: status,
firstError: message[0],
});
}; };
watch(props.data, () => {
formAgainValidation();
});
return () => ( return () => (
<form class="le-form" onSubmit={onSubmit}> <form class="le-form" onSubmit={onSubmit}>
{slots.default ? slots.default() : ''} {slots.default ? slots.default() : ''}
......
src/components/formItem/index.less
.le-form-item {
padding-bottom: 12px;
.le-form-item-tip {
height: 22px;
.form-item-error {
color: #e34d59;
font-size: 12px;
}
}
}
src/components/formItem/index.tsx
...@@ -6,11 +6,26 @@ export default defineComponent({ ...@@ -6,11 +6,26 @@ export default defineComponent({
}, },
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const leRules: { value: object } = inject('leRules'); const leRules: { value: object } = inject('leRules');
return () => ( const { name } = props;
<div class="le-form-item"> return () => {
{slots.default ? slots.default() : ''} return (
<div class="form-item-error">{/* */}</div> <div class="le-form-item">
</div> {slots.default ? slots.default() : ''}
); <div class="le-form-item-tip">
{leRules && leRules.value[name]
? leRules.value[name].map((item: any) =>
item.leShow ? (
<div class={[`form-item-${item.type}`]} key={item.message}>
{item.message}
</div>
) : (
''
),
)
: ''}
</div>
</div>
);
};
}, },
}); });
src/pages/OnlyVideoLive/useScript.ts
...@@ -279,7 +279,7 @@ export default function () { ...@@ -279,7 +279,7 @@ export default function () {
// 当前播放进度变化 // 当前播放进度变化
const currentTimeChange = (index: number, value: number) => { const currentTimeChange = (index: number, value: number) => {
try { try {
// console.log(value, '当前主视频进度'); console.log(value, '当前主视频进度');
let row = mainVideoList.value[index]; let row = mainVideoList.value[index];
// 剩余多少没有播放 // 剩余多少没有播放
let currentEsidueTime = row.total - value; let currentEsidueTime = row.total - value;
...@@ -576,7 +576,9 @@ export default function () { ...@@ -576,7 +576,9 @@ export default function () {
// 创建url // 创建url
res.data = {}; res.data = {};
let url = let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4'; 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
// let url =
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
let list = [ let list = [
{ {
url: url, url: url,
...@@ -593,11 +595,11 @@ export default function () { ...@@ -593,11 +595,11 @@ export default function () {
// type: 3, // type: 3,
// play_time: 172, // play_time: 172,
// }, // },
{ // {
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
type: 3, // type: 3,
play_time: 172, // play_time: 172,
}, // },
{ {
url: url, url: url,
type: 1, type: 1,
......
src/pages/login/index.vue
...@@ -5,51 +5,7 @@ ...@@ -5,51 +5,7 @@
</div> </div>
<div class="login-content"> <div class="login-content">
<div class="label">登录账户</div> <div class="label">登录账户</div>
<t-form <CustomForm ref="form" class="custom-login-form" :data="formData" :rules="FORM_RULES" @submit="onSubmit">
ref="form"
class="custom-login-form"
:data="formData"
:rules="FORM_RULES"
:colon="true"
:label-width="0"
@submit="onSubmit"
>
<t-form-item name="account">
<div class="form-item-box">
<div class="label required">账号</div>
<CustomInput
placeholder=""
:needSelect="true"
:selectList="rememberList.list"
v-model="formData.account"
@submitAccount="submitAccount"
align="left"
className="reset-login-input"
></CustomInput>
</div>
</t-form-item>
<t-form-item name="password">
<div class="form-item-box">
<div class="label required">请输入密码</div>
<CustomInput
placeholder=""
className="reset-login-input"
type="password"
v-model="formData.password"
align="left"
></CustomInput>
</div>
</t-form-item>
<t-form-item>
<CheckBox class="remember-password-box" v-model="remember">记住密码</CheckBox>
</t-form-item>
<t-form-item>
<div class="submit-box">
<Button type="submit" theme="green" class="reset-login-submit-btn">登录</Button>
</div>
</t-form-item>
</t-form>
<!-- <CustomForm ref="form" class="custom-login-form" :data="formData" :rules="FORM_RULES" @submit="onSubmit">
<CustomFormItem name="account"> <CustomFormItem name="account">
<div class="form-item-box"> <div class="form-item-box">
<div class="label required">账号</div> <div class="label required">账号</div>
...@@ -84,7 +40,7 @@ ...@@ -84,7 +40,7 @@
<Button type="submit" theme="green" class="reset-login-submit-btn">登录</Button> <Button type="submit" theme="green" class="reset-login-submit-btn">登录</Button>
</div> </div>
</CustomFormItem> </CustomFormItem>
</CustomForm> --> </CustomForm>
</div> </div>
</div> </div>
</template> </template>
...@@ -92,7 +48,6 @@ ...@@ -92,7 +48,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import CustomInput from '@/components/input/index.vue'; import CustomInput from '@/components/input/index.vue';
import Button from '@/components/Button.vue'; import Button from '@/components/Button.vue';
import { Form as TForm } from 'tdesign-vue-next';
import { computed, onMounted, reactive, ref } from 'vue'; import { computed, onMounted, reactive, ref } from 'vue';
import { show_message } from '@/utils/tool'; import { show_message } from '@/utils/tool';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
...@@ -135,8 +90,8 @@ const submitAccount = (item: any) => { ...@@ -135,8 +90,8 @@ const submitAccount = (item: any) => {
formData.password = item.password; formData.password = item.password;
}; };
const onSubmit = async ({ validateResult, firstError }: any) => { const onSubmit = async ({ result, firstError }: any) => {
if (validateResult === true) { if (result === true) {
try { try {
loading.value = true; loading.value = true;
let res: any = await UserLogin({ let res: any = await UserLogin({
...@@ -209,7 +164,7 @@ onMounted(() => { ...@@ -209,7 +164,7 @@ onMounted(() => {
} }
.custom-login-form { .custom-login-form {
margin-top: 40px; margin-top: 40px;
.t-form__item { .le-form-item {
.submit-box { .submit-box {
width: 100%; width: 100%;
.dja(); .dja();
......
src/utils/Tdesign.ts
/* /*
* 组件库按需引入 * 组件库按需引入
*/ */
import { import { Button as TButton, Dialog as TDialog, Progress as TProgress, Upload as TUpload } from 'tdesign-vue-next';
Button as TButton,
FormItem as TFormItem,
Dialog as TDialog,
Progress as TProgress,
Upload as TUpload,
} from 'tdesign-vue-next';
const components = [TButton, TFormItem, TDialog, TProgress, TUpload]; const components = [TButton, TDialog, TProgress, TUpload];
export default { export default {
install(app) { install(app) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment