<template>
|
<div class="custom-scroll">
|
<v-header title="新增组织"></v-header>
|
<div class="fm w_row clearfix">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="addorg-ruleForm">
|
<section class="w_col_12 sec">
|
<el-form-item label="组织名" prop="name">
|
<el-input type="text" v-model="ruleForm.name" maxlength="10" placeholder="请输入组织名" show-word-limit></el-input>
|
</el-form-item>
|
</section>
|
<section class="w_col_12 sec">
|
<el-form-item label="状态">
|
<el-radio-group v-model="ruleForm.status" size="medium">
|
<el-radio-button label="1">启用</el-radio-button>
|
<el-radio-button label="2">停用</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</section>
|
<section class="w_col_12 sec">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input type="text" v-model="ruleForm.phone" maxlength="11" placeholder="请输入电话" show-word-limit></el-input>
|
</el-form-item>
|
</section>
|
<section class="w_col_12 sec">
|
<el-form-item label="上传标识" prop="phone">
|
<div class="app_images">
|
<div
|
class="avatar"
|
v-for="(i, j) in recordPhoto"
|
:key="j + '-ta-img'"
|
>
|
<span
|
class="close el-icon-close"
|
@click.stop="onDelImage(i)"
|
></span>
|
<img
|
:src="i"
|
alt=""
|
@click.stop="appShowImage(i,recordPhoto)"
|
>
|
</div>
|
<v-upload
|
slots
|
class="avatar"
|
@path="onImageSave"
|
v-if="recordPhoto.length<1"
|
>
|
<div class="uopload-text">
|
<i class="el-icon-plus"></i>
|
<b>上传</b>
|
</div>
|
</v-upload>
|
</div>
|
</el-form-item>
|
</section>
|
<section class="w_col_12 sec">
|
<el-form-item label="详细地址" prop="address">
|
<el-input
|
suffix-icon="el-icon-location-outline"
|
placeholder="请输入"
|
size="small"
|
v-model="ruleForm.address"
|
maxlength="50"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
</section>
|
<section class="w_col_24 sec">
|
<el-form-item>
|
<el-button @click="sub" type="primary">保存</el-button>
|
<el-button @click="back">返回</el-button>
|
</el-form-item>
|
</section>
|
</el-form>
|
<el-dialog
|
title="设置详细地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {isvalidPhone,isIdcard} from '../../../assets/js/fromValidate';
|
import vUpload from "com/upload/upload1";
|
import MapBox from "../../../components/map/map.vue";
|
var validPhone=(rule, value,callback)=>{
|
if (!value){
|
callback(new Error('请输入电话号码'))
|
}else if (!isvalidPhone(value)){
|
callback(new Error('请输入正确的11位手机号码'))
|
}else {
|
callback()
|
}
|
}
|
export default {
|
components: { vUpload ,MapBox },
|
data(){
|
return{
|
ruleForm: {
|
name:"" ,
|
status:'1',
|
phone: '',
|
// recordPhoto:[],
|
address:'',
|
lat: 0,
|
lng: 0,
|
},
|
recordPhoto:[],
|
id:'',//编辑id
|
dialogVisibleMap: false,
|
positionData: {},
|
rules: {
|
// name: [
|
// { required: true, message: '请输入组织名', trigger: 'blur' },
|
// ],
|
// phone:[
|
// {required: true, validator: validPhone, trigger: 'blur' }
|
// ],
|
// address:[
|
// {required: true, message: '请输入地址', trigger: 'blur' }
|
// ],
|
},
|
}
|
},
|
inject: ["appShowImage"],
|
created() {
|
if(this.$route.query.id){
|
this.id = this.$route.query.id
|
this.init()
|
}
|
},
|
methods: {
|
init(){
|
this.$api.get('cluster/detail?id='+this.id,'',res=>{
|
this.ruleForm = res
|
this.recordPhoto = [res.logo]
|
console.log(res)
|
})
|
},
|
back(){
|
this.$router.back()
|
},
|
sub(){
|
//提交
|
if(!this.ruleForm.name){
|
demo.toast(`请输入组织名称`)
|
return
|
}
|
if(!this.ruleForm.phone){
|
demo.toast(`请输入联系电话`)
|
return
|
}
|
if(this.recordPhoto.length===0){
|
demo.toast(`请上传标识`)
|
return
|
}
|
if(!this.ruleForm.address){
|
demo.toast(`请选择地址`)
|
return
|
}
|
let data = {
|
name:this.ruleForm.name,
|
status:this.ruleForm.status,
|
phone:this.ruleForm.phone,
|
logo:this.recordPhoto.join(),
|
address:this.ruleForm.address,
|
lat:this.ruleForm.lat,
|
lng:this.ruleForm.lng,
|
}
|
if(this.id){//编辑
|
this.edit(data)
|
}else{//新增
|
this.add(data)
|
}
|
},
|
edit(data){
|
data.id = this.id
|
this.$api.post('cluster/edit',data,res=>{
|
demo.toast("保存成功")
|
this.back()
|
})
|
},
|
add(data){
|
this.$api.post('cluster/add',data,res=>{
|
demo.toast("保存成功")
|
this.back()
|
})
|
},
|
onImageSave(v) {
|
this.recordPhoto.push(v);
|
},
|
onDelImage(v) {
|
this.$nextTick(() => {
|
this.recordPhoto = this.recordPhoto.filter((r) => {
|
return r !== v;
|
});
|
});
|
},
|
mapCheck() {
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation({
|
val: this.ruleForm.address,
|
l: this.ruleForm.lat,
|
r: this.ruleForm.lng,
|
});
|
});
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.ruleForm.address = this.positionData.addr;
|
this.ruleForm.lat = this.positionData.lat;
|
this.ruleForm.lng = this.positionData.lng;
|
}
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(data) {
|
this.positionData = data;
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.custom-scroll {
|
overflow: auto;
|
}
|
.addorg-ruleForm {
|
/deep/.el-form-item {
|
width: 100%;
|
}
|
/deep/.el-form-item__label::before {
|
content: '*';
|
color: #e54d42;
|
}
|
}
|
|
</style>
|
