居民信息接口联调

ruoyi-ui/src/views/szxc/jminfo/index.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
-      <el-form-item label="部门id" prop="deptId">
+      <el-form-item label="所属网格" prop="deptId">
-        <el-input
+        <treeselect v-model="queryParams.deptId" :options="deptOptions" :disable-branch-nodes="true" style="width:215px;"
-          v-model="queryParams.deptId"
+                    placeholder="请选择所属网格"/>
-          placeholder="请输入部门id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
-      <el-form-item label="所属网格" prop="deptName">
+      <el-form-item label="身份证号" prop="cardId">
         <el-input
-          v-model="queryParams.deptName"
+          v-model="queryParams.cardId"
-          placeholder="请输入所属网格"
+          placeholder="请输入身份证号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -25,6 +21,21 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="是否户主" prop="head">
+        <el-select
+          v-model="queryParams.head"
+          placeholder="是否户主"
+          clearable
+          style="width:100%"
+        >
+          <el-option
+            v-for="dict in dict.type.szxc_head"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="曾用名" prop="oldName">
         <el-input
           v-model="queryParams.oldName"
@@ -63,14 +74,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="身份证号" prop="cardId">
-        <el-input
-          v-model="queryParams.cardId"
-          placeholder="请输入身份证号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="出生日期" prop="bornDate">
         <el-date-picker clearable
           v-model="queryParams.bornDate"
@@ -87,7 +90,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="籍贯" prop="jg">
+      <el-form-item label="籍贯" v-if="queryMore" prop="jg">
         <el-input
           v-model="queryParams.jg"
           placeholder="请输入籍贯"
@@ -95,7 +98,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="与户主关系" prop="relation">
+      <el-form-item label="与户主关系" v-if="queryMore" prop="relation">
         <el-select
           v-model="queryParams.relation"
           placeholder="与户主关系"
@@ -110,7 +113,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="户籍性质" prop="jgNature">
+      <el-form-item label="户籍性质" v-if="queryMore" prop="jgNature">
         <el-select
           v-model="queryParams.jgNature"
           placeholder="户籍性质"
@@ -125,7 +128,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否常住" prop="longLive">
+      <el-form-item label="是否常住" v-if="queryMore" prop="longLive">
         <el-select
           v-model="queryParams.longLive"
           placeholder="是否常住"
@@ -140,7 +143,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="户籍地址" prop="hjAddress">
+      <el-form-item label="户籍地址" v-if="queryMore" prop="hjAddress">
         <el-input
           v-model="queryParams.hjAddress"
           placeholder="请输入户籍地址"
@@ -148,7 +151,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="手机号" prop="phone">
+      <el-form-item label="手机号" v-if="queryMore" prop="phone">
         <el-input
           v-model="queryParams.phone"
           placeholder="请输入手机号"
@@ -156,7 +159,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="现居住地" prop="currentAddress">
+      <el-form-item label="现居住地" v-if="queryMore" prop="currentAddress">
         <el-input
           v-model="queryParams.currentAddress"
           placeholder="请输入现居住地"
@@ -164,7 +167,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="本人情况" prop="brqk">
+      <el-form-item label="本人情况" v-if="queryMore" prop="brqk">
         <el-select
           v-model="queryParams.brqk"
           placeholder="本人情况"
@@ -179,7 +182,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="婚姻" prop="hy">
+      <el-form-item label="婚姻" v-if="queryMore" prop="hy">
         <el-select
           v-model="queryParams.hy"
           placeholder="婚姻"
@@ -194,7 +197,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="学历" prop="xueli">
+      <el-form-item label="学历" v-if="queryMore" prop="xueli">
         <el-select
           v-model="queryParams.xueli"
           placeholder="学历"
@@ -209,7 +212,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="政治面貌" prop="zzmm">
+      <el-form-item label="政治面貌" v-if="queryMore" prop="zzmm">
         <el-select
           v-model="queryParams.zzmm"
           placeholder="政治面貌"
@@ -224,7 +227,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="宗教信仰" prop="zjxy">
+      <el-form-item label="宗教信仰" v-if="queryMore" prop="zjxy">
         <el-select
           v-model="queryParams.zjxy"
           placeholder="宗教信仰"
@@ -239,7 +242,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="健康状况" prop="jkzk">
+      <el-form-item label="健康状况" v-if="queryMore" prop="jkzk">
         <el-select
           v-model="queryParams.jkzk"
           placeholder="健康状况"
@@ -254,22 +257,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否户主" prop="head">
+      <el-form-item label="是否注销" v-if="queryMore" prop="off">
-        <el-select
-          v-model="queryParams.head"
-          placeholder="是否户主"
-          clearable
-          style="width:100%"
-        >
-          <el-option
-            v-for="dict in dict.type.szxc_head"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否注销" prop="off">
         <el-select
           v-model="queryParams.off"
           placeholder="是否注销"
@@ -287,6 +275,8 @@
       <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-top" v-if="queryMore" @click="queryMoreFun" size="mini">收起</el-button>
       </el-form-item>
     </el-form>
 
