通用字典
所有的下拉菜單都做到字典里。數據組織成如下格式
{xx=[ConstantItem(id=27, constantName=A, constantTypeId=7), ConstantItem(id=28, constantName=B, constantTypeId=7), ConstantItem(id=29, constantName=AB, constantTypeId=7), ConstantItem(id=30, constantName=O, constantTypeId=7)]，hzgx=[...]}
字典后臺
@Data
public class ConstantType {
private Integer id;
private String constantTypeCode;
private String constantTypeName;
}
@Data
public class ConstantItem {
private Integer id;
private String constantName;
private Integer constantTypeId;
}
@RestController
@RequestMapping("/constantType")
public class ConstantTypeController {
@Autowired
IConstantTypeService service;
@RequestMapping("/findAll")
public Map<String,List<ConstantItem>> findAll(){
Map<String,List<ConstantItem>> map=service.findAll();
return map;
}
}
@Service
public class ConstantTypeServiceImpl implements IConstantTypeService {
@Autowired
ConstantTypeMapper mapper;
@Autowired
ConstantItemMapper itemMapper;
@Override
public Map<String, List<ConstantItem>> findAll() {
List<ConstantType> list=mapper.findAll();
Map<String,List<ConstantItem>> map=new HashMap();
for(ConstantType type:list){
//獲取分類代碼
int typeId=type.getId();
//根據typeId去查詢下面的項目
List<ConstantItem> itemList=itemMapper.findByTypeId(typeId);
map.put(type.getConstantTypeCode(),itemList);
}
return map;
}
}
public interface ConstantTypeMapper {
@Select("select * from constanttype")
List<ConstantType> findAll();
}
public interface ConstantItemMapper {
@Select("select * from constantitem where constantTypeId=#{typeId}")
List<ConstantItem> findByTypeId(int typeId);
}
字典前臺
<template>
<div class="regist">
<h3>{{title}}</h3>
<table border="0" cellspacing="10px" cellpadding="0" width="90%">
<tr>
<td class="strong right" width="10%">姓 名:</td>
<td width="20%" class="left">
<input type="text" v-model="form.name" />
</td>
<td class="strong right" width="10%">性 別:</td>
<td width="20%" class="left">
<select v-model="form.sex" >
<option v-for="item in state.dictList.xb" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="10%">與戶主關系:</td>
<td width="30%" class="left">
<select v-model="form.relation">
<option v-for="item in state.dictList.hzgx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right">出生日期:</td>
<td class="left">
<input type="date" v-model="form.birthday" />
</td>
<td class="strong right">身份證號:</td>
<td class="left">
<input type="text" v-model="form.idNumber" />
</td>
<td class="strong right">宗教信仰:</td>
<td class="left">
<input type="text" v-model="form.religiousBelief" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">文化程度:</td>
<td width="18%" class="left">
<select v-model="form.educationalLevel">
<option v-for="item in state.dictList.whcd" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">婚姻狀況:</td>
<td width="18%" class="left">
<select v-model="form.marriage">
<option v-for="item in state.dictList.hyzk" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">兵役情況:</td>
<td width="28%" class="left">
<select v-model="form.militaryService">
<option v-for="item in state.dictList.byqk" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right" width="12%">民 族:</td>
<td width="18%" class="left">
<select v-model="form.nation">
<option v-for="item in state.dictList.mz" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">血 型:</td>
<td width="18%" class="left">
<select v-model="form.bloodType">
<option v-for="item in state.dictList.xx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">職 業:</td>
<td width="28%" class="left">
<input type="text" v-model="form.job" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">住 址:</td>
<td width="18%" class="left">
<input type="text" v-model="form2.address" />
</td>
<td class="strong right" width="12%">戶口類型:</td>
<td width="18%" class="left">
<select v-model="form2.populationType">
<option v-for="item in state.dictList.hklx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">戶主姓名</td>
<td width="28%" class="left">
<input type="text" v-model="form2.houseHolder" />
</td>
</tr>
<tr>
<td colspan="6" class="mid">
<input type="button" value="保存" @click="regist()" />
</td>
</tr>
</table>
</div>
</template>
<script setup>
import {onMounted, reactive} from 'vue';
import axios from 'axios';
//backup01后臺用的 = 0-立戶 1-出生申報 2-夫妻投靠 3-父母投靠子女
//title 前臺的 populationId 存到哪個戶口下
const myProps = defineProps(['title','populationId','operate'])
let form = reactive({
name: undefined,
sex: undefined,
relation: undefined,
birthday: undefined,
idNumber: undefined,
educationalLevel: undefined,
marriage: undefined,
militaryService: undefined,
nation: undefined,
bloodType: undefined,
job: undefined,
populationId: undefined,
religiousBelief: undefined,
operate:undefined
})
let form2=reactive({
address: undefined,
populationType:undefined,//戶口類型，城鎮 非城鎮
houseHolder:undefined//戶主姓名,
})
//1,性別數據開始時置空
let state =reactive({dictList:{}})
function regist() {
}
onMounted(()=>{
axios.get("http://localhost:8081/ssmstudy/constantType/findAll")
.then(res=>{
state.dictList=res.data
})
})
</script>
