blog/blog-facade.git

inleft

2022-02-16 63af45eaa849552e4ea3ff0248c47bacb62cacdb

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">
	4	<a-form-model-item label="标题" prop="title">
f5539f	5	<a-input v-model="form.title" placeholder="限 50字内" />
L	6	</a-form-model-item>
	7
06ee76	8	<a-form-model-item label="模式切换" prop="common">
f5539f	9	<a-switch v-model="form.online" />
L	10	<span class="myTip">
1ad93b	11	本地文件/由系统生成文件
f5539f	12	</span>
L	13	</a-form-model-item>
	14
	15
1ad93b	16	<a-form-model-item label="日志文件" v-show="!form.online" prop="blogFileList">
f5539f	17	<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
L	18	:default-file-list="form.blogFileList">
	19	<a-button>
1ad93b	20	<a-icon type="upload" /> 限 markdown/html
f5539f	21	</a-button>
L	22	</a-upload>
	23	</a-form-model-item>
	24
1ad93b	25	<a-form-model-item label="日志内容" v-show="form.online" prop="content">
f5539f	26	<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
L	27	</a-form-model-item>
	28
1ad93b	29	<a-form-model-item label="分类" prop="class">
f5539f	30	<a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
L	31	:getPopupContainer="getCalendarContainer()">
	32	<a-select-option value="shanghai">
	33	Zone one
	34	</a-select-option>
	35	<a-select-option value="beijing">
	36	Zone two
	37	</a-select-option>
	38	<a-select-option value="beijing2">
	39	Zone two
	40	</a-select-option>
	41	</a-select>
	42	</a-form-model-item>
	43
1ad93b	44	<a-form-model-item label="额外设置">
f5539f	45	<a-switch v-model="form.preference" />
L	46	</a-form-model-item>
	47
	48	<div v-show="form.preference" class="myBorder" style="padding:10px;">
1ad93b	49	<a-form-model-item label="起个草稿">
f5539f	50	<a-switch v-model="form.tempSave" />
L	51	<span v-show="form.tempSave" class="myTip">
1ad93b	52	临时存储,游客无法浏览
f5539f	53	</span>
L	54	</a-form-model-item>
	55
	56	<a-form-model-item label=" 文件类型">
	57	<a-radio-group v-model="form.blogType">
	58	<a-radio value="Markdown">
1ad93b	59	markdown
f5539f	60	</a-radio>
L	61	<a-radio value="Html">
1ad93b	62	html
f5539f	63	</a-radio>
L	64	</a-radio-group>
	65	</a-form-model-item>
	66
	67
	68	<a-form-model-item label="标签">
	69	<template v-for="(tag, index) in tags">
	70	<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
	71	<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
	72	{{ `${tag.slice(0, 20)}...` }}
	73	</a-tag>
	74	</a-tooltip>
1ad93b	75	<a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
f5539f	76	{{ tag }}
L	77	</a-tag>
	78	</template>
1ad93b	79
f5539f	80	<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
L	81	:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
	82	@keyup.enter="handleInputConfirm" />
1ad93b	83
f5539f	84	<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
L	85	<a-icon type="plus" /> New Tag
	86	</a-tag>
1ad93b	87
f5539f	88	</a-form-model-item>
L	89
	90
	91	<a-form-model-item label="封面">
	92	<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
	93	:default-file-list="form.coverFileList" class="upload-list-inline">
	94	<a-button>
	95	<a-icon type="upload" /> jpg/png/jpeg..
	96	</a-button>
	97	</a-upload>
15bd39	98	<span class="myTip">
L	99	自动转码,可以传高清图
	100	</span>
f5539f	101	</a-form-model-item>
L	102
	103	<a-form-model-item label="定时">
06ee76	104	<a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
f5539f	105	style="width: 100%;" :disabledDate="disabledDate"
L	106	:getCalendarContainer="getCalendarContainer()" />
06ee76	107	</a-form-model-item>
L	108
	109	<a-form-model-item label="置顶权重">
	110	<a-slider v-model="form.sliderValue" :default-value="20" :step="5"
	111	:getTooltipPopupContainer="getCalendarContainer()" />
	112	<span class="myTip">
63af45	113	越小越靠前
06ee76	114	</span>
f5539f	115	</a-form-model-item>
L	116
	117
	118
1ad93b	119	<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f	120
L	121	<a-form-model-item label="加锁">
	122	<a-switch v-model="form.lock" />
	123	<span v-show="!form.lock" class="myTip">
	124	默认为公开
	125	</span>
	126	</a-form-model-item>
	127
	128	<div v-show="form.lock ">
	129	<a-form-model-item label="阅读权限">
	130	<a-radio-group v-model="form.auth">
	131	<a-radio value="private">
	132	私人
	133	</a-radio>
	134	<a-radio value="password">
	135	密码授权
	136	</a-radio>
	137	</a-radio-group>
	138	</a-form-model-item>
	139
	140	<a-form-model-item label="授权密码" v-show="form.auth=='password'">
