blog/blog-facade.git

inleft

2022-08-04 00e46dcc41d259b33e6c6c9771b7e2fe2ab95401

commit \| author \| age
f5539f	1	<template>
1ad93b	2	<div>
I	3	<a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
6bcd13	4	<a-form-model-item label="认证" prop="secret">
I	5	<a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令">
	6	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
	7	</a-input>
	8	</a-form-model-item>
	9
1ad93b	10	<a-form-model-item label="标题" prop="title">
f5539f	11	<a-input v-model="form.title" placeholder="限 50字内" />
L	12	</a-form-model-item>
	13
06ee76	14	<a-form-model-item label="模式切换" prop="common">
f5539f	15	<a-switch v-model="form.online" />
4b854c	16	<span class="myTip" v-if="form.online">
I	17	由系统生成文件
	18	</span>
	19	<span class="myTip" v-else>
	20	本地文件上传
f5539f	21	</span>
L	22	</a-form-model-item>
	23
	24
6bcd13	25	<a-form-model-item label="日志文件" v-show="!form.online">
I	26	<!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
f5539f	27	:default-file-list="form.blogFileList">
L	28	<a-button>
1ad93b	29	<a-icon type="upload" /> 限 markdown/html
6bcd13	30	</a-button>
I	31	</a-upload> -->
	32
	33	<a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
63f511	34	:default-file-list="form.blogFileList" :beforeUpload="beforeUpload">
6bcd13	35
I	36	<a-button>
	37	<a-icon type="upload" />限 markdown/html
f5539f	38	</a-button>
L	39	</a-upload>
	40	</a-form-model-item>
	41
63f511	42	<a-form-model-item label="日志内容" v-show="form.online">
f5539f	43	<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
L	44	</a-form-model-item>
	45
1ad93b	46	<a-form-model-item label="分类" prop="class">
6bcd13	47	<a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
f5539f	48	:getPopupContainer="getCalendarContainer()">
6bcd13	49
I	50	<a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
	51	{{ item.typeName }}
f5539f	52	</a-select-option>
6bcd13	53
f5539f	54	</a-select>
L	55	</a-form-model-item>
	56
1ad93b	57	<a-form-model-item label="额外设置">
f5539f	58	<a-switch v-model="form.preference" />
L	59	</a-form-model-item>
	60
	61	<div v-show="form.preference" class="myBorder" style="padding:10px;">
1ad93b	62	<a-form-model-item label="起个草稿">
f5539f	63	<a-switch v-model="form.tempSave" />
L	64	<span v-show="form.tempSave" class="myTip">
1ad93b	65	临时存储,游客无法浏览
f5539f	66	</span>
L	67	</a-form-model-item>
	68
4b854c	69	<a-form-model-item label=" 日志类型">
00e46d	70	<a-select v-model="form.blogType" mode="default" placeholder=""
I	71	:getPopupContainer="getCalendarContainer()">
	72	<a-select-option value="1">
1ad93b	73	markdown
00e46d	74	</a-select-option>
I	75	<a-select-option value="2">
1ad93b	76	html
00e46d	77	</a-select-option>
I	78	<a-select-option value="5">
	79	fast(闪念)
	80	</a-select-option>
	81	</a-select>
f5539f	82	</a-form-model-item>
L	83
	84
	85	<a-form-model-item label="标签">
	86	<template v-for="(tag, index) in tags">
	87	<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
	88	<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
	89	{{ `${tag.slice(0, 20)}...` }}
	90	</a-tag>
	91	</a-tooltip>
1ad93b	92	<a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
f5539f	93	{{ tag }}
L	94	</a-tag>
	95	</template>
1ad93b	96
f5539f	97	<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
L	98	:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
	99	@keyup.enter="handleInputConfirm" />
1ad93b	100
f5539f	101	<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
L	102	<a-icon type="plus" /> New Tag
	103	</a-tag>
1ad93b	104
f5539f	105	</a-form-model-item>
L	106
	107
	108	<a-form-model-item label="封面">
6bcd13	109	<!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
f5539f	110	:default-file-list="form.coverFileList" class="upload-list-inline">
L	111	<a-button>
	112	<a-icon type="upload" /> jpg/png/jpeg..
	113	</a-button>
6bcd13	114	</a-upload> -->
I	115
	116	<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
c23efb	117	@change="handleChangeCoverFile"
6bcd13	118	:default-file-list="form.coverFileList">
I	119	<a-button>
	120	<a-icon type="upload" />jpg/png/jpeg..
	121	</a-button>
f5539f	122	</a-upload>
6bcd13	123	<!-- <span class="myTip">
15bd39	124	自动转码,可以传高清图
6bcd13	125	</span> -->
f5539f	126	</a-form-model-item>
L	127
	128	<a-form-model-item label="定时">
