sooka_consult_uniapp/pages/mattersAdd/mattersAdd.vue

/*
 *@description: 新增资讯
 *@author: yh Fu
 *@date: 2024-03-04 14:45:49
 *@version: V1.0.5
*/
<template>
	<view>
		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext" class="uniForm">
			<uni-group title="基本信息" top="0">
				<uni-forms-item name="name" required label="事项标题">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.titleName" placeholder="请输入事项标题"></uni-easyinput>
				</uni-forms-item>
				<!-- 使用原生input，需要绑定binddata -->
				<uni-forms-item name="textDetails" required label="正文">
					<uni-easyinput type="textarea" v-model="formData.textDetails" :maxlength="50" @blur="binddata('textDetails', $event.detail.value)" placeholder="请输入正文"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="电话" required name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item name="address" required label="地址">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.address" placeholder="请输入地址"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="checked" label="主题类型" label-width="30%">
					<uni-data-select
						  style="width: 30%;margin: auto;"
						  v-model="formData.type"
						  placeholder="请选择主题类型"
						  field="deptName as value, deptName as text"	
						  :localdata="topicTypeList"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="checked" label="所属部门" label-width="30%">
					<uni-data-select
						  style="width: 30%;margin: auto;"
						  v-model="formData.department"
						  placeholder="请选择所属部门"
						  field="name as value, name as text"	
						  :localdata="departmentList"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="checked" label="是否常办" label-width="30%">
					<switch :checked="formData.isTop" @change="change(' isTop', $event.detail.value)" style="margin-top: 2%;"/>
				</uni-forms-item>
				<uni-forms-item name="urlList" required label="图片">
					<upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"></upload>
				</uni-forms-item>
			</uni-group>
			<view>
				<!-- <button  @click="submitForm('form')">校验表单</button>
				<button size="mini" @click="validateField('form')">只校验用户名和邮箱项</button>
				<button size="mini" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
				<button size="mini" @click="clearValidate('form')">移除全部表单校验结果</button>
				<button  @click="resetForm">重置表单</button> -->
				<button  @click="submitForm('form')">新增</button>
			</view>
		</uni-forms>
	</view>
</template>
 
<script>
	import { 
		getListTopicType,
		getListDepts ,
	} from '@/api/me/matters/matters.js'
	import upload from '@/components/upload/index.vue'
	export default {
		components: {
			upload
		},
		created(){
			getListTopicType().then(e => {
				e.rows.forEach(v => {
					this.topicTypeList.push({
						text:v.deptName,
						value:v.id
					})
				})
			})
			getListDepts().then(e => {
				e.rows.forEach(v => {
					this.departmentList.push({
						text:v.name,
						value:v.name
					})
				})
			})
		},
		data() {
			return {
				formData: {
					titleName: '',
					textDetails: '',
					address:'',
					phone:'',
					email: '',
					sex: '0',
					hobby: [0, 2],
					remarks: '热爱学习，热爱生活',
					isGovernment: false,
					isTop: false,
					country: 2,
					weight: 120,
					birth: '',
					type:'',
					department:''
				},
				imageList:[],
				topicTypeList:[],
				departmentList:[],
				sex: [{
						text: '男',
						value: '0'
					},
					{
						text: '女',
						value: '1'
					},
					{
						text: '未知',
						value: '2'
					}
				],
				hobby: [{
						text: '足球',
						value: 0
					},
					{
						text: '篮球',
						value: 1
					},
					{
						text: '游泳',
						value: 2
					}
				],
				range: ['中国', '美国', '澳大利亚'],
				show: false,
				rules: {
					titleName: {
						rules: [{
								required: true,
								errorMessage: '请输入标题'
							},
							{
								minLength: 1,
								errorMessage: '标题不得为空'
							}
						]
					},
					textDetails: {
						rules: [{
								required: true,
								errorMessage: '请输入正文'
							},
							{
								minLength: 10,
								errorMessage: '正文不得少于 {minLength} 字'
							}
						]
					},
					weight: {
						rules: [{
								format: 'number',
								errorMessage: '体重必须是数字'
							},
							{
								minimum: 100,
								maximum: 200,
								errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤'
							}
						]
					},
					birth: {
						rules: [
							{
								required: true,
								errorMessage: '请选择时间'
							},
							{
								format: 'timestamp',
								errorMessage: '必须是时间戳'
							}
						]
					},
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址'
						}]
					},
					isGovernment: {
						rules: [{
							format: 'bool'
						}]
					},
					isTop: {
						rules: [{
							format: 'bool'
						}]
					},
					sex: {
						rules: [{
							format: 'string'
						}]
					},
					hobby: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		methods: {
			change(name, value) {
				this.formData.checked = value
				this.$refs.form.setValue(name, value)
			},
 
			submitForm(form) {
				this.$refs[form]
					.submit()
					.then(res => {
						console.log('表单的值：', res)
						uni.showToast({
							title: '验证成功'
						})
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
 
			//重置表单 。原生的组件input组件不能重置表单
			resetForm() {
				this.$refs.form.resetFields()
			},
			validateField(form) {
				this.$refs[form]
					.validateField(['name', 'email'])
					.then(res => {
						uni.showToast({
							title: '验证成功'
						})
						console.log('表单的值：', res)
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
			updateImg(imgList){
				this.imageList = imgList;
			},
			clearValidate(form, name) {
				if (!name) name = []
				this.$refs[form].clearValidate(name)
			}
		}
	}
</script>
<style lang="scss">
	.uniForm{
		.uni-forms-item{
			margin: auto;
			.uni-forms-item__content{
				margin: auto;
			}
		}
	}
	.radioView{
		margin: auto;
		.uni-forms-item__content{
			margin: auto;
		}
	}
	.uni-input-border {
		padding: 0 10px;
		height: 35px;
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}
</style>