mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 11:56:46 +08:00
fix:限制直播封面图片上传大小，添加直播关闭弹框清空问题
This commit is contained in:
wuyx
@@ -3,151 +3,91 @@
|
||||
<div @click="openDrawer">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<a-drawer
|
||||
:visible="visible"
|
||||
class="drawerStyle addliveDrawer"
|
||||
width="1000"
|
||||
title="添加直播"
|
||||
placement="right"
|
||||
>
|
||||
<a-drawer :visible="visible" class="drawerStyle addliveDrawer" width="1000" title="添加直播" placement="right">
|
||||
<div class="drawerMain">
|
||||
<div class="header">
|
||||
<div class="headerTitle">
|
||||
{{ taskIndex >= 0 ? "编辑" : "添加" }}直播
|
||||
</div>
|
||||
<img
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
<img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer" />
|
||||
</div>
|
||||
<div class="contentMain">
|
||||
<div class="main_left">
|
||||
<div class="main_item">
|
||||
<div class="signbox">
|
||||
<div class="sign">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">直播名称：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-input
|
||||
v-model:value="formData.liveName"
|
||||
style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入直播名称"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<a-input v-model:value="formData.liveName" style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入直播名称" :maxlength="20" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_item" style="margin-top: -10px">
|
||||
<div class="signbox">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">直播链接：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-input
|
||||
v-model:value="formData.liveLink"
|
||||
style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入直播链接"
|
||||
:maxlength="100"
|
||||
/>
|
||||
<a-input v-model:value="formData.liveLink" style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入直播链接" :maxlength="100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main_item">
|
||||
<div class="signbox">
|
||||
<div class="sign">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">直播时间：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-range-picker
|
||||
:show-time="{ format: 'HH:mm' }"
|
||||
:disabled-date="disabledDate"
|
||||
|
||||
style="width: 400px; height: 40px; border-radius: 8px"
|
||||
v-model:value="dateTime"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
valueFormat="YYYY-MM-DD HH:mm"
|
||||
@change="timeChange"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
<a-range-picker :show-time="{ format: 'HH:mm' }" :disabled-date="disabledDate"
|
||||
style="width: 400px; height: 40px; border-radius: 8px" v-model:value="dateTime" format="YYYY-MM-DD HH:mm"
|
||||
valueFormat="YYYY-MM-DD HH:mm" @change="timeChange" :placeholder="[' 开始时间', ' 结束时间']" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_item">
|
||||
<div class="signbox">
|
||||
<div class="sign">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">直播时长：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="300"
|
||||
:precision="0"
|
||||
style="width: 400px; height: 40px; border-radius: 8px"
|
||||
v-model:value="formData.liveDuration"
|
||||
></a-input-number>
|
||||
<a-input-number :min="0" :max="300" :precision="0" style="width: 400px; height: 40px; border-radius: 8px"
|
||||
v-model:value="formData.liveDuration"></a-input-number>
|
||||
<span style="color: #999999; margin-left: 8px">分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_item">
|
||||
<div class="signbox">
|
||||
<div class="sign">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">授课老师：</span>
|
||||
</div>
|
||||
<div class="select" style="width: 400px">
|
||||
<ProjectManager
|
||||
v-model:value="formData.liveTeacherId"
|
||||
v-model:name="formData.liveTeacherName"
|
||||
></ProjectManager>
|
||||
<ProjectManager v-model:value="formData.liveTeacherId" v-model:name="formData.liveTeacherName">
|
||||
</ProjectManager>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items2">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 2px">直播封面：</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<a-upload
|
||||
name="avatar"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<img
|
||||
class="i_upload_img"
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
alt="avatar"
|
||||
/>
|
||||
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
|
||||
:before-upload="beforeUpload">
|
||||
<img class="i_upload_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
||||
<div class="i_upload" v-else>
|
||||
<div class="addimg">
|
||||
<div class="heng"></div>
|
||||
@@ -157,9 +97,7 @@
|
||||
</a-upload>
|
||||
<div class="i_bottom">
|
||||
<div class="tip">
|
||||
<span style="color: #999999; margin-left: 8px"
|
||||
>支持图片格式为jpg/jpeg/png 图片最大为2MB</span
|
||||
>
|
||||
<span style="color: #999999; margin-left: 8px">支持图片格式为jpg/jpeg/png 图片最大为2MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,22 +105,13 @@
|
||||
<div class="main_item2">
|
||||
<div class="signbox">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
|
||||
</div>
|
||||
<span style="margin-right: 3px">直播公告：</span>
|
||||
</div>
|
||||
<div class="textarea">
|
||||
<a-textarea
|
||||
v-model:value="formData.liveNotice"
|
||||
placeholder="请输入直播公告"
|
||||
allow-clear
|
||||
show-count
|
||||
:maxlength="200"
|
||||
:rows="6"
|
||||
/>
|
||||
<a-textarea v-model:value="formData.liveNotice" placeholder="请输入直播公告" allow-clear show-count
|
||||
:maxlength="200" :rows="6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -191,10 +120,7 @@
|
||||
<span style="margin-right: 3px">回放设置：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-switch
|
||||
v-model:checked="formData.livePlayback"
|
||||
@change="getchange(formData.livePlayback)"
|
||||
/>
|
||||
<a-switch v-model:checked="formData.livePlayback" @change="getchange(formData.livePlayback)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="formData.livePlayback">
|
||||
@@ -203,12 +129,8 @@
|
||||
<span style="margin-right: 3px">回放链接：</span>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<a-input
|
||||
v-model:value="formData.livePlaybackLink"
|
||||
style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入回放链接"
|
||||
:maxlength="100"
|
||||
/>
|
||||
<a-input v-model:value="formData.livePlaybackLink" style="width: 400px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入回放链接" :maxlength="100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,14 +140,8 @@
|
||||
<span style="margin-right: 3px">直播说明：</span>
|
||||
</div>
|
||||
<div class="textarea">
|
||||
<a-textarea
|
||||
v-model:value="formData.liveExplain"
|
||||
placeholder="请输入直播说明"
|
||||
allow-clear
|
||||
show-count
|
||||
:maxlength="200"
|
||||
:rows="6"
|
||||
/>
|
||||
<a-textarea v-model:value="formData.liveExplain" placeholder="请输入直播说明" allow-clear show-count
|
||||
:maxlength="200" :rows="6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -242,39 +158,23 @@
|
||||
<div class="setbox">
|
||||
<div class="timerbox">
|
||||
<span>直播开始前：</span>
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="30"
|
||||
:precision="0"
|
||||
style="
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
"
|
||||
v-model:value="formData.beforeSignIn"
|
||||
></a-input-number>
|
||||
<span style="color: #999999; margin-left: 8px"
|
||||
>分钟允许签到</span
|
||||
>
|
||||
<a-input-number :min="0" :max="30" :precision="0" style="
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
" v-model:value="formData.beforeSignIn"></a-input-number>
|
||||
<span style="color: #999999; margin-left: 8px">分钟允许签到</span>
|
||||
</div>
|
||||
<div class="timerbox">
|
||||
<span>直播开始后：</span>
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="30"
|
||||
:precision="0"
|
||||
style="
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
"
|
||||
v-model:value="formData.afterSignIn"
|
||||
></a-input-number>
|
||||
<span style="color: #999999; margin-left: 8px"
|
||||
>分钟允许签到</span
|
||||
>
|
||||
<a-input-number :min="0" :max="30" :precision="0" style="
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
" v-model:value="formData.afterSignIn"></a-input-number>
|
||||
<span style="color: #999999; margin-left: 8px">分钟允许签到</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -284,18 +184,14 @@
|
||||
<span style="margin-right: 3px">评估：</span>
|
||||
</div>
|
||||
<div class="btnbox2">
|
||||
<a-checkbox v-model:checked="formData.isEvaluate" @change="getchanges(formData.isEvaluate)"
|
||||
>需要评估
|
||||
<a-checkbox v-model:checked="formData.isEvaluate" @change="getchanges(formData.isEvaluate)">需要评估
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="formData.isEvaluate" class="main_item">
|
||||
<div class="signbox"></div>
|
||||
<div class="btnbox">
|
||||
<AddInvistRoot
|
||||
v-model:id="formData.assessmentId"
|
||||
v-model:name="formData.assessmentName"
|
||||
>
|
||||
<AddInvistRoot v-model:id="formData.assessmentId" v-model:name="formData.assessmentName">
|
||||
<button class="xkbtn">选择评估</button>
|
||||
</AddInvistRoot>
|
||||
|
||||
@@ -428,6 +324,8 @@ const rulesRef = ref({
|
||||
const { resetFields, validate } = Form.useForm(formData, rulesRef);
|
||||
|
||||
const closeDrawer = () => {
|
||||
formData.value.liveCover = "";
|
||||
imageUrl.value = "";
|
||||
visible.value = false;
|
||||
taskIndex.value = -1;
|
||||
dateTime.value = [];
|
||||
@@ -467,16 +365,17 @@ async function confirm() {
|
||||
if (taskIndex.value === -1) {
|
||||
let list = props.taskList
|
||||
list.push(
|
||||
{name: formData.value.liveName,
|
||||
type: props.type,
|
||||
info: {...formData.value},
|
||||
duration:dayjs(formData.value.liveEndTime).diff(formData.value.liveStartTime,'minutes')
|
||||
})
|
||||
{
|
||||
name: formData.value.liveName,
|
||||
type: props.type,
|
||||
info: { ...formData.value },
|
||||
duration: dayjs(formData.value.liveEndTime).diff(formData.value.liveStartTime, 'minutes')
|
||||
})
|
||||
} else {
|
||||
const data = props.taskList[taskIndex.value];
|
||||
data.name = formData.value.liveName;
|
||||
data.info = formData.value;
|
||||
data.duration = dayjs(formData.value.liveEndTime).diff(formData.value.liveStartTime,'minutes')
|
||||
data.duration = dayjs(formData.value.liveEndTime).diff(formData.value.liveStartTime, 'minutes')
|
||||
|
||||
}
|
||||
emit("update:taskList", [...props.taskList]);
|
||||
@@ -484,6 +383,7 @@ async function confirm() {
|
||||
}
|
||||
|
||||
function openDrawer(i, row) {
|
||||
console.log(i, row)
|
||||
row && (formData.value = { ...row.info });
|
||||
row && (dateTime.value = [row.info.liveStartTime, row.info.liveEndTime]);
|
||||
i >= 0 && (taskIndex.value = i);
|
||||
@@ -506,9 +406,10 @@ const beforeUpload = (file) => {
|
||||
return false;
|
||||
}
|
||||
|
||||
let isLt1M = file.size / 10240 / 10240 <= 1;
|
||||
let isLt1M = file.size < 2097152;
|
||||
console.log(file.size, isLt1M)
|
||||
if (!isLt1M) {
|
||||
this.$message.error("图片大小超过10MB!");
|
||||
message.error("图片大小超过2MB!");
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user