v430

.env.development

@@ -4,3 +4,4 @@ ENV = 'development'
 # base api
 #VUE_APP_BASE_API = '/dev-api'
 VUE_APP_BASE_API = 'http://app.rt.xianci.info/'
+#VUE_APP_BASE_API = 'http://api.rt.myntv.cn/'

package.json

@@ -37,6 +37,7 @@
     "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-cropper": "^0.5.3",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/api/region.js

@@ -0,0 +1,13 @@
+import request from "@/utils/request";
+
+/**
+ * 行政区域
+ * @param {*} data
+ * @returns
+ */
+export function getRegions() {
+  return request({
+    url: "/api/convenience/residentInformation/region/list",
+    method: "get"
+  });
+}

src/api/residentInformation.js

@@ -0,0 +1,29 @@
+import request from "@/utils/request";
+
+/**
+ * 居民信息列表
+ * @param {*} data
+ * @returns
+ */
+export function getResidentInfoList(data) {
+  return request({
+    url: "/api/convenience/residentInformation/list",
+    method: "post",
+    data
+  });
+}
+
+/**
+ * 添加居民信息
+ * @param {*} data 
+ * @returns 
+ */
+export function addResidentInfoList(data) {
+  return request({
+    url: "/api/convenience/residentInformation/add",
+    method: "post",
+    data
+  });
+}
+
+  