06ee76	129	<a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
f5539f	130	style="width: 100%;" :disabledDate="disabledDate"
L	131	:getCalendarContainer="getCalendarContainer()" />
06ee76	132	</a-form-model-item>
L	133
7b98c8	134	<div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
6bcd13	135	<a-form-model-item label="置顶">
I	136	<a-switch v-model="form.top" />
	137	</a-form-model-item>
f5539f	138
6bcd13	139	<div v-show="form.top">
I	140	<a-form-model-item label="权重">
7b98c8	141	<a-slider v-model="form.sliderValue" :default-value="50" :step="5"
6bcd13	142	:getTooltipPopupContainer="getCalendarContainer()" />
I	143	<span class="myTip">
	144	越小越靠前
	145	</span>
	146	</a-form-model-item>
	147	</div>
	148	</div>
f5539f	149
L	150
1ad93b	151	<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f	152
L	153	<a-form-model-item label="加锁">
	154	<a-switch v-model="form.lock" />
	155	<span v-show="!form.lock" class="myTip">
	156	默认为公开
	157	</span>
	158	</a-form-model-item>
	159
	160	<div v-show="form.lock ">
	161	<a-form-model-item label="阅读权限">
	162	<a-radio-group v-model="form.auth">
c23efb	163	<a-radio value="2">
f5539f	164	私人
L	165	</a-radio>
c23efb	166	<a-radio value="3">
f5539f	167	密码授权
L	168	</a-radio>
	169	</a-radio-group>
	170	</a-form-model-item>
	171
fc0c10	172	<a-form-model-item label="授权密码" v-show="form.auth==3">
7b98c8	173	<a-input-password v-model="form.password" autocomplete='new-password' type="password"
6bcd13	174	placeholder="独立密码">
f5539f	175	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
7b98c8	176	</a-input-password>
f5539f	177	</a-form-model-item>
L	178	</div>
	179
	180	</div>
	181
	182	</div>
	183
	184	</a-form-model>
	185	</div>
	186	</template>
	187
	188	<script>
	189	import moment from "moment";
6bcd13	190	import {
I	191	sysFileInfoUpload
	192	} from '../../api/fileManage.js';
63f511	193
6bcd13	194	import {
I	195	queryBlogArticleType
	196	} from '../../api/blogArticleType.js'
