From 47568499114d0eaebbd43b115f5ea6bec694a52f Mon Sep 17 00:00:00 2001
From: zhangyuan <zhangyuan@sarnasea.com>
Date: Fri, 29 Jul 2022 09:11:30 +0800
Subject: [PATCH] add

---
 .../plugins/visit/visitor-add-or-update.vue   | 144 +++++++
 .../modules/plugins/visit/visitvisitor.vue    | 351 ++++++++++++++++++
 2 files changed, 495 insertions(+)
 create mode 100644 src/views/modules/plugins/visit/visitor-add-or-update.vue
 create mode 100644 src/views/modules/plugins/visit/visitvisitor.vue

diff --git a/src/views/modules/plugins/visit/visitor-add-or-update.vue b/src/views/modules/plugins/visit/visitor-add-or-update.vue
new file mode 100644
index 00000000..528af1fb
--- /dev/null
+++ b/src/views/modules/plugins/visit/visitor-add-or-update.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form disabled :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+          <el-form-item label="姓名" prop="name">
+          <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
+      </el-form-item>
+          <el-form-item label="身份证" prop="idCard">
+          <el-input v-model="dataForm.idCard" placeholder="身份证"></el-input>
+      </el-form-item>
+          <el-form-item label="性别" prop="gender">
+              <el-radio-group v-model="dataForm.gender">
+                  <el-radio :label="'0'">{{ $t('user.gender1') }}</el-radio>
+                  <el-radio :label="'1'">{{ $t('user.gender0') }}</el-radio>
+              </el-radio-group>
+      </el-form-item>
+          <el-form-item label="手机号" prop="mobile">
+          <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+      </el-form-item>
+          <el-form-item label="人员类型" prop="type">
+              <el-radio-group v-model="dataForm.gender">
+                  <el-radio :label="'0'">{{ '访客' }}</el-radio>
+                  <el-radio :label="'1'">{{ '租客' }}</el-radio>
+              </el-radio-group>
+      </el-form-item>
+          <el-form-item label="来访事由" prop="visitReason">
+          <el-input type="textarea" v-model="dataForm.visitReason" placeholder="来访事由"></el-input>
+      </el-form-item>
+          <el-form-item label="头像" prop="faceImg">
+              <el-image :src="dataForm.faceImg" @click="imgShow(dataForm.faceImg)" style="width: 100px; height: 100px" />
+      </el-form-item>
+          <el-form-item label="小区" prop="residential">
+          <el-input v-model="dataForm.residential" placeholder="小区"></el-input>
+      </el-form-item>
+          <el-form-item label="楼栋" prop="building">
+          <el-input v-model="dataForm.building" placeholder="楼栋"></el-input>
+      </el-form-item>
+          <el-form-item label="单元" prop="unit">
+          <el-input v-model="dataForm.unit" placeholder="单元"></el-input>
+      </el-form-item>
+          <el-form-item label="房屋" prop="room">
+          <el-input v-model="dataForm.room" placeholder="房屋"></el-input>
+      </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+<!--      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>-->
+    </template>
+      <el-dialog :visible.sync="dialogVisible" :modal="false">
+          <el-image width="100%" :src="dialogImageUrl" alt=""/>
+      </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dialogVisible: false,
+      dialogImageUrl: '',
+      dataForm: {
+        id: '',
+        name: '',
+        idCard: '',
+        gender: '',
+        mobile: '',
+        type: '',
+        state: '',
+        reason: '',
+        delFlag: '',
+        revision: '',
+        createdBy: '',
+        createdTime: '',
+        updatedBy: '',
+        updatedTime: '',
+        customerId: '',
+        visitReason: '',
+        faceImg: '',
+        residential: '',
+        building: '',
+        unit: '',
+        room: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 查看大图
+    imgShow(url){
+      this.dialogImageUrl = url
+      this.dialogVisible = true
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/pli/power/visitVisitor/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/pli/power/visitVisitor/', this.dataForm).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.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
diff --git a/src/views/modules/plugins/visit/visitvisitor.vue b/src/views/modules/plugins/visit/visitvisitor.vue
new file mode 100644
index 00000000..f03af394
--- /dev/null
+++ b/src/views/modules/plugins/visit/visitvisitor.vue
@@ -0,0 +1,351 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-__visitVisitor} resi-container">
+      <el-card ref="searchCard" class="search-card">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item label="姓名" label-width="100px">
+          <el-input v-model="dataForm.name" placeholder='姓名' clearable></el-input>
+        </el-form-item>
+        <el-form-item label="身份证" label-width="100px">
+          <el-input v-model="dataForm.idCard" placeholder='身份证' clearable></el-input>
+        </el-form-item>
+        <el-form-item label="联系方式" label-width="100px">
+          <el-input v-model="dataForm.mobile" placeholder='联系方式' clearable></el-input>
+        </el-form-item>
+        <br/>
+        <el-form-item label="来访时间" prop="startTime" label-width="100px">
+          <el-date-picker v-model="dataForm.startTime"
+                          type="datetime"
+                          :picker-options="pickerBeginDateBefore"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择日期时间"
+                          style="width:200px" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="至" prop="endTime">
+          <el-date-picker v-model="dataForm.endTime"
+                          type="datetime"
+                          :picker-options="pickerBeginDateAfter"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择日期时间"
+                          style="width:200px" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="所属社区" label-width="100px">
+          <el-input disabled v-model="dataForm.agency" placeholder='所属社区' clearable></el-input>
+        </el-form-item>
+        <br/>
+        <el-form-item label="所属小区"
+                      prop="neighborhoodId" label-width="100px">
+          <el-select
+                  v-model.trim="dataForm.neighborhoodId"
+                  placeholder="请选择"
+                  clearable
+                  @change="getBuildingList"
+          >
+            <el-option
+                    v-for="item in neighborhoodArr"
+                    :key="item.id"
+                    :label="item.neighborHoodName"
+                    :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属楼栋"
+                      prop="buildingId" label-width="100px">
+          <el-select
+                  v-model.trim="dataForm.buildingId"
+                  placeholder="请选择"
+                  clearable
+                  @change="getUnitList"
+          >
+            <el-option
+                    v-for="item in buildingArr"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属单元"
+                      prop="unitId" label-width="100px">
+          <el-select
+                  v-model.trim="dataForm.unitId"
+                  placeholder="请选择"
+                  clearable
+                  @change="getHouseList"
+          >
+            <el-option
+                    v-for="item in unitArr"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属房屋"
+                      prop="houseId" label-width="100px">
+          <el-select
+                  v-model.trim="dataForm.houseId"
+                  placeholder="请选择"
+                  clearable
+                  @change="getHouseList"
+          >
+            <el-option
+                    v-for="item in houseArr"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+      </el-form>
+      </el-card>
+      <el-card class="resi-card-table">
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="idCard" label="身份证" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="gender" label="性别" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="type" label="人员类型" header-align="center" align="center">
+          <template slot-scope="scope">{{scope.row.type === '0' ? '访客' : '租客'}}</template>
+        </el-table-column>
+        <el-table-column prop="createdTime" label="来访时间" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="visitReason" show-overflow-tooltip label="来访事由" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="faceImg" label="头像" header-align="center" align="center">
+          <template slot-scope="scope">
+              <el-image :src="scope.row.faceImg" @click="imgShow(scope.row.faceImg)" style="width: 100px; height: 100px" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="residential" label="小区" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="building" label="楼栋" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="unit" label="单元" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="room" label="房屋" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+<!--            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, $t('update'))">{{ $t('update') }}</el-button>-->
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      </el-card>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <el-dialog :visible.sync="dialogVisible" :modal="false">
+        <el-image width="100%" :src="dialogImageUrl" alt=""/>
+      </el-dialog>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './visitor-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/pli/power/visitVisitor/page',
+        getDataListIsPage: true,
+        deleteURL: '/pli/power/visitVisitor',
+        deleteIsBatch: true
+      },
+      dialogVisible: false,
+      dialogImageUrl: '',
+      neighborhoodArr: [],
+      buildingArr: [],
+      unitArr: [],
+      houseArr: [],
+      dataForm: {
+        id: '',
+        agencyId: '1550309684605952002',
+        agency: '顺德居社区'
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  mounted() {
+    this.getNeighborhoodList()
+  },
+  methods: {
+    addOrUpdateHandle(id, title) {
+      this.dialogTitle = title
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm.id = id
+        this.$refs.addOrUpdate.init()
+      });
+      this.addOrUpdateVisible = true;
+    },
+    getNeighborhoodList() {
+      this.buildingArr = []
+      this.unitArr = []
+      this.houseArr = []
+      this.$http
+              .post('/gov/org/icneighborhood/open/list', { agencyId: this.dataForm.agencyId})
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.neighborhoodArr = res.data.list
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getBuildingList() {
+      this.unitArr = []
+      this.houseArr = []
+      this.$http
+              .post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.dataForm.neighborhoodId})
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.buildingArr = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getUnitList() {
+      this.houseArr = []
+      this.$http
+              .post('/gov/org/icbuildingunit/unitoption', { buildingId: this.dataForm.buildingId})
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.unitArr = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getHouseList() {
+      this.$http
+              .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId})
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.houseArr = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    // 查看大图
+    imgShow(url){
+      this.dialogImageUrl = url
+      this.dialogVisible = true
+    },
+    pickerBeginDateBefore: {
+      disabledDate: (time) => {
+        let beginDateVal = this.dataForm.endTime
+        if (beginDateVal) {
+          return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+        }
+      }
+    },
+    pickerBeginDateAfter: {
+      disabledDate: (time) => {
+        let EndDateVal = this.dataForm.startTime
+        if (EndDateVal) {
+          return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
+        }
+      }
+    }
+  }
+}
+</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;
+    }
+    ::v-deep .btn-color-del {
+      margin-left: 10px;
+      color: rgba(213, 16, 16, 1);
+    }
+    ::v-deep .btn-color-edit {
+      color: rgba(0, 167, 169, 1);
+    }
+  }
+  .form-wr {
+    .input-width {
+      width: 260px;
+
+    }
+    .input-width-textarea {
+      width: 500px;
+    }
+    .imsg-list {
+      display: flex;
+      align-items: center;
+      .imgs-item {
+        position: relative;
+        margin-right: 10px;
+        .el-icon-delete {
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 18px;
+          color: red;
+          z-index: 3;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .div-content {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+
+<style>
+  .el-table .warning-row {
+    background: #ffe168;
+  }
+</style>