需求：地区信息管理页面前后端开发：
1、提供地区信息管理，比如陕西省西安市长安区，页面树形图展示；
2、包括地区名称、地区编码、经纬度等"
3.功能包括增删改查
页面展示如下：
1.前端代码
<template>
<el-container style="height: 100%;width: 100%;">
<el-main style="display:flex;flex-direction:column;">
<el-row style="flex:1;padding:5px 5px">
<el-row style="height:100%;width:100%;display:flex;flex-direction:row;">
<el-row style="height:100%;flex:1;float:right;">
<el-row style="height:100%;width:100%;display:flex;flex-direction:column;">
<el-row class="div-container" style="height:38px">
<el-col :span="3">
 地区名称：
<el-input v-model="name" class="alarm-input-clearable" style="width:150px"
clearable></el-input>
</el-col>
<el-col :span="3">
 地区编码：
<el-input v-model="code" class="alarm-input-clearable" style="width:150px"
clearable></el-input>
</el-col>
<el-col :span="3">
 行政代码：
<el-input v-model="value" class="alarm-input-clearable" style="width:150px"
clearable></el-input>
</el-col>
<el-col :span="15" align="right">
<el-button-group>
<el-button
perm="smartTour-tm-mc-search-btn1"
class="dataCount-btn-primary"
icon="el-icon-search"
@click="handleSearch">
查询
</el-button>
<el-button
class="dataCount-btn-primary "
icon="el-icon-refresh-right"
@click="resetParam">
重置
</el-button>
<el-button
perm="smartTour-tm-mc-add-btn1"
class="dataCount-btn-primary"
icon="el-icon-edit"
@click="addData">
新增
</el-button>
<el-button
perm="smartTour-tm-mc-add-btn1"
class="dataCount-btn-primary"
icon="el-icon-delete"
:disabled="selectedIds.length === 0"
@click="deleteItem">
删除
</el-button>
</el-button-group>
</el-col>
</el-row>
<el-row style="flex:1;padding-top:5px">
<el-row style="height:100%;width:100%;display:flex;flex-direction:column"
class="div-container ">
<el-row style="width: 100%;flex:1">
<el-row style="height:100%;width:100%;position: absolute;top: 0; bottom: 0;right: 0;overflow: auto">
<el-table
ref="elTable"
v-loading="loading"
element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
size="mini"
:data="tableData"
style="width: 100%"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
height="100%" stripe
row-key="id"
:expand-row-keys="expandedKeys"
border
:tree-props="{children: 'child', hasChildren: 'hasChildren'}"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
prop="name"
label="地区名称"
/>
<el-table-column
prop="code"
label="地区编码"
show-overflow-tooltip
/>
<el-table-column
prop="value"
label="行政代码"
/>
<el-table-column
prop="longitude"
label="经度"
/>
<el-table-column
prop="latitude"
label="纬度"
/>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<div class="table-manage">
<el-link icon="newIcon newIcon-chakan" :underline="false" type="primary" size="small" @click="editData(scope.row,'详情')">详情</el-link>
</div>
</template>
</el-table-column>
</el-table>
</el-row>
</el-row>
</el-row>
</el-row>
</el-row>
</el-row>
</el-row>
</el-row>
</el-main>
<el-drawer
:title="title"
:visible.sync="dialogDataVisible"
size="40%"
>
<div class="winStyle">
<el-form ref="formData" :model="formData" :rules="rules">
<div class="box">
<div class="infoTitle">基本信息</div>
<el-form-item class="ledger" label="地区名称" label-width="80px" prop="name">
<el-input v-model="formData.name" class="infoStyle" autocomplete="off" :disabled="title == '详情'" />
</el-form-item>
<el-form-item class="ledger" label="地区编码" label-width="80px" prop="code">
<el-input v-model="formData.code" class="infoStyle" autocomplete="off" :disabled="title != '新增'" />
</el-form-item>
<el-form-item class="ledger" label="行政代码" label-width="80px" prop="value">
<el-input v-model="formData.value" class="infoStyle" autocomplete="off" :disabled="title == '详情'" />
</el-form-item>
<el-form-item class="ledger" label="经度" label-width="80px" prop="longitude">
<el-input v-model="formData.longitude" class="infoStyle" autocomplete="off" :disabled="title == '详情'" />
</el-form-item>
<el-form-item class="ledger" label="纬度" label-width="80px" prop="latitude">
<el-input v-model="formData.latitude" class="infoStyle" autocomplete="off" :disabled="title == '详情'" />
</el-form-item>
<el-form-item v-show="formData.name!=='福建省'" class="ledger" label="父级" label-width="80px" prop="pid">
<el-select ref="selectTree" v-model="formData.pid" class="main-select-tree" :disabled="title == '详情'" clearable placeholder="" style="width: 100%;">
<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" style="display: none;" />
<el-tree
ref="selecteltree"
class="main-select-el-tree"
:data="tableData"
node-key="code"
highlight-current
:props="defaultProps"
:current-node-key="formData.pid"
@node-click="handleNodeClick"
/>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
<div class="button-group-footer">
<el-button v-if="title != '详情'" type="success" icon="el-icon-check" size="small" @click="submit">提交</el-button>
<el-button v-if="title == '详情'" type="success" icon="el-icon-edit" size="small" @click="editData(eData,'编辑')">编辑</el-button>
<el-button v-if="title == '编辑'" type="success" icon="el-icon-arrow-left" size="small" @click="editData(eData,'详情')">返回</el-button>
<el-button size="small" icon="el-icon-close" @click="dialogDataVisible = false">取消</el-button>
</div>
</el-drawer>
</el-container>
</template>
<script>
import {queryAreaList, saveArea, deleteArea, updateArea} from "@/api/smartTour/smartTour";
export default {
name: 'areaInfoManagement',
data() {
return {
code: '',
name: '',
value: '',
longitude: '',
latitude: '',
options: [],
datas: [],
defaultProps: {
children: 'child',
label: 'name'
},
expandedKeys: [],
loading: false,
rules: {
code: [
{required: true, message: '必填项不能为空', trigger: 'change'},
{min:1,max:9, message: '范围在1-9个字符之间', trigger: 'blur' },
{
trigger: 'blur',
validator: (rule, value, callback) => {
var code = /^[0-9]*$/
if (!code.test(value)) {
callback(
new Error(
'请输入数字!'
)
)
} else {
callback()
}
}
}
],
name: [
{required: true, message: '必填项不能为空', trigger: 'change'}
],
value: [
{required: true, message: '必填项不能为空', trigger: 'change'},
{
trigger: 'blur',
validator: (rule, value, callback) => {
var name = /^[0-9]*$/
if (!name.test(value)) {
callback(
new Error(
'请输入数字!'
)
)
} else {
callback()
}
}
}
],
pid: [
{required: true, message: '必填项不能为空', trigger: 'change'}
]
},
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
title: '新增',
dialogDataVisible: false,
eData: {},
formData: {
code: '',
name: '',
value: '',
longitude: '',
latitude: '',
pid: ''
},
selectedIds: []
}
},
created() {
this.getData()
},
methods: {
resetParam() {
this.code = '',
this.name = '',
this.longitude= '',
this.latitude= '',
this.value = ''
},
handleSearch() {
this.currentPage = 1
this.getData()
},
handleSelectionChange(selection) {
this.selectedIds = selection.map((item) => item.id)
},
getData() {
this.loading = true
this.options = []
this.expandedKeys = []
queryAreaList({
code: this.code,
name: this.name,
value: this.value
}).then((res) => {
if (res.data.code == '200') {
if (res.data.result && res.data.result.length !== 0) {
this.tableData = res.data.result
this.expandedKeys.push(String(res.data.result[0].id))
this.total = res.data.result.total
this.getParents(res.data.result) // 获取父级
}
}
this.loading = false
})
},
// 获取父级
getParents(data) {
if (data.length !== 0) {
for (const item of data) {
this.options.push({label: item.name, value: item.code})
if (item.child && item.child.length !== 0) {
this.getParents(item.child)
}
}
}
},
deleteItem() {
this.$confirm('确定删除吗?')
.then(() => {
deleteArea(this.selectedIds).then((res) => {
if (res.data.code === 200) {
this.$message.success(res.data.message)
this.getData()
} else {
this.$message.error(res.data.message)
}
})
})
.catch(() => {
this.$message.info('取消删除')
})
},
editData(data, title) {
this.eData = data
this.title = title
this.formData = JSON.parse(JSON.stringify(data))
this.formData.code = String(data.code)
this.dialogDataVisible = true
this.$nextTick(() => {
this.$refs.formData.clearValidate()
})
},
addData() {
this.title = '新增'
this.dialogDataVisible = true
this.formData = {
code: '',
name: '',
value: '',
longitude: '',
latitude: '',
pid: ''
}
this.$nextTick(() => {
this.$refs.formData.clearValidate()
})
},
submit() {
this.$refs.formData.validate((valid) => {
if (valid) {
if (this.title === '新增') {
saveArea(this.formData).then((res) => {
if (res.data.code === 200) {
this.$message.success(res.data.message)
this.dialogDataVisible = false
this.getData()
} else {
this.$message.error(res.data.message)
}
})
} else {
updateArea({
id: this.formData.id,
code: parseInt(this.formData.code),
name: this.formData.name,
value: this.formData.value,
longitude: this.formData.longitude,
latitude: this.formData.latitude,
pid: this.formData.pid
}).then((res) => {
if (res.data.code === 200) {
this.$message.success(res.data.message)
this.dialogDataVisible = false
this.getData()
} else {
this.$message.error(res.data.message)
}
})
}
}
})
},
handleNodeClick(node) {
this.formData.pid = node.code
this.$refs.selectTree.blur()
}
}
}
</script>
<style lang="scss" scoped>
.header-container {
box-shadow: none;
}
.box-class {
.el-form-item {
margin-bottom: 0px;
}
}
.table-head {
height: 55px;
}
/deep/ .iconfont {
font-size: 12px;
}
/deep/ .el-pagination {
padding: 12px 30px;
}
.ledger {
margin: 20px 30px 20px 20px
}
.winStyle {
height: 820px;
overflow: scroll
}
/deep/ .el-input.is-disabled .el-input__inner {
color: #000;
}
.infoTitle {
margin: 20px 0 0 20px;
font-size: 18px;
font-weight: bold;
color: #526ADE
}
.box {
margin: 20px 30px 30px 30px;
border: 1px solid #c7c7c7;
border-radius: 8px;
box-shadow: 0px 3px 0px 0px #e5e5e5;
}
/deep/ .el-drawer__header {
text-align: left;
font-weight: 700;
margin-bottom: 20px;
padding: 20px;
color: #222;
border: 1px solid #e8e8e8;
& > span {
border-left: 10px solid #526ADE;
padding-left: 10px;
font-weight: bolder;
font-size: 20px;
outline: none;
}
}
.winStyle {
height:800px;
overflow:scroll
}
.infoStyle {
width: 100%;
}
</style>
2.后端代码
@Slf4j
@RestController
@RequestMapping("/system/area")
public class SysAreaController {
@Autowired
private SysAreaService sysAreaService;
/**
* 查询地区管理列表
*/
@ResponseBody
@GetMapping("/queryAreaList")
public Result queryAreaList(SysAreaDTO sysAreaDTO) {
List<SysAreaVO> result = sysAreaService.selectPageVo(sysAreaDTO);
return Result.ok(result);
}
/**
* 新增保存地区管理
*/
@ResponseBody
@PostMapping("/save")
public Result save(@RequestBody @Validated SysAreaDTO sysAreaDTO) {
Integer save = sysAreaService.insertSysArea(sysAreaDTO);
if(save<1){
return Result.error("新增失败");
}
return Result.ok("新增成功");
}
/**
* 修改保存地区管理
*/
@ResponseBody
@PostMapping("/update")
public Result update(@RequestBody @Validated SysAreaDTO sysAreaDTO) {
Integer update = sysAreaService.updateSysArea(sysAreaDTO);
if(update<1){
return Result.error("修改失败");
}
return Result.ok("修改成功");
}
@ResponseBody
@PostMapping("/delete")
public Result batchRemove(@RequestBody List<Long> ids) {
Integer delete = sysAreaService.deleteBatchIds(ids);
if(delete<1){
return Result.error("删除失败");
}
return Result.ok("删除成功");
}
}
Service实现
@Service
public class SysAreaServiceImpl extends ServiceImpl<SysAreaMapper, SysArea> implements SysAreaService {
@Autowired
SysAreaMapper sysAreaMapper;
@Override
public List<SysAreaVO> selectPageVo(SysAreaDTO sysAreaDTO) {
SysBaseOrg baseOrg = sysAreaMapper.getOrgId();
sysAreaDTO.setPid(Long.parseLong(baseOrg.getOrgId()));
List<SysAreaVO> list = sysAreaMapper.selectSysAreaListSubstringPid(sysAreaDTO);
ArrayList<Long> arr = new ArrayList<Long>();
list.forEach(SysArea -> {
List<SysAreaVO> l = list.stream().filter(SysArea1 -> SysArea1.getPid().toString().equals(SysArea.getCode().toString())).collect(Collectors.toList());
l.forEach(child ->{
arr.add(child.getId());
});
SysArea.setChild(l);
});
Iterator<SysAreaVO> it = list.iterator();
while(it.hasNext()){
SysAreaVO x = it.next();
arr.forEach(id ->{
if(x.getId().equals(id)){
it.remove();
}
});
}
int orgId=Integer.valueOf(baseOrg.getOrgId());
List<SysAreaVO> sysAreaVOS = sysAreaMapper.selectSysAreaListByCode(orgId);
if(!sysAreaVOS.isEmpty()){
sysAreaVOS.get(0).setChild(list);
}
// List<SysAreaVO> list = sysAreaMapper.selectPageVo(sysAreaDTO);
// ArrayList<Long> arr = new ArrayList<Long>();
// list.forEach(SysArea -> {
// List<SysAreaVO> l = list.stream().filter(SysArea1 -> SysArea1.getPid().toString().equals(SysArea.getCode().toString())).collect(Collectors.toList());
// l.forEach(child ->{
// arr.add(child.getId());
// });
// SysArea.setChild(l);
// });
// Iterator<SysAreaVO> it = list.iterator();
// while(it.hasNext()){
// SysAreaVO x = it.next();
// arr.forEach(id ->{
// if(x.getId().equals(id)){
// it.remove();
// }
// });
// }
// List<SysAreaVO> sysAreaVOS = sysAreaMapper.selectSysAreaListByPid("0");
// if(!sysAreaVOS.isEmpty()){
// sysAreaVOS.get(0).setChild(list);
// }
return sysAreaVOS;
}
@Override
public Integer insertSysArea(SysAreaDTO sysAreaDTO) {
sysAreaDTO.setId(SnowFlakeUtils.getDefaultSnowFlakeId());
sysAreaDTO.setDeleted(0);
sysAreaDTO.setVersion(0);
int insert = sysAreaMapper.insert(sysAreaDTO);
return insert;
}
@Override
public Integer updateSysArea(SysAreaDTO sysAreaDTO) {
// int i = sysAreaMapper.updateAreaInfo(sysAreaDTO);
int i = sysAreaMapper.updateById(sysAreaDTO);
return i;
}
@Override
public Integer deleteBatchIds(List<Long> ids) {
int delete=1;
if(ObjectUtil.isNotEmpty(ids)) {
delete =sysAreaMapper.deleteBatchIds(ids);
}
return delete;
}
}
mapper:
public interface SysAreaMapper extends BaseMapper<SysArea> {
List<SysAreaVO> selectPageVo(@Param("param") SysAreaDTO sysAreaDTO);
SysBaseOrg getOrgId();
Integer batchDeleteAreaInfo(List<Long> ids);
Integer updateAreaInfo(@Param("param")SysAreaDTO sysAreaDTO);
@Select("select * from t_sys_area where pid = #{pid}")
List<SysAreaVO> selectSysAreaListByPid(String pid);
@Select("select * from t_sys_area where code = #{code}")
List<SysAreaVO> selectSysAreaListByCode(int code);
List<SysAreaVO> selectSysAreaListSubstringPid(@Param("param")SysAreaDTO sysAreaDTO);
}
sql:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hskj.pms.mapper.db1.SysAreaMapper">
<resultMap id="BaseResultMap" type="com.hskj.pms.entity.SysArea">
<id property="id" column="id" jdbcType="BIGINT"/>
<result property="pid" column="pid" jdbcType="BIGINT"/>
<result property="code" column="code" jdbcType="INTEGER"/>
<result property="value" column="value" jdbcType="VARCHAR"/>
<result property="name" column="name" jdbcType="VARCHAR"/>
<result property="colour" column="colour" jdbcType="VARCHAR"/>
<result property="seq" column="seq" jdbcType="INTEGER"/>
<result property="deleted" column="deleted" jdbcType="TINYINT"/>
<result property="version" column="version" jdbcType="INTEGER"/>
</resultMap>
<sql id="Base_Column_List">
id,pid,code,
value,name,seq,
deleted,version
</sql>
<select id="selectPageVo" resultType="com.hskj.pms.entity.SysAreaVO">
select
t1.id,t1.pid,t1.code,t1.value,t1.name,t1.longitude,t1.latitude,t1.colour,t1.seq,t1.deleted,t1.version,t1.path
from
t_sys_area t1
<where>
and t1.deleted = '0' and t1.pid != '0'
<if test="param.name != null">AND t1.name like concat('%', #{param.name}, '%')</if>
<if test="param.pid != null">AND t1.pid like concat('%', #{param.pid}, '%')</if>
<if test="param.code!= null">AND t1.code like concat('%', #{param.code}, '%')</if>
<if test="param.value!= null">AND t1.value like concat('%', #{param.value}, '%')</if>
</where>
ORDER BY t1.code
</select>
<select id="selectSysAreaListSubstringPid" resultType="com.hskj.pms.entity.SysAreaVO">
select
t1.id,t1.pid,t1.code,t1.value,t1.name,t1.longitude,t1.latitude,t1.colour,t1.seq,t1.deleted,t1.version,t1.path
from
t_sys_area t1
<where>
and t1.deleted = '0' and t1.pid != '0'
and SUBSTRING(t1.pid, 1, 2)= #{param.pid}
<if test="param.name != null">AND t1.name like concat('%', #{param.name}, '%')</if>
<if test="param.code!= null">AND t1.code like concat('%', #{param.code}, '%')</if>
<if test="param.value!= null">AND t1.value like concat('%', #{param.value}, '%')</if>
</where>
ORDER BY t1.code
</select>
<select id="getOrgId" resultType="com.hskj.pms.entity.SysBaseOrg">
SELECT SUBSTRING(org_id, 1, 2) orgId FROM `sys_base_org` where use_flag = 1 and org_type_id = 1
</select>
<delete id="batchDeleteAreaInfo">
DELETE FROM t_sys_area
WHERE id IN
<foreach collection="ids" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
<update id="updateAreaInfo">
update
t_sys_area
SET
pid = #{param.pid},code = #{param.code},value = #{param.value},name = #{param.name}
where id = #{param.id}
</update>
</mapper>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
