Skip to content

M
mengchangaigc
Commit 10cbeb65 authored by 黄同智's avatar 黄同智
Browse files
Options

上传视频的表单布局

parent 8ab764c7
Show whitespace changes
Inline Side-by-side
Showing with 107 additions and 13 deletions
apps/web-vue/src/views/resource/clip/components/UploadVideoDialog.vue
View file @ 10cbeb65
<template>
<div>
<el-button>open</el-button>
<el-dialog v-model="dialogVisible" title="Shipping address" width="1000" modal-class="xxxxx">
<el-dialog v-model="visible" title="Shipping address" width="1000" modal-class="xxxxx" align-center
:before-close="handleClose">
<template #title>
<span class="fs-18 font-bold">视频上传</span>
<div class="fs-18 font-bold py-10 pl-20">视频上传</div>
</template>
<div class="h-700 over-auto px-20 pb-20">
<el-form ref="formRef" :model="form" label-width="100">
<el-card shadow="hover">
<el-upload class="upload-demo" drag
......@@ -90,7 +89,8 @@
</el-form-item>
</section>
<section class="mt-20">
<div class="title mb-20">时间设置 <span class="fs-12 color-888 fw-500 ml-10">剪辑时间、授权有效期</span></div>
<div class="title mb-20">时间设置 <span class="fs-12 color-888 fw-500 ml-10">剪辑时间、授权有效期</span>
</div>
<el-form-item label="剪辑时间" prop="name">
<el-date-picker v-model="form.name" type="date" placeholder="请选择剪辑时间" />
</el-form-item>
......@@ -118,16 +118,91 @@
<div class="fs-12 color-888">设置查看权限（默认公开）、定时权限变更和消息提醒。</div>
</div>
</div>
<div class="flex-items-center gap-10">
<el-select v-model="mouldType" placeholder="选择预设模板" style="width: 200px" clearable>
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-button type="primary">+ 存为预设模板</el-button>
</div>
</section>
<section class="mt-20">
<div class="title mb-20">基础信息</div>
<el-form-item label="视频查看权限" prop="name">
<div>
<el-radio-group v-model="form.name">
<el-radio :value="1">公开（默认）</el-radio>
<el-radio :value="2">团队成员</el-radio>
<el-radio :value="3">小组成员</el-radio>
<el-radio :value="4">公共资源</el-radio>
<el-radio :value="5">指定范围</el-radio>
</el-radio-group>
<div class="fs-12 color-888">控制视频上传后哪些人可以查看该视频。</div>
</div>
</el-form-item>
<div class="flex">
<div class="flex-1">
<el-form-item label="指定团队" prop="name">
<el-select v-model="form.name" placeholder="请选择" clearable>
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="flex-1">
<el-form-item label="指定小组" prop="name">
<el-select v-model="form.name" placeholder="请选择" clearable>
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="flex-1">
<el-form-item label="指定人员" prop="name">
<el-select v-model="form.name" placeholder="请选择" clearable>
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</div>
</div>
</section>
<section class="mt-20">
<div class="title mb-20">定期权限<span class="fs-12 color-888 fw-500 ml-10">可选，到期后自动修改查看权限</span>
</div>
<el-form-item label="修改日期" prop="name">
<el-date-picker v-model="form.name" type="date" placeholder="请选择修改日期" />
<span class="fs-12 color-888 ml-10">将在所选日期 00:00 自动修改视频查看权限</span>
</el-form-item>
</section>
<section class="mt-20">
<div class="title mb-20">消息提醒</div>
<el-form-item label="接收人" prop="name">
<el-select v-model="form.name" placeholder="请选择接收人" clearable>
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="消息内容" prop="name">
<el-input v-model="form.name" :rows="2" type="textarea" placeholder="请输入消息内容" />
</el-form-item>
</section>
</el-card>
</el-form>
</el-dialog>
</div>
<template #footer>
<div class="px-20 pb-10 pt-10" style="border-top: 1px solid #eee;">
<el-button @click="handleConfirm">发布后，相同配置继续上传</el-button>
<el-button type="primary" @click="handleConfirm" plain>视频上传完毕，自动发布</el-button>
<el-button type="primary" @click="handleConfirm">发布</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const dialogVisible = ref(true)
const visible = defineModel<boolean>('visible', { required: true });
// 表单大类
const form = reactive<any>({
......@@ -135,6 +210,7 @@ const form = reactive<any>({
daterange: [],
goodNums: 866
})
const formRef = ref<any>(null)
const videoOptions = ref([
{
value: '1',
......@@ -214,7 +290,15 @@ const options = ref([
// 弹窗的取消和确定
const handleClose = (done: () => void) => {
if (!formRef.value) return;
formRef.value.resetFields();
done();
};
const handleConfirm = () => {
visible.value = false; // 关闭弹窗
};
</script>
<style lang="scss" scoped>
......@@ -235,11 +319,14 @@ const options = ref([
}
}
:deep(.xxxxx) {
.el-dialog {
border-radius: 10px;
padding: 0;
}
.el-dialog__footer {
padding: 0;
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/index.vue
View file @ 10cbeb65
......@@ -4,7 +4,7 @@
<div class="mt-20">
<div class="mb-20">
<el-button @click="switchCheck">{{ isCheck ? '取消选择' : '请选择' }}</el-button>
<el-button type="primary">上传文件</el-button>
<el-button type="primary" @click="openDialog">上传文件</el-button>
</div>
<div class="flex flex-wrap gap-20">
<el-checkbox-group v-model="checkedList" class="flex flex-wrap gap-20 w-full">
......@@ -16,7 +16,7 @@
</el-checkbox-group>
</div>
</div>
<UploadVideoDialog />
<UploadVideoDialog v-model:visible="dialogVisible" />
</div>
</template>
......@@ -34,6 +34,12 @@ const switchCheck = () => {
isCheck.value = !isCheck.value
checkedList.value = []
}
// 上传视频的弹窗内容
const dialogVisible =ref(false)
const openDialog = () => {
dialogVisible.value = true;
};
</script>
<style scoped lang="scss">
......
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