vue复选框表单字段的隐藏和显示（Vue3ElementPlus组件Form表单）
vue复选框表单字段的隐藏和显示（Vue3ElementPlus组件Form表单）{ "code": "SUCCESS" "msg": null "data": [ { "id": "-99" "code": "code-99" "name": "name-99" "type": 1 "parentId": "-1" "desc": "" "value": -99 "label": "name-99" "children":
ElementPlus组件库，操作表单实现效果
VUE代码
<template>
<div class="elementDemo01">
<h1 align="center" style="color: #409eff">表单</h1>
<el-form
ref="formref"
:model="formData"
:rules="formRules"
label-width="160px"
size="default"
style="width: 75%"
>
<el-form-item label="账号" prop="username">
<el-input v-model.trim="formData.username" placeholder="请输入账号" />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model.trim="formData.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model.trim="formData.password"
type="password"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item label="重复密码" prop="rePassword">
<el-input
v-model.trim="formData.rePassword"
type="password"
placeholder="重复密码"
/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model.trim="formData.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input
v-model="formData.mobile"
type="number"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="formData.sex">
<el-radio
v-for="item in defineData.sexList"
:key="item.value"
:label="item.value"
>
{{item.text}}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用户类别" prop="category">
<el-radio-group v-model="formData.category">
<el-radio label="1">一般用户</el-radio>
<el-radio label="2">特殊用户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-checkbox-group v-model="formData.userType">
<el-checkbox label="1">系统管理</el-checkbox>
<el-checkbox label="2">业务管理</el-checkbox>
<el-checkbox label="3">财务管理</el-checkbox>
<el-checkbox label="4">普通用户</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="用户职位" prop="position">
<el-checkbox-group v-model="formData.position">
<el-checkbox
v-for="item in defineData.positionList"
:key="item.value"
:label="item.value"
>
{{item.text}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="任职时间" prop="postTime">
<el-date-picker
v-model="formData.postTime"
type="datetime"
placeholder="请选择时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:shortcuts="postTimeShortcuts"
/>
</el-form-item>
<el-form-item label="有效期" prop="validityTime">
<el-date-picker
v-model="formData.validityTime"
type="daterange"
unlink-panels
range-separator="到"
start-placeholder="起始时间"
end-placeholder="结束时间"
:shortcuts="validityTimeShortcuts"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="所属部门" prop="orgId">
<el-tree-select
v-model="formDataId"
:data="defineDataTree"
check-strictly
default-expand-all
placeholder="请选择所属部门"
/>
</el-form-item>
<el-form-item label="运动爱好" prop="motionHobby">
<el-select
v-model="formData.motionHobby"
filterable
placeholder="请选择"
>
<el-option
v-for="item in defineData.motionHobbyList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="娱乐爱好" prop="recreationHobbys">
<el-select
v-model="formData.recreationHobbys"
multiple
placeholder="请选择爱好"
style="width: 100%"
>
<el-option
v-for="item in defineData.recreationHobbyList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="所属城市" prop="cityId">
<el-tree-select
v-model="formData.cityId"
:data="defineData.cityTree"
default-expand-all
placeholder="请选择所属城市"
node-key="id"
>
</el-tree-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="12">
<el-form-item prop="activityDate">
<el-date-picker
v-model="formData.activityDate"
type="date"
placeholder="选择一个日期"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="1" style="text-align: center">
<span class="text-gray-500">-</span>
</el-col>
<el-col :span="11">
<el-form-item prop="activityTime">
<el-time-picker
v-model="formData.activityTime"
placeholder="选择一个时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="formData.desc" type="textarea" rows="5" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)">保存</el-button>
<el-button @click="resetForm(formRef)">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { reactive ref toRefs } from "vue";
import api from "./../../../utils/request";
//
export default {
name: "elementDemo01"
setup(props context) {
const { attrs slots emit } = context;
// ================================================================= //
// =====表单验证
// ================================================================= //
// formRef
const formRef = ref(null);
// 验证密码
const validatePassword = (rule value callback) => {
console.log("validateRePassword" value);
console.log("active.formData.rePassword" active.formData.rePassword);
if (value === '') {
callback(new Error('请输入密码！'))
} else {
if (active.formData.rePassword !== '') {
if (!formRef.value) {
return ;
}
formRef.value.validateField('rePassword' () => null)
}
callback();
}
};
// 验证密码
const validateRePassword = (rule value callback) => {
console.log("validateRePassword" value);
console.log("active.formData.password" active.formData.password);
if (value === '') {
callback(new Error('请输入重复密码！'))
} else if (value !== active.formData.password) {
callback(new Error("两次密码输入不一致！"))
} else {
callback()
}
};
// ================================================================= //
// =====响应式数据
// ================================================================= //
const active = reactive({
// 预定义数据
defineData: {
sexList: []
positionList: []
motionHobbyList: []
hobbyList: []
orgTree: []
cityTree: []
}
// 表单对象
formData: {
// id: ''
// username: ""
// name: ""
// password: ""
// rePassword: ""
// email: ""
// mobile: ""
// sex: 1
// category: 2
// userType: []
// position: []
// postTime: ""
// validityTime: []
// orgId: ""
// motionHobby: 2
// recreationHobbys: []
// cityId: ""
// desc: ""
}
// 表单规则
formRules: {
username: [
{
required: true message: "请输入账号" trigger: "blur"
}
// {
// min: 3 max: 30 message: "账号的长度为[3]到[30]" trigger: "blur"
// }
{
pattern: /^[a-zA-Z0-9_-]{4 16}$/ message: '4到16位（字母，数字，下划线，减号）'
}
]
name: [
{
required: true message: "请输入姓名" trigger: "blur"
}
{
min: 2 max: 10 message: "姓名的长度为[2]到[10]" trigger: "blur"
}
]
password:[
{ validator: validatePassword trigger: 'blur' }
]
rePassword:[
{ validator: validateRePassword trigger: 'blur' }
]
email:[
{
required: true message: "请输入邮箱" trigger: "blur"
}
{
pattern: /^([a-zA-Z]|[0-9]|[\.])(\w|\-) @[a-zA-Z0-9] \.([a-zA-Z]{2 4})$/ message: '请输入正确的邮箱'
}
]
mobile:[
{
required: true message: "请输入手机号" trigger: "blur"
}
]
sex: [
{
required: true
message: '请选择性别'
trigger: 'change'
}
]
category: [
{
required: true
message: '请选择用户类别'
trigger: 'change'
}
]
postTime: [
{
required: true message: "请选择任职时间" trigger:'change'
}
]
validityTime: [
{
required: true message: "请选择有效期" trigger:'change'
}
]
orgId: [
{
required: true message: "请选择组织机构" trigger:'change'
}
]
cityId: [
{
required: true message: "请选择城市" trigger:'change'
}
]
}
});
// ================================================================= //
// =====表单扩展
// ================================================================= //
const postTimeShortcuts = [
{
text: "今天"
value: new Date()
}
{
text: "昨天"
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
}
}
{
text: "一周以前"
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
}
}
];
//
const validityTimeShortcuts = [
{
text: "最近一月"
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start end];
}
}
{
text: "最近三月"
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start end];
}
}
{
text: "未来半年"
value: () => {
const end = new Date();
const start = new Date();
end.setTime(start.getTime() 183 * 24 * 60 * 60 * 1000);
return [start end];
}
}
{
text: "未来一年"
value: () => {
const end = new Date();
const start = new Date();
end.setTime(start.getTime() 365 * 24 * 60 * 60 * 1000);
return [start end];
}
}
];
// ================================================================= //
// =====预定义数据->加载
// ================================================================= //
// 性别列表
const querySexList = async () => {
const requestData = {};
await api({
url: "/element/demo01/sexList"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineData.sexList = data;
});
};
querySexList();
// 职位列表
const queryPositionList = async () => {
const requestData = {};
await api({
url: "/element/demo01/positionList"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineData.positionList = data;
});
};
queryPositionList();
// 运动爱好列表
const queryMotionHobbyList = async () => {
const requestData = {};
await api({
url: "/element/demo01/motionHobbyList"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineData.motionHobbyList = data;
});
};
queryMotionHobbyList();
// 娱乐爱好列表
const queryRecreationHobbyList = async () => {
const requestData = {};
await api({
url: "/element/demo01/recreationHobbyList"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineData.recreationHobbyList = data;
});
};
queryRecreationHobbyList();
// 组织机构树
const queryOrgTree = async () => {
const requestData = {};
await api({
url: "/element/demo01/orgTree"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineDataTree = data;
});
};
queryOrgTree();
// 城市树
const queryCityTree = async () => {
const requestData = {};
await api({
url: "/element/demo01/cityTree"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.defineData.cityTree = data;
});
};
queryCityTree();
// 查询表单数据
const queryFormData = async () => {
const requestData = {id:1};
await api({
url: "/element/demo01/getData"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
active.formData = data;
});
};
queryFormData();
// ================================================================= //
// =====操作
// ================================================================= //
// 保存操作
const submitForm = async (formEl) => {
if (!formEl) {
return;
}
await formEl.validate((valid fields) => {
if (valid) {
console.log("fromData" active.formData);
console.log("fromData json" JSON.stringify(active.formData));
const requestData = active.formData;
api({
url: "/element/demo01/saveData"
method: "post"
data: requestData
}).then((res) => {
const { code msg data } = res.data;
console.log("data" data);
});
console.log("submit!");
} else {
console.log("error submit!" fields);
}
});
};
// 取消操作
const resetForm = (formEl) => {
if (!formEl) {
return;
}
active.formData = {
name: ""
sex: 1
hobby: ""
userType: []
};
formEl.resetFields();
};
// ================================================================= //
// =====返回页面
// ================================================================= //
return {
active
...toRefs(active)
formRef
postTimeShortcuts
validityTimeShortcuts
submitForm
resetForm
};
}
};
</script>
<style lang="scss" scoped>
.elementDemo01 {
margin: 0 auto;
width: 800px;
text-align: left;
.el-radio {
margin-right: 15px;
}
.el-select {
width: 100%;
}
.el-checkbox {
margin-right: 15px;
}
}
</style>
交互数据格式
sexList
{
"code": "SUCCESS"
"msg": null
"data": [
{
"text": "男"
"value": 1
}
{
"text": "女"
"value": 2
}
{
"text": "未知"
"value": 3
}
]
"message": null
}
positionList
{
"code": "SUCCESS"
"msg": null
"data": [
{
"text": "M1"
"value": 1
}
{
"text": "M2"
"value": 2
}
{
"text": "M3"
"value": 3
}
{
"text": "M4"
"value": 4
}
{
"text": "M5"
"value": 5
}
]
"message": null
}
motionHobbyList
{
"code": "SUCCESS"
"msg": null
"data": [
{
"name": "篮球"
"value": 1
}
{
"name": "羽毛球"
"value": 2
}
{
"name": "兵乓球"
"value": 3
}
{
"name": "足球"
"value": 4
}
{
"name": "滑板"
"value": 5
}
]
"message": null
}
recreationHobbyList
{
"code": "SUCCESS"
"msg": null
"data": [
{
"name": "听音乐"
"value": 1
}
{
"name": "看电影"
"value": 2
}
{
"name": "绘画"
"value": 3
}
{
"name": "写小说"
"value": 4
}
{
"name": "看书"
"value": 5
}
]
"message": null
}
orgTree
{
"code": "SUCCESS"
"msg": null
"data": [
{
"id": "-99"
"code": "code-99"
"name": "name-99"
"type": 1
"parentId": "-1"
"desc": ""
"value": -99
"label": "name-99"
"children": [
{
"id": "-98999"
"code": "code-98999"
"name": "name-98999"
"type": 1
"parentId": "-99"
"desc": ""
"value": -98999
"label": "name-98999"
"hasChildren": false
}
{
"id": "-98998"
"code": "code-98998"
"name": "name-98998"
"type": 0
"parentId": "-99"
"desc": ""
"value": -98998
"label": "name-98998"
"hasChildren": false
}
{
"id": "-98997"
"code": "code-98997"
"name": "name-98997"
"type": 1
"parentId": "-99"
"desc": ""
"value": -98997
"label": "name-98997"
"hasChildren": false
}
{
"id": "-98996"
"code": "code-98996"
"name": "name-98996"
"type": 0
"parentId": "-99"
"desc": ""
"value": -98996
"label": "name-98996"
"hasChildren": false
}
{
"id": "-98995"
"code": "code-98995"
"name": "name-98995"
"type": 1
"parentId": "-99"
"desc": ""
"value": -98995
"label": "name-98995"
"hasChildren": false
}
]
"hasChildren": false
}
{
"id": "-98"
"code": "code-98"
"name": "name-98"
"type": 0
"parentId": "-1"
"desc": ""
"value": -98
"label": "name-98"
"children": [
{
"id": "-97999"
"code": "code-97999"
"name": "name-97999"
"type": 1
"parentId": "-98"
"desc": ""
"value": -97999
"label": "name-97999"
"hasChildren": false
}
{
"id": "-97998"
"code": "code-97998"
"name": "name-97998"
"type": 0
"parentId": "-98"
"desc": ""
"value": -97998
"label": "name-97998"
"hasChildren": false
}
{
"id": "-97997"
"code": "code-97997"
"name": "name-97997"
"type": 1
"parentId": "-98"
"desc": ""
"value": -97997
"label": "name-97997"
"hasChildren": false
}
{
"id": "-97996"
"code": "code-97996"
"name": "name-97996"
"type": 0
"parentId": "-98"
"desc": ""
"value": -97996
"label": "name-97996"
"hasChildren": false
}
{
"id": "-97995"
"code": "code-97995"
"name": "name-97995"
"type": 1
"parentId": "-98"
"desc": ""
"value": -97995
"label": "name-97995"
"hasChildren": false
}
]
"hasChildren": false
}
]
"message": null
}
cityTree
{
"code": "SUCCESS"
"msg": null
"data": [
{
"code": "bj"
"children": [
{
"code": "beijing"
"name": "北京"
"pid": 1
"id": 11
"label": "北京"
"value": 11
}
]
"name": "北京"
"pid": -1
"id": 1
"label": "北京"
"value": 1
}
{
"code": "sx"
"children": [
{
"code": "taiyuan"
"name": "太原"
"pid": 2
"id": 21
"label": "太原"
"value": 21
}
{
"code": "lvliang"
"name": "吕梁"
"pid": 2
"id": 22
"label": "吕梁"
"value": 22
}
]
"name": "山西"
"pid": -1
"id": 2
"label": "山西"
"value": 2
}
]
"message": null
}
getData
{
"code": "SUCCESS"
"msg": null
"data": {
"id": 1
"username": "zhangsan"
"name": "张三"
"password": "a123"
"rePassword": "a123"
"email": "zhangsan@demo"
"mobile": "15312345678"
"sex": 3
"category": "1"
"userType": [
"1"
"2"
"3"
]
"position": [
1
2
3
4
]
"postTime": "2022-04-14 21:40:13"
"validityTime": [
"2022-04-14T13:40:13.274 00:00"
"2022-04-01T08:37:25.978 00:00"
]
"orgId": -98998
"motionHobby": 2
"recreationHobbys": [
2
3
4
]
"cityId": 21
"activityDate": "2022-04-14T13:40:13.274 00:00"
"activityTime": "2022-04-14T21:40:13.274"
"desc": "描述"
}
"message": null
}
saveData
{
"id": 1
"username": "zhangsan"
"name": "张三"
"password": "a123"
"rePassword": "a123"
"email": "zhangsan@demo"
"mobile": "15312345678"
"sex": 3
"category": "1"
"userType": [
"1"
"2"
"3"
]
"position": [
1
2
3
4
]
"postTime": "2022-04-14 21:40:13"
"validityTime": [
"2022-04-14T13:40:13.274 00:00"
"2022-04-01T08:37:25.978 00:00"
]
"orgId": -98998
"motionHobby": 2
"recreationHobbys": [
2
3
4
]
"cityId": 21
"activityDate": "2022-04-14T13:40:13.274 00:00"
"activityTime": "2022-04-14T21:40:13.274"
"desc": "描述"
}SpringBoot后台模拟实现
Controller
package com.what21.app.controller.element;
import com.what21.appmon.R;
import com.what21.app.controller.element.demo01.SaveDataParam;
import com.what21.app.model;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import java.time.LocalDateTime;
import java.util.*;
@RestController()
@Api(tags = "ElementDemo01")
@RequestMapping("/element/demo01")
@Slf4j
@Validated
public class ElementDemo01Controller {
@ApiOperation("性别列表")
@RequestMapping(value = "/sexList" method = {RequestMethod.POST})
public R sexList(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("sexList() start");
log.debug("接收参数，param=" paramsMap);
R result = R.ok();
try {
List<Map<String Object>> sexList = new ArrayList<>();
Map<String Object> sex01 = new HashMap<>();
sex01.put("value" 1);
sex01.put("text" "男");
sexList.add(sex01);
Map<String Object> sex02 = new HashMap<>();
sex02.put("value" 2);
sex02.put("text" "女");
sexList.add(sex02);
Map<String Object> sex03 = new HashMap<>();
sex03.put("value" 3);
sex03.put("text" "未知");
sexList.add(sex03);
result = R.ok(sexList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("sexList() end");
return result;
}
@ApiOperation("职位列表")
@RequestMapping(value = "/positionList" method = {RequestMethod.POST})
public R positionList(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("positionList() start");
log.debug("接收参数，param=" paramsMap);
R result = R.ok();
try {
List<Map<String Object>> positionList = new ArrayList<>();
Map<String Object> position01 = new HashMap<>();
position01.put("value" 1);
position01.put("text" "M1");
positionList.add(position01);
Map<String Object> position02 = new HashMap<>();
position02.put("value" 2);
position02.put("text" "M2");
positionList.add(position02);
Map<String Object> position03 = new HashMap<>();
position03.put("value" 3);
position03.put("text" "M3");
positionList.add(position03);
Map<String Object> position04 = new HashMap<>();
position04.put("value" 4);
position04.put("text" "M4");
positionList.add(position04);
Map<String Object> position05 = new HashMap<>();
position05.put("value" 5);
position05.put("text" "M5");
positionList.add(position05);
result = R.ok(positionList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("positionList() end");
return result;
}
@ApiOperation("运动爱好列表")
@RequestMapping(value = "/motionHobbyList" method = {RequestMethod.POST})
public R motionHobbyList(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("motionHobbyList() start");
log.debug("接收参数，param=" paramsMap);
R result = R.ok();
try {
List<Map<String Object>> motionHobbyList = new ArrayList<>();
Map<String Object> motionHobby01 = new HashMap<>();
motionHobby01.put("value" 1);
motionHobby01.put("name" "篮球");
motionHobbyList.add(motionHobby01);
Map<String Object> motionHobby02 = new HashMap<>();
motionHobby02.put("value" 2);
motionHobby02.put("name" "羽毛球");
motionHobbyList.add(motionHobby02);
Map<String Object> motionHobby03 = new HashMap<>();
motionHobby03.put("value" 3);
motionHobby03.put("name" "兵乓球");
motionHobbyList.add(motionHobby03);
Map<String Object> motionHobby04 = new HashMap<>();
motionHobby04.put("value" 4);
motionHobby04.put("name" "足球");
motionHobbyList.add(motionHobby04);
Map<String Object> motionHobby05 = new HashMap<>();
motionHobby05.put("value" 5);
motionHobby05.put("name" "滑板");
motionHobbyList.add(motionHobby05);
result = R.ok(motionHobbyList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("motionHobbyList() end");
return result;
}
@ApiOperation("娱乐爱好列表")
@RequestMapping(value = "/recreationHobbyList" method = {RequestMethod.POST})
public R recreationHobbyList(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("recreationHobbyList() start");
log.debug("接收参数，param=" paramsMap);
R result = R.ok();
try {
List<Map<String Object>> recreationHobbyList = new ArrayList<>();
Map<String Object> recreationHobby01 = new HashMap<>();
recreationHobby01.put("value" 1);
recreationHobby01.put("name" "听音乐");
recreationHobbyList.add(recreationHobby01);
Map<String Object> recreationHobby02 = new HashMap<>();
recreationHobby02.put("value" 2);
recreationHobby02.put("name" "看电影");
recreationHobbyList.add(recreationHobby02);
Map<String Object> recreationHobby03 = new HashMap<>();
recreationHobby03.put("value" 3);
recreationHobby03.put("name" "绘画");
recreationHobbyList.add(recreationHobby03);
Map<String Object> recreationHobby04 = new HashMap<>();
recreationHobby04.put("value" 4);
recreationHobby04.put("name" "写小说");
recreationHobbyList.add(recreationHobby04);
Map<String Object> recreationHobby05 = new HashMap<>();
recreationHobby05.put("value" 5);
recreationHobby05.put("name" "看书");
recreationHobbyList.add(recreationHobby05);
result = R.ok(recreationHobbyList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("recreationHobbyList() end");
return result;
}
@ApiOperation("组织机构树")
@RequestMapping(value = "/orgTree" method = {RequestMethod.POST})
public R orgTree(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("orgTree() start");
log.debug("接收参数，param=" paramsMap);
R result = null;
try {
List<Org> topOrgList = new ArrayList<>();
for (int i = 1; i < 11; i ) {
Org org = new Org();
org.setParentId(-1L);
org.setId(org.getParentId() * 100 Long.valueOf(i));
org.setCode("code" org.getId());
org.setName("name" org.getId());
org.setType(i % 2);
org.setDesc("");
org.setValue(org.getId());
org.setLabel(org.getName());
// 子节点
List<Org> childrenList = new ArrayList<>();
for (int j = 1; j < 6; j ) {
Org subOrg = new Org();
subOrg.setParentId(org.getId());
subOrg.setId(org.getId() * 1000 Long.valueOf(j));
subOrg.setCode("code" (org.getId() * 1000 Long.valueOf(j)));
subOrg.setName("name" (org.getId() * 1000 Long.valueOf(j)));
subOrg.setType(j % 2);
subOrg.setDesc("");
subOrg.setValue(subOrg.getId());
subOrg.setLabel(subOrg.getName());
childrenList.add(subOrg);
}
org.setChildren(childrenList);
topOrgList.add(org);
}
result = R.ok(topOrgList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("orgTree() end");
return result;
}
@ApiOperation("城市树")
@RequestMapping(value = "/cityTree" method = {RequestMethod.POST})
public R cityTree(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("cityTree() start");
log.debug("接收参数，param=" paramsMap);
R result = null;
try {
List<Map<Object Object>> topCityList = new ArrayList<>();
// 北京
Map<Object Object> province1Map = new HashMap<>();
province1Map.put("id" 1);
province1Map.put("code" "bj");
province1Map.put("name" "北京");
province1Map.put("pid" -1);
province1Map.put("value" 1);
province1Map.put("label" "北京");
// === 城市
List<Map<Object Object>> city1List = new ArrayList<>();
Map<Object Object> city11Map = new HashMap<>();
city11Map.put("id" 11);
city11Map.put("code" "beijing");
city11Map.put("name" "北京");
city11Map.put("pid" 1);
city11Map.put("value" 11);
city11Map.put("label" "北京");
city1List.add(city11Map);
province1Map.put("children" city1List);
topCityList.add(province1Map);
// 山西
Map<Object Object> province2Map = new HashMap<>();
province2Map.put("id" 2);
province2Map.put("code" "sx");
province2Map.put("name" "山西");
province2Map.put("pid" -1);
province2Map.put("value" 2);
province2Map.put("label" "山西");
// === 城市
List<Map<Object Object>> city2List = new ArrayList<>();
Map<Object Object> city21Map = new HashMap<>();
city21Map.put("id" 21);
city21Map.put("code" "taiyuan");
city21Map.put("name" "太原");
city21Map.put("pid" 2);
city21Map.put("value" 21);
city21Map.put("label" "太原");
city2List.add(city21Map);
Map<Object Object> city22Map = new HashMap<>();
city22Map.put("id" 22);
city22Map.put("code" "lvliang");
city22Map.put("name" "吕梁");
city22Map.put("pid" 2);
city22Map.put("value" 22);
city22Map.put("label" "吕梁");
city2List.add(city22Map);
province2Map.put("children" city2List);
topCityList.add(province2Map);
result = R.ok(topCityList);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("cityTree() end");
return result;
}
@ApiOperation("职位列表")
@RequestMapping(value = "/getData" method = {RequestMethod.POST})
public R getData(HttpServletRequest request @RequestBody Map<String Object> paramsMap) {
log.debug("getData() start");
log.debug("接收参数，param=" paramsMap);
R result = null;
try {
SaveDataParam paramsObject = new SaveDataParam();
paramsObject.setId(1L);
paramsObject.setUsername("zhangsan");
paramsObject.setName("张三");
paramsObject.setPassword("a123");
paramsObject.setRePassword("a123");
paramsObject.setEmail("zhangsan@demo");
paramsObject.setMobile("15312345678");
paramsObject.setSex(3);
paramsObject.setCategory("1");
paramsObject.setUserType(Arrays.asList("1" "2" "3"));
paramsObject.setPosition(Arrays.asList(1 2 3 4));
paramsObject.setPostTime(LocalDateTime.now());
long currentTime = System.currentTimeMillis();
paramsObject.setValidityTime(Arrays.asList(new Date() new Date(currentTime 365 * 24 * 60 * 60 * 100)));
paramsObject.setOrgId(-98998L);
paramsObject.setMotionHobby(2);
paramsObject.setRecreationHobbys(Arrays.asList(2 3 4));
paramsObject.setCityId(21L);
paramsObject.setActivityDate(new Date());
paramsObject.setActivityTime(LocalDateTime.now());
paramsObject.setDesc("描述");
result = R.ok(paramsObject);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("getData() end");
return result;
}
@ApiOperation("保存数据")
@RequestMapping(value = "/saveData" method = {RequestMethod.POST})
public R saveData(HttpServletRequest request @RequestBody SaveDataParam paramsObject) {
log.debug("saveData() start");
log.debug("接收参数，param=" paramsObject);
R result = null;
try {
paramsObject.setId(1L);
result = R.ok(paramsObject);
} catch (Exception e) {
e.printStackTrace();
result = R.errMsg(e.getMessage());
}
log.debug("响应内容，result=" result);
log.debug("saveData() end");
return result;
}
}
SaveDataParam
package com.what21.app.controller.element.demo01;
import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.models.auth.In;
import io.swagger.v3.oas.annotationsdia.Schema;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.Date;
import java.utilst;
@Data
public class SaveDataParam {
@Schema(description = "ID")
private Long id;
@Schema(description = "账号")
private String username;
@Schema(description = "姓名")
private String name;
@Schema(description = "密码")
private String password;
@Schema(description = "重复密码")
private String rePassword;
@Schema(description = "邮箱")
private String email;
@Schema(description = "手机")
private String mobile;
@Schema(description = "性别")
private Integer sex;
@Schema(description = "用户类别")
private String category;
@Schema(description = "用户类型")
private List<String> userType;
@Schema(description = "用户职位")
private List<Integer> position;
@Schema(description = "任职时间")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" timezone = "GMT 8")
private LocalDateTime postTime;
@Schema(description = "有效期")
private List<Date> validityTime;
@Schema(description = "所属部门")
private Long orgId;
@Schema(description = "运动爱好")
private Integer motionHobby;
@Schema(description = "娱乐爱好")
private List<Integer> recreationHobbys;
@Schema(description = "所属城市")
private Long cityId;
@Schema(description = "活动日期")
private Date activityDate;
@Schema(description = "活动时间")
private LocalDateTime activityTime;
@Schema(description = "描述")
private String desc;
/**
* @param postTime
*/
// public void setPostTime(String postTime) {
// try {
// DateTimeFormatter dtf = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm:ss");
// this.postTime = LocalDateTime.parse(postTime dtf);
// } catch (Exception e) {
// e.printStackTrace();
// }
// }
}
参考地址：
ElementPlus组件库，树形表格及树形数据，树形表格懒加载：
toutiao/article/7085741060000956963/
Form表单&表单校验：
element-plus.gitee.io/zh-CN/component/form.html#表单校验
操作表单数据：
toutiao/article/7065181959022133764/
DatePicker日期选择器：
element-plus.gitee.io/zh-CN/component/date-picker.html
DateTimePicker日期时间选择器：
element-plus.gitee.io/zh-CN/component/datetime-picker.html
TreeSelect树选择：
element-plus.gitee.io/zh-CN/component/tree-select.html#基础用法
