rd_mes_uniapp/pages/tpmMould/addMold.vue

<template>
	<view>
		<uni-forms ref="form" :modelValue="form"  label-width="102px"  
			label-align="right" :rules="rules" class="form"
		>
			<uni-forms-item label="模具编码：" name="mouldUuid">
				<uni-easyinput placeholder="请输入模具编码" v-model="form.mouldUuid"/>
			</uni-forms-item>
			<uni-forms-item label="模具名：" >
				<uni-easyinput  placeholder="请输入模具名" v-model="form.mouldName"/>
			</uni-forms-item>
			<uni-forms-item label="型号编码："  name="mouldCode">
				 <uni-data-select placeholder="请选择型号编码" v-model="form.mouldCode" :localdata="select.mouldBasic"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="所属部门名："  name="departmentName">
				 <uni-data-select placeholder="请选择所属部门名" v-model="form.departmentName"  :localdata="select.department"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="材质：" >
				<uni-easyinput  placeholder="请输入材质" v-model="form.material"/>
			</uni-forms-item>
			<uni-forms-item label="库位编码：" >
				<uni-easyinput  placeholder="请输入库位编码" v-model="form.storageLocationBarcode"/>
			</uni-forms-item>
			<uni-forms-item label="模穴数：" >
				<uni-easyinput placeholder="请模穴数	" v-model="form.cavityNumber"/>
			</uni-forms-item>
			<uni-forms-item label="备注:" >
				<uni-easyinput type="textarea" placeholder="请输入备注" v-model="form.remark"/>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">提交</button>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.msgType" :message="message.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<!-- 加载动画 -->
			<loding-vue/>
		</uni-popup>
	</view>
</template>

<script>
	import {listDepartment} from '@/api/basic/department.js';
	import { getMouldBasic,addMould} from '@/api/tpmMould/mould.js'
	//引入加载动画
	import lodingVue from "@/utils/loding/loding.vue";
	export default {
		components:{
			lodingVue
		},
		async onReady() {
			try{
				const _self = this;
				let [department,mouldBasic] =await Promise.all([listDepartment(),getMouldBasic()]);
				department = getListValue(department.rows,'departmentTitle')
				mouldBasic = getListValue(mouldBasic.rows,'mouldCode')
				_self.select = Object.assign({department,mouldBasic})
			}catch(e){
				this.messageType({
					msgType:'error',
					messageText:'型号编码或部门获取失败'
				})
			}
		},
		data() {
			return {
				select:{},
				form:{},
				message:{
					msgType:'warn',
					messageText:'请先查询设备信息'
				},
				/** 校验规则 */
				rules:{
					mouldUuid:{
						rules:[
							{
								required : true,
								errorMessage: '请输入模具编码',
							},
						]
					},
					mouldCode:{
						rules:[
							{
								required : true,
								errorMessage: '请选择型号编码',
							},
						]
					},
					departmentName:{
						rules:[
							{
								required : true,
								errorMessage: '请选择所属部门名',
							},
						]
					},
				},
			}
		},
		methods: {
			/**
			 * 提交按钮点击事件
			 */
			submit(){
				const _self = this;
				_self.$refs.form.validate().then(()=>{
					_self.fnApi('addMould',_self.form)
					_self.messageType({
						msgType:'success',
						messageText:'提交成功'
					});
					_self.form = Object.assign({})
				})
			},
			
			/**
			 * 提示信息
			 * @param {Object|undefined} value
			 * {msgType,messageText} 参数里面需要包含这两个键
			 */
			messageType(obj){
				const _self = this;
				let message ={}
				if(obj === undefined){
					message = {
						msgType:'error',
						messageText:'请填写设备代码'
					}	
				}else{
					message = {
						msgType:obj.msgType,
						messageText:obj.messageText
					}
				}
				_self.message = Object.assign({},message)
				return _self.$refs.message.open()
			},
			
			/**
			 * 接口访问方法
			 * @param {Object} api 接口名称
			 * @param {Object} value 带入参数
			 */
			async fnApi(api,value){
				const _self = this;
				const objApi = {
					addMould
				}
				try{
					//打开蒙层
					_self.$refs.popup.open()
					//查询接口
					const data = (await objApi[api](value))
					return data
				}catch(e){
					_self.messageType({
						msgType:'error',
						messageText:'接口请求出错'
					})
				}finally{
					//关闭蒙层
					_self.$refs.popup.close()
				}
			},
		}
	}
	/**
	 * 循环list把数据转换成uni-select需要的格式
	 * @param {object[]} list
	 * @param {string} key
	 */
	function getListValue(list,key){
		const arr = []
		for(let i of list){
			arr.push({
				value:i[key],
				text:i[key]
			})
		}
		return arr
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #ffffff;
	padding-top: 1vw;
}
view{
	width: 98vw;
	margin: 0 auto;
	.form{
		.uni-forms-item{
			margin-bottom: 17px;
		}
	}
}
</style>