居民信息管理

src/api/residentInformation.js

@@ -26,4 +26,16 @@ export function addResidentInfoList(data) {
   });
 }
 
+/**
+ * 居民信息修改
+ * @param {*} data 
+ * @returns 
+ */
+export function updateResidentInfo(data) {
+  return request({
+    url: "/api/convenience/residentInformation",
+    method: "put",
+    data
+  });
+}
   

src/components/RegionSelect/index.vue

@@ -4,7 +4,7 @@
     style="width:240px"
     :options="regions"
     :props="{ checkStrictly: true }"
-    placeholder=""
+    placeholder="行政区域"
     @change="emitSelectValue"
     clearable
   />
@@ -23,8 +23,12 @@ export default {
   props: ["_regionNames"],
   created() {
     this.getList();
-    // console.log(233);
     this.regionNames = this._regionNames;
+    console.log(233);
+    console.log(this.regionNames);
+  },
+  mounted(){
+    console.log(244);
   },
   methods: {
     getList() {
@@ -43,13 +47,15 @@ export default {
             const townObj = {
               value: town.root.name,
               label: town.root.name,
+              disabled: !town.root.check,
               children: []
             };
             countyObj.children.push(townObj);
             town.node.map(country => {
               townObj.children.push({
                 value: country.root.name,
-                label: country.root.name
+                label: country.root.name,
+                disabled: !country.root.check,
               });
             });
           });

src/components/cutUploadImage/index.vue

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

src/main.js

@@ -7,7 +7,7 @@ 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'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
+// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
 
 import '@/styles/index.scss' // global css
 
@@ -39,7 +39,7 @@ if (process.env.NODE_ENV === 'production') {
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
-  locale: enLang // 如果使用中文，无需设置，请删除
+  // locale: enLang // 如果使用中文，无需设置，请删除
 })
 
 // register global utility filters

src/router/index.js

@@ -166,7 +166,7 @@ export const constantRoutes = [
     meta: {
       title: "居民信息管理",
       icon: "list",
-      roles: ["admin", "editor"]
+      roles: ["ESIDENT_ADMIN"]
     },
     children: [
       {

src/store/modules/user.js

@@ -58,11 +58,16 @@ const actions = {
     return new Promise((resolve, reject) => {
       getInfo({})
         .then(res => {
-          commit('SET_ROLES', ['admin'])
+          // console.log();
+          let roles = res.d.isResidentsAdministrator;
+          roles.push('admin')
+          commit('SET_ROLES', roles)
+          // commit('SET_ROLES', ['admin'])
+          // console.log(['admin',...res.isResidentsAdministrator]);
           sessionStorage.setItem('id', res.d.id)
           commit('SET_NAME', res.d.name)
           commit('SET_AVATAR', res.d.avatar)
-          resolve({ roles: ['admin'] })
+          resolve({ roles})
         })
         .catch(error => {
           reject(error)

src/views/login/index.vue

@@ -5,7 +5,13 @@
     align-items: center;flex-direction: column;
     justify-content: center;"
   >
-  <div class="systemTitle"><i class="login_titleLine_left"/>壤塘家园定点服务系统 <i class="login_titleLine_left" style="transform: rotate(180deg);margin-left:29px"/></div>
+    <div class="systemTitle">
+      <i class="login_titleLine_left" />壤塘家园定点服务系统
+      <i
+        class="login_titleLine_left"
+        style="transform: rotate(180deg);margin-left:29px"
+      />
+    </div>
     <div
       style="background: white;
     width: 1053px;
@@ -13,13 +19,12 @@
     margin: 0 auto;"
     >
       <el-row>
-        <el-col
+        <el-col :span="12"
-          :span="12"
+          ><img
-        ><img
+            src="./img/loginImg.png"
-          src="./img/loginImg.png"
+            style="padding: 70px 0px 70px 72px;width:100%"
-          style="padding: 70px 0px 70px 72px;width:100%"
+            alt=""
-          alt=""
+        /></el-col>
-        ></el-col>
 
         <el-col :span="12">
           <el-form
@@ -78,7 +83,8 @@
               type="primary"
               style="width:100%;margin-bottom:30px;border-radius:10px;height:54px"
               @click.native.prevent="handleLogin"
-            >登录</el-button>
+              >登录</el-button
+            >
           </el-form>
         </el-col>
       </el-row>
@@ -87,12 +93,12 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+import { validUsername } from "@/utils/validate";
-import { getGuestToken, getSms } from '@/api/user'
+import { getGuestToken, getSms } from "@/api/user";
-import Axios from 'axios'
+import Axios from "axios";
 
 export default {
-  name: 'Login',
+  name: "Login",
   // components: { SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
@@ -102,57 +108,57 @@ export default {
       //   callback()
       // }
       if (value.length < 4) {
-        callback(new Error('账号格式错误，不能为空或小于11位'))
+        callback(new Error("账号格式错误，不能为空或小于11位"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateCaptcha = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('验证码格式错误，不能为空或小于6位'))
+        callback(new Error("验证码格式错误，不能为空或小于6位"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       // loginForm: {
       //   username: 'admin',
       //   password: '111111'
       // },
       loginForm: {
-        username: '22222222222',
+        username: "18882564006", //18882564006
-        captcha: '111111',
+        captcha: "111111",
-        appVersion: '1.0.0',
+        appVersion: "1.0.0",
-        system: 'IOS',
+        system: "IOS",
         device: navigator.userAgent,
-        extra: ''
+        extra: ""
       },
       loginRules: {
         username: [
-          { required: true, trigger: 'blur', validator: validateUsername }
+          { required: true, trigger: "blur", validator: validateUsername }
         ],
         captcha: [
-          { required: true, trigger: 'blur', validator: validateCaptcha }
+          { required: true, trigger: "blur", validator: validateCaptcha }
         ]
       },
-      passwordType: 'password',
+      passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
       otherQuery: {},
-      codeText: '获取验证码',
+      codeText: "获取验证码",
       time: 60,
       getCodeDisabled: false
-    }
+    };
   },
   watch: {
     $route: {
       handler: function(route) {
-        const query = route.query
+        const query = route.query;
         if (query) {
-          this.redirect = query.redirect
+          this.redirect = query.redirect;
-          this.otherQuery = this.getOtherQuery(query)
+          this.otherQuery = this.getOtherQuery(query);
         }
       },
       immediate: true
@@ -160,30 +166,30 @@ export default {
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
-    const { appVersion, system, device, extra } = this.loginForm
+    const { appVersion, system, device, extra } = this.loginForm;
     const payload = {
       appVersion,
       system,
       device,
       extra
-    }
+    };
     Axios({
-      method: 'POST',
+      method: "POST",
       url: `${process.env.VUE_APP_BASE_API}api/auth/guest`,
       data: payload,
       headers: {
-        Authorization: 'basic YW5kcm9pZC1jbGllbnQ6YW5kcm9pZC1zZWNyZXQtMjAyMA=='
+        Authorization: "basic YW5kcm9pZC1jbGllbnQ6YW5kcm9pZC1zZWNyZXQtMjAyMA=="
       }
     }).then(res => {
       // console.log(res);
-      sessionStorage.setItem('token', res.data.d.access_token)
+      sessionStorage.setItem("token", res.data.d.access_token);
-    })
+    });
   },
   mounted() {
-    if (this.loginForm.username === '') {
+    if (this.loginForm.username === "") {
-      this.$refs.username.focus()
+      this.$refs.username.focus();
-    } else if (this.loginForm.captcha === '') {
+    } else if (this.loginForm.captcha === "") {
-      this.$refs.password.focus()
+      this.$refs.password.focus();
     }
   },
   destroyed() {
@@ -191,8 +197,8 @@ export default {
   },
   methods: {
     checkCapslock(e) {
-      const { key } = e
+      const { key } = e;
-      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
     },
     // showPwd() {
     //   if (this.passwordType === 'password') {
@@ -208,37 +214,37 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           Axios({
-            method: 'POST',
+            method: "POST",
             url: `${process.env.VUE_APP_BASE_API}api/auth/sms`,
             data: this.loginForm,
             headers: {
               Authorization:
-                'basic YW5kcm9pZC1jbGllbnQ6YW5kcm9pZC1zZWNyZXQtMjAyMA=='
+                "basic YW5kcm9pZC1jbGllbnQ6YW5kcm9pZC1zZWNyZXQtMjAyMA=="
             }
           }).then(res => {
-            console.log(res)
+            console.log(res);
             if (res.data.c === 200) {
-              this.$store.dispatch('user/setToken', res.data.d.access_token)
+              this.$store.dispatch("user/setToken", res.data.d.access_token);
               this.$router.push({
-                path: this.redirect || '/',
+                path: this.redirect || "/",
                 query: this.otherQuery
-              })
+              });
               this.$notify({
-                title: '成功',
+                title: "成功",
-                message: '登录成功',
+                message: "登录成功",
-                type: 'success',
+                type: "success",
                 duration: 2000
-              })
+              });
             } else {
-              this.$notify.error(res.data.m)
+              this.$notify.error(res.data.m);
             }
-          })
+          });
         } else {
-          console.log('error submit!!')
+          console.log("error submit!!");
 
-          return false
+          return false;
         }
-      })
+      });
       // this.$refs.loginForm.validate(valid => {
       //   if (valid) {
       //     this.loading = true
@@ -258,53 +264,53 @@ export default {
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
+        if (cur !== "redirect") {
-          acc[cur] = query[cur]
+          acc[cur] = query[cur];
         }
-        return acc
+        return acc;
-      }, {})
+      }, {});
     },
     handleSms() {
-      this.getCodeDisabled = false
+      this.getCodeDisabled = false;
       const payload = {
         phone: this.loginForm.username,
-        category: 'SIGNIN'
+        category: "SIGNIN"
-      }
+      };
       Axios({
-        method: 'GET',
+        method: "GET",
         url: `${process.env.VUE_APP_BASE_API}api/common/sms/send`,
         params: payload,
         headers: {
-          Authorization: 'Bearer ' + sessionStorage.getItem('token')
+          Authorization: "Bearer " + sessionStorage.getItem("token")
         }
       }).then(res => {
         if (res.data.c === 200) {
-          this.getCodeDisabled = true
+          this.getCodeDisabled = true;
-          this.timer()
+          this.timer();
           this.$notify({
-            title: '成功',
+            title: "成功",
-            message: '获取验证码成功',
+            message: "获取验证码成功",
-            type: 'success',
+            type: "success",
             duration: 2000
-          })
+          });
         }
