blog/blog-facade.git

inleft

2022-08-26 fa1bd95d533444d7360d1ada127b7a3279a3901f

commit \| author \| age
f5539f	1	<template>
1ad93b	2	<div>
fa1bd9	3	<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
I	4	<img alt="example" style="width: 100%" :src="previewImage" />
	5	</a-modal>
1ad93b	6	<a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
6bcd13	7	<a-form-model-item label="认证" prop="secret">
I	8	<a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令">
	9	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
	10	</a-input>
	11	</a-form-model-item>
	12
1ad93b	13	<a-form-model-item label="标题" prop="title">
f5539f	14	<a-input v-model="form.title" placeholder="限 50字内" />
L	15	</a-form-model-item>
	16
06ee76	17	<a-form-model-item label="模式切换" prop="common">
f5539f	18	<a-switch v-model="form.online" />
4b854c	19	<span class="myTip" v-if="form.online">
I	20	由系统生成文件
	21	</span>
	22	<span class="myTip" v-else>
	23	本地文件上传
f5539f	24	</span>
L	25	</a-form-model-item>
	26
6bcd13	27	<a-form-model-item label="日志文件" v-show="!form.online">
af029b	28	<a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
I	29	@change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
80476f	30	:data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt">
6bcd13	31	<a-button>
fa1bd9	32	<a-icon type="upload" />限 md/html/txt
f5539f	33	</a-button>
L	34	</a-upload>
	35	</a-form-model-item>
	36
63f511	37	<a-form-model-item label="日志内容" v-show="form.online">
f5539f	38	<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
L	39	</a-form-model-item>
	40
1ad93b	41	<a-form-model-item label="分类" prop="class">
6bcd13	42	<a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
f5539f	43	:getPopupContainer="getCalendarContainer()">
6bcd13	44
I	45	<a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
	46	{{ item.typeName }}
f5539f	47	</a-select-option>
6bcd13	48
f5539f	49	</a-select>
L	50	</a-form-model-item>
	51
1ad93b	52	<a-form-model-item label="额外设置">
f5539f	53	<a-switch v-model="form.preference" />
L	54	</a-form-model-item>
	55
	56	<div v-show="form.preference" class="myBorder" style="padding:10px;">
1ad93b	57	<a-form-model-item label="起个草稿">
f5539f	58	<a-switch v-model="form.tempSave" />
L	59	<span v-show="form.tempSave" class="myTip">
1ad93b	60	临时存储,游客无法浏览
f5539f	61	</span>
L	62	</a-form-model-item>
	63
fa1bd9	64	<a-form-model-item label=" 主类型">
00e46d	65	<a-select v-model="form.blogType" mode="default" placeholder=""
I	66	:getPopupContainer="getCalendarContainer()">
105729	67	<a-select-option value="1">
1ad93b	68	markdown
00e46d	69	</a-select-option>
105729	70	<a-select-option value="2">
1ad93b	71	html
00e46d	72	</a-select-option>
105729	73	<a-select-option value="3">
c6793e	74	视频
I	75	</a-select-option>
a23166	76	<a-select-option value="4">
c6793e	77	音频
105729	78	</a-select-option>
I	79	<a-select-option value="5">
c6793e	80	图组
I	81	</a-select-option>
	82	<a-select-option value="9">
	83	taking
00e46d	84	</a-select-option>
I	85	</a-select>
f5539f	86	</a-form-model-item>
L	87
fa1bd9	88	<a-form-model-item label="引言" prop="introduce">
I	89	<a-input v-model="form.introduce" type="textarea" placeholder="限700字数" />
	90	</a-form-model-item>
	91
	92	<a-form-model-item label="封面">
	93	<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
	94	:data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile"
	95	:default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
	96	accept=".jpg,.png,.jpeg" @preview="handlePreview">
	97	<!-- :disabled="form.coverFileList.length>=1" -->
	98	<a-button>
	99	<a-icon type="upload" />jpg/png/jpeg..
	100	</a-button>
	101	</a-upload>
	102	<!-- <span class="myTip">
	103	自动转码,可以传高清图
	104	</span> -->
	105	</a-form-model-item>
