From aa096921c951babc6d841d7d2056d64fad73e313 Mon Sep 17 00:00:00 2001
From: ZhaoTongYao <531131322@qq.com>
Date: Fri, 5 Aug 2022 15:10:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=87=87=E9=9B=86=E8=AE=BF?=
 =?UTF-8?q?=E5=AE=A2=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/base/collect.vue  | 262 ++++++++++++++---
 src/views/modules/base/roomForm.vue | 428 ++++++++++++++++++++++++++++
 src/views/modules/base/visitor.vue  | 246 ++++++++++++++++
 3 files changed, 899 insertions(+), 37 deletions(-)
 create mode 100644 src/views/modules/base/roomForm.vue
 create mode 100644 src/views/modules/base/visitor.vue

diff --git a/src/views/modules/base/collect.vue b/src/views/modules/base/collect.vue
index 3d6cdb81a..4ea60259e 100644
--- a/src/views/modules/base/collect.vue
+++ b/src/views/modules/base/collect.vue
@@ -7,7 +7,7 @@
         :model="fmData"
         class="demo-form-inline"
       >
-        <el-form-item
+        <!-- <el-form-item
           v-if="communityList.length > 0"
           label="所在社区"
           prop="orgId"
@@ -27,7 +27,7 @@
             >
             </el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="居住地址" prop="address">
           <el-input
             v-model="fmData.address"
@@ -38,6 +38,16 @@
           >
           </el-input>
         </el-form-item>
+        <el-form-item label="户籍地址" prop="domicilePlace">
+          <el-input
+            v-model="fmData.domicilePlace"
+            class="resi-cell-input"
+            size="small"
+            clearable
+            placeholder="请输入"
+          >
+          </el-input>
+        </el-form-item>
         <el-form-item label="填写时间" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -51,16 +61,6 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="户籍地址" prop="domicilePlace">
-          <el-input
-            v-model="fmData.domicilePlace"
-            class="resi-cell-input"
-            size="small"
-            clearable
-            placeholder="请输入"
-          >
-          </el-input>
-        </el-form-item>
         <el-form-item>
           <el-button
             class="diy-button--search"
@@ -105,7 +105,12 @@
           min-width="140"
           label="居住地址"
           :show-overflow-tooltip="true"
-        />
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.homeId == 'other'" class="badge">房屋缺失</span>
+            <span>{{scope.row.address}}</span>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="houseType"
           align="center"
@@ -146,6 +151,17 @@
           label="成员手机号"
           :show-overflow-tooltip="true"
         />
+        <el-table-column
+          prop="relationship"
+          min-width="120"
+          align="center"
+          label="与户主关系"
+          :show-overflow-tooltip="true"
+        >
+        <template slot-scope="scope">
+          <span>{{getRelationshipName(scope.row.relationship)}}</span>
+        </template>
+        </el-table-column>
         <el-table-column
           prop="heSuanCount"
           width="120"
@@ -169,14 +185,14 @@
           prop="domicilePlace"
           min-width="140"
           align="center"
-          label="户籍所在地"
+          label="户籍地址"
           :show-overflow-tooltip="true"
         />
         <el-table-column
           prop="workPlace"
           min-width="120"
           align="center"
-          label="单位或学校 "
+          label="单位名称"
           :show-overflow-tooltip="true"
         />
         <el-table-column
@@ -186,15 +202,54 @@
           :show-overflow-tooltip="true"
         >
         </el-table-column>
+        <el-table-column
+          prop="faceImg"
+          min-width="120"
+          align="center"
+          label="人脸"
+        >
+        <template slot-scope="scope">
+          <el-image 
+            style="max-height: 50px"
+            :src="scope.row.faceImg" 
+            :preview-src-list="[scope.row.faceImg]">
+            <div slot="error" class="image-slot">
+              <!-- <i class="el-icon-picture-outline"></i> -->
+            </div>
+          </el-image>
+        </template>
+        </el-table-column>
+        <el-table-column
+          prop="checkState"
+          min-width="120"
+          align="center"
+          label="状态"
+          :show-overflow-tooltip="true"
+        >
+        <template slot-scope="scope">
+          <span v-if="scope.row.checkState === '0'">未审核</span>
+          <span v-else-if="scope.row.checkState === '1'">未通过</span>
+          <span v-else-if="scope.row.checkState === '2'">已通过</span>
+          <span v-else></span>
+        </template>
+        </el-table-column>
         <el-table-column label="操作" align="center" width="100">
           <template slot-scope="scope">
             <el-button
               type="text"
               class="div-table-button--detail"
               size="small"
