From 90d00fced7ae1afcd9da4c4179410b2cfdf1ee5c Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 3 Feb 2023 09:02:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/base/userinfo/userInfoDetail.vue  | 193 +++++++++
 .../modules/base/userinfo/userInfoList.vue    | 407 ++++++++++++++++++
 2 files changed, 600 insertions(+)
 create mode 100644 src/views/modules/base/userinfo/userInfoDetail.vue
 create mode 100644 src/views/modules/base/userinfo/userInfoList.vue

diff --git a/src/views/modules/base/userinfo/userInfoDetail.vue b/src/views/modules/base/userinfo/userInfoDetail.vue
new file mode 100644
index 000000000..229dba4c1
--- /dev/null
+++ b/src/views/modules/base/userinfo/userInfoDetail.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="epidemic-form">
+    <div class="dialog-h-content scroll-h">
+
+      <!-- <div v-if="view_real_data"
+           class="div_tuomin">
+        <el-button size="mini"
+                   class="diy-button--search"
+                   @click="handleTuomin">显示脱敏信息</el-button>
+      </div> -->
+      <div v-if="initLoading"
+           class="m-row">
+        <div class="m-info">
+          <div class="info-prop">
+            <span class="info-title-2">姓名：</span>
+            <span>{{ formData.realName||'--'  }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">昵称：</span>
+            <span>{{ formData.nickname||'--'  }}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-2">证件号：</span>
+            <span>{{ formData.idNum||'--'  }}</span>
+          </div>
+          <div v-if="!isXiaozhaizi"
+               class="info-prop">
+            <span class="info-title-2">路牌号：</span>
+            <span>{{ formData.street||'--'  }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">小区名称：</span>
+            <span>{{ formData.district||'--'  }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">详细地址：</span>
+            <span>{{ formData.buildingAddress||'--'  }}</span>
+          </div>
+
+          <div class="info-prop"
+               v-if="formData.headImgUrl">
+            <span class="info-title-2">头像：</span>
+
+            <div class="info-pics">
+
+              <img style="width:80px;height:80px"
+                   :src="formData.headImgUrl"
+                   @click="watchImg(formData.headImgUrl)">
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div class="div-btn">
+      <el-button size="small"
+                 @click="handleCancle">关 闭</el-button>
+      <!-- <el-button v-if="formType != 'detail'"
+                 size="small"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button> -->
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+import { dateFormats } from '@/utils/index'
+
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      initLoading: false,
+
+
+      formData: {},
+
+      fileList: [],
+
+
+    }
+  },
+  components: {},
+  async mounted () {
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+
+  },
+
+  methods: {
+    async handleTuomin () {
+      const url = "/data/aggregator/epmetuser/detailByType";
+
+      const { data, code, msg } = await requestPost(url, {
+        id: this.icNatId,
+        type: "natRecord",
+      });
+
+      if (code === 0) {
+        this.$set(this.formData, 'showMobile', data.mobile)
+        this.$set(this.formData, 'showIdCard', data.idCard)
+      } else {
+        this.$message.error(msg);
+      }
+
+    },
+
+    async initForm (row) {
+      this.startLoading()
+      this.formData.agencyId = this.agencyId
+
+      this.formData = JSON.parse(JSON.stringify(row));
+
+
+      this.initLoading = true
+      this.endLoading()
+
+
+    },
+
+    handleCancle () {
+      // this.resetData()
+      this.$emit('dialogCancle')
+
+    },
+
+    watchImg (src) {
+      window.open(src);
+    },
+
+    resetData () {
+
+      this.formData = {}
+    },
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+
+
+  },
+  props: {
+    view_real_data: {//显示【显示脱敏信息】按钮
+      type: Boolean,
+      default: false,
+    },
+    isXiaozhaizi: {
+      type: Boolean,
+      default: false
+    },
+  },
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/management/detail-main.scss";
+
+.div_tuomin {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  z-index: 1000;
+}
+</style>
+
+
+
+
+
diff --git a/src/views/modules/base/userinfo/userInfoList.vue b/src/views/modules/base/userinfo/userInfoList.vue
new file mode 100644
index 000000000..2528286ec
--- /dev/null
+++ b/src/views/modules/base/userinfo/userInfoList.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="div_main">
+
+    <div class="div_search">
+      <el-form :inline="true"
+               :model="formData"
+               ref="ref_searchform"
+               :label-width="'80px'">
+        <div>
+
+          <el-form-item label="所属组织"
+                        prop="gridId">
+
+            <el-cascader class="customer_cascader"
+                         size="small"
+                         ref="myCascader"
+                         v-model="agencyIdArray"
+                         :options="orgOptions"
+                         :props="orgOptionProps"
+                         :show-all-levels="false"
+                         @change="handleChangeAgency"></el-cascader>
+
+          </el-form-item>
+
+          <el-form-item label="注册时间"
+                        prop="regStartTime">
+            <el-date-picker v-model="formData.regStartTime"
+                            :picker-options="startPickerOptions"
+                            class="item_width_2"
+                            size="small"
+                            type="date"
+                            value-format="yyyyMMdd"
+                            placeholder="开始时间">
+            </el-date-picker>
+            <span class="data-tag">至</span>
+            <el-date-picker v-model="formData.regEndTime"
+                            :picker-options="endPickerOptions"
+                            class="item_width_2 data-tag"
+                            size="small"
+                            type="date"
+                            value-format="yyyyMMdd"
+                            placeholder="结束时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="姓名"
+                        prop="name">
+            <el-input v-model="formData.name"
+                      size="small"
+                      class="item_width_2"
+                      clearable
+                      placeholder="请输入姓名">
+            </el-input>
+
+          </el-form-item>
+
+          <el-button style="margin-left:30px"
+                     size="small"
+                     class="diy-button--search"
+                     @click="handleSearch">查询</el-button>
+          <el-button style="margin-left:10px"
+                     size="small"
+                     class="diy-button--reset"
+                     @click="resetSearch">重置</el-button>
+        </div>
+      </el-form>
+    </div>
+
+    <div class="div_table">
+
+      <el-table :data="tableData"
+                border
+                v-loading="tableLoading"
+                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                class="table"
+                style="width: 100%"
+                :height="maxTableHeight">
+
+        <el-table-column label="序号"
+                         fixed="left"
+                         type="index"
+                         align="center"
+                         width="50" />
+
+        <el-table-column prop="realName"
+                         min-width="100"
+                         align="center"
+                         label="姓名"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+        <el-table-column prop="nickname"
+                         min-width="100"
+                         align="center"
+                         label="昵称"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+
+        <el-table-column prop="imageList"
+                         align="center"
+                         width="80"
+                         label="头像">
+          <template slot-scope="scope">
+            <el-image v-if="scope.row.headImgUrl"
+                      style="width: 40px; height: 40px"
+                      :src="scope.row.headImgUrl">
+            </el-image>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="showIdNum"
+                         label="证件号"
+                         min-width="170"
+                         align="center"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+
+        <el-table-column prop="street"
+                         align="center"
+                         min-width="170"
+                         label="路牌号"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+        <el-table-column prop="district"
+                         align="center"
+                         min-width="170"
+                         label="小区名称"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+        <el-table-column prop="buildingAddress"
+                         align="center"
+                         min-width="170"
+                         label="详细地址"
+                         :show-overflow-tooltip="true">
+        </el-table-column>
+
+        <el-table-column fixed="right"
+                         label="操作"
+                         align="center"
+                         width="100">
+          <template slot-scope="scope">
+
+            <el-button @click="handleWatch(scope.row)"
+                       type="text"
+                       size="small">查看</el-button>
+
+          </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>
+
+    </div>
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="detailShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="'信息详情'"
+               width="650px"
+               top="5vh"
+               class="dialog-h"
+               @closed="detailFormCancle">
+      <user-info-detail ref="ref_form_detail"
+                        @dialogCancle="detailFormCancle"></user-info-detail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import nextTick from "dai-js/tools/nextTick";
+import { mapGetters } from "vuex";
+import userInfoDetail from './userInfoDetail'
+
+import axios from "axios";
+
+export default {
+  components: { userInfoDetail },
+
+  data () {
+    let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+      let nowData = Date.now()
+      if (this.formData.regStartTime) {
+        let regStartTime = new Date(this.formData.regStartTime)
+        return time.getTime() > nowData || time.getTime() < regStartTime || time.getTime() === regStartTime
+      } else {
+        return time.getTime() > nowData
+      }
+
+    }
+    let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+      let nowData = Date.now()
+      return time.getTime() > nowData
+    }
+
+    return {
+      tableLoading: false,
+
+      user: {},
+
+      agencyIdArray: [],
+      orgOptions: [],
+      orgOptionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+      tableData: [],
+
+      formData: {
+        agencyId: '',//组织id 不填查询所有
+        gridId: '',
+        regStartTime: '',//开始时间 可不填
+        regEndTime: '',//结束时间 可不填
+        name: ''
+
+      },
+
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+      endPickerOptions: {
+        disabledDate: endDisabledDate
+      },
+      startPickerOptions: {
+        disabledDate: startDisabledDate
+      },
+      eventId: '',
+
+      eventDetailData: {},
+      detailShow: false,
+
+    };
+  },
+  computed: {
+    maxTableHeight () {
+      return this.$store.state.inIframe
+        ? this.clientHeight - 320 + this.iframeHeigh
+        : this.clientHeight - 320;
+    },
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+  },
+  watch: {
+    // "formData.regEndTime": function (val) {
+    //   if (val && val != '') {
+    //     let arrayTemp = val.split(' ')
+    //     this.formData.regEndTime = arrayTemp[0] + ' 23:59:59'
+    //   }
+
+    // },
+  },
+  mounted () {
+    console.log(this.$store.state)
+    this.user = this.$store.state.user
+
+    this.formData.agencyId = this.user.agencyId
+
+    this.getOrgTreeList();
+    this.getTableData();
+
+  },
+  methods: {
+
+    handleChangeAgency (val) {
+      let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
+      if (obj) {
+        if (obj.level === 'grid') {
+          this.formData.gridId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
+          this.formData.agencyId = ''
+        } else {
+          this.formData.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
+          this.formData.gridId = ''
+        }
+
+      } else {
+        this.formData.agencyId = this.user.agencyId
+        this.formData.gridId = ''
+      }
+
+    },
+
+    handleSearch (val) {
+      console.log(this.formData);
+      this.pageNo = 1;
+      this.getTableData();
+    },
+
+    getOrgTreeList () {
+      const { user } = this.$store.state
+      this.$http
+        .post('/gov/org/customeragency/agencygridtree', {})
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取组织树成功', res.data)
+            this.orgOptions = []
+            this.orgOptions.push(res.data)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+
+    async handleWatch (row) {
+      this.detailShow = true
+
+      this.$nextTick(() => {
+        this.$refs.ref_form_detail.initForm(row)
+      })
+    },
+
+    replayOk () {
+      this.detailShow = false
+      this.getTableData()
+
+    },
+    detailFormCancle () {
+
+      this.detailShow = false
+    },
+
+    async getTableData () {
+      this.tableLoading = true
+      const url = "/epmetuser/userbaseinfo/page-reguser";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/list";
+      const { pageSize, pageNo, formData } = this;
+      const { data, code, msg } = await requestPost(url, {
+        pageSize,
+        pageNo,
+        ...formData,
+      });
+
+      this.tableLoading = false
+      if (code === 0) {
+
+        this.total = data.total || 0;
+        this.tableData = data.list
+
+
+
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+
+    handleSizeChange (val) {
+
+      this.pageSize = val;
+      window.localStorage.setItem("pageSize", val);
+      this.getTableData();
+    },
+    handleCurrentChange (val) {
+
+      this.pageNo = val;
+      this.getTableData();
+    },
+
+    resetSearch () {
+      this.agencyIdArray = []
+      this.formData = {
+        agencyId: this.user.agencyId,//组织id 不填默认工作人员所属组织id
+        gridId: '',
+        regStartTime: '',//开始时间 可不填
+        regEndTime: '',//结束时间 可不填
+        name: ''
+      }
+
+
+      this.pageNo = 1
+      this.getTableData();
+
+    },
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+.div_search {
+  .item_width_2 {
+    width: 200px;
+  }
+}
+.myNote {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+</style>