@@ -336,41 +326,100 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="jminfoList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="jminfoList" @selection-change="handleSelectionChange" border>
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="55" align="center" fixed/>
-      <el-table-column label="居民id" align="center" prop="id" />
+      <el-table-column label="居民ID" align="center" prop="id" fixed/>
-      <el-table-column label="部门id" align="center" prop="deptId" />
+      <el-table-column label="户号" align="center" prop="acountNo" min-width="120"/>
-      <el-table-column label="所属网格" align="center" prop="deptName" />
+      <el-table-column label="所属网格" align="center" prop="deptName" min-width="120"/>
-      <el-table-column label="姓名" align="center" prop="name" />
+      <el-table-column label="户籍地址" align="center" prop="hjAddress" min-width="120"/>
-      <el-table-column label="曾用名" align="center" prop="oldName" />
+      <el-table-column label="户籍性质" align="center" prop="jgNature" min-width="120">
-      <el-table-column label="国籍" align="center" prop="nationality" />
+        <template slot-scope="scope">
-      <el-table-column label="身份证号" align="center" prop="cardId" />
+          <dict-tag :options="dict.type.szxc_hjxz" :value="scope.row.jgNature"/>
-      <el-table-column label="出生日期" align="center" prop="bornDate" width="180">
+        </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">
+          <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">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.bornDate, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
         <el-table-column label="年龄" align="center" prop="age" />
-      <el-table-column label="性别" align="center" prop="sex" />
+        <el-table-column label="性别" align="center" prop="sex">
-      <el-table-column label="籍贯" align="center" prop="jg" />
+          <template slot-scope="scope">
-      <el-table-column label="与户主关系" align="center" prop="relation" />
+            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
-      <el-table-column label="户籍性质" align="center" prop="jgNature" />
+          </template>
-      <el-table-column label="是否常住" align="center" prop="longLive" />
+        </el-table-column>
-      <el-table-column label="户籍地址" align="center" prop="hjAddress" />
+        <el-table-column label="籍贯" align="center" prop="jg" min-width="120"/>
-      <el-table-column label="手机号" align="center" prop="phone" />
+      </el-table-column>
-      <el-table-column label="现居住地" align="center" prop="currentAddress" />
+
-      <el-table-column label="本人情况" align="center" prop="brqk" />
+      <el-table-column label="人员基本信息" align="center">
-      <el-table-column label="婚姻" align="center" prop="hy" />
+        <el-table-column label="手机号" align="center" prop="phone" min-width="120"/>
-      <el-table-column label="学历" align="center" prop="xueli" />
+        <el-table-column label="现居住地" align="center" prop="currentAddress" min-width="120"/>
-      <el-table-column label="政治面貌" align="center" prop="zzmm" />
+      </el-table-column>
-      <el-table-column label="宗教信仰" align="center" prop="zjxy" />
+
-      <el-table-column label="健康状况" align="center" prop="jkzk" />
+      <el-table-column label="人员基本信息" align="center">
+        <el-table-column label="本人情况" align="center" prop="brqk" min-width="120">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_brqk" :value="scope.row.brqk"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="婚姻" align="center" prop="hy" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_hyzk" :value="scope.row.hy"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="学历" align="center" prop="xueli" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_xueli" :value="scope.row.xueli"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="政治面貌" align="center" prop="zzmm" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_zzmm" :value="scope.row.zzmm"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="宗教信仰" align="center" prop="zjxy" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_zjxy" :value="scope.row.zjxy"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="健康状况" align="center" prop="jkzk" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.szxc_jkzk" :value="scope.row.jkzk"/>
+          </template>
+        </el-table-column>
         <el-table-column label="疾病描述" align="center" prop="ills" />
-      <el-table-column label="是否户主 0:户主 1:非户主" align="center" prop="head" />
+      </el-table-column>
-      <el-table-column label="同户人员ids" align="center" prop="sameHeadIds" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
-      <el-table-column label="是否注销 0:正常 1:注销" align="center" prop="off" />
-      <el-table-column label="创建者ID" align="center" prop="userId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -405,19 +454,24 @@
         <el-row :gutter="10">
           <el-col :span="12">
             <el-form-item label="户号" prop="acountNo">
