elink-star
/
epmet-work-pc
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

居民新增样式

v1.1
mk 2 years ago
parent
535e02db9a
commit
2aa44a1908
6 changed files with 323 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      src/assets/scss/pages/resiAdd.scss
  2. 282
      src/views/components/addResi.vue
  3. 0
      src/views/components/resiExpand/cpts/disability.vue
  4. 21
      src/views/components/resiExpand/index.vue
  5. 9
      src/views/modules/portrayal/jumin/cpts/graph.vue
  6. 16
      src/views/modules/portrayal/jumin/cpts/staffTag.vue

55
src/assets/scss/pages/resiAdd.scss
View File

@ -0,0 +1,55 @@
.div_form {
height: 100%;
padding:16px;
.item_width_1{
width: 514px;
}
.form{
background-color: #fff;
padding:16px;
}
}
h5 {
position: relative;
font-size: 16px;
margin: 22px 0;
&::after {
content: "";
position: absolute;
display: inline-block;
left: -15px;
top: -0px;
width: 5px;
height: 16px;
background-color: #0056d6;
}
}
.basicInfo, .house, .expand {
::v-deep .el-form-item{
margin-bottom: 24px;
}
}
.font-color-orange{
::v-deep .el-form-item__label{
color:#ff5107 ;
}
}
.font-color-blue{
::v-deep .el-form-item__label{
color:#3876f2;
position: relative;
&::before{
content: '*';
position: absolute;
top: 0px;
left: 16px;
}
}
}
.font-color-blue2{
::v-deep .el-form-item__label{
&::before{
left: 2px;
}
}
}

282
src/views/components/addResi.vue
View File

@ -1,68 +1,254 @@
<template>
<div>
<h3>新增居民</h3>
<div class="div_form">
<div class="form">
<el-form :model="form" label-width="100px">
<h5>选择居住房屋</h5>
<div class="house">
</div>
<h5>基础信息登记</h5>
<div class="resiInfo">
</div>
<h5>拓展信息登记</h5>
<div class="expand">
</div>
<h5>人员标签</h5>
<div class="label">
</div>
<el-form :model="form" :rules="rules" label-width="100px" ref="addForm">
<h5 style="margin-top: 6px;">基础信息登记</h5>
<div class="basicInfo">
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item label="姓名" prop="name" class="font-color-orange">
<el-input class="list_item_width_1" v-model="form.name" placeholder="请输入内容" size="small"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件类型" prop="idType" class="font-color-orange">
<el-select v-model="form.idType" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<el-option v-for="(item, index) in idTypeList" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件号" prop="idNum" class="font-color-orange">
<el-input v-model="form.idNum" placeholder="请输入内容" clearable size="small"
class="list_item_width_1"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="国籍" prop="nationality" class="font-color-orange">
<el-select v-model="form.nationality" placeholder="请选择" size="small"
class="list_item_width_1" clearable>
<!-- <el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option> -->
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item label="联系电话" prop="mobile" class="font-color-orange">
<el-input class="list_item_width_1" v-model="form.mobile" placeholder="请输入内容" size="small"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别">
<el-select v-model="form.gender" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出生日期">
<el-date-picker v-model.trim="form.birthday" class="list_item_width_1" type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="民族">
<el-select v-model="form.nationality" placeholder="请选择" size="small"
class="list_item_width_1" clearable>
<!-- <el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option> -->
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item label="文化程度">
<el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="婚姻状况">
<el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="籍贯">
<el-input v-model="form.resideInfoDto.nativePlace" placeholder="请输入内容" clearable
size="small" class="list_item_width_1"></el-input> <el-radio
v-model="form.localResidenceFlag" style="margin-left: 10px;">本地</el-radio>
</el-form-item>
</el-col>
<el-col :span="6"></el-col>
</el-row>
<el-form-item label="备注">
<el-input type="textarea" class="item_width_1" :rows="3" placeholder="请输入内容" v-model="form.remark" clearable>
</el-input>
</el-form-item>
</div>
<h5>居住信息登记</h5>
<div class="house">
<el-row type="flex" justify="space-between">
<el-col :span="24">
<el-form-item label="所属房屋" prop="houseId" class="font-color-orange">
<el-select v-model="form.houseId" placeholder="请选择" size="small" class="item_width_1" style="margin-right: 10px;" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
<!-- v-if="scope.$index == tableData.length - 1" -->
<el-button type="primary" size="mini" icon="el-icon-plus" circle></el-button>
<!-- <el-button type="danger" v-if="scope.$index != tableData.length - 1 ||
(tableData.length - 1 >= 1 && scope.$index != '0')
" size="small" icon="el-icon-minus" circle>
</el-button> -->
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item label="人房关系" class="font-color-blue">
<el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="人户状况" class="font-color-blue">
<el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="与户主关系" class="font-color-blue font-color-blue2">
<el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6"></el-col>
</el-row>
</div>
<h5>拓展信息登记</h5>
<div class="expand">
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item label="宗教信仰">
<el-select v-model="form.religionDto" placeholder="请选择" size="small"
class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="就业状态" class="font-color-blue">
<el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="有无赡养人">
<el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
<!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
:value="item.value"></el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6"></el-col>
</el-row>
</div>
<h5>人员标签</h5>
<div class="stafftag">
<stafftag :formType="'add'"></stafftag>
</div>
</el-form>
<el-row style="margin:24px">
<el-col :span="24" align="center">
<el-button size="small" class="diy-button--white" @click="handlerCancle" plain>取消</el-button>
<el-button type="primary" size="small" :loading="btnLoading" @click="handleSUbmit">保存</el-button>
<el-button type="primary" size="small" :loading="btnLoading"
@click="handleSUbmit">提交并补充家庭人员信息</el-button>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { idTypeList, genderList } from "@/js/columns/constants";
import stafftag from "../modules/portrayal/jumin/cpts/staffTag.vue";
export default {
data() {
return {
form: {},
result:{
form: {
name: '',
resideInfoDto: {
nativePlace: '',
},
localResidenceFlag: false,
},
result: {},
idTypeList,
genderList,
btnLoading: false,
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
idType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
idNum: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
houseId: [{ required: true, message: '请选择所属房屋', trigger: 'blur' }],
}
};
},
created() { },
methods: {},
components: {},
methods: {
handlerCancle() {
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name !== 'add-resi'
);
let tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
];
this.$router.push({
name: tab.name,
params: { ...tab.params },
query: { ...tab.query },
});
},
handleSUbmit() {
}
},
components: { stafftag },
computed: {},
watch: {},
}
</script>
<style lang='scss'>
@import "@/assets/scss/modules/management/list-main.scss";
//我想做一个关系图谱的功能,要求我可以自定义节点图片包括线条样式
h3 {
background-color: #f2f2f2;
height: 50px;
line-height: 50px;
padding-left: 16px;
margin-bottom: 0;
}
.form{
padding:0 16px 16px;
}
h5 {
padding-left: 16px;
position: relative;
&::after{
content: "";
position: absolute;
display: inline-block;
left: 4px;
top: 0px;
width: 5px;
height: 16px;
background-color:#0056d6 ;
}
}
<style lang='scss' scoped>
@import "@/assets/scss/modules/management/form-main.scss";
@import "@/assets/scss/pages/resiAdd.scss";
</style>

