gwlz/jp-mobile/pages/apps/notification/oaNotifyForm.vue

<template>
	<view>
		<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
			<u-form-item label="类型" borderBottom prop="type">
				<jp-picker v-model="inputForm.type" rangeKey="label" rangeValue="value" :range="$dictUtils.getDictList('oa_notify_type')">
				</jp-picker>
			</u-form-item>
			<u-form-item label="标题" borderBottom prop="title">
				  <u--input
				    placeholder="请输入标题"
				    maxlength="200"
					border="none"
				    v-model="inputForm.title"
				  ></u--input>
			</u-form-item>
			<u-form-item label="内容" borderBottom prop="content">
				<u--textarea v-model="inputForm.content" placeholder="请输入内容" border="none"></u--textarea>
			</u-form-item>
			<u-form-item label="状态" borderBottom prop="status">
				<u-radio-group v-model="inputForm.status" placement="row">
					<u-radio
						  v-for="item in $dictUtils.getDictList('oa_notify_status')"
						  :key="item.id"
						  :label="item.label"
						  :customStyle="{marginRight: '16px'}"
						  :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="选择人员" borderBottom prop="notifyRecordIds">
				<user-select v-model="inputForm.notifyRecordIds"></user-select>
			</u-form-item>
		</u--form>
		<view class="padding-xl">
			<u-button type="primary" @click="formSubmit" >提交</u-button>
		</view>
	</view>
</template>

<script>
	import userSelect from '@/components/user-select/user-select.vue'
	import jpPicker from '@/components/jp-picker/jp-picker.vue'
	import notifyService from "@/api/notify/notifyService";
	import userService from "@/api/sys/userService";
	export default {
		onShow() {
		  userService.treeData().then((data)=>{
			  this.data = data
		  }).catch((e)=>{
			  throw e
		  })
		},
		async onLoad(notify) {
			if(notify&&notify.id){
				this.titile = "编辑通知";
				let data = await notifyService.query({isSelf:false, id:notify.id});
				this.inputForm = this.recover(this.inputForm, data)
			}
		},
		components:{
			userSelect,
			jpPicker
		},
		data () {
			return {
				titile: '新建通知',
				inputForm: {
				  id: '',
				  type: '',
				  title: '',
				  content: '',
				  files: '',
				  status: '',
				  notifyRecordIds: ''
				},
				rules: {
					'type': [
						{
							required: true,
							message: '类型不能为空',
							trigger: ['blur', 'change']
						}
					],
					'title': [
						{
							required: true,
							message: '标题不能为空',
							trigger: ['blur', 'change']
						}
					],
					'content': [
						{
							required: true,
							message: '内容不能为空',
							trigger: ['blur', 'change']
						}
					],
					'status': [
						{
							required: true,
							message: '状态不能为空',
							trigger: ['blur', 'change']
						}
					],
					'notifyRecordIds': [
						{
							required: true,
							message: '人员不能为空',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			formSubmit: function(e) {
				//定义表单规则
				this.$refs.inputForm.validate().then(res => {
					uni.showLoading()
					notifyService.save(this.inputForm).then((data) => {
						uni.showToast({title:data, icon:"success"});
						uni.navigateTo({
						  url: '/pages/apps/notification/notification?tabIndex=1'
						})
					}).catch((e)=>{
						console.log(e)
					})
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 30px);
	}


</style>