dangan/dangan-ui/src/views/index.vue

<template>
  <div class="app-container">
    <div class="headsearch">
      <div class="headInput">
        <el-input v-model="keyword" placeholder="请输入关键字" @keyup.enter.native="handleQuery"></el-input>
        <el-button style="height:50px;font-size: 14px;" type="primary" icon="el-icon-search" @click="handleQuery">检索</el-button>
      </div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="dict in dict.type.yw_type"
                     :key="dict.value"
                     :label="dict.value">{{ dict.label }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 常住人口登记表 -->
    <div class="czrkdj" v-if="czrkdj.open">

      <el-divider content-position="left">常住人口登记表</el-divider>

      <div class="list" v-for="item in czrkdj.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="czrkdj.list.length===0"></el-empty>

      <pagination
        v-show="czrkdj.total>0"
        :total="czrkdj.total"
        :page.sync="czrkdj.qParams.pageNum"
        :limit.sync="czrkdj.qParams.pageSize"
        @pagination="czrkdjQuery"
      />

    </div>

    <!-- 出生登记 -->
    <div class="czrkdj" v-if="csdj.open">

      <el-divider content-position="left">出生登记</el-divider>

      <div class="list" v-for="item in csdj.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="csdj.list.length===0"></el-empty>

      <pagination
        v-show="csdj.total>0"
        :total="csdj.total"
        :page.sync="csdj.qParams.pageNum"
        :limit.sync="csdj.qParams.pageSize"
        @pagination="csdjQuery"
      />

    </div>

    <!-- 户口迁移 -->
    <div class="czrkdj" v-if="hkqy.open">

      <el-divider content-position="left">户口迁移</el-divider>

      <div class="list" v-for="item in hkqy.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="hkqy.list.length===0"></el-empty>

      <pagination
        v-show="hkqy.total>0"
        :total="hkqy.total"
        :page.sync="hkqy.qParams.pageNum"
        :limit.sync="hkqy.qParams.pageSize"
        @pagination="hkqyQuery"
      />

    </div>

    <!-- 变更更正 -->
    <div class="czrkdj" v-if="bggz.open">

      <el-divider content-position="left">变更更正</el-divider>

      <div class="list" v-for="item in bggz.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="bggz.list.length===0"></el-empty>

      <pagination
        v-show="bggz.total>0"
        :total="bggz.total"
        :page.sync="bggz.qParams.pageNum"
        :limit.sync="bggz.qParams.pageSize"
        @pagination="bggzQuery"
      />

    </div>

    <!-- 编码表 -->
    <div class="czrkdj" v-if="bmb.open">

      <el-divider content-position="left">编码表</el-divider>

      <div class="list" v-for="item in bmb.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="bmb.list.length===0"></el-empty>

      <pagination
        v-show="bmb.total>0"
        :total="bmb.total"
        :page.sync="bmb.qParams.pageNum"
        :limit.sync="bmb.qParams.pageSize"
        @pagination="bmbQuery"
      />

    </div>

    <!-- 其它 -->
    <div class="czrkdj" v-if="qt.open">

      <el-divider content-position="left">其它</el-divider>

      <div class="list" v-for="item in qt.list" :key="item.id">
        <div class="left">
          <el-row :gutter="20">
            <el-col :span="4">
              <span>姓名：</span>{{ item.name }}
            </el-col>
            <el-col :span="4">
              <span>身份证号：</span>{{ item.cardId }}
            </el-col>
            <el-col :span="4">
              <span>户主姓名：</span>{{ item.hzName }}
            </el-col>
            <el-col :span="4">
              <span>与户主关系：</span>{{ item.relation }}
            </el-col>
            <el-col :span="4">
              <span>出生日期：</span>{{ parseTime(item.birthday, '{y}-{m}-{d}') }}
            </el-col>
            <el-col :span="12">
              <span>地址：</span>{{ item.address }}
            </el-col>
            <el-col :span="12">
              <span>籍贯：</span>{{ item.jiguan }}
            </el-col>
            <el-col :span="24">
              <span>备注：</span>{{ item.remark }}
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <image-preview :src="item.pictures" :width="60" :height="60"/>
        </div>
      </div>
      <el-empty :image-size="200" v-if="qt.list.length===0"></el-empty>

      <pagination
        v-show="qt.total>0"
        :total="qt.total"
        :page.sync="qt.qParams.pageNum"
        :limit.sync="qt.qParams.pageSize"
        @pagination="qtQuery"
      />

    </div>

  </div>
</template>

<script>
import { listCzrkdj } from "@/api/dangan/czrkdj";

export default {
  name: "Retrieval",
  dicts: ['yw_type'],
  data() {
    return {
      // 显示搜索条件
      keyword: '',
      checkList: [],
      // 常住人口登记表
      czrkdj: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      },
      // 出生登记
      csdj: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      },
      // 户口迁移
      hkqy: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      },
      // 变更更正
      bggz: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      },
      // 编码表
      bmb: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      },
      // 其它
      qt: {
        open: false,
        list: [],
        qParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        total: 0
      }
    }
  },
  methods: {
    handleQuery(){
      if(this.checkList.indexOf('0') !== -1){
        this.czrkdj.open = true
        this.czrkdj.qParams.name = this.keyword
        this.czrkdjQuery();
      }else {
        this.czrkdj.open = false
        this.czrkdj.list = [];
        this.czrkdj.total = 0;
      }

      if(this.checkList.indexOf('1') !== -1){
        this.csdj.open = true
        this.csdj.qParams.name = this.keyword
        // this.csdjQuery();
      }else {
        this.csdj.open = false
        this.csdj.list = [];
        this.csdj.total = 0;
      }

      if(this.checkList.indexOf('2') !== -1){
        this.hkqy.open = true
        this.hkqy.qParams.name = this.keyword
        // this.hkqyQuery();
      }else {
        this.hkqy.open = false
        this.hkqy.list = [];
        this.hkqy.total = 0;
      }

      if(this.checkList.indexOf('3') !== -1){
        this.bggz.open = true
        this.bggz.qParams.name = this.keyword
        // this.bggzQuery();
      }else {
        this.bggz.open = false
        this.bggz.list = [];
        this.bggz.total = 0;
      }

      if(this.checkList.indexOf('4') !== -1){
        this.bmb.open = true
        this.bmb.qParams.name = this.keyword
        // this.bmbQuery();
      }else {
        this.bmb.open = false
        this.bmb.list = [];
        this.bmb.total = 0;
      }

      if(this.checkList.indexOf('5') !== -1){
        this.qt.open = true
        this.qt.qParams.name = this.keyword
        // this.qtQuery();
      }else {
        this.qt.open = false
        this.qt.list = [];
        this.qt.total = 0;
      }
    },
    czrkdjQuery(){
      listCzrkdj(this.czrkdj.qParams).then(response => {
        this.czrkdj.list = response.rows;
        this.czrkdj.total = response.total;
      })
    },
    csdjQuery(){
      listCzrkdj(this.csdj.qParams).then(response => {
        this.csdj.list = response.rows;
        this.csdj.total = response.total;
      })
    },
    hkqyQuery(){
      listCzrkdj(this.hkqy.qParams).then(response => {
        this.hkqy.list = response.rows;
        this.hkqy.total = response.total;
      })
    },
    bggzQuery(){
      listCzrkdj(this.bggz.qParams).then(response => {
        this.bggz.list = response.rows;
        this.bggz.total = response.total;
      })
    },
    bmbQuery(){
      listCzrkdj(this.bmb.qParams).then(response => {
        this.bmb.list = response.rows;
        this.bmb.total = response.total;
      })
    },
    qtQuery(){
      listCzrkdj(this.qt.qParams).then(response => {
        this.qt.list = response.rows;
        this.qt.total = response.total;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.headsearch{
  margin: 0 auto;
  width: 800px;
  text-align: center;
  margin-bottom: 40px;

  .headInput{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

    ::v-deep.el-input{
      margin-right: 10px;
      width: 500px;
    }

    ::v-deep.el-input--medium .el-input__inner {
      height: 60px;
      line-height: 60px;
    }
  }
}

::v-deep .el-checkbox__inner{
  width: 20px;
  height: 20px;
}

::v-deep .el-checkbox{
  margin-bottom: 15px;
}

::v-deep .el-checkbox__inner::after {
  height: 10px;
  left: 7px;
  top: 2px;
}

.el-divider__text{
  font-weight: bold;
  font-size: 18px;
}

.czrkdj{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0px 30px 30px 30px;
  margin: 0 40px;
  font-size: 14px;
  border-radius: 20px;

  .list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-top: 40px;

    .left{
      width: 100%;
    }

    .right{
      width: 100px;
    }
  }

  .el-row {
    width: 100%;

    .el-col{
      margin-bottom: 5px;

      span{
        font-weight: bold;
      }
    }
  }
}

</style>