<template>
<div class="add-announcement">
<el-dialog
v-model:visible="outerVisible"
width="1000px"
:title="isEdit ? $t('HDP.WEB.ONLINE_NOTICE.MODIFYING_A_BULLETIN') : $t('HDP.WEB.ONLINE_NOTICE.ADDING_A_BULLETIN')"
:before-close="closeDialog"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="add-notice-ruleForm">
<el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_TYPE')" prop="type">
<el-tooltip class="item" max-width="300" placement="right">
<template #content>
<p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_ONLINE_BULLETIN') }}</p>
<p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_CHANGE_NOTIFICATION') }}</p>
<p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_HISTORICAL_RECORDS') }}</p>
</template>
<i class="ipd-font-icon icon-help announcement-help-tip"></i>
</el-tooltip>
<el-radio-group v-model="ruleForm.type" :disabled="isEdit">
<el-radio v-for="item in typeList" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_TITLE')" prop="announcementTitle">
<el-input v-model.trim="ruleForm.announcementTitle" />
</el-form-item>
<div v-if="isOld === 0" class="test">
<el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_DESCRIPTION')" prop="announcementDesc">
<el-input v-model.trim="ruleForm.announcementDesc" />
</el-form-item>
</div>
<el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.RELEASE_TIME')" prop="releaseDate">
<el-date-picker
v-model="ruleForm.releaseDate"
:disabled="isEdit && Number(ruleForm.isDraft) !== 0"
type="daterange"
range-single
range-separate
:range-separator="$t('HDPPub.common.timeTo')"
style="width: 100%"
:start-placeholder="$t('HDP.PUB.StartDate')"
:end-placeholder="$t('HDP.PUB.EndTime')"
/>
</el-form-item>
<div v-if="isOld === 0" class="notice-editor">
<RichTextEditor
ref="noticeEditor"
v-model="richText"
:img-count="3"
:file-size="2"
:min-height="24"
:set-height="150"
@get-content="callbackEqitorData"
/>
</div>
<div v-if="isOld === 1" class="board-line"></div>
<el-button v-if="isOld === 1" id="add-announ-des" @click="addDes">{{ `${$t('HDP.Common.Add')}(${ruleForm.picList.length}/30)` }}</el-button>
<div v-if="isOld === 1">
<div v-for="(item, index) in ruleForm.picList" :key="index" class="announ-des">
<div class="img-upload">
<div v-if="!item.picUrl" class="img-upload-concent">
<input id="file" class="upload-button" type="file" :value="item.picUrl" accept="image/*" @change="onUpload(item, $event)" />
<i class="el-icon-plus"></i>
</div>
<div v-if="item.picUrl" class="no-img-concent">
<img :src="$xss.getSafeValue(item.picUrl)" class="img-hover" />
<span class="mulch"></span>
<span class="option-img">
<input id="file" class="upload-button" type="file" value="" accept="image/*" @change="onUpload(item, $event)" />
<i class="ipd-font-icon icon-upload"></i>
<i class="el-icon-zoom-in" @click="() => previewImg(item)"></i>
<i class="el-icon-delete" @click="() => deleteImg(item)"></i>
</span>
</div>
</div>
<div class="option-right">
<div class="input-url">
<el-form-item
:label="$t('HDP.WEB.ONLINE_NOTICE.REDIRECTION_URL')"
:prop="`picList.${index}.url`"
:rules="{ required: true, validator: validateUrl, trigger: 'blur' }"
>
<el-input v-model.trim="item.url" maxlength="500" />
</el-form-item>
</div>
<div class="option-sorting">
<i class="ipd-font-icon icon-chevron-up" @click="() => chevronUp(item, index)"></i>
<br />
<span></span>
<i class="ipd-font-icon icon-chevron-down" @click="() => chevrondown(item, index)"></i>
</div>
<div class="delete-des">
<i class="el-icon-delete" @click="() => deleteImgGrou(item, index)"></i>
</div>
</div>
</div>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button id="announ-ok" type="primary" @click="addNotice('ruleForm')">{{ $t('HDP.BCM.Determined') }}</el-button>
<!--新的公告或者是草稿才展示保存按钮-->
<el-button v-if="isOld === 1 && Number(ruleForm.isDraft) === 0" id="announ-save" @click="saveNotice('ruleForm')">
{{ $t('HDP.CMS.GV.Dll.Save') }}
</el-button>
<el-button v-if="isOld === 1" id="announ-preview" style="margin-left: 20px" @click="previewNotice('ruleForm')">
{{ $t('HDP.COMMON.ONE_PREVIEW') }}
</el-button>
<el-button v-if="isOld === 0" id="announ-cancel" @click="closeDialog()">{{ $t('HDP.BCM.ToCancel') }}</el-button>
</div>
</template>
</el-dialog>
<ElImageViewer
v-if="previewImgItem.showViewer"
:z-index="previewImgItem.zIndex"
:initial-index="previewImgItem.imageIndex"
:on-close="closeViewer"
:url-list="previewImgItem.srcList"
/>
<PreviewNotice ref="previewNotice" @add-callback-ann="addCallbackAnn" @is-hide-ti-yan-fun="isHideTiYanFun" />
</div>
</template>
<script>
import { ImageViewer } from '@plmcsdk/common-ui';
import { mapState } from 'vuex';
import RichTextEditor from '@/components/common/component/RichTextEditor';
import PreviewNotice from '@/components/system-configuration/online-notice/PreviewNotice';
export default {
emits: ['refsAnnouncement', 'isHideTiYanFun'],
components: {
PreviewNotice,
ElImageViewer: ImageViewer,
RichTextEditor,
},
props: {},
data() {
const validateUrl = (rule, value, callback) => {
const match = /^((http|https):\/\/)/;
if (!value.length) {
callback(new Error('请输入跳转URL'));
} else if (!match.test(value)) {
callback(new Error('请输入正确的URL'));
} else {
callback();
}
};
return {
validateUrl,
richText: '', // 富文本内容
isEdit: false,
isOld: 1, // 是否是历史报告和变更通知 0表示 是老的1表示新的
outerVisible: false,
announContrastItem: {}, // 记录主页传过来的修改
数据
previewImgItem: {
showViewer: false,
imageIndex: 0,
zIndex: 5000,
srcList: [],
},
typeList: [
{
value: 0,
label: '上线公告',
title: '上线公告将会以
弹框的方式提示用户',
},
{
value: 1,
label: '变更通知',
title: '变更通知将会以
弹出页面的方式提示用户',
},
],
ruleForm: {
announcementTitle: '',
announcementDesc: '',
releaseDate: [],
announcementContent: '',
type: 0,
isDraft: 0,
picList: [
{
picUrl: '',
url: '',
},
],
},
rules: {
announcementTitle: [
{
required: true,
message: '请输入标题',
trigger: 'blur',
},
{
min: 0,
max: 60,
message: '最多只能输入60个字符',
trigger: 'blur',
},
],
announcementDesc: [
{
required: true,
message: '请输入公告描述',
trigger: 'blur',
},
{
min: 0,
max: 50,
message: '最多只能输入50个字符',
trigger: 'blur',
},
],
releaseDate: [
{
required: true,
message: '发布时间不能为空',
validator: this.validateReleaseDate,
trigger: 'blur',
},
],
type: [
{
required: true,
message: '公告类型不能为空',
trigger: 'change',
},
],
},
};
},
watch: {
'ruleForm.type': {
handler(val, oldVla) {
// val等于1是变更通知
if (val == 1) {
this.isOld = 0;
} else {
this.isOld = 1;
}
},
immediate: true, // 可以深度检测到 person 对象的属性值的变化
},
},
computed: {
...mapState({
userInfo: state => state.aside.userData,
}),
},
created() {},
methods: {
validateReleaseDate(rule, value, callback) {
if (!value.length || !value[0] || !value[1]) {
callback('发布时间不能为空');
return false;
}
callback();
},
// 上传附件
onUpload(item, e) {
const me = this;
const file = e.target.files[0];
const formData = new FormData();
formData.append('file', e.target.files[0]);
me.util.post('service/common/services/announcement/updateFileToS3', formData).then(result => {
if (result.code == '200') {
item.picUrl = result.response;
}
});
},
previewImg(item) {
this.previewImgItem.srcList = [item.picUrl];
this.previewImgItem.showViewer = true;
},
closeViewer() {
this.previewImgItem.showViewer = false;
},
deleteImg(item) {
item.picUrl = '';
},
openDialog(data) {
// 新增公告
if (data === 'add') {
this.isEdit = false;
} else {
// 修改公告
this.ruleForm = data;
this.ruleForm.releaseDate = [data.releaseDate, data.releaseEndDate];
this.announContrastItem = JSON.parse(JSON.stringify(data));
this.isEdit = true;
this.isOld = Number(data.isOld);
// 如果是修改的旧
数据
if (data.isOld == 0) {
setTimeout(() => {
this.$refs.noticeEditor.setContent(data.announcementContent);
}, 500);
this.ruleForm.picList = [];
}
}
this.outerVisible = true;
},
// 关闭预览打开编辑
addCallbackAnn() {
this.outerVisible = true;
},
// 新增公告
addNotice(formName) {
const me = this;
me.$refs[formName].validate(valid => {
if (valid) {
if (me.isOld == 0) {
me.saveOldData();
} else {
me.saveNewData();
}
} else {
return false;
}
});
},
// 保存新的
数据
saveNewData() {
this.saveData('add');
},
// 保存草稿
saveNotice(formName) {
const validList = ['announcementTitle', 'releaseDate'];
this.$refs[formName].validateField(validList);
// 保存草稿描述和发布日期必填
const announcementTitle = this.ruleForm.announcementTitle;
// 标题60字符以内
if (
announcementTitle.length > 0 &&
announcementTitle.length < 61 &&
this.ruleForm.releaseDate.length &&
this.ruleForm.releaseDate[0] &&
this.ruleForm.releaseDate[1]
) {
this.saveData('draft');
}
},
// 调用接口保存新的
数据
saveData(type, paramsx) {
const me = this;
let isImg = true;
for (let i = 0; i < me.ruleForm.picList.length; i++) {
me.ruleForm.picList[i].order = i;
if (isImg && !me.ruleForm.picList[i].picUrl) {
isImg = false;
}
}
if (!isImg && type === 'add') {
me.commonFun.setNotice('发布上线公告请不要忘了上传公告图片哦', 'warning');
return;
}
const params = {
announcementTitle: me.ruleForm.announcementTitle,
releaseDate: me.comments.formatDate(me.ruleForm.releaseDate[0], 'YMD'),
releaseEndDate: me.comments.formatDate(me.ruleForm.releaseDate[1], 'YMD'),
type: '0',
isDraft: type === 'add' ? 1 : 0,
picList: me.ruleForm.picList,
};
if (me.announContrastItem.id) {
params.id = me.announContrastItem.id;
}
me.util
.post('service/common/services/announcement/saveAnnouncement', params)
.then(result => {
if (result.code == 200) {
// 刷新主页面
数据
me.$emit('refsAnnouncement', result.response.id);
me.closeDialog();
me.commonFun.setNotice(type === 'add' ? '发布成功' : '保存成功', 'success');
} else {
me.commonFun.setNotice(result.message, 'error');
}
})
.catch(err => this.hdpCommon.errorHandling(err));
},
// 预览
previewNotice() {
this.outerVisible = false;
this.isHideTiYanFun(false);
this.$refs.previewNotice.openDialog(this.ruleForm);
},
// 获取富文本的
数据
callbackEqitorData(data) {
this.ruleForm.announcementContent = data;
},
// 上移
chevronUp(item, index) {
const picList = JSON.parse(JSON.stringify(this.ruleForm.picList));
if (index != 0) {
picList[index] = picList.splice(index - 1, 1, picList[index])[0];
} else {
picList.push(picList.shift());
}
this.ruleForm.picList = picList;
},
// 下移
chevrondown(item, index) {
const picList = JSON.parse(JSON.stringify(this.ruleForm.picList));
if (index != picList.length - 1) {
picList[index] = picList.splice(index + 1, 1, picList[index])[0];
} else {
picList.unshift(picList.splice(index, 1)[0]);
}
this.ruleForm.picList = picList;
},
// 删除组
deleteImgGrou(item, index) {
if (this.ruleForm.picList.length > 1) {
this.ruleForm.picList.splice(index, 1);
} else {
this.commonFun.setNotice('最少要有一组
数据', 'warning');
}
},
// 新增描述
addDes() {
const addItem = {
picUrl: '',
url: '',
rule: 'url',
};
if (this.ruleForm.picList.length < 30) {
this.ruleForm.picList.unshift(addItem);
} else {
this.commonFun.setNotice('最多只能新增30个', 'error');
}
},
// 保存历史
数据及变更通知
saveOldData() {
this.$refs.noticeEditor.submit();
const me = this;
const editValue = me.ruleForm.announcementContent;
const params = {
announcementContent: editValue,
announcementDesc: me.ruleForm.announcementDesc,
announcementTitle: me.ruleForm.announcementTitle,
releaseDate: me.comments.formatDate(me.ruleForm.releaseDate[0], 'YMD'),
releaseEndDate: me.comments.formatDate(me.ruleForm.releaseDate[1], 'YMD'),
type: me.ruleForm.type,
isDraft: '1',
};
if (me.isEdit) {
params.id = me.ruleForm.id;
}
me.util
.post('service/common/services/announcement/saveAnnouncement', params)
.then(result => {
if (result.code == 200) {
// 刷新主页面
数据
me.$emit('refsAnnouncement', result.response.id);
me.outerVisible = false;
me.closeDialog();
} else {
me.commonFun.setNotice(result.message, 'error');
}
})
.catch(err => this.hdpCommon.errorHandling(err));
},
isHideTiYanFun(type) {
this.$emit('isHideTiYanFun', type);
},
// 关闭
弹框
closeDialog(type) {
this.$refs.ruleForm.clearValidate();
this.ruleForm = {
announcementTitle: '',
announcementDesc: '',
releaseDate: [],
announcementContent: '',
type: 0,
isDraft: 0,
picList: [
{
picUrl: '',
url: '',
},
],
};
this.announContrastItem = {};
this.outerVisible = false;
this.isOld = 1;
},
},
};
</script>
<style scoped>
.add-announcement :deep(.el-dialog__body) {
padding-bottom: 0;
}
.add-announcement :deep(.el-dialog__footer) {
padding: 20px 0;
}
.announcement-help-tip {
position: absolute;
left: -87px;
color: #1890ff;
}
.board-line {
position: absolute;
left: 0;
border-bottom: 1px dashed #d5d5d5;
width: 100%;
}
#add-announ-des {
margin-top: 10px;
margin-bottom: 10px;
}
.announ-des {
border-top: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
height: 159px;
}
.announ-des:last-child {
border-bottom: 1px solid #d5d5d5;
}
.img-upload {
width: 279px;
float: left;
border-right: 1px solid #d5d5d5;
height: 100%;
padding: 10px 20px 10px 20px;
}
.el-icon-plus {
margin-left: -35px;
}
.upload-button {
width: 29px;
text-align: center;
opacity: 0;
}
.img-upload-concent {
background-color: #fbfdff;
border: 1px dashed #d9d9d9;
border-radius: 2px;
box-sizing: border-box;
width: 242px;
height: 134px;
cursor: pointer;
line-height: 134px;
text-align: center;
}
.img-upload-concent i {
font-size: 20px;
color: #9097a1;
}
.option-img {
display: none;
text-align: center;
position: absolute;
top: 76%;
left: 53%;
margin: -50px 0 0 -50px;
}
.option-img i {
font-size: 16px;
color: #fff;
}
.option-img i:hover,
.option-sorting i:hover,
.delete-des i:hover {
color: #1890ff;
}
.img-hover {
width: 240px;
height: 137px;
}
.no-img-concent {
position: relative;
}
.no-img-concent:hover .option-img {
display: block;
}
.no-img-concent:hover .mulch {
width: 240px;
height: 137px;
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
background: #000;
}
i.ipd-font-icon.icon-upload {
margin-left: -19px;
}
.option-right {
float: left;
width: 70%;
height: 100%;
text-align: center;
}
.option-sorting {
float: left;
width: 5%;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
height: 100%;
line-height: 76px;
}
.option-sorting i,
.delete-des i {
color: #9097a1;
cursor: pointer;
}
.option-sorting span {
border-bottom: 1px solid #d5d5d5;
width: 100%;
float: left;
}
.input-url {
margin-top: 62px;
margin-left: -10px;
width: 91%;
float: left;
margin-right: 10px;
}
.delete-des {
line-height: 156px;
margin-left: 9px;
float: left;
}
.notice-editor {
margin-left: 36px;
}
</style>
结合上边的代码和下边这段代码
<template>
<div class="online-notice">
<div class="notice-date">
<div class="operation">
<!-- 上线公告 -->
<span class="title" style="margin-left: 20px">{{ $t('HDP.COMMON.GO_LIVE_BULLETIN') }}</span>
<!-- 新增公告 -->
<a v-if="systemAdmin" :title="$t('HDP.WEB.ONLINE_NOTICE.ADDING_A_BULLETIN')" class="ipd-font-icon icon-new fontSize no true" @click="addNotice"></a>
</div>
<div class="release-date" :style="{ height: releaseHeight }">
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" :collapse="false">
<el-submenu v-for="(item, index) in quarterly" :key="index" :index="item.parentQuarterly">
<template #title>
<span :title="item.parentQuarterly">{{ item.parentQuarterly }}</span>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(item2, index2) in item.children"
:key="index2"
:index="item2.id"
:title="item2.announcementTitle"
@click="() => getAnnouncementItem(item2.id, 'detail')"
>
<!-- 草稿 -->
<span v-if="item2.isDraft === '0'" class="draft">{{ $t('HDP.WEB.ONLINE_NOTICE.DRAFT') }}</span>
<i v-if="systemAdmin && item2.isDraft === '0'" class="ifont ifont-del" @click="() => deleteDraft(item2)"></i>
<i v-if="systemAdmin" class="ifont ifont-shenbaoshizhixuqiu" @click="() => updateNotice(item2)"></i>
{{ item2.announcementTitle }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</div>
<div class="notice-cntent" :style="{ height: noticeCntentHeight }">
<div class="desc">
<span class="announcementDesc">{{ announItem.announcementTitle }}</span>
<!-- 发布时间 -->
<span class="releaseDate">{{ $t('HDP.WEB.ONLINE_NOTICE.RELEASE_TIME') }} : {{ announItem.releaseDate }}</span>
</div>
<div v-if="announItem.isOld === '0' || announItem.type === 1" v-xss-html="replaceCommonAppId(announItem.announcementContent)"></div>
<div v-else class="preview-notice">
<ElCarousel :interval="5000" arrow="always" :loop="false" :autoplay="false" @change="changeCarousel">
<ElCarouselItem v-for="(item, index) in announItem.picList" :key="index">
<img v-if="item.picUrl" :src="$xss.getSafeValue(item.picUrl)" />
</ElCarouselItem>
</ElCarousel>
<!-- 马上体验 -->
<el-button v-show="isHideTiYan" id="preview-notice-home-experience" type="primary" style="margin-top: 20px" @click="experience">
{{ $t('HDP.WEB.ONLINE_NOTICE.EXPERIENCE_IT_RIGHT') }}
</el-button>
</div>
</div>
<AddAnnouncement ref="addAnnouncement" @refs-announcement="getAnnouncementList" @is-hide-ti-yan-fun="isHideTiYanFun" />
</div>
</template>
<script>
import { Carousel, CarouselItem } from '@plmcsdk/common-ui';
import { mapState } from 'vuex';
import commonApi from '../../api/common-api';
import AddAnnouncement from './AddAnnouncement';
export default {
components: {
AddAnnouncement,
ElCarousel: Carousel,
ElCarouselItem: CarouselItem,
},
data() {
return {
isHideTiYan: true,
outerVisible: false,
previewItem: {}, // 切换当前图片
activeIndex: '',
noticeData: {},
quarterly: [],
announItem: {},
releaseHeight: `${window.innerHeight - 167}px`,
noticeCntentHeight: `${window.innerHeight - 130}px`,
editorOp: {
id: 'notice', // 富文本id,必传
uploadUrl: 'service/common/services/announcement/updateFileToS3', // 图片上传url,必传
imgSize: 5, // 图片大小,必传
limit: 50, // 最大图片个数。如不传则不限制
editorContent: '', // 富文本内容
disabled: false,
},
systemAdmin: false,
};
},
computed: mapState({
userData: state => state.aside.userData,
}),
mounted() {
const me = this;
commonApi.getSystemAdmin().then(result => {
if (result.success) {
me.systemAdmin = result.response;
}
});
this.getAnnouncementList();
this.hdpCommon.changeIhelpApp('plm-hdd');
this.hdpCommon.trackPysicalPageView('GoliveBulletin');
// 该埋码用于验证common埋码接入
this.hdpCommon.trackPysicalPageView('notice');
},
methods: {
// 兼容历史appid
replaceCommonAppId(content) {
if (window.vue.comments.getJumpUrl('replaceCommonAppId') ?? true) {
content = content.replace(/com.huawei.ipd.innovation.hdd:hdp_service_common/g, 'com.huawei.ipd.hdp.common:hdp_service_common');
}
return content;
},
// 查询公告
getAnnouncementList(id) {
const me = this;
me.commonReadAjax
.get('service/common/services/announcement/getAnnouncementList')
.then(result => {
if (result.code == 200) {
me.quarterly = result.response;
const itemNotice = result.response.length > 0 ? result.response[0].children[0] : '';
let noticeId = itemNotice.id;
if (id) {
noticeId = id;
}
me.getAnnouncementItem(noticeId, 'detail');
} else {
me.commonFun.setNotice(result.message, 'error');
}
})
.catch(err => this.hdpCommon.errorHandling(err));
},
// 获取单个公告详情
getAnnouncementItem(id, type) {
const me = this;
const params = {
id,
};
if (!id) {
return;
}
me.activeIndex = id;
me.commonReadAjax
.get('service/common/services/announcement/getAnnouncement', params)
.then(result => {
if (result.code == 200) {
const announcementTitle = this.comments.reverseXss(result.response.announcementTitle);
const announcementDesc = this.comments.reverseXss(result.response.announcementDesc);
const releaseDate = result.response.releaseDate;
const releaseEndDate = result.response.releaseEndDate;
const announcementContent = this.comments.reverseXss(result.response.announcementContent);
const item = {
announcementTitle,
announcementDesc,
releaseDate,
releaseEndDate,
announcementContent,
type: parseInt(result.response.type),
id: result.response.id,
isOld: result.response.isOld,
picList: result.response.picList,
isDraft: result.response.isDraft,
};
if (type == 'update') {
if (item.type == 1) {
item.isOld = 0;
}
me.$refs.addAnnouncement.openDialog(item);
}
if (type == 'detail') {
me.announItem = JSON.parse(JSON.stringify(item));
}
} else {
me.commonFun.setNotice(result.message, 'error');
}
})
.catch(err => this.hdpCommon.errorHandling(err));
},
// 新增/修改公告
addNotice() {
this.$refs.addAnnouncement.openDialog('add');
},
// 修改公告
updateNotice(item) {
const me = this;
me.outerVisible = true;
me.noticeData = item;
event.stopPropagation();
me.getAnnouncementItem(item.id, 'update');
},
// 删除公告
deleteDraft(item) {
this.hdpCommon.messageBox('提示', '确认删除选中的
数据 ？', status => {
if (status === 'confirm') {
const params = {
id: item.id,
type: '0',
isDraft: 0,
};
this.util
.post('service/common/services/announcement/deleteAnnouncement', params)
.then(result => {
if (result.code === 200) {
this.getAnnouncementList();
this.hdpCommon.setNotice('删除成功', 'success');
} else {
this.hdpCommon.setNotice(result.message, 'error');
}
})
.catch(err => this.hdpCommon.errorHandling(err));
}
});
},
changeCarousel(index) {
this.previewItem = this.announItem.picList[index];
},
experience() {
let url = this.previewItem.url;
if (!url) {
url = this.announItem.picList.length > 0 ? this.announItem.picList[0].url : '';
}
window.open(url);
},
// 预览的时候隐藏主页面的体验按钮
isHideTiYanFun(type) {
this.isHideTiYan = type;
},
},
};
</script>
<style scoped lang="less">
.online-notice {
width: 100%;
float: left;
.operation {
height: 30px;
line-height: 30px;
.title {
margin-left: 22px;
font-weight: bold;
}
a {
float: right;
margin-right: 12px;
margin-top: -1px;
cursor: pointer;
}
}
.el-dialog__body .el-form-item:nth-child(2) {
margin-bottom: 18px;
}
.notice-editor {
margin-left: 36px;
}
.notice-date {
width: 14%;
float: left;
border-right: 1px solid #d9d9d9;
.release-date {
overflow: auto;
}
}
.notice-cntent {
width: 84%;
float: left;
overflow: auto;
margin-left: 1%;
margin: 12px 1% 0 1%;
:deep(table) {
border: none;
border-collapse: collapse;
table-layout: fixed;
empty-cells: show;
max-width: 100%;
box-sizing: border-box;
tr td,
tr th {
border: 1px solid #ddd;
text-align: left;
vertical-align: middle;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
}
}
.el-menu-item-group,
.el-menu-item {
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
li.el-menu-item:hover i.ifont {
display: block;
}
i.ifont {
float: right;
margin-right: -4%;
color: #1890ff;
cursor: pointer;
display: none;
margin-right: 10px;
}
.desc {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
.announcementDesc {
font-size: 18px;
color: #333333;
font-weight: bold;
margin-right: 15px;
}
}
}
</style>
<style scoped>
.online-notice .release-date :deep(.el-menu) {
border-right: 0 !important;
}
.online-notice .release-date :deep(.el-submenu__icon-arrow) {
margin-top: -4px;
}
.online-notice .preview-notice {
width: 1200px;
height: 675px;
text-align: center;
margin: 0 auto;
background: #99a9bf;
border: 1px solid #979797;
background-color: rgba(153, 169, 191, 0.3);
}
.preview-notice :deep(.el-carousel--horizontal),
.preview-notice :deep(.el-carousel__container) {
height: 100%;
}
.preview-notice :deep(.el-carousel__button) {
width: 8px;
height: 8px;
border-radius: 50%;
}
.preview-notice :deep(.el-carousel__container button) {
background-color: #1890ff;
}
.preview-notice :deep(.el-carousel__container button:hover) {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.preview-notice :deep(.el-carousel__container button:active) {
background-color: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
.online-notice :deep(.draft) {
float: right;
background: #e6f7ff;
border: 1px solid #91d5ff;
border-radius: 2px;
border-radius: 2px;
height: 20px;
width: 34px;
line-height: 18px;
text-align: center;
color: #1890ff;
margin-top: 10px;
}
#preview-notice-home-experience {
width: 120px;
height: 40px;
}
</style>
帮我分析一下
点击新增上线公告
点击确定后的公告通知
弹窗的代码在哪个位置，并告诉我为什么没有
弹窗的原因，如何解决这个问题
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