0
src/views/components/resiExpand/cpts/disability.vue
View File

21
src/views/components/resiExpand/index.vue
View File

@ -0,0 +1,21 @@
<template>
<div class=''></div>
</template>
<script>
export default {
data() {
return {};
},
// 群里之前谁碰到过一个单选框的事来着?
created() {},
methods: {},
components:{},
computed:{},
watch: {},
}
</script>
<style lang='scss' scoped>
</style>

9
src/views/modules/portrayal/jumin/cpts/graph.vue
View File

@ -28,7 +28,8 @@ export default {
{
label: '中心',
layoutName: 'center',
layoutClassName: 'seeks-layout-center'
layoutClassName: 'seeks-layout-center',
distance_coefficient: 1.5
}
],
defaultJunctionPoint: 'border',
@ -72,15 +73,15 @@ export default {
let familyList = data.map((item, index) => ({
'id': `N${index + 1}`,
'text': item.name,
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' ? 'grandpa' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.name} （${item.age}）岁</div></div>`
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ?item.gender == 1? 'grandpa':'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.name} （${item.age}）岁</div></div>`
}))
let lineList = data.map((item, index) => ({
'from': 'N1',
'to': `N${index + 1}`,
'text': data[index].houseHolderRel || '其他',
'isHideArrow': true,
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')),
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2'))
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲'||item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')),
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ||item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2'))
}));
lineList = lineList.slice(1)
const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList }

16
src/views/modules/portrayal/jumin/cpts/staffTag.vue
View File

@ -3,7 +3,6 @@
<el-form ref="formRef" :model="formData">
<el-table border ref="tableBox" :data="formData.tableData" :row-style="{ height: '50px' }"
:cell-style="{ padding: '0px' }">
<el-table-column prop="province" label="标签" width="120" align="center">
</el-table-column>
<el-table-column prop="city" label="内容" min-width="70" align="left">
@ -11,13 +10,13 @@
<el-form-item v-if="scope.row.type == 'radio'">
<el-radio-group v-model="scope.row.value" v-for="(item, index) in scope.row.option"
:key="index">
<el-radio :label="item.value" disabled><span style="margin-right: 50px;">{{ item.label
<el-radio :label="item.value" :disabled="formType == 'detail'"><span style="margin-right: 50px;">{{ item.label
}}</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :prop="'tableData.' + scope.$index + '.value'" v-if="scope.row.type == 'checkbox'">
<el-checkbox-group v-model="scope.row.value">
<el-checkbox label="选中且禁用" disabled v-for="(item, index) in scope.row.option" :key="index"
<el-checkbox :disabled="formType == 'detail'" v-for="(item, index) in scope.row.option" :key="index"
:label="item.value">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
@ -40,7 +39,7 @@ export default {
{
index: 0,
province: '政治面貌',
value: '2',
value: '',
type: 'radio',
option: [
{ label: '群众', value: '1' },
@ -75,9 +74,7 @@ export default {
{
index: 2,
province: '关注人群',
value: [
],
value: [],
type: 'checkbox',
option: [
{
@ -188,7 +185,6 @@ export default {
}
]
},
]
},
};
@ -197,6 +193,10 @@ export default {
userInfo: {
type: Object,
default: () => { }
},
formType:{
type: String,
default: 'detail'
}
},
created() {

Write Preview
Loading…
Cancel
Save