emergencyManagement/packageA/pages/industry/components/Create.vue

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="85%" :maskClick='true'>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-section :title="(type==='add'?'新增':'编辑') +'企业' " type="line"></uni-section>
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form" :label-width="300">
					<uni-forms-item label="企业名称" name="entName"  required>
						<uni-easyinput v-model="form.entName" placeholder="请输入企业名称"  />
					</uni-forms-item>	
					<uni-forms-item label="企业分类" name="entCatId" required>
						<uni-data-select  v-model="form.entCatId" :localdata="entCats" placeholder="请选择企业分类" :clear="false"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="统一信用编码">
						<uni-easyinput v-model="form.entUscc" placeholder="请输入统一信用编码"  />
					</uni-forms-item>
					<uni-forms-item label="法定代表人">
						<uni-easyinput v-model="form.entLegalRepresentative" placeholder="请输入法定代表人"  />
					</uni-forms-item>	
					<uni-forms-item label="经营范围">
						<uni-easyinput type="textarea" :maxlength="300"
						 v-model="form.entBusinessScope" autoHeight 
						placeholder="请输入经营范围"></uni-easyinput>
						<view class="word-limit">{{form.entBusinessScope.length||0}}/300</view>
					</uni-forms-item>									
					<uni-forms-item label="生产经营地址">
						<uni-easyinput v-model="form.entAddress" placeholder="请输入生产经营地址"  />
					</uni-forms-item>								
					<uni-forms-item label="负责人">
						<uni-easyinput v-model="form.charger" placeholder="请输入负责人"  />
					</uni-forms-item>													
					<uni-forms-item label="负责人电话">
						<uni-easyinput v-model="form.chargerPhone" type="number" placeholder="请输入负责人电话"  />
					</uni-forms-item>														
					<uni-forms-item label="安全负责人">
						<uni-easyinput v-model="form.safetyManager" placeholder="请输入安全负责人"  />
					</uni-forms-item>	
					<uni-forms-item label="安全负责人电话">
						<uni-easyinput v-model="form.safetyManagerPhone" type="number" placeholder="请输入安全负责人电话"  />
					</uni-forms-item>																		
					<uni-forms-item label="是否设置安全机构">							
						<uni-data-checkbox v-model="form.ifSafetyDepartment" :localdata="[{value:1,text:'有'},{value:0,text:'无'}]" />
					</uni-forms-item>	
					<uni-forms-item label="从业人员数量">
						<uni-easyinput v-model="form.staffNum" type="number" placeholder="请输入从业人员数量"  />
					</uni-forms-item>																						
					<uni-forms-item label="特种作业人员数量">
						<uni-easyinput v-model="form.staffSpecialNum" type="number" placeholder="请输入特种作业人员数量"  />
					</uni-forms-item>	
					<uni-forms-item label="专职安全生产管理人员数量">
						<uni-easyinput v-model="form.staffSafetyNum" type="number" placeholder="请输入专职安全生产管理人员数量"  />
					</uni-forms-item>																													
					<uni-forms-item label="注册安全工程师人员数">
						<uni-easyinput v-model="form.staffCertifiedEngineerNum" type="number" placeholder="请输入注册安全工程师人员数"  />
					</uni-forms-item>																																																			
					<uni-forms-item label="安全标准化等级">
						<uni-data-select  v-model="form.safetyStandardLevel" :localdata="standardLevelOptions" placeholder="请选择企业分类" :clear="false"></uni-data-select>
					</uni-forms-item>	
					<uni-forms-item label="安全许可证号码">
						<uni-easyinput v-model="form.staffSafetyNum" placeholder="请输入安全许可证号码"  />
					</uni-forms-item>	
					<uni-forms-item label="是否重点企业">
						<uni-data-checkbox v-model="form.isMajor" :localdata="isMajors" />
					</uni-forms-item>																																																																									
					<uni-forms-item label="说明">
						<uni-easyinput type="textarea" :maxlength="500"
						 v-model="form.remark" autoHeight 
						placeholder="请输入备注"></uni-easyinput>
						<view class="word-limit">{{form.remark.length||0}}/500</view>
					</uni-forms-item>
				</uni-forms>
				<view class="handle-container">
					<button class="save" type="primary" @click="onSubmit">保存</button>
					<button class="cancel" type="default" @click="close">取消</button>
				</view>
			</view>	
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import industryApi from '@/api/industry.js'
	export default{
		name:"CreateIndustry",
		computed:{
			entCats(){
				let entCats=this.cats
				if(!entCats)return []
				return entCats.map(item=>{
					return{
						value:item.entCatId,
						text:item.entCatTitle
					}
				})
			}						
		},
		props:{
			cats:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				type:undefined,
				rules:{
					entName:{
						rules:[
							{
								required: true,
								errorMessage:"请输入企业名称"
							}					
						],
						validateTrigger:'submit'
					},
					entCatId:{
						rules:[
							{
								required: true,
								errorMessage:"请选择企业分类"
							}					
						],
						validateTrigger:'submit'
					}
				},
				standardLevelOptions:[
					{ value: 0, text: '末达标' },
					{ value: 1, text: '一级' },
					{ value: 2, text: '二级' },
					{ value: 3, text: '三级' }
				],
				ifSafetyDepartments:[
					{value:1,text:'有'},
					{value:0,text:'无'},
				],
				isMajors:[
					{value:1,text:'是'},
					{value:0,text:'否'},
				],
				form:{
					entId: 0,
					entCatId: 1,
					entName: '',
					entUscc: '',
					entLegalRepresentative: '',
					entBusinessScope: '',
					entAddress: '',
					charger: '',
					chargerPhone: '',
					safetyManager: '',
					safetyManagerPhone: '',
					ifSafetyDepartment: 0,
					staffNum: 0,
					staffSpecialNum: 0,
					staffSafetyNum: 0,
					staffCertifiedEngineerNum: 0,
					safetyStandardLevel: 0,
					safetyCertNo: '',
					remark: '',
					isMajor: 0
				}
			}
		},
		methods:{
			resetForm(){
				this.form={
					entId: 0,
					entCatId: 1,
					entName: '',
					entUscc: '',
					entLegalRepresentative: '',
					entBusinessScope: '',
					entAddress: '',
					charger: '',
					chargerPhone: '',
					safetyManager: '',
					safetyManagerPhone: '',
					ifSafetyDepartment: 0,
					staffNum: 0,
					staffSpecialNum: 0,
					staffSafetyNum: 0,
					staffCertifiedEngineerNum: 0,
					safetyStandardLevel: 0,
					safetyCertNo: '',
					remark: '',
					isMajor: 0
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let submitFx=this.type==='add'?industryApi.create:industryApi.update
					submitFx(this.form).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.close();
					})

				}).catch(err =>{
					console.log(err)
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			show({type,item}){
				this.resetForm()
				this.form={...this.form,...item}
				this.type=type
				this.$refs.drawer.open()
			},
			close(){
				this.$refs.drawer.close()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scroll-view {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.form-wrap{
			padding:40rpx 20rpx;
			.handle-container{
				display: flex;
				justify-content: center;
				align-items: center;
				button{
					width: 160rpx;
					padding: 20rpx 16rpx;
					line-height: 1;
					font-size: 28rpx;
					&.save{
						background-color: #007aff;
					}
				}
			}
			.word-limit{
				text-align: right;
				padding: 10rpx 0;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>