RangTang
/
ddfwxt
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

居民信息管理

This commit is contained in:
jiangrui 2021-04-21 10:58:50 +08:00
parent bd429c8c08
commit 62533f0f68
8 changed files with 590 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/residentInformation.js
View File

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

12
src/components/RegionSelect/index.vue
View File

@ -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,
});
});
});

281
src/components/cutUploadImage/index.vue
View File

@ -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">
<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'}" />
<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" />
<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" />
<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>
<Cropper ref="vueCropper" :img-file="file" :fixed-number="fixedNumber" :news="news" @upload="upload" />
<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 Cropper from "@/components/uploader/cropper";
// import axios from 'axios'
import OSS from '@/utils/aliOSS'
import UUID from 'uuidjs'
import OSS from "@/utils/aliOSS";
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: '', // 当前被选择的图片文件
imageUrl: '', // 单图情况框内图片链接
dialogImageUrl: '', // 多图情况弹窗内图片链接
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)
console.info("watch");
console.info(val);
if (val) {
if (typeof this.initUrl === 'string') {
this.imageUrl = val
if (typeof this.initUrl === "string") {
this.imageUrl = val;
} else {
this.uploadList = this.formatImgArr(val)
this.uploadList = this.formatImgArr(val);
}
} else {
this.imageUrl = ''
this.uploadList = []
this.imageUrl = "";
this.uploadList = [];
}
}
},
updated() {
if (this.$refs.vueCropper) {
this.$refs.vueCropper.Update()
this.$refs.vueCropper.Update();
}
},
mounted() {
if (typeof this.initUrl === 'string') {
this.imageUrl = this.initUrl
if (typeof this.initUrl === "string") {
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.dialogVisible = true
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemove(file, fileList) {
// 删除图片后更新图片文件列表并通知父级变化
this.uploadList = fileList
this.$emit('imgupload', this.formatImgArr(this.uploadList))
this.uploadList = fileList;
this.$emit("imgupload", this.formatImgArr(this.uploadList));
},
handlePicRemove(file) {
this.imageUrl = ''
this.$emit('imgupload', this.imageUrl)
this.imageUrl = "";
this.$emit("imgupload", this.imageUrl);
},
consoleFL(file, fileList) {
// 弹出剪裁框，将当前文件设置为文件
this.cropperModel = true
this.file = file
this.uploadList = fileList
this.cropperModel = true;
this.file = file;
this.uploadList = fileList;
},
/** **********************************************************************************/
/** **************************** single单图情况 **************************************/
handlePreviewSingle(file) { // 点击进行图片展示
handlePreviewSingle(file) {
// 点击进行图片展示
// this.dialogImageUrl = this.file.url
this.dialogImageUrl = this.imageUrl
this.dialogVisible = true
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'
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'
this.$refs.singleImg.style.opacity = "0.6";
},
mouseLeave() {
// 鼠标划出隐藏“重新上传”
this.$refs.reupload.style.display = 'none'
this.$refs.singleImg.style.opacity = '1'
this.$refs.reupload.style.display = "none";
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.file = file
this.cropperModel = true;
this.file = file;
// this.imageUrl = file.url
},
/** **********************************************************************************/
@ -172,87 +266,90 @@ 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',
message: '上传失败!'
})
type: "warning",
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) {
// console.log(arr);
if (arr) {
const result = arr.map((item, index) => {
if (typeof item === 'string') {
if (typeof item === "string") {
return {
url: item,
uid: `index${index}`
}
};
} else {
return item.url
return item.url;
}
});
return result;
}
})
return result
},
beforeClose(done) {
this.uploadList.pop()
this.cropperModel = false
this.uploadList.pop();
this.cropperModel = false;
}
}
}
};
</script>
<style>
.avatar-uploader .el-upload {
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
}
.avatar-uploader-icon {
color: #8c939d;
text-align: center;
}
.avatar {
}
.avatar {
display: block;
}
.reupload {
}
.reupload {
border-radius: 50%;
position: absolute;
color: #fff;
@ -262,12 +359,12 @@ export default {
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
#uploadIcon{
}
#uploadIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
}
</style>