-      })
+      });
     },
     timer() {
-      this.codeText = `${this.time}s 后重新获取`
+      this.codeText = `${this.time}s 后重新获取`;
       var interval = setInterval(() => {
-        this.time--
+        this.time--;
-        this.codeText = `${this.time}s 后重新获取`
+        this.codeText = `${this.time}s 后重新获取`;
         if (this.time === 0) {
-          this.time = 60
+          this.time = 60;
-          this.codeText = '获取验证码'
+          this.codeText = "获取验证码";
-          this.getCodeDisabled = false
+          this.getCodeDisabled = false;
-          clearInterval(interval)
+          clearInterval(interval);
         }
-      }, 1000)
+      }, 1000);
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
@@ -446,8 +452,8 @@ $light_gray: #1890ff;
     padding: 10px;
     cursor: pointer;
   }
-  .login_titleLine_left{
+  .login_titleLine_left {
-    background: url('./img/login_titleLine_left.png')no-repeat;
+    background: url("./img/login_titleLine_left.png") no-repeat;
     background-size: cover;
     display: inline-block;
     width: 315px;
@@ -455,8 +461,8 @@ $light_gray: #1890ff;
     margin-right: 29px;
     vertical-align: middle;
   }
-  .systemTitle{
+  .systemTitle {
-        font-size: 37px;
+    font-size: 37px;
     color: rgb(255, 255, 255);
     margin-bottom: 63px;
     min-width: 1098px;

src/views/residentInformation/list.vue

@@ -4,36 +4,68 @@
     <div class="filter-container">
       <el-input
         v-model="listQuery.params.name"
-        style="width:200px;"
+        style="width:200px;margin-right:10px"
         class="filter-item"
         placeholder="姓名"
         clearable
       />
+      <!-- <el-input
+        v-model="listQuery.params.nameZ"
+        style="width:200px;margin-right:10px"
+        class="filter-item"
+        placeholder="姓名（藏语）"
+        clearable
+      /> -->
       <el-input
         v-model="listQuery.params.phone"
-        style="width:200px;"
+        style="width:200px;margin-right:10px"
         class="filter-item"
         placeholder="手机号"
         clearable
       />
       <el-input
         v-model="listQuery.params.idCard"
-        style="width:200px;"
+        style="width:200px;margin-right:10px"
         class="filter-item"
         placeholder="身份证号"
         clearable
       />
-      <RegionSelect v-model="regionSearchVal" />
+      <!-- isConvenience -->
-      <el-button type="primary" @click="handleSearch">搜索</el-button>
+
+      <!-- <RegionSelect v-model="regionSearchVal" class="filter-item" /> -->
+      <el-cascader
+        class="filter-item"
+        v-model="regionSearchVal"
+        style="width:240px"
+        :options="regions"
+        :props="{ checkStrictly: true }"
+        placeholder="行政区域"
+        clearable
+      />
+
+      <!-- <span style="margin-left:10px;margin-right:10px;"
+        >是否是便民工作人员</span
+      > -->
+      <el-checkbox v-model="listQuery.params.isConvenience" style="margin-left:10px">是否是便民工作人员</el-checkbox>
+      <!-- <el-switch
+        v-model="listQuery.params.isConvenience"
+        active-color="#13ce66"
+        inactive-color="#ff4949"
+      >
+      </el-switch> -->
+
+      <el-button type="primary" @click="handleSearch" style="margin-left:10px"
+        >搜索</el-button
+      >
     </div>
     <el-button
       @click="handleAdd"
       type="primary"
       size="mini"
-      style="font-size:12px;padding:10px 20px"
+      style="font-size:12px;padding:10px 20px;margin-bottom:20px"
       >新增</el-button
     >
-    <el-table :data="list" style="width: 100%" border>
+    <el-table :data="list" style="width: 100%" border v-loading="listLoading">
       <el-table-column prop="name" label="姓名" width="180">
         <template slot-scope="scope">
           {{ scope.row.name }}
@@ -55,14 +87,21 @@
         </template>
       </el-table-column>
 
+      <el-table-column prop="phone" label="是否是便民工作人员">
+        <template slot-scope="scope">
+          {{ scope.row.isConvenience ? "是" : "否" }}
+        </template>
+      </el-table-column>
+
       <el-table-column prop="phone" label="所属行政区域">
         <template slot-scope="scope">
           {{
             scope.row.permanentResidenceRegion +
               "-" +
               scope.row.permanentResidenceTown +
-              "-" +
+              (scope.row.permanentResidenceTownShip
-              scope.row.permanentResidenceTownShip
+                ? "-" + scope.row.permanentResidenceTownShip
+                : "")
           }}
         </template>
       </el-table-column>
@@ -79,7 +118,19 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog title="提示" :visible.sync="dialogAddVisible" width="30%">
+    <pagination
+      v-if="total > 0"
+      :total="total"
+      :page.sync="listQuery.lastPageIndex"
+      :limit.sync="listQuery.size"
+      @pagination="getList"
+    />
+
+    <el-dialog
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogAddVisible"
+      width="30%"
+    >
       <!-- <span></span> -->
       <!-- <div>居民名称</div> -->
       <el-form
@@ -89,7 +140,7 @@
         class="el-form"
         :rules="rules"
       >
-        <el-form-item label="居民头像">
+        <el-form-item label="头像">
           <cut-upload
             :fixed-number="[1, 1]"
             :init-url="residentInfo.avatar"
@@ -97,28 +148,32 @@
           />
         </el-form-item>
 
-        <el-form-item label="居民姓名">
+        <el-form-item label="姓名" prop="name">
           <el-input v-model="residentInfo.name" />
         </el-form-item>
 
-        <el-form-item label="居民姓名（藏文）">
+        <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="0">女</el-radio>
-          <el-radio v-model="residentInfo.sex" label="1">男</el-radio>
+          <el-radio v-model="residentInfo.sex" :label="1">男</el-radio>
-          <el-radio v-model="residentInfo.sex" label="2">未知</el-radio>
+          <el-radio v-model="residentInfo.sex" :label="2">未知</el-radio>
         </el-form-item>
 
-        <el-form-item label="居民姓名手机号">
+        <el-form-item label="手机号">
           <el-input v-model="residentInfo.phone" />
         </el-form-item>
 
-        <el-form-item label="居民姓名身份证号">
+        <el-form-item label="身份证号" prop="idCard">
           <el-input v-model="residentInfo.idCard" />
         </el-form-item>
 
+        <el-form-item label="身份证地址">
+          <el-input v-model="residentInfo.idCardAddress" />
+        </el-form-item>
+
         <el-form-item label="描述">
           <el-input v-model="residentInfo.description" />
         </el-form-item>
@@ -127,38 +182,62 @@
           <el-input v-model="residentInfo.descriptionZ" />
         </el-form-item>
 
+        <el-form-item label="职责">
+          <el-input v-model="residentInfo.duty" />
+        </el-form-item>
+
+        <el-form-item label="职责（藏文）">
+          <el-input v-model="residentInfo.dutyZ" />
+        </el-form-item>
+
+        <el-form-item label="序号">
+          <el-input v-model="residentInfo.sort" />
+        </el-form-item>
+
+        <el-form-item label="行政区域" prop="regionIds">
+          <!-- <RegionSelect
+            v-model="residentInfo.regionIds"
+            
+          /> -->
+          <!-- <RegionSelect
+            v-model="residentInfo.regionIds"
+            :regionNames="residentInfo.regionids"
+          /> -->
+          <el-cascader
+            v-model="residentInfo.regionIds"
+            style="width:240px"
+            :options="regions"
+            :props="{ checkStrictly: true }"
+            placeholder="行政区域"
+            clearable
+          />
+        </el-form-item>
+
         <el-form-item label="是否是便民工作人员">
-          <el-switch v-model="residentInfo.idConvenience"></el-switch>
+          <el-switch v-model="residentInfo.isConvenience"></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-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> -->
-
-        <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>
+        <el-button
+          type="primary"
+          @click="dialogStatus === 'create' ? createData() : updateData()"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -167,7 +246,8 @@
 <script>
 import {
   getResidentInfoList,
-  addResidentInfoList
+  addResidentInfoList,
+  updateResidentInfo
 } from "@/api/residentInformation";
 import RegionSelect from "@/components/RegionSelect";
 import { getRegions } from "@/api/region";
@@ -178,6 +258,8 @@ export default {
   components: { Pagination, CutUpload, RegionSelect },
   data() {
     return {
+      listLoading: false,
+      total: 0,
       listQuery: {
         lastPageIndex: 1,
         size: 10,
@@ -188,8 +270,24 @@ export default {
         }
       },
       dialogAddVisible: false,
+      textMap: {
+        update: "修改",
+        create: "创建"
+      },
+      dialogStatus: "",
       list: [],
-      rules: {},
+      regions: [],
+      rules: {
+        name: [
+          { required: true, message: "居民姓名不能为空", trigger: "blur" }
+        ],
+        idCard: [
+          { required: true, message: "居民身份证号不能为空", trigger: "blur" }
+        ],
+        regionIds: [
+          { required: true, message: "行政区域不能为空", trigger: "blur" }
+        ]
+      },
       residentInfo: {
         avatar: ""
       },
@@ -198,25 +296,78 @@ export default {
   },
   created() {
     this.getList();
-    // this.getRegions();
+    this.getRegions();
   },
   methods: {
     getList() {
+      this.listLoading = true;
       getResidentInfoList(this.listQuery).then(res => {
-        console.log(res);
+        // console.log(res);
-        this.list = res.d.records;
+        this.list = res.d.list;
+        this.total = res.d.total;
+        this.listLoading = false;
       });
     },
     getRegions() {
       getRegions().then(res => {
-        console.log(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,
+              disabled: !town.root.check,
+              children: []
+            };
+            countyObj.children.push(townObj);
+            town.node.map(country => {
+              townObj.children.push({
+                value: country.root.name,
+                label: country.root.name,
+                disabled: !country.root.check
+              });
+            });
+          });
+        });
+        this.regions = countyArr;
       });
     },
     handleSearch() {
       if (this.regionSearchVal) {
-        this.listQuery.params.permanentResidenceRegion = this.regionSearchVal[0];
+        // console.log(this.regionSearchVal.length);
-        this.listQuery.params.permanentResidenceTown = this.regionSearchVal[1];
+        switch (this.regionSearchVal.length) {
-        this.listQuery.params.permanentResidenceTownShip = this.regionSearchVal[2];
+          case 1:
+            this.listQuery.params.PermanentResidenceRegion = this.regionSearchVal[0];
+            this.listQuery.params.PermanentResidenceTown = undefined;
+            this.listQuery.params.PermanentResidenceTownShip = undefined;
+            break;
+          case 2:
+            this.listQuery.params.PermanentResidenceTown = this.regionSearchVal[1];
+            this.listQuery.params.PermanentResidenceRegion = undefined;
+            this.listQuery.params.PermanentResidenceTownShip = undefined;
+            break;
+          case 3:
+            this.listQuery.params.PermanentResidenceTownShip = this.regionSearchVal[2];
+            this.listQuery.params.PermanentResidenceRegion = undefined;
+            this.listQuery.params.PermanentResidenceTown = undefined;
+            break;
+          default:
+            this.listQuery.params.PermanentResidenceRegion = undefined;
+            this.listQuery.params.PermanentResidenceTown = undefined;
+            this.listQuery.params.PermanentResidenceTownShip = undefined;
+            break;
+        }
+        // this.listQuery.params.permanentResidenceRegion = this.regionSearchVal[0];
+        // this.listQuery.params.permanentResidenceTown = this.regionSearchVal[1];
+        // this.listQuery.params.permanentResidenceTownShip = this.regionSearchVal[2];
       }
       this.getList();
     },
@@ -236,17 +387,20 @@ export default {
         isConvenienceLeader: false,
         isNews: false,
         isNewsLeader: false,
-        isResidentsAdministrator: false,
+        // isResidentsAdministrator: false,
         phone: undefined,
         sex: undefined,
-        regionIds: undefined
+        regionIds: undefined,
+        sort: undefined
       };
     },
     UploadCbk(data) {
       this.residentInfo.avatar = data;
     },
     handleAdd() {
-      // this.resetResidentInfo();
+      this.resetResidentInfo();
+
+      this.dialogStatus = "create";
       this.$nextTick(() => {
         this.dialogAddVisible = true;
       });
@@ -256,18 +410,62 @@ export default {
       this.residentInfo.permanentResidenceRegion = regions[0];
       this.residentInfo.permanentResidenceTown = regions[1];
       this.residentInfo.permanentResidenceTownShip = regions[2];
-      delete this.residentInfo.regionIds;
+      // delete this.residentInfo.regionIds;
     },
     createData() {
-      this.formatSubmitParams();
+      this.$refs.residentInfoForm.validate(valid => {
-      // console.log(this.residentInfo);
+        if (valid) {
-      addResidentInfoList([this.residentInfo]).then(res => {
+          this.formatSubmitParams();
-        console.log(res);
+          let payload = [];
+          let info = Object.assign({}, this.residentInfo);
+          delete info.regionIds;
+          payload.push(info);
+
+          addResidentInfoList(payload).then(res => {
+            if (res.c === 200) {
+              this.$notify.success("创建成功");
+              this.dialogAddVisible = false;
+              this.getList();
+            }
+          });
+        }
+      });
+    },
+    updateData() {
+      this.$refs.residentInfoForm.validate(valid => {
+        if (valid) {
+          this.formatSubmitParams();
+          delete this.residentInfo.regionIds
+          updateResidentInfo(this.residentInfo).then(res => {
+            console.log(res);
+            if (res.c === 200) {
+              this.$notify.success("修改成功");
+              this.dialogAddVisible = false;
+              this.getList();
+            }
+          });
+        }
       });
     },
     handleEdit(row) {
+      // this.$nextTick(() => {
+
       this.residentInfo = Object.assign({}, row);
+      let arr = [];
+      if (this.residentInfo.permanentResidenceRegion) {
+        arr.push(this.residentInfo.permanentResidenceRegion);
+      }
+      if (this.residentInfo.permanentResidenceTown) {
+        arr.push(this.residentInfo.permanentResidenceTown);
+      }
+      if (this.residentInfo.permanentResidenceTownShip) {
+        arr.push(this.residentInfo.permanentResidenceTownShip);
+      }
+      this.residentInfo.regionIds = arr;
+
+      this.dialogStatus = "update";
       this.dialogAddVisible = true;
+      // },100);
     }
   }
 };