<template>
|
<view class="add-user-container">
|
<u-navbar :is-back="true" :title="title" title-color="#333" back-icon-color="#333"></u-navbar>
|
<!-- 表单区域 -->
|
<view class="form-card">
|
<u-form :model="form" ref="uForm1" label-width="150rpx">
|
|
<!-- 真实姓名 -->
|
<u-form-item label="真实姓名" prop="realName" borderBottom required="true">
|
<u-input v-model="form.realName" placeholder="请输入真实姓名" border="none" />
|
</u-form-item>
|
|
<!-- 电话 -->
|
<u-form-item label="电话" prop="mobile" borderBottom required="true">
|
<u-input v-model="form.mobile" placeholder="请输入手机号码" border="none" type="number" />
|
</u-form-item>
|
<!-- 密码 -->
|
<u-form-item label="密码" prop="password" borderBottom required="true" v-if="!form.id">
|
<u-input v-model="form.password" placeholder="请输入密码" border="none" type="password" />
|
</u-form-item>
|
|
<!-- 角色选择 -->
|
<u-form-item label="角色" prop="role" borderBottom required="true">
|
<!-- 复选框组，增加布局和间距 -->
|
<u-checkbox-group @change="checkboxGroupChange" class="checkbox-group">
|
<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
|
:key="index" :name="item.name" class="custom-checkbox">
|
<span class="checkbox-label">{{ item.name }}</span>
|
</u-checkbox>
|
|
</u-checkbox-group>
|
<!-- 全选按钮，增加间距和样式 -->
|
<!-- <u-button type="text" @click="checkedAll" class="select-all-btn">
|
全选
|
</u-button> -->
|
</u-form-item>
|
|
</u-form>
|
|
<!-- 提交按钮 -->
|
<view class="submit-btn">
|
<u-button type="primary" shape="circle" @click="submitForm()" :loading="loading">提交</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
add,
|
update,
|
getDetail
|
} from "@/api/userPermissions.js"
|
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
|
import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
|
import UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
|
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
|
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
|
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
|
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
|
import ULoading from '@/uview-components/uview-ui/components/u-loading/u-loading.vue';
|
|
import UCheckbox from '@/uview-components/uview-ui/components/u-checkbox/u-checkbox.vue';
|
import UCheckboxGroup from '@/uview-components/uview-ui/components/u-checkbox-group/u-checkbox-group.vue';
|
|
export default {
|
components: {
|
UIcon,
|
UButton,
|
UForm,
|
UFormItem,
|
UInput,
|
USearch,
|
UPopup,
|
ULoading,
|
UCheckbox,
|
UCheckboxGroup
|
},
|
data() {
|
return {
|
title: '',
|
// 表单数据
|
form: {
|
id: '',
|
mobile: '',
|
realName: '',
|
password: '',
|
role: '',
|
oldPassword: ''
|
},
|
|
role: [],
|
// 加载状态
|
loading: false,
|
// 角色选项
|
list: [{
|
name: '管理员',
|
checked: false,
|
disabled: false
|
},
|
{
|
name: '管理员2',
|
checked: false,
|
disabled: false
|
},
|
{
|
name: '管理员3',
|
checked: false,
|
disabled: false
|
}
|
],
|
|
};
|
},
|
onLoad(options) {
|
// 接收 URL 参数
|
if (options.id) {
|
this.form.id = options.id;
|
// 可在此处发起请求，根据 ID 加载详情数据
|
this.title = '修改用户';
|
this.getDetail();
|
} else {
|
this.title = '新增用户';
|
}
|
},
|
methods: {
|
//获得详情
|
getDetail() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
getDetail(this.form.id).then(res => {
|
uni.hideLoading();
|
if (res.statusCode === 200) {
|
this.form.mobile = res.data.data.mobile;
|
this.form.realName = res.data.data.realName;
|
this.form.password = res.data.data.password;
|
// 解析角色数组
|
const roles = JSON.parse(res.data.data.role);
|
|
// 更新复选框选中状态
|
this.list = this.list.map(item => {
|
return {
|
...item,
|
checked: roles.includes(item.name)
|
};
|
});
|
|
|
this.form.role = roles;
|
}
|
})
|
},
|
// 角色选择变化
|
checkboxChange(e) {
|
// console.log(e);
|
},
|
checkboxGroupChange(e) {
|
this.role = e;
|
},
|
// 全选
|
checkedAll() {
|
this.list.map(val => {
|
val.checked = true;
|
})
|
},
|
// 提交表单
|
async submitForm() {
|
// 1. 手动触发表单验证
|
this.$refs.uForm1.validate(valid => {
|
if (valid) {
|
this.loading = true;
|
// 2. 处理角色数据（将 checked=true 的项转为 role 数组）
|
|
this.form.role = JSON.stringify(this.role);
|
console.log(this.form)
|
if (this.form.id) {
|
update(this.form).then(res => {
|
this.loading = false;
|
if (res.statusCode === 200) {
|
uni.showToast({
|
title: res.data.msg, // 提示文字
|
icon: 'none', // 图标类型（success/loading/none）
|
mask: true // 是否显示透明蒙层（防止触摸穿透）
|
});
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
}
|
})
|
} else {
|
add(this.form).then(res => {
|
this.loading = false;
|
if (res.statusCode === 200) {
|
uni.showToast({
|
title: res.data.msg, // 提示文字
|
icon: 'none', // 图标类型（success/loading/none）
|
mask: true // 是否显示透明蒙层（防止触摸穿透）
|
});
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
}
|
})
|
}
|
|
}
|
});
|
|
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.checkbox-group {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 16px;
|
/* 选项间距 */
|
margin-bottom: 16px;
|
/* 与按钮的间距 */
|
}
|
|
/* 单个复选框样式 */
|
.custom-checkbox {
|
/deep/ .u-checkbox__icon-wrap {
|
border-radius: 4px;
|
/* 圆角 */
|
border: 1px solid #dcdfe6;
|
/* 边框 */
|
}
|
|
/deep/ .u-checkbox__icon--checked {
|
background-color: #2979ff;
|
/* 选中背景色 */
|
border-color: #2979ff;
|
}
|
}
|
|
/* 复选框文字样式 */
|
.checkbox-label {
|
margin-left: 8px;
|
/* 文字与图标的间距 */
|
font-size: 14px;
|
color: #606266;
|
}
|
|
/* 全选按钮样式 */
|
.select-all-btn {
|
width: 40rpx;
|
margin-top: 8px;
|
}
|
|
.add-user-container {
|
padding: 30rpx;
|
min-height: 100vh;
|
background-color: #f5f7fa;
|
|
.form-card {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.submit-btn {
|
margin-top: 60rpx;
|
padding: 0 30rpx;
|
}
|
|
// 调整uView表单样式
|
::v-deep .u-form-item {
|
padding: 24rpx 0;
|
|
&__body {
|
padding: 0;
|
}
|
}
|
|
// 复选框样式调整
|
::v-deep .u-checkbox-group {
|
width: 100%;
|
padding: 16rpx 0;
|
}
|
}
|
</style>
|