-              <el-input v-model="queryParams.acountNo" placeholder="请输入户号" clearable @keyup.enter.native="handleQuery" />
+              <el-input
+                placeholder="请输入户号查询"
+                v-model="form.acountNo">
+                <el-button slot="append" icon="el-icon-search" @click="acountNoQuery"></el-button>
+              </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="所属网格" prop="deptName">
-              <el-input v-model="form.deptName" placeholder="请输入所属网格" />
+              <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-form-item label="户籍地址" prop="hjAddress">
-              <el-input v-model="form.hjAddress" placeholder="请输入户籍地址" />
+              <el-input v-model="form.hjAddress" placeholder="请输入户籍地址" readonly/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -722,18 +776,70 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="选择户主信息" :visible.sync="hzInfo.dialogVisible" width="900px" append-to-body>
+      <el-form :model="hzInfo.queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+        <el-form-item label="身份证号" prop="idCard">
+          <el-input
+            v-model="hzInfo.queryParams.idCard"
+            placeholder="请输入身份证号"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input
+            v-model="hzInfo.queryParams.name"
+            placeholder="请输入姓名"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="hzInfoQuery">搜索</el-button>
+        </el-form-item>
+
+      </el-form>
+      <el-table v-loading="hzInfo.loading" :data="hzInfo.addressList" border @cell-dblclick="hzInfoDblclick">
+        <el-table-column label="序号" align="center" prop="index" width="50">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="户号" align="center" prop="acountNo" />
+        <el-table-column label="姓名" align="center" prop="name" />
+        <el-table-column label="户籍地址" align="center" prop="hjAddress" />
+        <el-table-column label="所属网格" align="center" prop="deptName" />
+      </el-table>
+
+      <pagination
+        v-show="hzInfo.total>0"
+        :total="hzInfo.total"
+        :page.sync="hzInfo.queryParams.pageNum"
+        :limit.sync="hzInfo.queryParams.pageSize"
+        @pagination="getlistAddress"
+      />
+
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listJminfo, getJminfo, delJminfo, addJminfo, updateJminfo } from "@/api/szxc/jminfo";
+import { listAddress } from "@/api/szxc/address";
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Jminfo",
+  components: { Treeselect },
   dicts: ['szxc_hjxz', 'szxc_gj', 'szxc_head', 'szxc_hzgx', 'szxc_long_live', 'szxc_off', 'szxc_gj', 'sys_user_sex',
     'szxc_brqk', 'szxc_hyzk', 'szxc_xueli', 'szxc_zjxy', 'szxc_jkzk'],
   data() {
     return {
+      queryMore: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -750,6 +856,8 @@ export default {
       jminfoList: [],
       // 弹出层标题
       title: "",
+      // 组织树选项
+      deptOptions: undefined,
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -780,12 +888,45 @@ export default {
         jkzk: null,
         ills: null,
         head: null,
-        sameHeadIds: null,
+        acountNo: null,
         off: null,
         userId: null
       },
       // 表单参数
-      form: {},
+      form: {
+        id: null,
+        deptId: null,
+        deptName: null,
+        name: null,
+        oldName: null,
+        nationality: null,
+        cardId: null,
+        bornDate: null,
+        age: null,
+        sex: null,
+        jg: null,
+        relation: null,
+        jgNature: null,
+        longLive: null,
+        hjAddress: null,
+        phone: null,
+        currentAddress: null,
+        brqk: null,
+        hy: null,
+        xueli: null,
+        zzmm: null,
+        zjxy: null,
+        jkzk: null,
+        ills: null,
+        head: null,
+        acountNo: null,
+        off: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        userId: null
+      },
       // 表单校验
       rules: {
         deptId: [
@@ -797,13 +938,48 @@ export default {
         off: [
           { required: true, message: "是否注销 0:正常 1:注销不能为空", trigger: "blur" }
         ],
+      },
+      // 户主信息
+      hzInfo: {
+        dialogVisible: false,
+        // 遮罩层
+        loading: false,
+        // 总条数
+        total: 0,
+        // 查询参数
+        queryParams:{
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          idCard: null,
+          acountNo: null,
+          hjAddress: null,
+          deptId: null
+        },
+        // 查询列表
+        addressList: []
       }
     };
   },
   created() {
     this.getList();
+    this.getDeptTree();
   },
   methods: {
+    /** 查询组织下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    selectedTree(node){
+      this.form.deptId = node.id;
+      this.form.deptName = node.label;
+    },
+    acountNoQuery(){
+      this.hzInfo.dialogVisible = true;
+      this.getlistAddress()
+    },
     /** 查询居民信息列表 */
     getList() {
       this.loading = true;
@@ -846,7 +1022,7 @@ export default {
         jkzk: null,
         ills: null,
         head: null,
-        sameHeadIds: null,
+        acountNo: null,
         off: null,
         createBy: null,
         createTime: null,
@@ -866,6 +1042,12 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    // 更多或收起
+    queryMoreFun(){
+      this.queryMore = !this.queryMore;
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
@@ -923,7 +1105,40 @@ export default {
       this.download('szxc/jminfo/export', {
         ...this.queryParams
       }, `jminfo_${new Date().getTime()}.xlsx`)
-    }
+    },
+    /** 查询户主信息列表 */
+    getlistAddress() {
+      this.hzInfo.loading = true;
+      listAddress(this.hzInfo.queryParams).then(response => {
+        this.hzInfo.addressList = response.rows;
+        this.hzInfo.total = response.total;
+        this.hzInfo.loading = false;
+      });
+    },
+    hzInfoQuery(){
+      this.hzInfo.queryParams.pageNum = 1;
+      this.getlistAddress();
+    },
+    // 户主选择 选中数据
+    hzInfoDblclick(row) {
+      console.log(row)
+      this.form.acountNo = row.acountNo;
+      this.form.deptId = row.deptId;
+      this.form.deptName = row.deptName;
+      this.form.hjAddress = row.hjAddress;
+      this.hzInfo.dialogVisible = false
+    },
   }
 };
 </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>