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="title" required label="事项标题">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.title" placeholder="请输入事项标题"></uni-easyinput>
				</uni-forms-item>
				<!-- 使用原生input，需要绑定binddata -->
				<uni-forms-item name="content" required label="正文">
					<uni-easyinput type="textarea" v-model="formData.content" :maxlength="50" @blur="binddata('textDetails', $event.detail.value)" placeholder="请输入正文"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="电话"  name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item name="address"  label="地址">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.address" placeholder="请输入地址"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="type" label="主题类型" required 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="department" label="所属部门" required 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="picture"  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'
	import {addsc} from '@/api/handleAffairs/matter.js'
	
	export default {
		components: {
			upload
		},
		created(){
			getListTopicType().then(e => {
				e.rows.forEach(v => {
					this.topicTypeList.push({
						text:v.deptName,
						value:v.deptName
					})
				})
			})
			getListDepts().then(e => {
				e.rows.forEach(v => {
					this.departmentList.push({
						text:v.name,
						value:v.name
					})
				})
			})
		},
		data() {
			return {
				formData: {
					title: '',
					textDetails: '',
					address:'',
					phone:'',
                    content:'',
	                picture:'',
					isGovernment: false,
					isTop: false,
					country: 2,
					weight: 120,
					birth: '',
					type:'',
					department:''
				},
				imageList:[],
				topicTypeList:[],
				departmentList:[],
			
				show: false,
				rules: {
					title: {
						rules: [{
								required: true,
								errorMessage: '请输入标题'
							},
							{
								minLength: 1,
								errorMessage: '标题不得为空'
							}
						]
					},
					content: {
						rules: [{
								required: true,
								errorMessage: '请输入正文'
							},
							{
								minLength: 1,
								errorMessage: '正文不得为空'
							}
						]
					},
					type: {
						rules: [{
								required: true,
								errorMessage: '请选择主题类型'
							},
							{
								minLength: 1,
								errorMessage: '主题类型不得为空'
							}
						]
					},
					department: {
						rules: [{
								required: true,
								errorMessage: '请选择所属部门'
							},
							{
								minLength: 1,
								errorMessage: '所属部门不得为空'
							}
						]
					},
				// 	textDetails: {
				// 		rules: [{
				// 				required: true,
				// 				errorMessage: '请输入正文'
				// 			},
				// 			{
				// 				minLength: 10,
				// 				errorMessage: '正文不得少于 {minLength} 字'
				// 			}
				// 		]
				// 	},
				

				}
			}
		},
		methods: {
		
			submitForm(form) {
			    this.$refs[form]
			        .submit()
			        .then(res => {
			            console.log("222222222222222222", res);
			            uni.showModal({
			                title: '确认',
			                content: '是否添加该事项？',
			                success: (res) => {
			                    console.log("1111111111111", res);
			                    if (res.confirm) {
			                        // 用户点击确定按钮
			                   
			                    addsc(this.formData).then(response => {
										console.log("7777777", this.formData);
			                            this.$modal.msgSuccess("新增成功");
			                             uni.navigateBack();
			               
			                        }).catch(error => {
			                            console.error("新增方法出错：", error);
			                        });
			                    } else if (res.cancel) {
			                        // 用户点击取消按钮
			                        uni.showToast({
			                            title: '已取消',
			                            icon: 'none'
			                        });
			                    }
			                }
			            });
			        })
			        .catch(error => {
			            console.error("表单提交出错：", error);
			        });
			},


 
			// submitForm(form) {
			// 	this.$refs[form]
			// 		.submit()
			// 		.then(res => {
			// 			console.log('表单的值：', res)
			// 			uni.showToast({
			// 				title: '验证成功'
			// 			})
			// 		})
			// 		.catch(errors => {
			// 			console.error('验证失败：', errors)
			// 		})
			// },
 
		
			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;
				//  this.formData.picture =this.imageList
				 // this.formData.picture = JSON.stringify(this.imageList);
				const pictureString = '"' + this.imageList.join('","') + '"';
				
				// 将转换后的字符串赋值给 this.formData.picture
				this.formData.picture = pictureString;
				// console.log("1111111111111",)
			},
			// 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>