-              @click="handleWatch(scope.row)"
+              @click="handleWatch('look', scope.row)"
               >查看</el-button
             >
+            <el-button
+              type="text"
+              class="div-table-button--detail"
+              size="small"
+              v-if="scope.row.checkState === '0'"
+              @click="handleWatch('check', scope.row)"
+              >审核</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -274,7 +329,7 @@
           border
           style="width: 1060px; margin: 20px"
           class="resi-table"
-          :height="tableHeight"
+          :height="dialogTableHeight"
         >
           <el-table-column
             label="序号"
@@ -344,16 +399,35 @@
           >
           </el-table-column>
         </el-table>
+        <div class="resi-btns">
+          <el-button @click="formShow = false">{{ $t('cancel') }}</el-button>
+          <el-button v-if="dialogType == 'check'" type="danger" @click="checkHandle('1')">{{ $t('checkBTGBtn') }}</el-button>
+          <el-button v-if="dialogType == 'check'" type="danger" @click="showAddHouse">{{ $t('checkTGBtn') }}</el-button>
+        </div>
       </div>
     </el-dialog>
+    <!-- 新增房屋弹出框 -->
+    <el-dialog :visible.sync="addHouseShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               title="新增房屋"
+               width="900px"
+               top="5vh"
+               class="dialog-h"
+               @closed="addHouseShow = false">
+      <room-form ref="ref_form"
+                 @dialogCancle="addHouseShow = false"
+                 @dialogOk="checkHandle('2')"></room-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
+import { requestPost, requestGet } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
 import { mapGetters } from "vuex";
 import axios from "axios";
+import roomForm from './roomForm'
 
 export default {
   data() {
@@ -381,7 +455,16 @@ export default {
       spanIndex: [], // 合并的行
       importBtnTitle: "导入",
       importLoading: false,
-    };
+      addHouseShow: false,
+      dialogType: 'look', // 对话框是check审核还是look查看
+      relationshipOptions: [
+        { label: '本人', value: '0' },
+        { label: '父母', value: '1' }
+      ]
+    }
+  },
+  components: {
+    roomForm
   },
   computed: {
     ...mapGetters(["clientHeight", "iframeHeight"]),
@@ -390,6 +473,11 @@ export default {
       const _h = this.clientHeight - 360;
       return this.$store.state.inIframe ? h : _h;
     },
+    dialogTableHeight() {
+      const h = this.clientHeight - 460 + this.iframeHeigh;
+      const _h = this.clientHeight - 460;
+      return this.$store.state.inIframe ? h : _h;
+    },
   },
   watch: {
     timeRange(val) {
@@ -403,10 +491,30 @@ export default {
     },
   },
   mounted() {
-    this.getcommunityList();
-    this.getTableData();
+    // this.getcommunityList();
+    // this.getDictList()
+    this.getTableData()
   },
   methods: {
+    async getDictList() {
+      const url = "/sys/dict/data/relationship"
+      const { data, code, msg } = await requestGet(url)
+
+      if (code === 0) {
+        this.relationshipOptions = { ...res.data }
+      } else {
+        this.$message.success("操作失败！")
+      }
+    },
+    getRelationshipName (value) {
+      let label = ''
+      this.relationshipOptions.forEach(item => {
+        if (item.value == value) {
+          label = item.label
+        }
+      })
+      return label
+    },
     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
       // console.log('row-----r', row)
       // console.log('column-----c', column)
@@ -415,7 +523,9 @@ export default {
         columnIndex === 1 ||
         columnIndex === 2 ||
         columnIndex === 3 ||
-        columnIndex === 4
+        columnIndex === 4 ||
+        columnIndex === 15 ||
+        columnIndex === 16
       ) {
         let index = this.spanIndex.findIndex(
           (item) => item.firstIndex === rowIndex
@@ -493,7 +603,8 @@ export default {
       this.handleSearch();
     },
 
-    async handleWatch(row) {
+    async handleWatch(type, row) {
+      this.dialogType = type
       // this.formShow = true;
       await nextTick();
       const url = "/epmetuser/icresicollect/detail";
@@ -552,33 +663,33 @@ export default {
       }
     },
     async getTableData() {
-      const url = "/epmetuser/icresicollect/list";
-      const { pageSize, pageNo, fmData } = this;
+      const url = "/epmetuser/icresicollect/list"
+      const { pageSize, pageNo, fmData } = this
       const { data, code, msg } = await requestPost(url, {
         pageSize,
         pageNo,
         ...fmData,
-      });
+      })
       if (code === 0) {
-        console.log("列表请求成功！！！！！！！！！！！！！！");
-        this.total = data.total || 0;
-        let _i = 0;
-        let arr = [];
+        console.log("列表请求成功！！！！！！！！！！！！！！")
+        this.total = data.total || 0
+        let _i = 0
+        let arr = []
         this.spanIndex =
           data.list &&
           data.list.map((item, index) => {
-            if (index == 0) _i = 0;
+            if (index == 0) _i = 0
             else _i = _i + data.list[index - 1].list.length;
-            arr.push(_i);
-            console.log("_i-----", _i, arr);
+            arr.push(_i)
+            // console.log("_i-----", _i, arr)
             // if (index === data.list.length - 1) firstIndex = _i - item.list.length
             return {
               firstIndex: _i,
               len: item.list.length,
-            };
-          });
-        this.tableData = data.list && this.formatArr(data.list);
-        console.log("tableData----0", this.spanIndex);
+            }
+          })
+        this.tableData = data.list && this.formatArr(data.list)
+        console.log("tableData----0", this.spanIndex)
       } else {
       }
     },
