<template>
|
<el-dialog
|
title="添加四长四员"
|
:visible="value"
|
width="50%"
|
:modal='false'
|
:show-close="false"
|
class="custom-height-four"
|
:before-close="onCancel">
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="fourLong-ruleForm">
|
<el-form-item label="姓名" prop="name">
|
<el-input type="text" v-model="ruleForm.name" maxlength="10" placeholder="请输入姓名，不超过10字" show-word-limit clearable></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input type="text" v-model="ruleForm.phone" maxlength="11" placeholder="请输入11位有效手机号码" show-word-limit clearable></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号码" prop="idCard">
|
<el-input type="text" v-model="ruleForm.idCard" placeholder=" 请输入真实身份证号码" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="职位" prop="position">
|
<el-select v-model="ruleForm.position" multiple placeholder="请选择职位">
|
<el-option
|
v-for="item in positionList"
|
:key="item.value"
|
:label="item.label"
|
:disabled="ruleForm.position.includes('全部')"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择角色" prop="roleId">
|
<el-select size="small" v-model="ruleForm.roleId">
|
<el-option
|
v-for="item in roleList"
|
:key="item.roleId"
|
:label="item.roleName"
|
:value="item.roleId"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="登录账号" prop="account">
|
<el-input type="text" v-model="ruleForm.account" placeholder="请输入后台登录账号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password">
|
<el-input type="text" v-model="ruleForm.password" placeholder="请输入后台登录密码，默认abc123456" clearable></el-input>
|
</el-form-item>
|
<el-form-item class="no-height" label="头像">
|
<article class="flex">
|
<div
|
class="avatar "
|
v-for="(i, j) in image"
|
:key="j + '-ta-img'"
|
>
|
<span
|
class="close el-icon-close"
|
@click.stop="onCloseImage(i)"
|
></span>
|
<img
|
:src="i"
|
alt=""
|
@click.stop="onScaleImage(i)"
|
/>
|
</div>
|
<div
|
class="avatar"
|
v-if="image.length < 1"
|
>
|
<v-upload
|
@path="onPath"
|
slots
|
>
|
<div class="avatar avatar-border"><span>点击上传</span><span>（限一张）</span></div>
|
</v-upload>
|
</div>
|
</article>
|
</el-form-item>
|
<el-form-item label="账号状态" prop="status">
|
<el-radio-group v-model="ruleForm.status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="2">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="管理辖区">
|
<el-button type="primary" size="small" @click="onAddAddress">添加</el-button>
|
</el-form-item>
|
|
<div class="add-build" v-for="(address, index) in addressList" :key="index">
|
<i class="el-icon-remove-outline" @click="onDeleteAddress(index)"></i>
|
<div class="lie-select">
|
<el-form-item label="选择小区楼栋" prop="village">
|
<el-cascader
|
v-model="address.values"
|
placeholder="请选择管辖区域"
|
:options="options"></el-cascader>
|
</el-form-item>
|
</div>
|
</div>
|
|
</el-form>
|
<!-- 底部按钮 -->
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="onCancel">取 消</el-button>
|
<el-button type="primary" @click="onOk" :loading="saveLoading">确 定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
let id = 0;
|
import vUpload from "com/upload/upload1";
|
/** 递归处理楼栋数据，级联组件只认识 数组value，后台返回最终级 */
|
function flatData (data, parent) {
|
const res = [];
|
for (let i = 0; i < data.length; i++) {
|
const { children = [], ...item } = data[i];
|
const currentNode = { ...item, _path_: parent ? parent._path_.concat(item.value) : [item.value]};
|
res.push(currentNode);
|
children.length && res.push(...flatData(children, currentNode));
|
}
|
return res;
|
}
|
|
|
import {isvalidPhone,isIdcard} from '../../../../assets/js/fromValidate'
|
var validPhone=(rule, value,callback)=>{
|
if (!value){
|
callback(new Error('请输入电话号码'))
|
}else if (!isvalidPhone(value)){
|
callback(new Error('请输入正确的11位手机号码'))
|
}else {
|
callback()
|
}
|
}
|
|
var validIdcrad=(rule, value,callback)=>{
|
if (!value){
|
callback(new Error('请输入身份证号码'))
|
}else if (!isIdcard(value)){
|
callback(new Error('请输入正确的身份证号码'))
|
}else {
|
callback()
|
}
|
}
|
|
|
export default {
|
props: {
|
detail: {},
|
positionList: {type: Array},
|
value: {type: Boolean},
|
checkIds: {type: Array}
|
},
|
components: { vUpload },
|
data() {
|
return {
|
image: [],
|
saveLoading: false,
|
List: [
|
{label: 'afgwed', value: 1},
|
{label: '葛根粉', value: 2},
|
{label: '为范围大', value: 3},
|
{label: '王夫人我发个', value: 4},
|
],
|
ruleForm: {
|
name: '' ,
|
phone: '',
|
idCard: '',
|
account: '',
|
password: 'abc123456',
|
position: '',
|
status: 1,
|
roleId:'',
|
},
|
addressList: [{values: []}],
|
options: [],
|
roleList: [],
|
isPlachouder:false,
|
rules: {
|
name: [
|
{ required: true, message: '请输入姓名', trigger: 'change' },
|
],
|
phone:[
|
{required: true, validator: validPhone, trigger: 'change' }
|
],
|
idCard:[
|
{required: true, validator: validIdcrad, trigger: 'change' }
|
],
|
account:[
|
{ required: true, message: '请输入账号', trigger: 'change' }
|
],
|
status: [
|
{ required: true, message: '请选择账号状态', trigger: 'change' }
|
],
|
password:[
|
{ required: true, message: '请输入密码', trigger: 'change' }
|
],
|
position:[
|
{ required: true, message: '请选择职位', trigger: 'change' }
|
],
|
roleId:[
|
{ required: true, message: '请选择角色', trigger: 'change' }
|
],
|
},
|
}
|
},
|
|
watch: {
|
value (val) {
|
if (val) {
|
this.getvillage();
|
this.getrole();
|
}
|
}
|
},
|
|
methods: {
|
|
getrole() {
|
this.$api.get(
|
"/systemmanagement/listrolebackstage",
|
{
|
pageNum: 1,
|
pageSize: 99999,
|
},
|
(e) => {
|
this.roleList = e.records;
|
}
|
);
|
},
|
|
onCloseImage(i) {
|
this.image = this.image.filter((r) => {
|
return r !== i;
|
});
|
},
|
|
onScaleImage(v) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[大图]",
|
foot: 1,
|
tool: 1,
|
pic: v,
|
list: this.image,
|
});
|
},
|
|
onPath(v) {
|
this.image.push(v);
|
},
|
|
cascader(e){
|
let houseId = this.$refs.cascader[0].getCheckedNodes()
|
},
|
|
cascadeList(){
|
//房屋级联菜单查询
|
this.$api.post('common/data/population/second/listBack',{},e=>{
|
console.log(e)
|
this.options= e;
|
})
|
},
|
|
|
getvillage() {
|
this.cascadeList();
|
this.image = [];
|
this.addressList = [{values: []}];
|
this.isPlachouder = false;
|
},
|
|
onAddAddress () {
|
this.addressList.push({values: []});
|
},
|
|
onDeleteAddress (index) {
|
this.addressList.splice(index, 1);
|
},
|
|
/** 取消 */
|
onCancel () {
|
this.$emit('change', false);
|
this.addressList = [];
|
this.$refs.ruleForm.resetFields();
|
},
|
|
/** 确认 */
|
onOk(formName) {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
for (let i = 0; i < this.addressList.length; i++) {
|
const item = this.addressList[i];
|
if (!item.values.length) {
|
demo.toast(`管辖区${i+1}值不能未空`)
|
return void 0;
|
}
|
}
|
this.onSave();
|
}
|
});
|
},
|
onSave () {
|
let params = {...this.ruleForm, jurisdiction: this.addressList.map(d => d.values[d.values.length - 1]).join(','),
|
userId:this.detail.userId,position:this.ruleForm.position.join(","),
|
url:this.image.join(",")
|
|
};
|
var hash = {};
|
var arrStr=params.jurisdiction.split(',');
|
|
var nary=arrStr.sort();
|
|
for(var i=0;i<arrStr.length;i++){
|
if (nary[i]==nary[i+1]){
|
return demo.toast("楼栋小区不能重复")
|
}
|
};
|
|
this.saveLoading = false;
|
let url = 'comActFourMember';
|
// if (this.detail && this.detail.id) {
|
// url = 'comActFourMember/update';
|
// params.id = this.detail.id;
|
// params.password = '';
|
// }
|
|
this.$api.post(url, params, e => {
|
demo.toast("处理成功");
|
this.saveLoading = false;
|
this.$emit('success');
|
this.onCancel();
|
},
|
err=> {
|
demo.toast(err.msg);
|
this.saveLoading = false;
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.fourLong-ruleForm {
|
/deep/.el-input {
|
width: 290px;
|
}
|
/deep/.el-input__inner , /deep/.el-select {
|
width: 290px;
|
}
|
/deep/.el-select-dropdown {
|
min-width: 250px;
|
}
|
.lie-select {
|
float: left;
|
/deep/.el-input__inner , /deep/.el-select {
|
width: 240px !important;
|
}
|
/deep/.el-input {
|
width: 240px;
|
}
|
/deep/.el-select-dropdown {
|
min-width: 150px !important;
|
}
|
/deep/.el-form-item__content {
|
width: 150px;
|
}
|
}
|
.add-build {
|
display: flex;
|
align-items: center;
|
height: 40px;
|
position: relative;
|
padding-left: 24px;
|
margin-bottom: 5px;
|
/deep/.el-form-item {
|
margin-bottom: 0;
|
}
|
}
|
.no-height {
|
/deep/.el-form-item__content {
|
line-height: 20px;
|
}
|
}
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar-border {
|
border:1px solid #409EFF;
|
}
|
.avatar {
|
position: relative;
|
width: 80px;
|
height: 50px;
|
font-size: 12px;
|
padding-top: 10px;
|
color: #409EFF;
|
span {
|
display: inline-block;
|
line-height: 20px !important;
|
}
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.custom-height-four {
|
/deep/.el-dialog {
|
height: 520px !important;
|
overflow: auto;
|
}
|
}
|
</style>
|