src/components/RegionSelect/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-cascader
+    v-model="regionNames"
+    style="width:240px"
+    :options="regions"
+    :props="{ checkStrictly: true }"
+    placeholder=""
+    @change="emitSelectValue"
+    clearable
+  />
+</template>
+
+<script>
+import { getRegions } from "@/api/region";
+export default {
+  data() {
+    return {
+      regionNames: [],
+      regions: []
+    };
+  },
+  //   props:['organizationAttribution','permanentResidenceRegion','permanentResidenceTown'],
+  props: ["_regionNames"],
+  created() {
+    this.getList();
+    // console.log(233);
+    this.regionNames = this._regionNames;
+  },
+  methods: {
+    getList() {
+      getRegions().then(res => {
+        const tempData = res.d;
+        const countyArr = []; // 县,1
+        tempData.map(county => {
+          const countyObj = {
+            value: county.root.name,
+            label: county.root.name,
+            disabled: true,
+            children: []
+          };
+          countyArr.push(countyObj);
+          county.node.map(town => {
+            const townObj = {
+              value: town.root.name,
+              label: town.root.name,
+              children: []
+            };
+            countyObj.children.push(townObj);
+            town.node.map(country => {
+              townObj.children.push({
+                value: country.root.name,
+                label: country.root.name
+              });
+            });
+          });
+        });
+        this.regions = countyArr;
+      });
+    },
+    emitSelectValue(val) {
+      this.$emit("input", val);
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/cutUploadImage/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <!-- 多图片上传 -->
+    <el-upload v-if="multiple" action="string" list-type="picture-card" :on-preview="handlePreview" :auto-upload="false" :on-remove="handleRemove" :http-request="upload" :on-change="consoleFL" :file-list="uploadList">
+      <i class="el-icon-plus" />
+    </el-upload>
+    <!-- 单图片上传 -->
+    <el-upload v-else class="avatar-uploader" action="'string'" :auto-upload="false" :show-file-list="false" :on-change="handleCrop" :http-request="upload">
+      <img v-if="imageUrl" ref="singleImg" :src="imageUrl" class="avatar" :style="{width:width+'px',height:height+'px'}" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
+      <i v-else class="el-icon-plus avatar-uploader-icon" :style="{width:width+'px',height:height+'px','line-height':height+'px','font-size':height/6+'px'}" />
+      <!-- 单图片上传状态显示 -->
+      <!-- <div v-if="imageUrl" class="reupload" ref="reupload" @click.stop="handlePreviewSingle" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">重新上传</div> -->
+      <div v-if="imageUrl" id="uploadIcon" ref="reupload" :style="{width:'100%'}" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
+        <i class="el-icon-zoom-in" :style="{color:'#2E2E2E',fontSize:'25px',display:'inline-block',paddingRight:'15px'}" @click.stop="handlePreviewSingle" />
+        <!-- <i class="el-icon-upload" :style="{color:'#2E2E2E',fontSize:'25px',display:'inline-block'}" /> -->
+        <i class="el-icon-delete" :style="{color:'#2E2E2E',fontSize:'25px',display:'inline-block'}" @click.stop="handlePicRemove" />
+      </div>
+      <div ref="uploading" class="reupload" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">上传中..</div>
+      <div ref="failUpload" class="reupload" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">上传失败</div>
+    </el-upload>
+    <!-- 多图片预览弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+    <!-- 剪裁组件弹窗 -->
+    <el-dialog :visible.sync="cropperModel" :width="news ? '990px' : '800px'" :before-close="beforeClose" append-to-body>
+      <Cropper ref="vueCropper" :img-file="file" :fixed-number="fixedNumber" :news="news" @upload="upload" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Cropper from '@/components/uploader/cropper'
+// import axios from 'axios'
+import OSS from '@/utils/aliOSS'
+import UUID from 'uuidjs'
+
+export default {
+  name: 'Uploader',
+  components: {
+    Cropper
+  },
+  props: {
+    targetUrl: {
+      // 上传地址
+      type: String,
+      default: 'http://120.77.82.246:6789/api/postUpLoadFiles'
+    },
+    multiple: {
+      // 多图开关
+      type: Boolean,
+      default: false
+    },
+    initUrl: {
+      // 初始图片链接
+      default: ''
+    },
+    fixedNumber: {
+      // 剪裁框比例设置
+      default: function() {
+        return [3, 1]
+      }
+    },
+    news: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      // 单图剪裁框宽度
+      type: Number,
+      default: 178
+    },
+    height: {
+      // 单图剪裁框高度
+      type: Number,
+      default: 178
+    }
+  },
+  data() {
+    return {
+      file: '', // 当前被选择的图片文件
+      imageUrl: '', // 单图情况框内图片链接
+      dialogImageUrl: '', // 多图情况弹窗内图片链接
+      uploadList: [], // 上传图片列表
+      reupload: true, // 控制"重新上传"开关
+      dialogVisible: false, // 展示弹窗开关
+      cropperModel: false, // 剪裁组件弹窗开关
+      reuploadWidth: this.height * 0.7 // 动态改变”重新上传“大小
+    }
+  },
+  watch: {
+    initUrl: function(val) {
+      // 监听传入初始化图片
+      console.info('watch')
+      console.info(val)
+      if (val) {
+        if (typeof this.initUrl === 'string') {
+          this.imageUrl = val
+        } else {
+          this.uploadList = this.formatImgArr(val)
+        }
+      } else {
+        this.imageUrl = ''
+        this.uploadList = []
+      }
+    }
+  },
+  updated() {
+    if (this.$refs.vueCropper) {
+      this.$refs.vueCropper.Update()
+    }
+  },
+  mounted() {
+    if (typeof this.initUrl === 'string') {
+      this.imageUrl = this.initUrl
+    } else {
+      this.uploadList = this.formatImgArr(this.initUrl)
+    }
+  },
+  methods: {
+    /** **************************** multiple多图情况 **************************************/
+    handlePreview(file) {
+      // 点击进行图片展示
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleRemove(file, fileList) {
+      // 删除图片后更新图片文件列表并通知父级变化
+      this.uploadList = fileList
+      this.$emit('imgupload', this.formatImgArr(this.uploadList))
+    },
+    handlePicRemove(file) {
+      this.imageUrl = ''
+      this.$emit('imgupload', this.imageUrl)
+    },
+    consoleFL(file, fileList) {
+      // 弹出剪裁框，将当前文件设置为文件
+      this.cropperModel = true
+      this.file = file
+      this.uploadList = fileList
+    },
+    /** **********************************************************************************/
+
+    /** **************************** single单图情况 **************************************/
+    handlePreviewSingle(file) { // 点击进行图片展示
+      // this.dialogImageUrl = this.file.url
+      this.dialogImageUrl = this.imageUrl
+      this.dialogVisible = true
+    },
+    mouseEnter() { // 鼠标划入显示“重新上传”
+      this.$refs.reupload.style.display = 'block'
+      if (this.$refs.failUpload.style.display === 'block') {
+        this.$refs.failUpload.style.display = 'none'
+      }
+      this.$refs.singleImg.style.opacity = '0.6'
+    },
+    mouseLeave() {
+      // 鼠标划出隐藏“重新上传”
+      this.$refs.reupload.style.display = 'none'
+      this.$refs.singleImg.style.opacity = '1'
+    },
+    handleCrop(file, files) {
+      file.url = URL.createObjectURL(file.raw)
+      // console.log(file)
+      // 点击弹出剪裁框
+      this.cropperModel = true
+      this.file = file
+      // this.imageUrl = file.url
+    },
+    /** **********************************************************************************/
+
+    upload(data) {
+      // 自定义upload事件
+      if (!this.multiple) {
+        // 如果单图，则显示正在上传
+        this.$refs.uploading.style.display = 'block'
+      }
+      // const formData = new FormData()
+      // formData.append('file', data, '123.png')
+      // axios.defaults.withCredentials = false
+      // axios.post(this.targetUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(res => {
+      const name = UUID.generate() + '.png'
+      OSS(data, name).then(res => {
+        if (!this.multiple) {
+          // 上传完成后隐藏正在上传
+          this.$refs.uploading.style.display = 'none'
+        }
+        // console.log(res)
+        if (res.res.status === 200) {
+          // 上传成功将照片传回父组件
+          const currentPic = res.url
+          if (this.multiple) {
+            this.uploadList.pop()
+            this.uploadList.push({
+              url: currentPic,
+              uid: '111'
+            })
+            // console.log(this.formatImgArr(this.uploadList))
+            this.$emit('imgupload', this.formatImgArr(this.uploadList))
+          } else {
+            this.$emit('imgupload', currentPic)
+          }
+        } else {
+          this.$message({
+            type: 'warning',
+            message: '上传失败!'
+          })
+          // 上传失败则显示上传失败，如多图则从图片列表删除图片
+          if (!this.multiple) {
+            this.$refs.failUpload.style.display = 'block'
+          } else {
+            this.uploadList.pop()
+          }
+        }
+      })
+      this.cropperModel = false
+    },
+    formatImgArr(arr) {
+      const result = arr.map((item, index) => {
+        if (typeof item === 'string') {
+          return {
+            url: item,
+            uid: `index${index}`
+          }
+        } else {
+          return item.url
+        }
+      })
+      return result
+    },
+    beforeClose(done) {
+      this.uploadList.pop()
+      this.cropperModel = false
+    }
+  }
+}
+</script>
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    color: #8c939d;
+    text-align: center;
+  }
+  .avatar {
+    display: block;
+  }
+  .reupload {
+    border-radius: 50%;
+    position: absolute;
+    color: #fff;
+    background-color: #000000;
+    opacity: 0.6;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+  }
+  #uploadIcon{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+  }
+</style>

src/components/uploader/cropper.vue

@@ -0,0 +1,596 @@
+<template>
+  <div>
+    <div v-if="news" class="font-box">
+      <span />
+      <span style="margin-right: 70px">热门预览</span>
+      <span style="margin-right: 6px">非热门预览</span>
+    </div>
+    <div class="cropper-content">
+      <!-- 剪裁框 -->
+      <div class="cropper">
+        <vueCropper
+          ref="cropper"
+          :img="option.img"
+          :output-size="option.size"
+          :output-type="option.outputType"
+          :info="true"
+          :full="option.full"
+          :can-move="option.canMove"
+          :can-move-box="option.canMoveBox"
+          :original="option.original"
+          :auto-crop="option.autoCrop"
+          :auto-crop-width="option.autoCropWidth"
+          :auto-crop-height="option.autoCropHeight"
+          :fixed-box="option.fixedBox"
+          :fixed="option.fixed"
+          :fixed-number="fixedNumber"
+          @realTime="realTime"
+        />
+      </div>
+      <!-- 预览框 -->
+      <div class="show-preview" :style="{'width': '300px', 'height': '300px', 'overflow': 'hidden', 'margin': '0 25px', 'display':'flex', 'align-items' : 'center'}" @mousedown="previewContainerDown" @mousemove="previewContainerMove" @mouseup="previewContainerUp" @mouseleave="previewContainerLeave">
+        <div :style="previews.div" style="position: relative">
+          <div :ref="previewId" :style="previews.div" class="preview">
+            <img :src="previews.url" :style="previews.img">
+            <img v-if="water.url" :src="water.url" :style="water.img" class="water">
+          </div>
+          <div v-show="water.url" :style="previews.div" class="water-cropper">
+            <!-- @mousemove.self="cropMove" -->
+            <div class="crop-box" :style="water.img" @mousedown.self="cropDown">
+              <span class="crop-line line-w" />
+              <span class="crop-line line-a" />
+              <span class="crop-line line-s" />
+              <span class="crop-line line-d" />
+              <span class="crop-point point1" @mousedown.stop="pointDown($event, 'lt')" />
+              <span class="crop-point point2" @mousedown.stop="pointDown($event, 'rt')" />
+
+              <span class="crop-point point3" @mousedown.stop="pointDown($event, 'lb')" />
+
+              <span class="crop-point point4" @mousedown.stop="pointDown($event, 'rb')" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 新闻预览框 -->
+      <div v-if="news" class="news-preview" :style="{'width': '200px', 'height': '300px', 'overflow': 'hidden', 'margin': '0', 'display':'flex', 'align-items' : 'center'}">
+        <!-- <div class="news-box"> -->
+        <div :ref="previewId" :style="previews.div" class="preview">
+          <img :src="previews.url" :style="previews.img" style="margin-left: -75px">
+          <img v-if="water.url" :src="water.url" :style="water.img" style="margin-left: -75px" class="water">
+        </div>
+        <!-- </div> -->
+      </div>
+    </div>
+    <div class="footer-btn">
+      <!-- 缩放旋转按钮 -->
+      <div class="scope-btn">
+        <el-button type="primary" icon="el-icon-zoom-in" @click="changeScale(1)" />
+        <el-button type="primary" icon="el-icon-zoom-out" @click="changeScale(-1)" />
+        <el-button type="primary" @click="rotateLeft">逆时针旋转</el-button>
+        <el-button type="primary" @click="rotateRight">顺时针旋转</el-button>
+      </div>
+      <!-- 确认上传按钮 -->
+      <div class="upload-btn">
+        <el-button type="primary" @click="uploadImg('blob')">上传</el-button>
+        <el-button type="primary" @click="selectWater">选择水印</el-button>
+        <el-button type="primary" @click="water.url = null">取消水印</el-button>
+        <!-- <input type="file" name="" id="" accept=""> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import VueCropper from 'vue-cropper'
+// import html2canvas from 'html2canvas'
+// import { createElement } from 'dropzone'
+export default {
+  props: ['imgFile', 'fixedNumber', 'news'],
+  data() {
+    name:'Cropper'
+    return {
+      previewId: 'waterProview' + Date.parse(new Date()),
+      previews: {}, // 预览数据
+      option: {
+        img: '', // 裁剪图片的地址  (默认：空)
+        size: 1, // 裁剪生成图片的质量  (默认:1)
+        full: true, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)
+        outputType: 'png', // 裁剪生成图片的格式  (默认:jpg)
+        canMove: true, // 上传图片是否可以移动  (默认:true)
+        original: false, // 上传图片按照原始比例渲染  (默认:false)
+        canMoveBox: true, // 截图框能否拖动  (默认:true)
+        autoCrop: true, // 是否默认生成截图框  (默认:false)
+        autoCropWidth: 400, // 默认生成截图框宽度  (默认:80%)
+        autoCropHeight: 400, // 默认生成截图框高度  (默认:80%)
+        fixedBox: false, // 固定截图框大小 不允许改变  (默认:false)
+        fixed: true, // 是否开启截图框宽高固定比例  (默认:true)
+        fixedNumber: [1.5, 1] // 截图框比例  (默认:[1:1])
+      },
+      downImg: '#',
+
+      // 水印
+      waterUrl: null,
+      water: {
+        url: null,
+        img: {
+          width: '100px',
+          height: '100px',
+          left: '0px',
+          top: '0px'
+        }
+      },
+      waterBox: {
+        left: 0,
+        top: 0,
+        width: 100,
+        height: 100,
+        scale: 1,
+        prop: 1
+      },
+      waterInfo: {
+        waterX: 0,
+        waterY: 0,
+        x: 0,
+        y: 0
+      },
+      waterMove: false,
+
+      pointInfo: {
+        pointX: 0,
+        pointY: 0,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      },
+      pointType: null,
+      pointIsMove: false,
+
+      successimg: null
+    }
+  },
+  watch: {
+    waterBox: {
+      handler(newValue, oldValue) {
+        // console.log(newValue)
+        this.water.img.left = newValue.left + 'px'
+        this.water.img.top = newValue.top + 'px'
+        this.water.img.width = newValue.width + 'px'
+        this.water.img.height = newValue.height + 'px'
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changeScale(num) {
+      // 图片缩放
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    rotateLeft() {
+      // 向左旋转
+      console.log(this.$refs.cropper)
+      this.$refs.cropper.rotateLeft()
+    },
+    rotateRight() {
+      // 向右旋转
+      console.log(this.$refs.cropper)
+      this.$refs.cropper.rotateRight()
+    },
+    Update() {
+      // this.file = this.imgFile
+      this.option.img = this.imgFile.url
+    },
+    realTime(data) {
+      // 实时预览
+      this.previews = data
+    },
+    uploadImg(type) {
+      // 将剪裁好的图片回传给父组件
+      event.preventDefault()
+      const that = this
+
+      this.$refs.cropper.getCropData(async data => {
+        // that.$emit('upload', data)
+        let cropInfo, waterInfo
+        if (!this.water.url) {
+          if (type === 'blob') {
+            this.$refs.cropper.getCropBlob(data => {
+              that.$emit('upload', data)
+            })
+          } else {
+            this.$refs.cropper.getCropData(data => {
+              that.$emit('upload', data)
+            })
+          }
+        }
+        await (() => {
+          const cropImg = new Image()
+          cropImg.src = data
+          cropImg.onload = () => {
+            cropInfo = {
+              img: cropImg,
+              width: cropImg.width,
+              height: cropImg.height,
+              x: 0,
+              y: 0
+            }
+            const waterImg = new Image()
+            waterImg.crossOrigin = ''
+            waterImg.src = this.water.url
+            waterImg.onload = () => {
+              waterInfo = {
+                img: waterImg,
+                width: this.waterBox.width,
+                height: this.waterBox.height,
+                x: this.waterBox.left,
+                y: this.waterBox.top
+              }
+              // console.log(cropInfo)
+              // console.log(waterInfo)
+
+              const canvas = document.createElement('canvas')
+              canvas.width = cropInfo.width
+              canvas.height = cropInfo.height
+              const ctx = canvas.getContext('2d')
+              ctx.drawImage(cropInfo.img, cropInfo.x, cropInfo.y, cropInfo.width, cropInfo.height)
+              // console.log(this.previews.div)
+              const prop = cropInfo.width / parseFloat(this.previews.div.width)
+              ctx.drawImage(waterInfo.img, waterInfo.x * prop, waterInfo.y * prop, waterInfo.width * prop, waterInfo.height * prop)
+              // console.log(this.previews)
+              if (type === 'blob') {
+                canvas.toBlob((blob) => {
+                  that.$emit('upload', blob)
+                })
+              } else {
+                that.$emit('upload', canvas.toDataURL('image/png'))
+              }
+
+              /*
+              // 创建 canvas 标签
+              const canvas = document.createElement('canvas')
+              // 获取要生成图片的 DOM 元素
+              const canvasDom = this.$refs[this.previewId]
+              // 获取指定的宽高
+              const width = parseInt(window.getComputedStyle(canvasDom).width)
+              const height = parseInt(window.getComputedStyle(canvasDom).height)
+              // 宽高扩大 2 倍 处理图片模糊
+              canvas.width = width * 2
+              canvas.height = height * 2
+              canvas.style.width = width + 'px'
+              canvas.style.height = height + 'px'
+              const context = canvas.getContext('2d')
+              context.scale(2, 2)
+              const options = {
+                backgroundColor: null,
+                canvas: canvas,
+                useCORS: true
+              }
+              console.log(123)
+              html2canvas(canvasDom, options).then(canvas => {
+                // console.log(canvas.toDataURL('image/png'))
+                // that.successimg = canvas.toDataURL('image/png')
+                // 生成图片地址
+                if (type === 'blob') {
+                  console.log('blob')
+                  canvas.toBlob((blob) => {
+                    that.$emit('upload', blob)
+                  })
+                } else {
+                  that.$emit('upload', canvas.toDataURL('image/png'))
+                }
+              })
+              */
+            }
+          }
+        })()
+      })
+      // return
+      // 原版
+      // if (type === 'blob') {
+      //   this.$refs.cropper.getCropBlob(data => {
+      //     that.$emit('upload', data)
+      //   })
+      // } else {
+      //   this.$refs.cropper.getCropData(data => {
+      //     that.$emit('upload', data)
+      //   })
+      // }
+    },
+
+    // 水印框的操作
+    selectWater() { // 选择水印
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = 'image/*'
+      input.addEventListener('change', (e) => {
+        const file = e.path[0].files[0]
+        const imgURL = window.URL.createObjectURL(file)
+        const image = new Image()
+        image.src = imgURL
+        image.onload = () => {
+          this.water.url = imgURL
+          const { width, height } = image
+          const prop = width / height
+          this.waterBox.prop = prop
+          this.waterBox.height = 100
+          this.waterBox.width = 100 * prop
+        }
+      })
+      setTimeout(() => {
+        input.click()
+      }, 100)
+    },
+    previewContainerDown(e) {
+    },
+    previewContainerMove(e) {
+      if (this.waterMove) {
+        this.cropMove(e)
+      } else if (this.pointIsMove) {
+        this.pointMove(e)
+      }
+    },
+    previewContainerUp() {
+      this.waterMove = false
+      this.pointIsMove = false
+    },
+    previewContainerLeave() {
+      this.waterMove = false
+      this.pointIsMove = false
+    },
+    cropDown(e) {
+      const { clientX, clientY } = e
+      this.waterInfo.x = this.waterBox.left
+      this.waterInfo.y = this.waterBox.top
+      this.waterInfo.waterX = clientX
+      this.waterInfo.waterY = clientY
+      this.waterMove = true
+    },
+    cropMove(e) {
+      if (this.waterMove) {
+        const { clientX, clientY } = e
+        this.waterBox.left = (clientX - this.waterInfo.waterX) + this.waterInfo.x
+        this.waterBox.top = (clientY - this.waterInfo.waterY) + this.waterInfo.y
+      }
+    },
+
+    // 水印框角的操作
+    pointDown(e, type) {
+      const { clientX, clientY } = e
+
+      this.pointInfo.x = this.waterBox.left
+      this.pointInfo.y = this.waterBox.top
+
+      this.pointInfo.width = this.waterBox.width
+      this.pointInfo.height = this.waterBox.height
+
+      this.pointInfo.pointX = clientX
+      this.pointInfo.pointY = clientY
+
+      this.pointType = type
+      this.pointIsMove = true
+    },
+    pointMove(e) {
+      if (this.pointIsMove) {
+        const { clientX, clientY } = e
+        const left = (clientX - this.pointInfo.pointX) + this.pointInfo.x
+        const top = (clientY - this.pointInfo.pointY) + this.pointInfo.y
+        if (this.pointType === 'lt') {
+          this.waterBox.left = left
+          this.waterBox.top = top
+
+          const height = this.pointInfo.height - (clientY - this.pointInfo.pointY)
+          this.waterBox.height = height
+          this.waterBox.width = height * this.waterBox.prop
+          // this.waterBox.width = this.pointInfo.width - (clientX - this.pointInfo.pointX)
+          // this.waterBox.height = this.pointInfo.height - (clientY - this.pointInfo.pointY)
+        } else if (this.pointType === 'rt') {
+          this.waterBox.top = top
+
+          const height = this.pointInfo.height - (clientY - this.pointInfo.pointY)
+          this.waterBox.height = height
+          this.waterBox.width = height * this.waterBox.prop
+          // this.waterBox.width = this.pointInfo.width + (clientX - this.pointInfo.pointX)
+          // this.waterBox.height = this.pointInfo.height - (clientY - this.pointInfo.pointY)
+        } else if (this.pointType === 'lb') {
+          this.waterBox.left = left
+
+          const height = this.pointInfo.height + (clientY - this.pointInfo.pointY)
+          this.waterBox.height = height
+          this.waterBox.width = height * this.waterBox.prop
+          // this.waterBox.width = this.pointInfo.width - (clientX - this.pointInfo.pointX)
+          // this.waterBox.height = this.pointInfo.height + (clientY - this.pointInfo.pointY)
+        } else if (this.pointType === 'rb') {
+          const height = this.pointInfo.height + (clientY - this.pointInfo.pointY)
+          this.waterBox.height = height
+          this.waterBox.width = height * this.waterBox.prop
+          // this.waterBox.width = this.pointInfo.width + (clientX - this.pointInfo.pointX)
+          // this.waterBox.height = this.pointInfo.height + (clientY - this.pointInfo.pointY)
+        }
+      }
+    }
+  }
+  // components: { VueCropper }
+}
+</script>
+<style>
+.cropper-content {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: flex-end;
+  -webkit-justify-content: flex-end;
+}
+.cropper-content .cropper {
+  width: 350px;
+  height: 300px;
+}
+.cropper-content .show-preview {
+  flex: 1;
+  -webkit-flex: 1;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: center;
+  -webkit-justify-content: center;
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  background: #cccccc;
+  margin-left: 40px;
+}
+.preview {
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  background: #cccccc;
+}
+.footer-btn {
+  margin-top: 30px;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: flex-end;
+  -webkit-justify-content: flex-end;
+}
+.footer-btn .scope-btn {
+  width: 380px;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-between;
+  -webkit-justify-content: space-between;
+}
+.footer-btn .upload-btn {
+  flex: 1;
+  -webkit-flex: 1;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: center;
+  -webkit-justify-content: center;
+}
+.footer-btn .btn {
+  outline: none;
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
+  font-weight: 500;
+  padding: 8px 15px;
+  font-size: 12px;
+  border-radius: 3px;
+  color: #fff;
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+
+/* 水印 */
+.cropper-content .show-preview{
+  position: relative;
+  user-select: none;
+}
+.water-cropper{
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* display: flex;
+  align-items: center; */
+}
+.water{
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.preview {
+  position: relative;
+}
+
+.crop-box{
+  /* position: relative; */
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  cursor: move;
+}
+
+.crop-line, .crop-point{
+  background: #39f;
+  position: absolute;
+  user-select: none
+}
+.crop-line{
+  opacity: 0.5;
+}
+.line-w, .line-s{
+  height: 1px;
+  width: 100%;
+}
+.line-a, .line-d{
+  width: 1px;
+  height: 100%;
+}
+.line-w{
+  top: 0;
+  left: 0;
+}
+.line-s{
+  top: 100%;
+  left: 0;
+}
+.line-a{
+  top: 0;
+  left: 0;
+}
+.line-d{
+  top: 0;
+  left: 100%;
+}
+.crop-point{
+  width: 8px;
+  height: 8px;
+  opacity: 0.75;
+  background-color: #39f;
+  border-radius: 100%;
+}
+.water-cropper .point1{
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+.water-cropper .point2{
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+.water-cropper .point3{
+  left: -4px;
+  bottom: -4px;
+  cursor: sw-resize;
+}
+.water-cropper .point4{
+  right: -4px;
+  bottom: -4px;
+  cursor: se-resize;
+}
+/* #39f */
+.news-preview{
+  border: 1px solid #cccccc;
+  background: #cccccc;
+}
+/* .show-preview.news{
+  display: flex;
+  align-items: center;
+} */
+/* .news .news-box{
+  overflow: hidden;
+} */
+
+.font-box{
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 10px;
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import Cookies from 'js-cookie'
 
 import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
+
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
@@ -14,6 +15,9 @@ import App from './App'
 import store from './store'
 import router from './router'
 
+import VueCropper from 'vue-cropper'
+Vue.use(VueCropper)
+
 import './icons' // icon
 import './permission' // permission control
 import './utils/error-log' // error log

src/router/index.js

@@ -157,6 +157,30 @@ export const constantRoutes = [
         }
       }
     ]
+  },
+  {
+    path: "/residentInformation",
+    component: Layout,
+    name: "ResidentInformation",
+    redirect: "/residentInformation/list",
+    meta: {
+      title: "居民信息管理",
+      icon: "list",
+      roles: ["admin", "editor"]
+    },
+    children: [
+      {
+        path: "list",
+        component: () => import("@/views/residentInformation/list"),
+        name: "residentInformationList",
+        meta: {
+          title: "居民信息列表",
+          icon: "list",
+          affix: true,
+          parentTitle: "居民信息管理"
+        }
+      }
+    ]
   }
   // {
   //   path: "/staff",

src/views/convenience/add.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
+    <div class="filter-container"></div>
-      <!-- abc -->
-    </div>
-    <!-- bbc -->
     <el-form
       ref="convenienceForm"
       style="width:680px"
@@ -19,7 +16,7 @@
         />
       </el-form-item>
 
-      <el-form-item label="办事项目">
+      <el-form-item label="办事项目" prop="eventTypeId">
         <!-- <el-cascader
           v-model="convenience.eventTypeId"
           :options="typeOptions"
@@ -40,7 +37,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="文字说明">
+      <el-form-item label="文字说明" prop="remark">
         <el-input
           v-model="convenience.remark"
           type="textarea"
@@ -49,7 +46,7 @@
         />
       </el-form-item>
 
-      <el-form-item label="附件">
+      <el-form-item label="附件" prop="attachment">
         <AliOss v-model="convenience.attachment" multiple />
       </el-form-item>
       <el-form-item>
@@ -72,7 +69,6 @@ export default {
     var checkInfo = (rule, value, callback) => {
       if (value === "") {
         callback(new Error("受理人不能为空"));
-        // console.log('value==<>');
       } else {
         info({ param: this.convenience.residentInformation || undefined }).then(
           res => {
@@ -81,7 +77,6 @@ export default {
             } else {
               this.searchInput = res.d.id;
               callback();
-              // this.convenience.residentInformation = res.d.id;
             }
           }
         );
@@ -93,11 +88,16 @@ export default {
         eventTypeId: undefined,
         remark: undefined,
         sponsor: "STAFF",
-        attachment: undefined
+        attachment:undefined
       },
       typeOptions: [],
       rules: {
-        residentInformation: [{ validator: checkInfo, trigger: "blur" }]
+        residentInformation: [{ validator: checkInfo, trigger: "blur" }],
+        eventTypeId: [
+          { required: true, message: "办事项目不能为空", trigger: "change" }
+        ]
+        // remark: [{ validator: checkRemark, trigger: "blur" }],
+        // attachment: [{ validator: checkAttachment, trigger: "change" }]
       },
       fileList: undefined,
       searchInput: undefined
@@ -109,32 +109,22 @@ export default {
   methods: {
     getTypeList() {
       typeList().then(res => {
-        // this.typeOptions = [];
+        this.typeOptions = res.d;
-        this.typeOptions = res.d
-        // res.d.map(i => {
-        //   const children = [];
-
-        //   i.eventTypesList.map(c => {
-        //     const level2 = {
-        //       label: c.eventName,
-        //       value: c.id
-        //     };
-        //     children.push(level2);
-        //   });
-        //   const level1 = {
-        //     label: i.eventName,
-        //     children
-        //   };
-
-        //   this.typeOptions.push(level1);
-        // });
       });
     },
     handleAdd() {
       this.$refs.convenienceForm.validate(valid => {
         if (valid) {
-          this.convenience.residentInformation = this.searchInput;
+          if (!this.convenience.remark) {
-          add(this.convenience).then(res => {
+            if (!(this.convenience.attachment&&this.convenience.attachment.length > 0)) {
+              this.$notify.error("文字说明与附件必须含有一项");
+              return;
+            }
+          }
+          let payload = Object.assign({}, this.convenience);
+          payload.residentInformation = this.searchInput;
+
+          add(payload).then(res => {
             if (res.c === 200) {
               this.$notify.success("创建成功");
               this.$router.push("/convenience/list");

src/views/convenience/detail.vue

@@ -50,7 +50,9 @@
                 type="text"
                 style="font-size:16px"
                 @click="cascader"
-                ><i class="icon_edit"/>{{ isEventTypeChange ? "取消" : "编辑" }}</el-button
+                ><i class="icon_edit" />{{
+                  isEventTypeChange ? "取消" : "编辑"
+                }}</el-button
               >
             </div>
             <div style="color:#787878;font-size:14px;">
@@ -456,11 +458,40 @@
               <h3>{{ item.content }}</h3>
 
               <p v-if="item.type === 11">审批人：{{ getNames(item.to) }}</p>
-              <p
+
-                v-for="(attachment, index) in item.attachmentList"
+              <p v-for="(file, index) in item.attachmentList" :key="index">
-                :key="index"
+                <i
-              >
+                  v-if="convenience.residentInformation.id === item.from.id"
+                  class="icon_fujian_self"
+                /><i v-else class="icon_fujian" />
+
+                <!-- file -->
+
                 <span
+                  v-if="
+                    isAssetTypeAnAudio(file.substr(file.lastIndexOf('.') + 1))
+                  "
+                  @click="handleSetAudio(file)"
+                  >{{ file }}</span
+                >
+                <span
+                  v-if="
+                    isAssetTypeAnImage(
+                      file.substr(file.lastIndexOf('.') + 1)
+                    )
+                  "
+                  @click="handleSetPreviewImg(file)"
+                >{{file}}</span>
+
+                <el-link
+                  v-else
+                  :href="file"
+                  :underline="false"
+                  target="_blank"
+                >
+                  {{ file.substring(file.lastIndexOf("/") + 1) }}
+                </el-link>
+                <!-- <span
                   v-if="
                     isAssetTypeAnImage(
                       attachment.substr(attachment.lastIndexOf('.') + 1)
@@ -473,19 +504,31 @@
                     v-if="convenience.residentInformation.id === item.from.id"
                     class="icon_fujian_self"
                   /><i v-else class="icon_fujian" />
-                  {{
+                  {{ attachment.substring(attachment.lastIndexOf("/") + 1) }}
-                    attachment.substring(attachment.lastIndexOf("/") + 1)
+                </span>
-                  }}</span
+
+                <span
+                  v-else-if="
+                    isAssetTypeAnAudio(
+                      attachment.substr(attachment.lastIndexOf('.') + 1)
+                    )
+                  "
+                  @click="handleSetAudio(attachment)"
                 >
+                </span>
+                
                 <el-link
                   v-else
                   :href="attachment"
                   :underline="false"
                   target="_blank"
                 >
-                  <i class="icon_fujian" />
+                  <i
+                    v-if="convenience.residentInformation.id === item.from.id"
+                    class="icon_fujian_self"
+                  /><i v-else class="icon_fujian" />
                   {{ attachment.substring(attachment.lastIndexOf("/") + 1) }}
-                </el-link>
+                </el-link> -->
               </p>
               <p v-if="item.type === 13 || item.type === 10">
                 审批结果：{{ item.approve ? "通过" : "驳回" }}
@@ -532,10 +575,31 @@
       </div>
     </div>
 
-    <el-dialog :visible.sync="dialogPreviewImg" width="500px">
+    <el-dialog
+      :visible.sync="dialogPreviewImg"
+      width="500px"
+      title="预览"
+      :destroy-on-clos="true"
+    >
       <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
 
+    <el-dialog
+      :visible.sync="dialogAudio"
+      width="500px"
+      title="预览"
+      :destroy-on-clos="true"
+      @close="handleClose"
+    >
+      <video
+        id="myVideo"
+        :src="dialogAudioSrc"
+        controls
+        autoplay
+        width="100%"
+      />
+    </el-dialog>
+
     <el-dialog
       class="dialog"
       center
@@ -827,13 +891,19 @@ export default {
       },
       dialogPreviewImg: false,
       dialogImageUrl: undefined,
+      dialogAudio: false,
+      dialogAudioSrc: undefined,
       dialogApprovalReminder: false,
       dialogEventType: false,
       typeOptions: [],
       eventTypeId: undefined,
       applyDetail: false,
       isEventTypeChange: false,
-      cxPop: false
+      cxPop: false,
+      audioSources: [
+        "http://storage.myntv.cn/files20210415_142012.m4a"
+        // 'https://img.tukuppt.com/newpreview_music/08/99/49/5c897788e421b53181.mp3'
+      ]
     };
   },
   created() {
@@ -1158,7 +1228,7 @@ export default {
         case 16:
           // 评价申诉
           // this.applyDialog = true;
-          this.$notify.warning('功能尚未开发完成，敬请期待')
+          this.$notify.warning("功能尚未开发完成，敬请期待");
           break;
         default:
           this.updateData();
@@ -1255,6 +1325,18 @@ export default {
       this.dialogImageUrl = imgurl;
       this.dialogPreviewImg = true;
     },
+    isAssetTypeAnAudio(ext) {
+      // console.log(e);
+      return ["m4a", "mp4", "mp3", "mov"].indexOf(ext.toLowerCase()) !== -1;
+    },
+    handleSetAudio(src) {
+      this.dialogAudio = true;
+      this.dialogAudioSrc = src;
+    },
+    handleClose() {
+      // console.log('close');
+      document.getElementById("myVideo").pause();
+    },
     handleChangeEventType() {
       this.dialogEventType = true;
     },
@@ -1275,8 +1357,7 @@ export default {
       this.$nextTick(() => {
         const tempRef = this.$refs.eventTypeRef;
         console.log(tempRef);
-        if(tempRef)
+        if (tempRef) tempRef.toggleMenu();
-        tempRef.toggleMenu();
         // tempRef.$el.style.display = "inline-block";
         // this.$refs.eventTypeRef.focusFirstNode();
       }, 100);
@@ -1542,8 +1623,8 @@ h3 {
   margin-right: 6px;
   vertical-align: top;
 }
-.icon_edit{
+.icon_edit {
-   background: url("./img/icon_edit.png") no-repeat;
+  background: url("./img/icon_edit.png") no-repeat;
   width: 16px;
   height: 16px;
   display: inline-block;

src/views/login/index.vue

@@ -120,8 +120,8 @@ export default {
       //   password: '111111'
       // },
       loginForm: {
-        username: '',
+        username: '22222222222',
-        captcha: '',
+        captcha: '111111',
         appVersion: '1.0.0',
         system: 'IOS',
         device: navigator.userAgent,
@@ -339,7 +339,7 @@ button:focus {
       padding: 12px 5px 12px 15px;
       color: $light_gray;
       height: 47px;
-      caret-color: $cursor;
+      caret-color: #000;
 
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;

src/views/residentInformation/list.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container" style="padding-top:0">
+    <!-- <div>{{ list }}</div> -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.params.name"
+        style="width:200px;"
+        class="filter-item"
+        placeholder="姓名"
+        clearable
+      />
+      <el-input
+        v-model="listQuery.params.phone"
+        style="width:200px;"
+        class="filter-item"
+        placeholder="手机号"
+        clearable
+      />
+      <el-input
+        v-model="listQuery.params.idCard"
+        style="width:200px;"
+        class="filter-item"
+        placeholder="身份证号"
+        clearable
+      />
+      <RegionSelect v-model="regionSearchVal" />
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+    </div>
+    <el-button
+      @click="handleAdd"
+      type="primary"
+      size="mini"
+      style="font-size:12px;padding:10px 20px"
+      >新增</el-button
+    >
+    <el-table :data="list" style="width: 100%" border>
+      <el-table-column prop="name" label="姓名" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="nameZ" label="姓名(藏语)" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.nameZ }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="phone" label="手机号">
+        <template slot-scope="scope">
+          {{ scope.row.phone }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="phone" label="身份证号">
+        <template slot-scope="scope">
+          {{ scope.row.idCard }}
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="phone" label="所属行政区域">
+        <template slot-scope="scope">
+          {{
+            scope.row.permanentResidenceRegion +
+              "-" +
+              scope.row.permanentResidenceTown +
+              "-" +
+              scope.row.permanentResidenceTownShip
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="300px" fixed="right" align="center">
+        <template slot-scope="scope">
+          <el-button
+            @click="handleEdit(scope.row)"
+            type="primary"
+            size="mini"
+            style="font-size:12px;padding:10px 20px"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="提示" :visible.sync="dialogAddVisible" width="30%">
+      <!-- <span></span> -->
+      <!-- <div>居民名称</div> -->
+      <el-form
+        :model="residentInfo"
+        ref="residentInfoForm"
+        label-width="155px"
+        class="el-form"
+        :rules="rules"
+      >
+        <el-form-item label="居民头像">
+          <cut-upload
+            :fixed-number="[1, 1]"
+            :init-url="residentInfo.avatar"
+            @imgupload="UploadCbk"
+          />
+        </el-form-item>
+
+        <el-form-item label="居民姓名">
+          <el-input v-model="residentInfo.name" />
+        </el-form-item>
+
+        <el-form-item label="居民姓名（藏文）">
+          <el-input v-model="residentInfo.nameZ" />
+        </el-form-item>
+
+        <el-form-item label="性别">
+          <el-radio v-model="residentInfo.sex" label="0">女</el-radio>
+          <el-radio v-model="residentInfo.sex" label="1">男</el-radio>
+          <el-radio v-model="residentInfo.sex" label="2">未知</el-radio>
+        </el-form-item>
+
+        <el-form-item label="居民姓名手机号">
+          <el-input v-model="residentInfo.phone" />
+        </el-form-item>
+
+        <el-form-item label="居民姓名身份证号">
+          <el-input v-model="residentInfo.idCard" />
+        </el-form-item>
+
+        <el-form-item label="描述">
+          <el-input v-model="residentInfo.description" />
+        </el-form-item>
+
+        <el-form-item label="描述（藏文）">
+          <el-input v-model="residentInfo.descriptionZ" />
+        </el-form-item>
+
+        <el-form-item label="是否是便民工作人员">
+          <el-switch v-model="residentInfo.idConvenience"></el-switch>
+        </el-form-item>
+
+        <el-form-item label="是否是便民领导">
+          <el-switch v-model="residentInfo.isConvenienceLeader"></el-switch>
+        </el-form-item>
+
+        <el-form-item label="是否是融媒体工作人员">
+          <el-switch v-model="residentInfo.isNews"></el-switch>
+        </el-form-item>
+
+        <el-form-item label="是否是融媒体领导">
+          <el-switch v-model="residentInfo.isNewsLeader"></el-switch>
+        </el-form-item>
+
+        <el-form-item label="行政区域">
+          <RegionSelect
+            v-model="residentInfo.regionIds"
+            :regionNames="[
+              residentInfo.permanentResidenceRegion,
+              residentInfo.permanentResidenceTown,
+              residentInfo.permanentResidenceTownShip
+            ]"
+          />
+        </el-form-item>
+      </el-form>
+
+      <!-- logconven.ne -->
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogAddVisible = false">取 消</el-button>
+        <el-button type="primary" @click="createData">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getResidentInfoList,
+  addResidentInfoList
+} from "@/api/residentInformation";
+import RegionSelect from "@/components/RegionSelect";
+import { getRegions } from "@/api/region";
+import Pagination from "@/components/Pagination";
+import CutUpload from "@/components/cutUploadImage/index.vue";
+
+export default {
+  components: { Pagination, CutUpload, RegionSelect },
+  data() {
+    return {
+      listQuery: {
+        lastPageIndex: 1,
+        size: 10,
+        params: {
+          name: "",
+          phone: "",
+          idCard: ""
+        }
+      },
+      dialogAddVisible: false,
+      list: [],
+      rules: {},
+      residentInfo: {
+        avatar: ""
+      },
+      regionSearchVal: undefined
+    };
+  },
+  created() {
+    this.getList();
+    // this.getRegions();
+  },
+  methods: {
+    getList() {
+      getResidentInfoList(this.listQuery).then(res => {
+        console.log(res);
+        this.list = res.d.records;
+      });
+    },
+    getRegions() {
+      getRegions().then(res => {
+        console.log(res);
+      });
+    },
+    handleSearch() {
+      if (this.regionSearchVal) {
+        this.listQuery.params.permanentResidenceRegion = this.regionSearchVal[0];
+        this.listQuery.params.permanentResidenceTown = this.regionSearchVal[1];
+        this.listQuery.params.permanentResidenceTownShip = this.regionSearchVal[2];
+      }
+      this.getList();
+    },
+    resetResidentInfo() {
+      this.residentInfo = {
+        id: undefined,
+        avatar: undefined,
+        name: undefined,
+        nameZ: undefined,
+        description: undefined,
+        descriptionZ: undefined,
+        duty: undefined,
+        dutyZ: undefined,
+        idCard: undefined,
+        idCardAddress: undefined,
+        isConvenience: false,
+        isConvenienceLeader: false,
+        isNews: false,
+        isNewsLeader: false,
+        isResidentsAdministrator: false,
+        phone: undefined,
+        sex: undefined,
+        regionIds: undefined
+      };
+    },
+    UploadCbk(data) {
+      this.residentInfo.avatar = data;
+    },
+    handleAdd() {
+      // this.resetResidentInfo();
+      this.$nextTick(() => {
+        this.dialogAddVisible = true;
+      });
+    },
+    formatSubmitParams() {
+      let regions = this.residentInfo.regionIds;
+      this.residentInfo.permanentResidenceRegion = regions[0];
+      this.residentInfo.permanentResidenceTown = regions[1];
+      this.residentInfo.permanentResidenceTownShip = regions[2];
+      delete this.residentInfo.regionIds;
+    },
+    createData() {
+      this.formatSubmitParams();
+      // console.log(this.residentInfo);
+      addResidentInfoList([this.residentInfo]).then(res => {
+        console.log(res);
+      });
+    },
+    handleEdit(row) {
+      this.residentInfo = Object.assign({}, row);
+      this.dialogAddVisible = true;
+    }
+  }
+};
+</script>
+
+<style></style>