06ee76	141	<a-input v-model="form.password" type="password" placeholder="独立密码">
f5539f	142	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
L	143	</a-input>
	144	</a-form-model-item>
	145	</div>
	146
	147	</div>
	148
	149	</div>
	150
	151	</a-form-model>
	152	</div>
	153	</template>
	154
	155	<script>
	156	import moment from "moment";
	157	export default {
	158	data() {
06ee76	159
L	160	let validateContent = (rule, value, callback) => {
	161	if (this.form.online) {
	162	console.log("内容未填");
	163	this.$refs.myForm.validateField('content')
	164	} else {
	165	console.log("文件未传");
	166	this.$refs.myForm.validateField('blogFileList')
	167	}
	168	callback();
	169	};
	170
f5539f	171	return {
1ad93b	172
f5539f	173	blogFileList: [],
L	174	coverFileList: [
	175	// {
	176	// uid: '-1',
	177	// name: 'xxx.png',
	178	// status: 'done',
	179	// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	180	// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	181	// }
	182	],
	183	tags: [],
	184	inputVisible: false,
	185	inputValue: '',
	186	labelCol: {
1ad93b	187	span: 7
f5539f	188	},
L	189	wrapperCol: {
1ad93b	190	span: 13
f5539f	191	},
L	192	form: {
06ee76	193	online: false,
1ad93b	194	preference: false,
f5539f	195	title: '',
L	196	content: '',
	197	class: [],
	198	tempSave: false,
	199	blogType: "Markdown",
	200	publishDate: "",
	201	lock: false,
	202	auth: "private",
	203	password: "",
	204	blogFileList: [],
1ad93b	205	coverFileList: [],
f5539f	206	},
1ad93b	207	rules: {
I	208	title: [{
	209	required: true,
	210	message: '标题不能为空',
	211	trigger: 'blur'
	212	},
	213	{
	214	min: 5,
	215	max: 50,
	216	message: '字数限制1~50',
	217	trigger: 'blur'
	218	},
	219	],
06ee76	220	common: [{
L	221	validator: validateContent,
	222	trigger: []
	223	}],
1ad93b	224	content: [{
06ee76	225	max: 10,
1ad93b	226	required: true,
06ee76	227	message: '至少填一下上传内容',
1ad93b	228	trigger: 'blur'
I	229	}, ],
	230	blogFileList: [{
06ee76	231	min: 1,
1ad93b	232	required: true,
I	233	message: '文件未上传',
06ee76	234	}],
1ad93b	235	class: [{
I	236	required: true,
	237	message: '至少选一个分类',
	238	trigger: 'blur'
	239	}, ],
	240	// region: [{
	241	// required: true,
	242	// message: 'Please select Activity zone',
	243	// trigger: 'change'
	244	// }],
	245	// date1: [{
	246	// required: true,
	247	// message: 'Please pick a date',
	248	// trigger: 'change'
	249	// }],
	250	// type: [{
	251	// type: 'array',
	252	// required: true,
	253	// message: 'Please select at least one activity type',
	254	// trigger: 'change',
	255	// }, ],
	256	// resource: [{
	257	// required: true,
	258	// message: 'Please select activity resource',
	259	// trigger: 'change'
	260	// }, ],
	261	// desc: [{
	262	// required: true,
	263	// message: 'Please input activity form',
	264	// trigger: 'blur'
	265	// }],
	266	}
f5539f	267	};
L	268	},
	269	methods: {
	270	disabledDate(current) {
	271	return current < moment().subtract(1, "day");
	272	},
	273	getCalendarContainer(trigger) {
	274	return trigger => trigger.parentNode;
	275	},
	276	handleClose(removedTag) {
	277	const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b	278	//console.log(tags);
f5539f	279	this.tags = tags;
L	280	},
	281
	282	showInput() {
	283	this.inputVisible = true;
	284	this.$nextTick(function() {
	285	this.$refs.input.focus();
	286	});
	287	},
	288
	289	handleInputChange(e) {
	290	this.inputValue = e.target.value;
	291	},
	292
	293	handleInputConfirm() {
	294	const inputValue = this.inputValue;
	295	let tags = this.tags;
	296	if (inputValue && tags.indexOf(inputValue) === -1) {
	297	tags = [...tags, inputValue];
	298	}
1ad93b	299	//console.log(tags);
f5539f	300	Object.assign(this, {
L	301	tags,
	302	inputVisible: false,
	303	inputValue: '',
	304	});
	305	},
1ad93b	306
f5539f	307	},
L	308	};
	309	</script>
	310
	311	<style lang="less">
1ad93b	312	@media screen and(max-width: 575px) {
I	313	.ant-form-item-label {
	314	padding: 8px !important;
	315	}
	316	}
	317
f5539f	318	.myTip {
L	319	font-size: 10px;
	320	color: #999;
	321	}
	322
	323	.myBorder {
	324	border: 1px solid #999;
1ad93b	325	border-radius: 10px;
f5539f	326	}
L	327
	328	.ant-upload-list-item-info {
	329	a {
	330	color: #999;
	331	}
	332	}
	333
	334	/* tile uploaded pictures */
	335	.upload-list-inline>.ant-upload-list-item {
	336	float: left;
	337	width: 100px;
	338	margin-right: 8px;
	339	}
	340
	341	.upload-list-inline>.ant-upload-animate-enter {
	342	animation-name: uploadAnimateInlineIn;
	343	}
	344
	345	.upload-list-inline>.ant-upload-animate-leave {
	346	animation-name: uploadAnimateInlineOut;
	347	}
	348	</style>