ybxf-security-uniapp/pagesA/fire/personnel_permissions/editRole/editRole.vue

<template>
	<view class="  uni-container  ">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u-form label-position="top" :model="user" ref="form1" label-width='60'>
					<u-form-item label-position="top" label="角色名称" prop="roleName">
						<u-input v-model="user.roleName" border="none" placeholder="请输入角色名称"></u-input>
					</u-form-item>
					<u-form-item label-position="top" label="角色标识" prop="roleLable">
						<u-input v-model="user.roleLable" border="none" placeholder="请输入角色标识"></u-input>
					</u-form-item>
					<u-form-item label-position="top" label="角色排序" prop="roleSort" >
						<u-input v-model="user.roleSort" border="none" placeholder="请输入角色排序"></u-input>
					</u-form-item>
				</u-form>
				<u-button type="primary" text="提交"  customStyle="height: 72rpx;width: 340rpx;margin-top: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 60rpx;background: #4CB2B6;" @click="submit"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
 
	import {
	updateAppRoles // 修改用户
	} from '@/api/personnel_permissions';
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
		let that = null;
	export default {
		data() {
			return {
				user: {
					id: undefined,
					roleName: undefined,
					roleLable: undefined,
					roleSort: undefined,
				},
				rules: {
					'roleName': {
						// type: 'string',
						required: true,
						message: '角色名称不能为空',
						trigger: ['blur']
					},
					'roleLable': {
						// type: 'string',
						required: true,
						message: '角色标识不能为空',
						trigger: ['blur']
					},
				},
			}
		},
		onLoad(option) {
			that=this   
			let str = decodeURIComponent(option.val)  
			if (str != "undefined") {
				that.user = JSON.parse(str);
				console.log(that.user);
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		}, 
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
				})
			},
			submit() {
				this.user.status=0 
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					updateAppRoles(this.user).then(response => { 
							  this.$modal.msgSuccess('修改成功') 
						this.$tab.navigateBack('/pagesA/fire/personnel_permissions/index')
					})
				}).catch(errors => {
					console.log(errors);
					// uni.$u.toast('校验失败')/
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-container {
		padding: 20px;
			background-color: #f5f7f9;
	}
	page {
		height: 100%;
		background-color: #f5f7f9;
		position: relative;
	}
	/deep/ .u-input[data-v-fdbb9fe6],
	/deep/ .u-input.data-v-fdbb9fe6 {
		background-color: #fff;
		border: 1px solid #E2E4E6;
		height: 100rpx;
	}
	/deep/ .uni-input-wrapper{
		margin-left: 20rpx;
	}
	/deep/.u-form-item__body__left__content[data-v-5e7216f1],/deep/.u-form-item__body__left__content.data-v-5e7216f1,/deep/.u-form-item__body__left__content{
		padding-right: 0;
	}
</style>