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 = () => {
findLastAction();
if (isDev()) {
// 测试将视频进度改为160
videoFirst.value[currentPlayMainIndex.value].currentTime = 170;
videoFirst.value[currentPlayMainIndex.value].currentTime = 50;
}
};
......@@ -326,6 +326,8 @@ const nextVideoToPlay = (status: boolean = true) => {
// 主视频播放完毕
const firstVideoEnded = (index: number) => {
if (videoFirst.value[index].ended) {
// 强制关闭自己的播放状态，防止loop生效
mainVideoPlayChange(false, index);
// 播放状态
emit('mainVideoListChange', {
index: index,
......@@ -345,8 +347,6 @@ const firstVideoEnded = (index: number) => {
videoKey: 'status',
videoValue: true,
});
// 强制关闭自己的播放状态，防止loop生效
mainVideoPlayChange(false);
// 最后一个视频是否是主视频
if (props.endVideoIsMain) {
// 找下一个
......
src/components/form/index.tsx
import { DataType } from '@/utils/tool';
import './index.less';
import { defineComponent, provide, ref } from 'vue';
import { defineComponent, provide, ref, watch } from 'vue';
export default defineComponent({
props: {
data: Object,
......@@ -21,19 +21,91 @@ export default defineComponent({
newRule.value[key].push(item);
});
});
console.log(newRule.value);
// 注入规则，提供给item使用
provide('leRules', rules);
provide('leRules', newRule);
};
//
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
emit('submit');
emit('submit', {
result: status,
firstError: message[0],
});
};
watch(props.data, () => {
formAgainValidation();
});
return () => (
<form class="le-form" onSubmit={onSubmit}>
{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({
},
setup(props, { emit, slots }) {
const leRules: { value: object } = inject('leRules');
return () => (
<div class="le-form-item">
{slots.default ? slots.default() : ''}
<div class="form-item-error">{/* */}</div>
</div>
);
const { name } = props;
return () => {
return (
<div class="le-form-item">
{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 () {
// 当前播放进度变化
const currentTimeChange = (index: number, value: number) => {
try {
// console.log(value, '当前主视频进度');
console.log(value, '当前主视频进度');
let row = mainVideoList.value[index];
// 剩余多少没有播放
let currentEsidueTime = row.total - value;
......@@ -576,7 +576,9 @@ export default function () {
// 创建url
res.data = {};
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 = [
{
url: url,
......@@ -593,11 +595,11 @@ export default function () {
// type: 3,
// play_time: 172,
// },
{
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
type: 3,
play_time: 172,
},
// {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// type: 3,
// play_time: 172,
// },
{
url: url,
type: 1,
......
src/pages/login/index.vue
......@@ -5,51 +5,7 @@
</div>
<div class="login-content">
<div class="label">登录账户</div>
<t-form
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">
<CustomForm ref="form" class="custom-login-form" :data="formData" :rules="FORM_RULES" @submit="onSubmit">
<CustomFormItem name="account">
<div class="form-item-box">
<div class="label required">账号</div>
......@@ -84,7 +40,7 @@
<Button type="submit" theme="green" class="reset-login-submit-btn">登录</Button>
</div>
</CustomFormItem>
</CustomForm> -->
</CustomForm>
</div>
</div>
</template>
......@@ -92,7 +48,6 @@
<script lang="ts" setup>
import CustomInput from '@/components/input/index.vue';
import Button from '@/components/Button.vue';
import { Form as TForm } from 'tdesign-vue-next';
import { computed, onMounted, reactive, ref } from 'vue';
import { show_message } from '@/utils/tool';
import { useStore } from 'vuex';
......@@ -135,8 +90,8 @@ const submitAccount = (item: any) => {
formData.password = item.password;
};
const onSubmit = async ({ validateResult, firstError }: any) => {
if (validateResult === true) {
const onSubmit = async ({ result, firstError }: any) => {
if (result === true) {
try {
loading.value = true;
let res: any = await UserLogin({
......@@ -209,7 +164,7 @@ onMounted(() => {
}
.custom-login-form {
margin-top: 40px;
.t-form__item {
.le-form-item {
.submit-box {
width: 100%;
.dja();
......
src/utils/Tdesign.ts
/*
* 组件库按需引入
*/
import {
Button as TButton,
FormItem as TFormItem,
Dialog as TDialog,
Progress as TProgress,
Upload as TUpload,
} from 'tdesign-vue-next';
import { Button as TButton, 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 {
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