f5539f	106
fa1bd9	107	<a-form-model-item label="图组">
I	108	<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture-card"
	109	:data="{'bucketName':bucketName.bucket_picture}" @change="handleChangePictureFile"
	110	:default-file-list="form.pictureList" :beforeUpload="beforeUploadPicture"
	111	accept=".jpg,.png,.jpeg" :multiple="true" @preview="handlePreview">
	112	<a-button>
	113	<a-icon type="upload" />jpg/png/jpeg..
	114	</a-button>
	115	</a-upload>
	116	</a-form-model-item>
	117
	118	<a-form-model-item label="视频组">
	119	<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="text"
	120	:data="{'bucketName':bucketName.bucket_video}" @change="handleChangeVideoFile"
	121	:default-file-list="form.videoList" :beforeUpload="beforeUploadVideo" :multiple="true"
	122	accept=".mp4">
	123	<a-button>
	124	<a-icon type="upload" />mp4
	125	</a-button>
	126	</a-upload>
	127	</a-form-model-item>
	128
	129	<a-form-model-item label="定时">
	130	<a-date-picker v-model="momentDate" show-time type="datetime" placeholder="发布时间"
	131	style="width: 100%;" :disabledDate="disabledDate" @change="formatDate"
	132	:getCalendarContainer="getCalendarContainer()" />
	133	</a-form-model-item>
	134
f5539f	135	<a-form-model-item label="标签">
L	136	<template v-for="(tag, index) in tags">
	137	<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
	138	<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
	139	{{ `${tag.slice(0, 20)}...` }}
	140	</a-tag>
	141	</a-tooltip>
1ad93b	142	<a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
f5539f	143	{{ tag }}
L	144	</a-tag>
	145	</template>
fa1bd9	146
f5539f	147	<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
L	148	:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
	149	@keyup.enter="handleInputConfirm" />
fa1bd9	150
f5539f	151	<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
L	152	<a-icon type="plus" /> New Tag
	153	</a-tag>
06ee76	154	</a-form-model-item>
L	155
7b98c8	156	<div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
6bcd13	157	<a-form-model-item label="置顶">
I	158	<a-switch v-model="form.top" />
	159	</a-form-model-item>
f5539f	160
6bcd13	161	<div v-show="form.top">
I	162	<a-form-model-item label="权重">
7b98c8	163	<a-slider v-model="form.sliderValue" :default-value="50" :step="5"
6bcd13	164	:getTooltipPopupContainer="getCalendarContainer()" />
I	165	<span class="myTip">
	166	越小越靠前
	167	</span>
	168	</a-form-model-item>
	169	</div>
	170	</div>
f5539f	171
L	172
1ad93b	173	<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f	174
L	175	<a-form-model-item label="加锁">
	176	<a-switch v-model="form.lock" />
	177	<span v-show="!form.lock" class="myTip">
	178	默认为公开
	179	</span>
	180	</a-form-model-item>
	181
	182	<div v-show="form.lock ">
	183	<a-form-model-item label="阅读权限">
	184	<a-radio-group v-model="form.auth">
c23efb	185	<a-radio value="2">
f5539f	186	私人
L	187	</a-radio>
c23efb	188	<a-radio value="3">
f5539f	189	密码授权
L	190	</a-radio>
	191	</a-radio-group>
	192	</a-form-model-item>
	193
fc0c10	194	<a-form-model-item label="授权密码" v-show="form.auth==3">
7b98c8	195	<a-input-password v-model="form.password" autocomplete='new-password' type="password"
6bcd13	196	placeholder="独立密码">
f5539f	197	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
7b98c8	198	</a-input-password>
f5539f	199	</a-form-model-item>
L	200	</div>
	201
	202	</div>
	203
	204	</div>
	205
	206	</a-form-model>
	207	</div>
	208	</template>
	209
	210	<script>
	211	import moment from "moment";
6bcd13	212	import {
105729	213	sysFileInfoUpload,
I	214	myFileInfoUpload
6bcd13	215	} from '../../api/fileManage.js';
63f511	216
6bcd13	217	import {
I	218	queryBlogArticleType
	219	} from '../../api/blogArticleType.js'
63f511	220
105729	221	import myConstant from "../../config/myConstant.js"
0dd41b	222	import md5 from 'js-md5';
63f511	223
fa1bd9	224	function getBase64(file) {
I	225	return new Promise((resolve, reject) => {
	226	const reader = new FileReader();
	227	reader.readAsDataURL(file);
	228	reader.onload = () => resolve(reader.result);
	229	reader.onerror = error => reject(error);
	230	});
	231	}
	232