63f511	197
I	198
f5539f	199	export default {
6bcd13	200	beforeMount() {
I	201	queryBlogArticleType({}).then((res) => {
	202	this.blogArticleType = res.data;
	203	})
	204	},
f5539f	205	data() {
06ee76	206
L	207	let validateContent = (rule, value, callback) => {
	208	if (this.form.online) {
	209	console.log("内容未填");
	210	this.$refs.myForm.validateField('content')
63f511	211	if (this.form.content == null \|\| this.form.content == "") {
I	212	callback(new Error('内容未填'));
	213	}
06ee76	214	} else {
L	215	console.log("文件未传");
	216	this.$refs.myForm.validateField('blogFileList')
c23efb	217	if (this.form.fileId == null) {
63f511	218	callback(new Error('文件未传'));
I	219	}
06ee76	220	}
L	221	callback();
	222	};
	223
f5539f	224	return {
6bcd13	225	blogArticleType: [],
f5539f	226	tags: [],
L	227	inputVisible: false,
	228	inputValue: '',
	229	labelCol: {
1ad93b	230	span: 7
f5539f	231	},
L	232	wrapperCol: {
1ad93b	233	span: 13
f5539f	234	},
L	235	form: {
6bcd13	236	secret: '',
06ee76	237	online: false,
1ad93b	238	preference: false,
f5539f	239	title: '',
L	240	content: '',
	241	class: [],
	242	tempSave: false,
c23efb	243	blogType: "1",
f5539f	244	publishDate: "",
L	245	lock: false,
6bcd13	246	top: false,
c23efb	247	sliderValue:50,
I	248	auth: 1,
f5539f	249	password: "",
c23efb	250	fileId: null,
I	251	coverFile: null,
f5539f	252	blogFileList: [],
1ad93b	253	coverFileList: [],
f5539f	254	},
1ad93b	255	rules: {
I	256	title: [{
	257	required: true,
	258	message: '标题不能为空',
	259	trigger: 'blur'
	260	},
	261	{
63f511	262	min: 1,
1ad93b	263	max: 50,
I	264	message: '字数限制1~50',
	265	trigger: 'blur'
	266	},
	267	],
6bcd13	268	secret: [{
I	269	required: true,
	270	message: '不正经的人..',
	271	trigger: 'blur'
	272	}],
06ee76	273	common: [{
L	274	validator: validateContent,
	275	trigger: []
	276	}],
63f511	277	// content: [{
I	278	// max: 10,
	279	// required: true,
	280	// message: '至少填一下上传内容',
	281	// trigger: 'blur'
	282	// }, ],
	283	// blogFileList: [{
	284	// max: 1,
	285	// required: true,
	286	// message: '文件未上传',
	287	// }],
1ad93b	288	class: [{
I	289	required: true,
	290	message: '至少选一个分类',
	291	trigger: 'blur'
	292	}, ],
63f511	293
1ad93b	294	}
f5539f	295	};
L	296	},
	297	methods: {
6bcd13	298	beforeUpload(file, fileList) {
I	299	return new Promise((resolve, reject) => {
c23efb	300	if (this.form.fileId != null) {
6bcd13	301	this.$message.error('这里最多上传一个文件');
I	302	return reject(false);
	303	}
63f511	304	// var testmsg=/^image\/(jpeg\|png\|jpg)$/.test(file.type)
I	305	// // var testmsg=/^image\/(md\|html\|markdown)$/.test(file.type)
	306	// if (!testmsg) {
	307	// this.$message.error('上传文件格式不对!');
	308	// return reject(false);
	309	// }
	310
	311	const isLt2M = file.size / 1024 / 1024 <= 2 //图片大小不超过2MB
	312	if (!isLt2M) {
	313	this.$message.error('上传文件大小不能超过 2M!');
	314	return reject(false);
	315	}
	316	return resolve(true)
	317	});
	318
6bcd13	319	},
I	320	handleChange(info) {
	321	if (info.file.status !== 'uploading') {
	322	console.log(info.file, info.fileList);
	323	}
	324	if (info.file.status === 'done') {
c23efb	325	this.form.fileId = info.file.response.data;
I	326	this.$message.success(`${info.file.name} file uploaded successfully`);
	327	} else if (info.file.status === 'error') {
	328	this.$message.error(`${info.file.name} file upload failed.`);
	329	}
	330	},
	331	handleChangeCoverFile(info) {
	332	if (info.file.status !== 'uploading') {
	333	console.log(info.file, info.fileList);
	334	}
	335	if (info.file.status === 'done') {
	336	this.form.coverFile = info.file.response.data;
6bcd13	337	this.$message.success(`${info.file.name} file uploaded successfully`);
I	338	} else if (info.file.status === 'error') {
	339	this.$message.error(`${info.file.name} file upload failed.`);
	340	}
	341	},
	342	/**
	343	* 上传文件
	344	*/
	345	customRequest(option) {
	346	const formData = new FormData()
	347	formData.append('file', option.file)
	348	sysFileInfoUpload(formData).then((res) => {
	349	if (res.success) {
	350	this.$message.success('上传成功')
c23efb	351
6bcd13	352	option.onSuccess(res, option.file)
I	353	} else {
	354	this.$message.error('上传失败：' + res.message)
	355	}
	356	})
	357	},
f5539f	358	disabledDate(current) {
L	359	return current < moment().subtract(1, "day");
	360	},
	361	getCalendarContainer(trigger) {
	362	return trigger => trigger.parentNode;
	363	},
	364	handleClose(removedTag) {
	365	const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b	366	//console.log(tags);
f5539f	367	this.tags = tags;
L	368	},
	369
	370	showInput() {
	371	this.inputVisible = true;
	372	this.$nextTick(function() {
	373	this.$refs.input.focus();
	374	});
	375	},
	376
	377	handleInputChange(e) {
	378	this.inputValue = e.target.value;
	379	},
	380
	381	handleInputConfirm() {
	382	const inputValue = this.inputValue;
	383	let tags = this.tags;
	384	if (inputValue && tags.indexOf(inputValue) === -1) {
	385	tags = [...tags, inputValue];
	386	}
1ad93b	387	//console.log(tags);
f5539f	388	Object.assign(this, {
L	389	tags,
	390	inputVisible: false,
	391	inputValue: '',
	392	});
	393	},
1ad93b	394
f5539f	395	},
L	396	};
	397	</script>
	398
	399	<style lang="less">
1ad93b	400	@media screen and(max-width: 575px) {
I	401	.ant-form-item-label {
	402	padding: 8px !important;
	403	}
	404	}
	405
f5539f	406	.myTip {
L	407	font-size: 10px;
	408	color: #999;
	409	}
	410
	411	.myBorder {
	412	border: 1px solid #999;
1ad93b	413	border-radius: 10px;
f5539f	414	}
L	415
	416	.ant-upload-list-item-info {
	417	a {
	418	color: #999;
	419	}
	420	}
	421
	422	/* tile uploaded pictures */
	423	.upload-list-inline>.ant-upload-list-item {
	424	float: left;
	425	width: 100px;
	426	margin-right: 8px;
	427	}
	428
	429	.upload-list-inline>.ant-upload-animate-enter {
	430	animation-name: uploadAnimateInlineIn;
	431	}
	432
	433	.upload-list-inline>.ant-upload-animate-leave {
	434	animation-name: uploadAnimateInlineOut;
	435	}
	436	</style>