<template>
|
<div class="container">
|
<Breadcrumb :items="['menu.form', 'menu.form.group']" />
|
<a-form ref="formRef" layout="vertical" :model="formData">
|
<a-space direction="vertical" :size="16">
|
<a-card class="general-card">
|
<template #title>
|
{{ $t('groupForm.title.video') }}
|
</template>
|
<a-row :gutter="80">
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.mode')"
|
field="video.mode"
|
>
|
<a-select :placeholder="$t('groupForm.placeholder.video.mode')">
|
<a-option value="custom">自定义</a-option>
|
<a-option value="mode1">模式1</a-option>
|
<a-option value="mode2">模式2</a-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.acquisition.resolution')"
|
field="video.acquisition.resolution"
|
>
|
<a-select
|
:placeholder="
|
$t('groupForm.placeholder.video.acquisition.resolution')
|
"
|
>
|
<a-option value="resolution1">分辨率1</a-option>
|
<a-option value="resolution2">分辨率2</a-option>
|
<a-option value="resolution3">分辨率3</a-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.acquisition.frameRate')"
|
field="video.acquisition.frameRate"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.acquisition.frameRate')
|
"
|
>
|
<template #append> fps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="80">
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.resolution')"
|
field="video.encoding.resolution"
|
>
|
<a-select
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.resolution')
|
"
|
>
|
<a-option value="resolution1">分辨率1</a-option>
|
<a-option value="resolution2">分辨率2</a-option>
|
<a-option value="resolution3">分辨率3</a-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.rate.min')"
|
field="video.encoding.rate.min"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.rate.min')
|
"
|
add-after="bps"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.rate.max')"
|
field="video.encoding.rate.max"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.rate.max')
|
"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="80">
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.rate.default')"
|
field="video.encoding.rate.default"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.rate.default')
|
"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.frameRate')"
|
field="video.encoding.frameRate"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.frameRate')
|
"
|
>
|
<template #append> fps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.video.encoding.profile')"
|
field="video.encoding.profile"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.video.encoding.profile')
|
"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-card>
|
<a-card class="general-card">
|
<template #title>
|
{{ $t('groupForm.title.audio') }}
|
</template>
|
<a-row :gutter="80">
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.audio.mode')"
|
field="audio.mode"
|
>
|
<a-select :placeholder="$t('groupForm.placeholder.audio.mode')">
|
<a-option value="custom">自定义</a-option>
|
<a-option value="mode1">模式1</a-option>
|
<a-option value="mode2">模式2</a-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.audio.acquisition.channels')"
|
field="audio.acquisition.channels"
|
>
|
<a-select
|
:placeholder="
|
$t('groupForm.placeholder.audio.acquisition.channels')
|
"
|
>
|
<a-option value="1">1</a-option>
|
<a-option value="2">2</a-option>
|
<a-option value="3">3</a-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.audio.encoding.channels')"
|
field="audio.encoding.channels"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.audio.encoding.channels')
|
"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="80">
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.audio.encoding.rate')"
|
field="audio.encoding.rate"
|
>
|
<a-input
|
:placeholder="$t('groupForm.placeholder.audio.encoding.rate')"
|
>
|
<template #append> bps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
|
<a-col :span="8">
|
<a-form-item
|
:label="$t('groupForm.form.label.audio.encoding.profile')"
|
field="audio.encoding.profile"
|
>
|
<a-input
|
:placeholder="
|
$t('groupForm.placeholder.audio.encoding.profile')
|
"
|
>
|
<template #append> fps </template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-card>
|
<a-card class="general-card" :bordered="false">
|
<template #title>
|
{{ $t('groupForm.title.description') }}
|
</template>
|
<a-form-item
|
:label="$t('groupForm.form.label.parameterDescription')"
|
field="audio.approvers"
|
>
|
<a-textarea
|
:placeholder="$t('groupForm.placeholder.description')"
|
/>
|
</a-form-item>
|
</a-card>
|
</a-space>
|
<div class="actions">
|
<a-space>
|
<a-button>
|
{{ $t('groupForm.reset') }}
|
</a-button>
|
<a-button type="primary" :loading="loading" @click="onSubmitClick">
|
{{ $t('groupForm.submit') }}
|
</a-button>
|
</a-space>
|
</div>
|
</a-form>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue';
|
import { FormInstance } from '@arco-design/web-vue/es/form';
|
import useLoading from '@/hooks/loading';
|
|
const formData = ref({});
|
const formRef = ref<FormInstance>();
|
const { loading, setLoading } = useLoading();
|
const onSubmitClick = async () => {
|
const res = await formRef.value?.validate();
|
if (!res) {
|
setLoading(true);
|
}
|
setTimeout(() => {
|
setLoading(false);
|
}, 1000);
|
};
|
</script>
|
|
<script lang="ts">
|
export default {
|
name: 'Group',
|
};
|
</script>
|
|
<style scoped lang="less">
|
.container {
|
padding: 0 20px 40px 20px;
|
overflow: hidden;
|
}
|
|
.actions {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 60px;
|
padding: 14px 20px 14px 0;
|
background: var(--color-bg-2);
|
text-align: right;
|
}
|
</style>
|
