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

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

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

Write Preview
Loading…
Cancel
Save