zhxy-desk/components/leavaFrom.vue

<template>
	<view>
		<uni-forms :rules="rules" ref="baseForm" label-position='top' :modelValue="form">
			<uni-forms-item name='name' label="请假类型" required>
				<uni-data-select v-model="form.name" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name='initiateDate' label="开始时间" required>
				<uni-datetime-picker type="datetime" v-model="form.initiateDate" @change="changeLog" />
			</uni-forms-item><uni-forms-item label="结束时间" required name="endDate">
				<uni-datetime-picker type="datetime" v-model="form.endDate" @change="changeLog" />
			</uni-forms-item>
			</uni-forms-item><uni-forms-item label="请假事由" required>
				<view class="editor-content">
					
					<editor @input="valueChange" id="editor" class="ql-container" placeholder="开始输入..." show-img-size
						show-img-toolbar show-img-resize @statuschange="onStatusChange" :read-only="readOnly"
						@ready="onEditorReady">
					</editor>
					<view style="color: #999;display: flex;align-items: center;padding-top: 20rpx;" @click="insertImage"
						class="">
						添加照片 <view class="iconfont icon-charutupian"></view>
					</view>
				</view>

			</uni-forms-item>
		</uni-forms>

		<view @click="submit('baseForm')" class="btn">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		name: "leavaFrom",
		props: {
			form: {
				default: () => {},
				type: Object
			}

		},
		data() {
			return {
				readOnly: false,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				formats: null,
				editorCtx: null,
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请选择年龄',
						}],
					},
					initiateDate: {
						rules: [{
							required: true,
							errorMessage: '请选择开始时间',
						}],
					},
					endDate: {
						rules: [{
							required: true,
							errorMessage: '请选择结束时间',
						}],
					},

				}
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			submit(type) {
				console.log(this.form);
				this.$refs[type].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})

			},
			changeLog() {

			},
			valueChange(e) {

			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return

				this.editorCtx.format(name, value)
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {

					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			onStatusChange(e) {
				const formats = e.detail

				this.formats = formats
			},
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function(res) {
								console.log(res);
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./editor-icon.css";

	.btn {
		width: 100%;
		height: 84rpx;
		background: #05cca1;
		border-radius: 42rpx;
		color: #fff;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
	}

	.ql-container {
		border-bottom: 1px solid #f2f2f2;
	}

	/deep/.uni-stat__select {
		background-color: #fff !important;
	}



	/deep/.uni-input-placeholder {
		left: 20rpx;
	}

	.editor-content {
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
</style>