@@ -608,6 +719,76 @@ export default {
       });
       return res;
     },
+    showAddHouse () {
+      if (this.dataForm.homeId == 'other') {
+        this.addHouseShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm('add', null, this.dataForm.id)
+        })
+      } else {
+        this.checkHandle('2')
+      }
+    },
+    // 审核提交方法
+    checkHandle (type) {
+      console.log('xxxxx', this.dataForm)
+      const params = {
+        id: this.dataForm.id,
+        checkState: type, // 0-未审核 1-未通过 2-已通过
+        checkReason: '',
+        buildingUnitId: this.dataForm.buildingUnitId || '',
+        doorName: this.dataForm.doorName || ''
+      }
+      if (type == '1') {
+        this.$prompt('请输入不通过的原因', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }).then(({ value }) => {
+          params.checkReason = value
+          this.$http.post('/epmetuser/icresicollect/collectCheck', params).then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            }
+            this.formShow = false
+            this.getTableData()
+            // 调用文件下发权限接口
+            // this.fileJurisdiction(params)
+          }).catch(() => {})
+        }).catch(() => {
+          // 取消输入原因  
+        })
+      } else {
+        this.$http.post('/epmetuser/icresicollect/collectCheck', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.addHouseShow = false
+          this.formShow = false
+          this.getTableData()
+          // 调用文件下发权限接口
+          // this.fileJurisdiction(params)
+        }).catch(() => {})
+      }
+    },
+    // 文件下发权限接口
+    fileJurisdiction (params) {
+      this.$http.post('/pli/power/rentContractInfo/send', params).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.disabledBtn = false
+              this.checkVisible = false
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+        })
+      }).catch(() => {})
+    },
   },
 };
 </script>
