blog/blog-facade.git

inleft

2022-02-21 4b854c29227ef08ea178a3bba527a40ca2f84674

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