hansha
/
szxc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

居民信息页面样式调整

Browse Source
main
wanglei 2 years ago
parent ec8e6de5cf
commit cd894e8879
1 changed files with 155 additions and 91 deletions
Show Stats Download Patch File Download Diff File

234
ruoyi-ui/src/views/szxc/jminfo/index.vue
Unescape View File

@ -275,7 +275,7 @@
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button icon="el-icon-caret-bottom" v-if="!queryMore" @click="queryMoreFun" size="mini">更多</el-button> <el-button icon="el-icon-caret-bottom" v-if="!queryMore" @click="queryMoreFun" size="mini">展开</el-button>
<el-button icon="el-icon-caret-top" v-if="queryMore" @click="queryMoreFun" size="mini">收起</el-button> <el-button icon="el-icon-caret-top" v-if="queryMore" @click="queryMoreFun" size="mini">收起</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -327,65 +327,56 @@
</el-row> </el-row>
<el-table v-loading="loading" :data="jminfoList" @selection-change="handleSelectionChange" border> <el-table v-loading="loading" :data="jminfoList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" fixed/> <el-table-column type="selection" width="50" align="center" fixed/>
<el-table-column label="居民ID" align="center" prop="id" fixed/> <el-table-column label="居民ID" align="center" prop="id" fixed/>
<el-table-column label="户号" align="center" prop="acountNo" min-width="120"/> <el-table-column label="人员基本信息" align="center">
<el-table-column label="所属网格" align="center" prop="deptName" min-width="120"/> <el-table-column label="姓名" align="center" prop="name" min-width="80"/>
<el-table-column label="户籍地址" align="center" prop="hjAddress" min-width="120"/> <el-table-column label="曾用名" align="center" prop="oldName" min-width="80"/>
<el-table-column label="户籍性质" align="center" prop="jgNature" min-width="120"> <el-table-column label="国籍" align="center" prop="nationality" min-width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.szxc_hjxz" :value="scope.row.jgNature"/> <dict-tag :options="dict.type.szxc_gj" :value="scope.row.nationality"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="是否户主" align="center" prop="head" > <el-table-column label="身份证号" align="center" prop="cardId" min-width="180"/>
<el-table-column label="出生日期" align="center" prop="bornDate" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.szxc_head" :value="scope.row.head"/> <span>{{ parseTime(scope.row.bornDate, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="与户主关系" align="center" prop="relation" min-width="120"> <el-table-column label="年龄" align="center" prop="age" />
<el-table-column label="性别" align="center" prop="sex">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.szxc_hzgx" :value="scope.row.relation"/> <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="是否常住" align="center" prop="longLive" > <el-table-column label="籍贯" align="center" prop="jg" min-width="100"/>
<template slot-scope="scope">
<dict-tag :options="dict.type.szxc_long_live" :value="scope.row.longLive"/>
</template>
</el-table-column> </el-table-column>
<el-table-column label="是否注销" align="center" prop="off" > <el-table-column label="户信息" align="center">
<template slot-scope="scope"> <el-table-column label="户号" align="center" prop="acountNo" min-width="100"/>
<dict-tag :options="dict.type.szxc_off" :value="scope.row.off"/> <el-table-column label="所属网格" align="center" prop="deptName" min-width="100"/>
</template> <el-table-column label="户籍地址" align="center" prop="hjAddress" min-width="100"/>
</el-table-column> </el-table-column>
<el-table-column label="户籍性质信息" align="center">
<el-table-column label="人员基本信息" align="center"> <el-table-column label="户籍性质" align="center" prop="jgNature" min-width="100">
<el-table-column label="姓名" align="center" prop="name" min-width="120"/>
<el-table-column label="曾用名" align="center" prop="oldName" min-width="120"/>
<el-table-column label="国籍" align="center" prop="nationality" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.szxc_gj" :value="scope.row.nationality"/> <dict-tag :options="dict.type.szxc_hjxz" :value="scope.row.jgNature"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="身份证号" align="center" prop="cardId" min-width="180"/> <el-table-column label="是否户主" align="center" prop="head" >
<el-table-column label="出生日期" align="center" prop="bornDate" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.bornDate, '{y}-{m}-{d}') }}</span> <dict-tag :options="dict.type.szxc_head" :value="scope.row.head"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="年龄" align="center" prop="age" /> <el-table-column label="与户主关系" align="center" prop="relation" min-width="100">
<el-table-column label="性别" align="center" prop="sex">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/> <dict-tag :options="dict.type.szxc_hzgx" :value="scope.row.relation"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="籍贯" align="center" prop="jg" min-width="120"/>
</el-table-column> </el-table-column>
<el-table-column label="联系信息" align="center"> <el-table-column label="联系信息" align="center">
<el-table-column label="手机号" align="center" prop="phone" min-width="120"/> <el-table-column label="手机号" align="center" prop="phone" min-width="120"/>
<el-table-column label="现居住地" align="center" prop="currentAddress" min-width="120"/> <el-table-column label="现居住地" align="center" prop="currentAddress" min-width="120"/>
</el-table-column> </el-table-column>
<el-table-column label="本人情况" align="center"> <el-table-column label="本人情况" align="center">
<el-table-column label="本人情况" align="center" prop="brqk" min-width="120"> <el-table-column label="本人情况" align="center" prop="brqk" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
@ -419,7 +410,17 @@
</el-table-column> </el-table-column>
<el-table-column label="疾病描述" align="center" prop="ills" /> <el-table-column label="疾病描述" align="center" prop="ills" />
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120"> <el-table-column label="是否常住" align="center" prop="longLive" >
<template slot-scope="scope">
<dict-tag :options="dict.type.szxc_long_live" :value="scope.row.longLive"/>
</template>
</el-table-column>
<el-table-column label="是否注销" align="center" prop="off" >
<template slot-scope="scope">
<dict-tag :options="dict.type.szxc_off" :value="scope.row.off"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -435,6 +436,18 @@
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['szxc:jminfo:remove']" v-hasPermi="['szxc:jminfo:remove']"
>删除</el-button> >删除</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
v-hasPermi="['szxc:jminfo:edit']"
>人员标签</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
v-hasPermi="['szxc:jminfo:edit']"
>银行卡信息</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -448,11 +461,11 @@
/> />
<!-- 添加或修改居民信息对话框 --> <!-- 添加或修改居民信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body class="add-edit" top="15px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="95px">
<el-divider content-position="left">户信息</el-divider>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="户号" prop="acountNo"> <el-form-item label="户号" prop="acountNo">
<el-input <el-input
placeholder="请输入户号查询" placeholder="请输入户号查询"
@ -461,20 +474,24 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="所属网格" prop="deptName"> <el-form-item label="所属网格" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :disabled="true" <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :disabled="true"
placeholder="请选择所属网格" style="width:100%;" @select="selectedTree"/> placeholder="请选择所属网格" style="width:100%;" @select="selectedTree"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="户籍地址" prop="hjAddress"> <el-form-item label="户籍地址" prop="hjAddress">
<el-input v-model="form.hjAddress" placeholder="请输入户籍地址" readonly/> <el-input v-model="form.hjAddress" placeholder="请输入户籍地址" readonly/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
</el-row>
<el-divider content-position="left">户籍性质信息</el-divider>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="户籍性质" prop="jgNature"> <el-form-item label="户籍性质" prop="jgNature">
<el-select <el-select
v-model="form.jgNature" v-model="form.jgNature"
@ -491,9 +508,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="是否户主" prop="head"> <el-form-item label="是否户主" prop="head">
<el-select <el-select
v-model="form.head" v-model="form.head"
@ -510,7 +525,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="与户主关系" prop="relation"> <el-form-item label="与户主关系" prop="relation">
<el-select <el-select
v-model="form.relation" v-model="form.relation"
@ -529,7 +544,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="是否常住" prop="longLive"> <el-form-item label="是否常住" prop="longLive">
<el-select <el-select
v-model="form.longLive" v-model="form.longLive"
@ -546,7 +561,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="是否注销" prop="off"> <el-form-item label="是否注销" prop="off">
<el-select <el-select
v-model="form.off" v-model="form.off"
@ -567,19 +582,17 @@
<el-divider content-position="left">人员基本信息</el-divider> <el-divider content-position="left">人员基本信息</el-divider>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" /> <el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="曾用名" prop="oldName"> <el-form-item label="曾用名" prop="oldName">
<el-input v-model="form.oldName" placeholder="请输入曾用名" /> <el-input v-model="form.oldName" placeholder="请输入曾用名" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="国籍" prop="nationality"> <el-form-item label="国籍" prop="nationality">
<el-select <el-select
v-model="form.nationality" v-model="form.nationality"
@ -596,14 +609,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="身份证号" prop="cardId"> <el-form-item label="身份证号" prop="cardId">
<el-input v-model="form.cardId" placeholder="请输入身份证号" /> <el-input v-model="form.cardId" placeholder="请输入身份证号" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="出生日期" prop="bornDate"> <el-form-item label="出生日期" prop="bornDate">
<el-date-picker clearable style="width:100%;" <el-date-picker clearable style="width:100%;"
v-model="form.bornDate" v-model="form.bornDate"
@ -613,14 +626,14 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="年龄" prop="age"> <el-form-item label="年龄" prop="age">
<el-input v-model="form.age" placeholder="请输入年龄" /> <el-input v-model="form.age" placeholder="请输入年龄" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="性别" prop="sex"> <el-form-item label="性别" prop="sex">
<el-select <el-select
v-model="form.sex" v-model="form.sex"
@ -637,7 +650,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="16">
<el-form-item label="籍贯" prop="jg"> <el-form-item label="籍贯" prop="jg">
<el-input v-model="form.jg" placeholder="请输入籍贯" /> <el-input v-model="form.jg" placeholder="请输入籍贯" />
</el-form-item> </el-form-item>
@ -645,12 +658,12 @@
</el-row> </el-row>
<el-divider content-position="left">联系信息</el-divider> <el-divider content-position="left">联系信息</el-divider>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" /> <el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="现居住地" prop="currentAddress"> <el-form-item label="现居住地" prop="currentAddress">
<el-input v-model="form.currentAddress" placeholder="请输入现居住地" /> <el-input v-model="form.currentAddress" placeholder="请输入现居住地" />
</el-form-item> </el-form-item>
@ -658,7 +671,7 @@
</el-row> </el-row>
<el-divider content-position="left">本人情况</el-divider> <el-divider content-position="left">本人情况</el-divider>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="8">
<el-form-item label="本人情况" prop="brqk"> <el-form-item label="本人情况" prop="brqk">
<el-select <el-select
v-model="form.brqk" v-model="form.brqk"
@ -675,7 +688,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="婚姻" prop="hy"> <el-form-item label="婚姻" prop="hy">
<el-select <el-select
v-model="form.hy" v-model="form.hy"
@ -692,9 +705,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="学历" prop="xueli"> <el-form-item label="学历" prop="xueli">
<el-select <el-select
v-model="form.xueli" v-model="form.xueli"
@ -711,7 +722,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="政治面貌" prop="zzmm"> <el-form-item label="政治面貌" prop="zzmm">
<el-select <el-select
v-model="form.zzmm" v-model="form.zzmm"
@ -728,9 +741,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="宗教信仰" prop="zjxy"> <el-form-item label="宗教信仰" prop="zjxy">
<el-select <el-select
v-model="form.zjxy" v-model="form.zjxy"
@ -747,7 +758,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="健康状况" prop="jkzk"> <el-form-item label="健康状况" prop="jkzk">
<el-select <el-select
v-model="form.jkzk" v-model="form.jkzk"
@ -764,7 +775,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-row :gutter="10">
<el-col :span="16">
<el-form-item label="疾病描述" prop="ills"> <el-form-item label="疾病描述" prop="ills">
<el-input v-model="form.ills" placeholder="请输入疾病描述" /> <el-input v-model="form.ills" placeholder="请输入疾病描述" />
</el-form-item> </el-form-item>
@ -929,14 +942,47 @@ export default {
}, },
// 表单校验 // 表单校验
rules: { rules: {
acountNo: [
{ required: true, message: "户号不能为空", trigger: "blur" }
],
deptId: [ deptId: [
{ required: true, message: "部门id不能为空", trigger: "blur" } { required: true, message: "所属网格不能为空", trigger: "blur" }
],
hjAddress: [
{ required: true, message: "户籍地址不能为空", trigger: "blur" }
],
jgNature: [
{ required: true, message: "户籍性质不能为空", trigger: "blur" }
],
relation: [
{ required: true, message: "与户主关系不能为空", trigger: "blur" }
], ],
head: [ head: [
{ required: true, message: "是否户主 0:户主 1:非户主不能为空", trigger: "blur" } { required: true, message: "是否户主不能为空", trigger: "blur" }
],
longLive: [
{ required: true, message: "是否常住不能为空", trigger: "blur" }
], ],
off: [ off: [
{ required: true, message: "是否注销 0:正常 1:注销不能为空", trigger: "blur" } { required: true, message: "是否注销不能为空", trigger: "blur" }
],
name: [
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
nationality: [
{ required: true, message: "国籍不能为空", trigger: "blur" }
],
cardId: [
{ required: true, message: "身份证号不能为空", trigger: "blur" }
],
bornDate: [
{ required: true, message: "出生日期不能为空", trigger: "blur" }
],
sex: [
{ required: true, message: "性别不能为空", trigger: "blur" }
],
jg: [
{ required: true, message: "籍贯不能为空", trigger: "blur" }
], ],
}, },
// 户主信息 // 户主信息
@ -1132,13 +1178,31 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
::v-deep.el-divider--horizontal{ .add-edit{
::v-deep.el-dialog__header{
padding: 20px 40px !important;
padding-bottom: 10px !important;
}
::v-deep.el-dialog{
margin-top: 30px !important;
}
::v-deep.el-dialog__body{
padding: 0px 40px !important;
.el-form-item{
margin-bottom: 20px;
}
.el-divider--horizontal{
height: 2px; height: 2px;
margin: 40px 0; margin-top: 15px;
} margin-bottom: 30px;
::v-deep.el-divider__text{ }
font-size: 18px; .el-divider__text{
font-size: 16px;
font-weight: bolder; font-weight: bolder;
}
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save