f5539f	233	export default {
6bcd13	234	beforeMount() {
I	235	queryBlogArticleType({}).then((res) => {
	236	this.blogArticleType = res.data;
	237	})
	238	},
f5539f	239	data() {
af029b	240	let _this = this;
06ee76	241	let validateContent = (rule, value, callback) => {
af029b	242	if (_this.form.online) {
I	243	//this.$refs.myForm.validateField('content')
	244	if (_this.form.content == null \|\| _this.form.content == "") {
63f511	245	callback(new Error('内容未填'));
I	246	}
06ee76	247	} else {
af029b	248	//this.$refs.myForm.validateField('blogFileList')
I	249	if (_this.form.fileId == null) {
63f511	250	callback(new Error('文件未传'));
I	251	}
06ee76	252	}
L	253	callback();
	254	};
	255
f5539f	256	return {
fa1bd9	257	previewVisible: false,
I	258	previewImage: '',
80476f	259	bucketName: myConstant.bucketName,
fa1bd9	260	momentDate: undefined,
6bcd13	261	blogArticleType: [],
f5539f	262	tags: [],
L	263	inputVisible: false,
	264	inputValue: '',
	265	labelCol: {
1ad93b	266	span: 7
f5539f	267	},
L	268	wrapperCol: {
1ad93b	269	span: 13
f5539f	270	},
L	271	form: {
fa1bd9	272	introduce: '',
6bcd13	273	secret: '',
f5539f	274	title: '',
L	275	content: '',
	276	class: [],
	277	tempSave: false,
c23efb	278	blogType: "1",
f5539f	279	publishDate: "",
L	280	lock: false,
6bcd13	281	top: false,
105729	282	sliderValue: 50,
c23efb	283	auth: 1,
f5539f	284	password: "",
c23efb	285	fileId: null,
I	286	coverFile: null,
fa1bd9	287	pictureIds: null,
I	288	videoIds: null,
f5539f	289	blogFileList: [],
1ad93b	290	coverFileList: [],
fa1bd9	291	pictureList: [],
I	292	videoList: [],
	293	online: false,
	294	preference: false,
f5539f	295	},
1ad93b	296	rules: {
I	297	title: [{
	298	required: true,
	299	message: '标题不能为空',
	300	trigger: 'blur'
	301	},
	302	{
63f511	303	min: 1,
1ad93b	304	max: 50,
I	305	message: '字数限制1~50',
	306	trigger: 'blur'
	307	},
	308	],
fa1bd9	309	introduce: [{
I	310	max: 5,
	311	message: '字数限制700',
	312	trigger: 'blur'
	313	}, ],
6bcd13	314	secret: [{
I	315	required: true,
0dd41b	316	message: '好像这里错了..',
6bcd13	317	trigger: 'blur'
I	318	}],
06ee76	319	common: [{
L	320	validator: validateContent,
	321	trigger: []
	322	}],
63f511	323	// content: [{
I	324	// max: 10,
	325	// required: true,
	326	// message: '至少填一下上传内容',
	327	// trigger: 'blur'
	328	// }, ],
	329	// blogFileList: [{
	330	// max: 1,
	331	// required: true,
	332	// message: '文件未上传',
	333	// }],
1ad93b	334	class: [{
I	335	required: true,
	336	message: '至少选一个分类',
	337	trigger: 'blur'
	338	}, ],
63f511	339
1ad93b	340	}
f5539f	341	};
L	342	},
	343	methods: {
fa1bd9	344	handleCancel() {
I	345	this.previewVisible = false;
	346	},
	347	async handlePreview(file) {
	348	if (!file.url && !file.preview) {
	349	file.preview = await getBase64(file.originFileObj);
	350	}
	351	this.previewImage = file.url \|\| file.preview;
	352	this.previewVisible = true;
	353	},
af029b	354	reset() {
I	355	// this.form.blogFileList = [];
	356	// this.form.coverFileList = [];
fa1bd9	357	},
I	358	formatDate(date, dateString) {
	359	this.form.publishDate = dateString;
	360	},
	361	beforeUploadVideo(file, fileList) {
	362	return new Promise((resolve, reject) => {
	363	if (this.form.secret == null \|\| this.form.secret == "") {
	364	this.$message.error('需要正确的授权码');
	365	return reject(false);
	366	}
	367
	368	if (this.form.coverFileList.length > 10) {
	369	this.$message.error('这里最多上传10个文件');
	370	return reject(false);
	371	}
	372	if (file.size > myConstant.uploadVideoSizeLimit) {
	373	this.$message.error('上传文件大小不能超过 200M!');
	374	return reject(false);
	375	}
	376	return resolve(true)
	377	});
	378	},
	379	beforeUploadPicture(file, fileList) {
	380	return new Promise((resolve, reject) => {
	381	if (this.form.secret == null \|\| this.form.secret == "") {
	382	this.$message.error('需要正确的授权码');
	383	return reject(false);
	384	}
	385
	386	if (this.form.coverFileList.length > 10) {
	387	this.$message.error('这里最多上传10个文件');
	388	return reject(false);
	389	}
	390	if (file.size > myConstant.uploadFileSizeLimit) {
	391	this.$message.error('上传文件大小不能超过 2M!');
	392	return reject(false);
	393	}
	394	return resolve(true)
	395	});
105729	396	},
af029b	397	beforeUploadCover(file, fileList) {
6bcd13	398	return new Promise((resolve, reject) => {
0dd41b	399	if (this.form.secret == null \|\| this.form.secret == "") {
I	400	this.$message.error('需要正确的授权码');
	401	return reject(false);
	402	}
	403
af029b	404	if (this.form.coverFileList.length >= 1) {
6bcd13	405	this.$message.error('这里最多上传一个文件');
I	406	return reject(false);
	407	}
af029b	408	if (file.size > myConstant.uploadFileSizeLimit) {
I	409	this.$message.error('上传文件大小不能超过 2M!');
	410	return reject(false);
	411	}
	412	return resolve(true)
	413	});
	414	},
	415	beforeUpload(file, fileList) {
	416	return new Promise((resolve, reject) => {
0dd41b	417	if (this.form.secret == null \|\| this.form.secret == "") {
I	418	this.$message.error('需要正确的口令..');
	419	return reject(false);
	420	}
	421
af029b	422	if (this.form.blogFileList.length >= 1) {
I	423	this.$message.error('这里最多上传一个文件');
	424	return reject(false);
	425	}
63f511	426
af029b	427	if (file.size > myConstant.uploadFileSizeLimit) {
63f511	428	this.$message.error('上传文件大小不能超过 2M!');
I	429	return reject(false);
	430	}
	431	return resolve(true)
	432	});
	433
6bcd13	434	},
I	435	handleChange(info) {
af029b	436	this.form.blogFileList = info.fileList;
I	437
6bcd13	438	if (info.file.status !== 'uploading') {
I	439	console.log(info.file, info.fileList);
	440	}
	441	if (info.file.status === 'done') {
c23efb	442	this.form.fileId = info.file.response.data;
fa1bd9	443	this.$message.success(`${info.file.name} 上传成功`);
c23efb	444	} else if (info.file.status === 'error') {
fa1bd9	445	this.$message.error(`${info.file.name} 上传失败`);
c23efb	446	}
af029b	447
I	448	if (this.form.blogFileList == null \|\| this.form.blogFileList.length == 0) {
	449	this.form.fileId = null
	450	}
c23efb	451	},
I	452	handleChangeCoverFile(info) {
af029b	453	this.form.coverFileList = info.fileList;
I	454
c23efb	455	if (info.file.status !== 'uploading') {
I	456	console.log(info.file, info.fileList);
	457	}
	458	if (info.file.status === 'done') {
	459	this.form.coverFile = info.file.response.data;
fa1bd9	460	this.$message.success(`${info.file.name} 上传成功`);
6bcd13	461	} else if (info.file.status === 'error') {
fa1bd9	462	this.$message.error(`${info.file.name} 上传失败`);
af029b	463	}
I	464
	465	if (this.form.coverFileList == null \|\| this.form.coverFileList.length == 0) {
	466	this.form.coverFile = null
fa1bd9	467	}
I	468	},
	469	handleChangePictureFile(info) {
	470	this.form.pictureList = info.fileList;
	471
	472	if (info.file.status !== 'uploading') {
	473	console.log(info.file, info.fileList);
	474	}
	475	if (info.file.status === 'done') {
	476	if (this.form.pictureIds == null \|\| this.form.pictureIds == "") {
	477	this.form.pictureIds = info.file.response.data;
	478	} else {
	479	this.form.pictureIds = this.form.pictureIds + "," + info.file.response.data;
	480	}
	481	this.$message.success(`${info.file.name} 上传成功`);
	482	} else if (info.file.status === 'error') {
	483	this.$message.error(`${info.file.name} 上传失败`);
	484	}
	485
	486	if (this.form.pictureList == null \|\| this.form.pictureList.length == 0) {
	487	this.form.pictureIds = null
	488	}
	489	},
	490	handleChangeVideoFile(info) {
	491	this.form.videoList = info.fileList;
	492
	493	if (info.file.status !== 'uploading') {
	494	console.log(info.file, info.fileList);
	495	}
	496	if (info.file.status === 'done') {
	497	if (this.form.videoIds == null \|\| this.form.videoIds == "") {
	498	this.form.videoIds = info.file.response.data;
	499	} else {
	500	this.form.videoIds = this.form.videoIds + "," + info.file.response.data
	501	}
	502	this.$message.success(`${info.file.name} 上传成功`);
	503	} else if (info.file.status === 'error') {
	504	this.$message.error(`${info.file.name} 上传失败`);
	505	}
	506
	507	if (this.form.videoList == null \|\| this.form.videoList.length == 0) {
	508	this.form.videoIds = null
6bcd13	509	}
I	510	},
	511	/**
	512	* 上传文件
	513	*/
	514	customRequest(option) {
	515	const formData = new FormData()
	516	formData.append('file', option.file)
80476f	517	formData.append('bucketName', option.data.bucketName)
0dd41b	518	formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
fa1bd9	519	let _this = this
105729	520	myFileInfoUpload(formData).then((res) => {
6bcd13	521	if (res.success) {
I	522	option.onSuccess(res, option.file)
87317f	523	// 在上传成功后进度条显示为99
I	524	progress.percent = 100
fa1bd9	525	// this.$message.success('上传成功')
6bcd13	526	} else {
I	527	this.$message.error('上传失败：' + res.message)
	528	}
	529	})
87317f	530
I	531	let progress = {
	532	percent: 1
	533	}
	534	let speed = 100 / (option.file.size / 65000) //上传速度
	535	const intervalId = setInterval(() => {
	536	// 控制进度条防止在未上传成功时进度条达到100
	537	if (progress.percent < 99 && progress.percent + speed < 100) {
	538	progress.percent += speed //控制进度条速度
	539	option.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示
	540	} else if ((progress.percent < 100)) {
	541	progress.percent++
	542	} else if (progress.percent >= 100) {
	543	clearInterval(intervalId)
	544	}
	545	}, 500)
	546
6bcd13	547	},
f5539f	548	disabledDate(current) {
L	549	return current < moment().subtract(1, "day");
	550	},
	551	getCalendarContainer(trigger) {
	552	return trigger => trigger.parentNode;
	553	},
	554	handleClose(removedTag) {
af029b	555	// const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b	556	//console.log(tags);
af029b	557	this.tags = this.tags.filter(tag => tag !== removedTag);
f5539f	558	},
L	559	showInput() {
	560	this.inputVisible = true;
	561	this.$nextTick(function() {
	562	this.$refs.input.focus();
	563	});
	564	},
	565	handleInputChange(e) {
	566	this.inputValue = e.target.value;
	567	},
	568	handleInputConfirm() {
	569	const inputValue = this.inputValue;
	570	let tags = this.tags;
	571	if (inputValue && tags.indexOf(inputValue) === -1) {
	572	tags = [...tags, inputValue];
	573	}
1ad93b	574	//console.log(tags);
f5539f	575	Object.assign(this, {
L	576	tags,
	577	inputVisible: false,
	578	inputValue: '',
	579	});
	580	},
1ad93b	581
f5539f	582	},
L	583	};
	584	</script>
	585
	586	<style lang="less">
1ad93b	587	@media screen and(max-width: 575px) {
I	588	.ant-form-item-label {
	589	padding: 8px !important;
	590	}
	591	}
	592
f5539f	593	.myTip {
L	594	font-size: 10px;
	595	color: #999;
	596	}
	597
	598	.myBorder {
	599	border: 1px solid #999;
1ad93b	600	border-radius: 10px;
f5539f	601	}
L	602
	603	.ant-upload-list-item-info {
	604	a {
	605	color: #999;
	606	}
	607	}
	608
	609	/* tile uploaded pictures */
	610	.upload-list-inline>.ant-upload-list-item {
	611	float: left;
	612	width: 100px;
	613	margin-right: 8px;
	614	}
	615
	616	.upload-list-inline>.ant-upload-animate-enter {
	617	animation-name: uploadAnimateInlineIn;
	618	}
	619
	620	.upload-list-inline>.ant-upload-animate-leave {
	621	animation-name: uploadAnimateInlineOut;
	622	}
	623	</style>