@@ -650,4 +831,11 @@ export default {
 .wd50 {
   min-width: 200px;
 }
+.badge {
+  display: block;
+  color: #F1F2E5;
+  background-color: #D7000F;
+  border-radius: 12px;
+  width: 70px;
+}
 </style>
diff --git a/src/views/modules/base/roomForm.vue b/src/views/modules/base/roomForm.vue
new file mode 100644
index 000000000..3d2c1b98c
--- /dev/null
+++ b/src/views/modules/base/roomForm.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <el-form ref="ref_form"
+               :inline="false"
+               :model="dataForm"
+               :rules="dataRule"
+               :disabled="formType === 'detail'"
+               class="form">
+
+        <el-form-item label="所属楼栋"
+                      label-width="150px"
+                      style="display: block">
+          <span>{{ dataForm.neighborHoodName }}-{{dataForm.label}}</span>
+        </el-form-item>
+
+        <el-form-item label="单元号"
+                      prop="buildingUnitId"
+                      label-width="150px"
+                      style="display: block">
+          <el-select class="item_width_1"
+                     v-model="dataForm.buildingUnitId"
+                     placeholder="请选择"
+                     clearable>
+            <el-option v-for="item in unitList"
+                       :key="item.id"
+                       :label="item.unitName"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="门牌号"
+                      prop="doorName"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    placeholder="请输入门牌号"
+                    v-model="dataForm.doorName">
+          </el-input>
+        </el-form-item>
+        <el-form-item v-if="formType != 'detail'" label="房屋编码"
+                      prop="coding"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_2"
+                    maxlength="50"
+                    placeholder="请输入楼栋编码"
+                    v-model="dataForm.coding">
+          
+          </el-input>
+          <el-button style="margin-left: 10px"
+                       type="primary"
+                       size="small"
+                       @click="handleCode">生成</el-button>
+        </el-form-item>
+        <div v-if="formType === 'detail'">
+          <el-form-item label="房屋编码"
+                        prop="houseCode"
+                        label-width="150px"
+                        style="display: block">
+            <el-input class="item_width_1"
+                      maxlength="30"
+                      v-model="dataForm.houseCode">
+            </el-input>
+          </el-form-item>
+          <div v-if="dataForm.houseQrcodeUrl"
+               style="display: flex;flex-direction: column;">
+            <img style="margin-left: 70px;width: 200px;"
+                 :src="dataForm.houseQrcodeUrl">
+            <a style="margin-left: 80px"
+               :href="dataForm.houseQrcodeUrl"
+               target="_blank">下载</a>
+          </div>
+        </div>
+        <!-- <el-form-item label="居住人数"
+                      style="display: block"
+                      prop="realPerson"
+                      label-width="150px">
+          <el-input-number class="item_width_4"
+                           v-model="dataForm.realPerson"
+                           :min="0"
+                           :max="9999"
+                           label="居住人数"></el-input-number>
+        </el-form-item> -->
+        <el-form-item label="房屋类型"
+                      prop="houseType"
+                      label-width="150px"
+                      style="display: block">
+          <el-radio-group v-model="houseType">
+
+            <el-radio :label="'1'">楼房</el-radio>
+            <el-radio :label="'2'">平房</el-radio>
+            <el-radio :label="'3'">别墅</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="房屋用途"
+                      prop="purpose"
+                      label-width="150px"
+                      style="display: block">
+          <el-radio-group v-model="purpose">
+
+            <el-radio :label="'1'">住宅</el-radio>
+            <el-radio :label="'2'">商业</el-radio>
+            <el-radio :label="'3'">办公</el-radio>
+            <el-radio :label="'4'">工业</el-radio>
+            <el-radio :label="'5'">仓储</el-radio>
+            <el-radio :label="'6'">商住混用</el-radio>
+            <el-radio :label="'7'">其他</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="房屋状态"
+                      prop="rentFlag"
+                      label-width="150px"
+                      style="display: block">
+          <el-radio-group v-model="rentFlag">
+
+            <el-radio :label="1">出租</el-radio>
+            <el-radio :label="2">闲置</el-radio>
+            <el-radio :label="0">自住</el-radio>
+            <el-radio :label="3">未出售</el-radio>
+
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="房主姓名"
+                      prop="ownerName"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    maxlength="30"
+                    placeholder="请输入房主姓名"
+                    v-model="dataForm.ownerName">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系方式"
+                      prop="ownerPhone"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    type='number'
+                    placeholder="请输入联系方式"
+                    v-model="dataForm.ownerPhone">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="房主身份证"
+                      prop="ownerIdCard"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    placeholder="请输入房主身份证"
+                    v-model="dataForm.ownerIdCard">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注"
+                      prop="remark"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    maxlength="30"
+                    placeholder="请输入备注"
+                    v-model="dataForm.remark">
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+    </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button size="small"
+                 v-if="formType != 'detail'"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+      btnDisable: false,
+      unitList: [],
+
+      houseId: '', //房屋ID
+      houseType: '1',
+      purpose: '1',
+      rentFlag: 0,
+      dataForm: {
+        neighborHoodId: '', // 所属小区ID
+        buildingId: '',//所属楼栋ID
+        buildingUnitId: '',//所属单元ID
+        doorName: '',//门牌号
+        houseType: '',//房屋类型【楼房，平房，别墅】
+        purpose: '',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
+        rentFlag: 0,//房屋状态【是：1，否：0】	出租1、闲置2、自住	0
+        ownerPhone: '', //联系方式
+        ownerName: '', //房主名字
+        ownerIdCard: '', //房主身份证
+        remark: '',
+        // realPerson: 0,
+        coding: '',
+        sysCoding: ''
+      },
+
+      keyWords: '',
+    }
+  },
+  components: {},
+  mounted () {
+
+  },
+
+  methods: {
+    async initForm (type, row, id) {
+
+      this.$refs.ref_form.resetFields()
+      const url = '/epmetuser/icresicollect/getHouseDetailByCollect'
+      const params = {
+        id
+      }
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.formType = type
+
+        this.dataForm = { ...data }
+        // this.dataForm.neighborHoodId = this.agencyObj.neighborHoodId
+        // this.dataForm.buildingId = this.agencyObj.id
+
+        await this.loadUnitList()
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载单元
+    async loadUnitList () {
+      const url = '/gov/org/building/buildingunitlist'
+
+      let params = {
+        buildingId: this.dataForm.buildingId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.unitList = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async handleCode() {
+      if (!this.dataForm.buildingUnitId) return this.$message.error('请选择单元')
+      const { data, code, msg } = await requestPost(
+        "/gov/org/houseInformation/getHouseCoding/" + this.dataForm.buildingUnitId);
+      if (msg == "success" && code == 0) {
+        this.dataForm.coding = data.coding
+        this.dataForm.sysCoding = data.sysCoding
+        
+      } 
+    },
+
+    async handleComfirm () {
+      this.btnDisable = true
+      setTimeout(() => {
+        this.btnDisable = false
+      }, 10000)
+
+      this.dataForm.houseType = this.houseType
+      this.dataForm.purpose = this.purpose
+      this.dataForm.rentFlag = this.rentFlag
+      this.$refs['ref_form'].validate((valid, messageObj) => {
+        if (!valid) {
+          this.btnDisable = false
+          app.util.validateRule(messageObj)
+        } else {
+          this.addRoom()
+        }
+
+      })
+    },
+
+    async addRoom () {
+      const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+      if (this.dataForm.ownerIdCard && regCard.test(this.dataForm.ownerIdCard) === false) {
+        this.btnDisable = false
+        this.$message({
+          type: 'warning',
+          message: '请输入正确的身份证号码'
+        })
+        return false;
+      }
+      const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
+      if (this.dataForm.ownerPhone && regPhone.test(this.dataForm.ownerPhone) === false) {
+        this.btnDisable = false
+        this.$message({
+          type: 'warning',
+          message: '请输入正确的手机号码'
+        })
+        return false;
+      }
+
+      let url = ''
+
+      if (this.formType === 'add') {
+        url = '/gov/org/house/houseadd'
+      } else {
+        url = '/gov/org/house/houseupdate'
+        this.dataForm.houseId = this.houseId
+      }
+console.log('11111111111111111', this.dataForm)
+return
+      const { data, code, msg } = await requestPost(url, this.dataForm)
+      this.btnDisable = false
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.resetData()
+        this.$emit('dialogOk')
+
+      } else {
+
+        this.$message.error(msg)
+      }
+
+    },
+
+    handleCancle () {
+      this.resetData()
+      this.$emit('dialogCancle')
+
+    },
+
+    resetData () {
+      this.houseId = '' //房屋ID
+      this.houseType = '1'
+      this.purpose = '1'
+      this.rentFlag = 0
+      this.dataForm = {
+        neighborHoodId: '', // 所属小区ID
+        buildingId: '',//所属楼栋ID
+        buildingUnitId: '',//所属单元ID
+        doorName: '',//门牌号
+        houseType: '1',//房屋类型【楼房，平房，别墅】
+        purpose: '1',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
+        rentFlag: 0,//是否出租【是：1，否：0】
+        ownerPhone: '', //联系方式
+        ownerName: '', //房主名字
+        ownerIdCard: '', //房主身份证
+        remark: '', // 备注
+        coding: '',
+        sysCoding: ''
+      }
+
+    },
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        buildingUnitId: [
+          { required: true, message: '所属单元不能为空', trigger: 'blur' },
+        ],
+        doorName: [
+          { required: true, message: '门牌号不能为空', trigger: 'blur' }
+        ],
+        coding: [
+          { required: true, message: '房屋编码不能为空', trigger: 'blur' }
+        ],
+        houseType: [
+          { required: true, message: '房屋类型不能为空', trigger: 'blur' }
+        ],
+        purpose: [
+          { required: true, message: '房屋用途不能为空', trigger: 'blur' }
+        ],
+        rentFlag: [
+          { required: true, message: '是否出租不能为空', trigger: 'blur' }
+        ],
+        ownerPhone: [
+          { required: false }
+        ],
+        ownerName: [
+          { required: false }
+        ],
+        ownerIdCard: [
+          { required: false }
+        ],
+        remark: [
+          { required: false }
+        ],
+      }
+    },
+
+  },
+  props: {}
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
diff --git a/src/views/modules/base/visitor.vue b/src/views/modules/base/visitor.vue
new file mode 100644
index 000000000..3fd00ef88
--- /dev/null
+++ b/src/views/modules/base/visitor.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <el-form
+        ref="searchForm"
+        :inline="true"
+        :model="fmData"
+        class="demo-form-inline"
+      >
+        <el-form-item label="填写时间" prop="startTime">
+          <el-date-picker
+            v-model="timeRange"
+            type="daterange"
+            clearable
+            size="small"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            class="diy-button--search"
+            size="small"
+            @click="handleSearch"
+            >查询</el-button
+          >
+          <el-button
+            class="diy-button--reset"
+            size="small"
+            @click="resetForm('searchForm')"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="resi-card-table">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        class="resi-table"
+        :height="tableHeight"
+      >
+        <el-table-column label="序号" type="index" align="center" width="50" />
+        <el-table-column
+          prop="address"
+          width="240"
+          label="目的地"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          prop="name"
+          width="150"
+          label="姓名"
+          align="center"
+        />
+        <el-table-column
+          prop="mobile"
+          width="180"
+          label="手机号"
+          align="center"
+        />
+        <el-table-column
+          prop="idCard"
+          width="240"
+          label="身份证号"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          prop="comeReason"
+          width="320"
+          label="来访事由"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          prop="faceImg"
+          min-width="120"
+          align="center"
+          label="人脸"
+        >
+        <template slot-scope="scope">
+          <el-image 
+            style="max-height: 50px"
+            :src="scope.row.faceImg" 
+            :preview-src-list="[scope.row.faceImg]">
+            <div slot="error" class="image-slot">
+              <!-- <i class="el-icon-picture-outline"></i> -->
+            </div>
+          </el-image>
+        </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="parseInt(pageSize)"
+          layout="sizes, prev, pager, next, total"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request"
+import { mapGetters } from "vuex"
+
+export default {
+  data() {
+    return {
+      openSearch: false,
+
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+
+      tableData: [],
+      timeRange: "",
+      fmData: {
+        startTime: "",
+        endTime: "",
+      },
+    }
+  },
+  computed: {
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+    tableHeight() {
+      const h = this.clientHeight - 360 + this.iframeHeigh
+      const _h = this.clientHeight - 360
+      return this.$store.state.inIframe ? h : _h
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (Array.isArray(val) && val.length == 2) {
+        this.fmData.startTime = val[0]
+        this.fmData.endTime = val[1]
+      } else {
+        this.fmData.startTime = ""
+        this.fmData.endTime = ""
+      }
+    },
+  },
+  mounted() {
+    this.getTableData()
+  },
+  methods: {  
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.pageSize = val
+      window.localStorage.setItem("pageSize", val)
+      this.getTableData()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.pageNo = val
+      this.getTableData()
+    },
+
+    handleSearch(val) {
+      console.log(this.fmData)
+      this.pageNo = 1
+      this.getTableData()
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.timeRange = ""
+      this.fmData.startTime = ""
+      this.fmData.endTime = ""
+      this.handleSearch()
+    },
+    async getTableData() {
+      const url = "/epmetuser/icResiCollectVisitor/list"
+      const { pageSize, pageNo, fmData } = this
+      const { data, code, msg } = await requestPost(url, {
+        pageSize,
+        pageNo,
+        ...fmData,
+      })
+      if (code === 0) {
+        console.log("列表请求成功！！！！！！！！！！！！！！")
+        this.total = data.total || 0
+        this.tableData = data.list
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+
+.resi-container .resi-card-table {
+  ::v-deep .el-table th {
+    color: #fff;
+    background-color: rgba(33, 149, 254, 1);
+    // border-right: 1px solid rgba(33, 149, 254, 1);
+  }
+}
+.resi-table {
+  ::v-deep .el-button--text {
+    text-decoration: underline;
+  }
+}
+.resi-card-table {
+  margin-top: 20px;
+}
+.resi-row-btn {
+  margin-bottom: 13px;
+  .upload-btn {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+.wd50 {
+  min-width: 200px;
+}
+.badge {
+  display: block;
+  color: #F1F2E5;
+  background-color: #D7000F;
+  border-radius: 12px;
+  width: 70px;
+}
+</style>