blog/blog-facade.git

inleft

2022-02-18 7b98c8999087b7551d2e2e32daf12dd10a0d9713

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