4
src/main.js
View File

@ -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

2
src/router/index.js
View File

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

9
src/store/modules/user.js
View File

@ -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)

172
src/views/login/index.vue
View File

@ -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
:span="12"
<el-col :span="12"
><img
src="./img/loginImg.png"
style="padding: 70px 0px 70px 72px;width:100%"
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 { getGuestToken, getSms } from '@/api/user'
import Axios from 'axios'
import { validUsername } from "@/utils/validate";
import { getGuestToken, getSms } from "@/api/user";
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',
captcha: '111111',
appVersion: '1.0.0',
system: 'IOS',
username: "18882564006", //18882564006
captcha: "111111",
appVersion: "1.0.0",
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.otherQuery = this.getOtherQuery(query)
this.redirect = query.redirect;
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 === '') {
this.$refs.username.focus()
} else if (this.loginForm.captcha === '') {
this.$refs.password.focus()
if (this.loginForm.username === "") {
this.$refs.username.focus();
} else if (this.loginForm.captcha === "") {
this.$refs.password.focus();
}
},
destroyed() {
@ -191,8 +197,8 @@ export default {
},
methods: {
checkCapslock(e) {
const { key } = e
this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
const { key } = e;
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: '成功',
message: '登录成功',
type: 'success',
title: "成功",
message: "登录成功",
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') {
acc[cur] = query[cur]
if (cur !== "redirect") {
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.timer()
this.getCodeDisabled = true;
this.timer();
this.$notify({
title: '成功',
message: '获取验证码成功',
type: 'success',
title: "成功",
message: "获取验证码成功",
type: "success",
duration: 2000
})
});
}
})
});
},
timer() {
this.codeText = `${this.time}s 后重新获取`
this.codeText = `${this.time}s 后重新获取`;
var interval = setInterval(() => {
this.time--
this.codeText = `${this.time}s 后重新获取`
this.time--;
this.codeText = `${this.time}s 后重新获取`;
if (this.time === 0) {
this.time = 60
this.codeText = '获取验证码'
this.getCodeDisabled = false
clearInterval(interval)
this.time = 60;
this.codeText = "获取验证码";
this.getCodeDisabled = false;
clearInterval(interval);
}
}, 1000)
}, 1000);
}
}
}
};
</script>
<style lang="scss">
@ -446,8 +452,8 @@ $light_gray: #1890ff;
padding: 10px;
cursor: pointer;
}
.login_titleLine_left{
background: url('./img/login_titleLine_left.png')no-repeat;
.login_titleLine_left {
background: url("./img/login_titleLine_left.png") no-repeat;
background-size: cover;
display: inline-block;
width: 315px;
@ -455,7 +461,7 @@ $light_gray: #1890ff;
margin-right: 29px;
vertical-align: middle;
}
.systemTitle{
.systemTitle {
font-size: 37px;
color: rgb(255, 255, 255);
margin-bottom: 63px;

294
src/views/residentInformation/list.vue
View File

@ -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" />
<el-button type="primary" @click="handleSearch">搜索</el-button>
<!-- isConvenience -->
<!-- <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="1">男</el-radio>
<el-radio v-model="residentInfo.sex" label="2">未知</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="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 label="行政区域">
<RegionSelect
v-model="residentInfo.regionIds"
:regionNames="[
residentInfo.permanentResidenceRegion,
residentInfo.permanentResidenceTown,
residentInfo.permanentResidenceTownShip
]"
/>
</el-form-item>
</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);
this.list = res.d.records;
// console.log(res);
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];
this.listQuery.params.permanentResidenceTown = this.regionSearchVal[1];
this.listQuery.params.permanentResidenceTownShip = this.regionSearchVal[2];
// console.log(this.regionSearchVal.length);
switch (this.regionSearchVal.length) {
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.$refs.residentInfoForm.validate(valid => {
if (valid) {
this.formatSubmitParams();
// console.log(this.residentInfo);
addResidentInfoList([this.residentInfo]).then(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);
}
}
};