【安宁pc端 党员管理 】-【添加党员身份标签页面】魏凯 2020-10-22

src/views/modules/user/identityTag.vue

@@ -0,0 +1,381 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-__hasAuthenticationpartymembers.vue}">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataListSearch()">
+        <el-form-item label="所属机构">
+          <el-cascader v-model="deptIdList"
+                       :options="options"
+                       :props="{ checkStrictly: true }"
+                       clearable>
+          </el-cascader>
+        </el-form-item>
+        <br>
+        <el-form-item label="姓名" label-width="68px">
+          <el-input v-model="dataForm.realName"
+                    placeholder=""
+                    @keyup.native="btKeyUpRealName"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="dataForm.mobile"
+                    placeholder=""
+                    @keyup.native="btKeyUpMobile"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号">
+          <el-input v-model="dataForm.identityNo"
+                    placeholder=""
+                    @keyup.native="btKeyUpIdentityNo"
+                    clearable></el-input>
+        </el-form-item>
+        <br>
+        <el-form-item label="注册时间" prop="startTime" label-width="70px">
+          <el-date-picker v-model="dataForm.startTime"
+                          type="date"
+                          :picker-options="pickerBeginDateBefore"
+                          value-format="yyyy-MM-dd"
+                          format="yyyy-MM-dd"
+                          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="date"
+                          :picker-options="pickerBeginDateAfter"
+                          value-format="yyyy-MM-dd"
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataListSearch()" type="success">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('epdc:user:export')"
+                     type="success"
+                     @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
+        <br>
+
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                border
+                @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%;">
+        <el-table-column label="序号" header-align="center" align="center" width="50px">
+          <template slot-scope="scope">
+            {{scope.$index+1}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="realName"
+                         label="姓名"
+                         header-align="center"
+                         align="center"
+                         width="120"></el-table-column>
+        <el-table-column prop="mobile"
+                         label="手机号"
+                         header-align="center"
+                         align="center"
+                         width="150"></el-table-column>
+        <el-table-column prop="identityNo"
+                         label="身份证号"
+                         header-align="center"
+                         align="center"
+                         width="200"></el-table-column>
+        <el-table-column prop="post"
+                         label="职务"
+                         header-align="center"
+                         align="center"
+                         v-if="false"></el-table-column>
+        <el-table-column prop="cadreFlag"
+                         label="干部下沉"
+                         :formatter="formatCadre"
+                         header-align="center"
+                         align="center"
+                         v-if="false"></el-table-column>
+        <el-table-column prop="tagName"
+                         label="角色"
+                         header-align="center"
+                         align="center"
+                         v-if="false"></el-table-column>
+        <el-table-column prop="registFlag"
+                         label="注册状态"
+                         :formatter="formatRegist"
+                         header-align="center"
+                         align="center"
+                         width="120"></el-table-column>
+        <el-table-column prop="registTime"
+                         label="认证时间"
+                         header-align="center"
+                         align="center"
+                         width="180"></el-table-column>
+        <el-table-column prop="createdTime"
+                         label="注册时间"
+                         header-align="center"
+                         align="center"
+                         width="180"></el-table-column>
+        <el-table-column prop="allDeptNames"
+                         label="街道-社区-网格"
+                         header-align="center"
+                         align="center"
+                         min-width="350"
+                         show-overflow-tooltip> </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>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/app-user/partymembers/optimizeHasAuthenticationPartyPage',
+        getDataListIsPage: true,
+        exportURL: '/app-user/partymembers/hasAuthenticationexport'
+      },
+      dataForm: {
+        id: '',
+        realName: '',
+        mobile: '',
+        streetId: '',
+        identityNo: '',
+        communityId: '',
+        deptId: '',
+        registFlag: '',
+        postId: '',
+        startTime: '',
+        endTime: ''
+      },
+      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()
+          }
+        }
+      },
+      // streetOptions: [],
+      communityOptions: [],
+      gridOptions: [],
+      registOptions: [],
+      // postOptions: [],
+      timeRange: [],
+      upLoadUrl: '',
+      faultDataVisible: false,
+      errordataList: [],
+      options: [],
+      deptIdList: []
+    }
+  },
+  components: {
+  },
+  watch: {
+    'deptIdList': function (val) {
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.deptId = ''
+      }
+      if (val.length === 1) {
+        this.dataForm.streetId = this.deptIdList[0]
+        this.dataForm.communityId = ''
+        this.dataForm.deptId = ''
+      }
+      if (val.length === 2) {
+        this.dataForm.streetId = this.deptIdList[0]
+        this.dataForm.communityId = this.deptIdList[1]
+        this.dataForm.deptId = ''
+      }
+      if (val.length === 3) {
+        this.dataForm.streetId = this.deptIdList[0]
+        this.dataForm.communityId = this.deptIdList[1]
+        this.dataForm.deptId = this.deptIdList[2]
+      }
+    }
+  },
+  created: function () {
+    this.$http
+        .get(`/sys/user/deptOptions/getByLoginUser`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.options = res.data.options
+        })
+        .catch(() => { })
+    this.initTime()
+    // this.getStreetList()
+    this.getRegistOptions()
+    // this.getPostOptions()
+  },
+  methods: {
+    initTime () {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+      this.timeRange = [start, end]
+      let year = start.getFullYear()
+      let month = start.getMonth() + 1
+      if (month < 10) {
+        month = '0' + month
+      }
+      let date = start.getDate()
+      if (date < 10) {
+        date = '0' + date
+      }
+      let startDate = year + '-' + month + '-' + date
+      let yearend = end.getFullYear()
+      let monthend = end.getMonth() + 1
+      if (monthend < 10) {
+        monthend = '0' + monthend
+      }
+      let dateend = end.getDate()
+      if (dateend < 10) {
+        dateend = '0' + dateend
+      }
+      let endDate = yearend + '-' + monthend + '-' + dateend
+      this.dataForm.startTime = startDate
+      this.dataForm.endTime = endDate
+    },
+    // getStreetList () {
+    //   this.$http.get(`/sys/dept/sublist/` + (localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))).then(({ data: res }) => {
+    //     if (res.code !== 0) {
+    //       return this.$message.error(res.msg)
+    //     }
+    //     this.streetOptions = res.data
+    //   }).catch(() => { })
+    // },
+    btKeyUpRealName (e) {
+      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
+      this.dataForm.realName = e.target.value
+    },
+    btKeyUpMobile (e) {
+      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
+      this.dataForm.mobile = e.target.value
+    },
+    btKeyUpIdentityNo (e) {
+      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
+      this.dataForm.identityNo = e.target.value
+    },
+    getCommunityList () {
+      if (this.dataForm.streetId === '') {
+        this.communityOptions = []
+        this.gridOptions = []
+        this.dataForm.communityId = ''
+        this.dataForm.deptId = ''
+        return
+      }
+      this.dataForm.communityId = ''
+      this.dataForm.deptId = ''
+      this.$http.get(`/sys/dept/sublist/` + this.dataForm.streetId).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.communityOptions = res.data
+      }).catch(() => { })
+    },
+    getGridList () {
+      if (this.dataForm.communityId === '') {
+        this.gridOptions = []
+        this.dataForm.deptId = ''
+        return
+      }
+      this.dataForm.deptId = ''
+      this.$http.get(`/sys/dept/sublist/` + this.dataForm.communityId).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.gridOptions = res.data
+      }).catch(() => { })
+    },
+    getRegistOptions () {
+      this.$http.get(`/sys/dict/sublist/1168769645576179713`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.registOptions = res.data
+      }).catch(() => { })
+    },
+    // getPostOptions () {
+    //   this.$http.get(`/sys/dict/sublist/1168770417290366977`).then(({ data: res }) => {
+    //     if (res.code !== 0) {
+    //       return this.$message.error(res.msg)
+    //     }
+    //     this.postOptions = res.data
+    //   }).catch(() => { })
+    // },
+    formatCadre: function (row, column) {
+      return row.cadreFlag === '1' ? '是' : row.cadreFlag === '0' ? '否' : '未知'
+    },
+    formatRegist: function (row, column) {
+      if (row.registFlag === '1') {
+        return '自动认证'
+      } else if (row.registFlag === '0') {
+        return '未认证'
+      } else if (row.registFlag === '2') {
+        return '手动认证'
+      } else {
+        return '未认证'
+      }
+    },
+    importData () {
+    },
+    // 获取数据列表
+    getDataList () {
+      if (this.timeRange === null) {
+        this.dataForm.startTime = ''
+        this.dataForm.endTime = ''
+      }
+      this.dataListLoading = true
+      this.$http.get(
+          this.mixinViewModuleOptions.getDataListURL,
+          {
+            params: {
+              order: this.order,
+              orderField: this.orderField,
+              page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+              limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+              ...this.dataForm
+            }
+          }
+      ).then(({ data: res }) => {
+        this.dataListLoading = false
+        if (res.code !== 0) {
+          this.dataList = []
+          this.total = 0
+          return this.$message.error(res.msg)
+        }
+        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
+        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    }
+  }
+}
+</script>