地图VUE2019-08-01

<div>

<el-row :gutter="20" style="height:80vh;overflow-y:scroll;overflow-x:hidden">

<el-col :span="6">

<el-tree style="height:70vh;" class="departmentTree" :data="departmentTreeData" :default-expand-all="true" :expand-on-click-node="false"

@node-click="departmentTreeNodeClick">

</el-tree>

</el-col>

<el-col :span="16">

<el-form ref="editDepartmentForm" :model="departmentFormData" :rules="departmentFormRules" label-width="120px"

label-position="right" size="small" class="departmentform" min-width="500px">

<el-row :gutter="20">

<el-col :span="12">

<el-form-item label="ID:" prop="deptId" hidden>

<el-input v-model="departmentFormData.deptId" placeholder="ID" disabled></el-input>

</el-form-item>

<el-form-item label="编码:" prop="deptCode">

<el-input v-model="departmentFormData.deptCode" placeholder="编码"></el-input>

</el-form-item>

<el-form-item label="名称:" prop="deptName">

<el-input v-model="departmentFormData.deptName" placeholder="名称"></el-input>

</el-form-item>

<el-form-item label="简称:" prop="deptSname">

<el-input v-model="departmentFormData.deptSname" placeholder="简称"></el-input>

</el-form-item>

<el-form-item label="公文名称:" prop="deptbillname">

<el-input v-model="departmentFormData.deptBillname" placeholder="公文名称"></el-input>

</el-form-item>

<el-form-item label="电话:" prop="deptTel">

<el-input v-model="departmentFormData.deptTel" placeholder="电话"></el-input>

</el-form-item>

<el-form-item label="经度:" prop="deptLongitude" hidden>

<el-input placeholder="经度" v-model="departmentFormData.deptLongitude"></el-input>

</el-form-item>

<el-form-item label="纬度:" prop="deptLatitude" hidden>

<el-input placeholder="纬度" v-model="departmentFormData.deptLatitude"></el-input>

</el-form-item>

<el-form-item label="范围:" prop="deptRange" hidden>

<el-input placeholder="范围" v-model="departmentFormData.deptRange"></el-input>

</el-form-item>

</el-col>

<el-col :span="12">

<el-form-item label="单位/部门:" prop="deptFlag">

<el-radio v-model="departmentFormData.deptFlag" label="1">单位</el-radio>

<el-radio v-model="departmentFormData.deptFlag" label="0">部门</el-radio>

</el-form-item>

<el-form-item label="排序:" prop="deptOrder">

<el-slider v-model="departmentFormData.deptOrder" :step="1" :max="20" show-stops>

</el-slider>

</el-form-item>

<el-form-item label="地址:" prop="deptAddress">

<el-input v-model="departmentFormData.deptAddress" placeholder="地址"></el-input>

</el-form-item>

<el-row :gutter="12">

<el-col :span="6">

<el-form-item label="LOGO:" prop="deptLogo">

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item label="" prop="deptLogo">

<el-upload :show-file-list="false" :file-list="fileList" :on-change="handleChange" action="/api/upload/"

name="file" :before-upload="beforeAvatarUpload" :on-success="handleSuccess">

<el-button size="small" type="warning">上传LOGO</el-button>

</el-upload>

</el-form-item>

</el-col>

</el-row>

<el-form-item label="添加操作:">

<el-button type="primary" @click="addSameLevelDepartment()" round v-if="$hasPermission('department:save')">添加同级</el-button>

<el-button type="primary" @click="addSubDepartment()" round v-if="$hasPermission('department:save')">添加下级</el-button>

</el-form-item>

<!-- <el-button type="primary" @click="setLeader('deputy')" round v-if="$hasPermission('department:save')&&departmentFormData.deptFlag=='0'">副负责人</el-button>

<el-button type="primary" class="wz" @click="setLeader('deputy')" round v-if="$hasPermission('department:save')&&departmentFormData.deptFlag=='1'">副负责人</el-button> -->

<el-form-item label="领导设置:" style="width:600px" v-show="false">

<!-- <div v-if="departmentFormData.deptFlag=='1'" style="padding:0px 10px 10px 10px;">

<span>

<el-button type="primary" @click="setLeader('deputygeneral')" round v-if="$hasPermission('department:save')">主管领导</el-button>

</span>

</div> -->

<span>

<el-button type="primary" @click="setLeader('leadership')" round v-if="$hasPermission('department:save')">主要负责人</el-button>

</span>

</div>

<span>

<el-button type="primary" @click="setLeader('manager')" round v-if="$hasPermission('department:save')">分管领导</el-button>

</span>

</div>

<span>

<el-button type="primary" @click="setLeader('office')" round v-if="$hasPermission('department:save')">办公室主任</el-button>

</span>

<span style="padding-left:20px">{{bangongshi}}</span>

</div>

<span>

<el-button type="primary" @click="setLeader('manager')" round v-if="$hasPermission('department:save')">分管领导</el-button>

</span>

</div>

<span>

<el-button type="primary" @click="setLeader('leadership')" round v-if="$hasPermission('department:save')">主要负责人</el-button>

</span>

</div>

</el-form-item>

</el-col>

<el-col :span="24">

<el-form-item label="位置">

<div id="container" style="height:300px">您使用的浏览器版本过低，请换高版本浏览器查看。</div>

</el-form-item>

<el-form-item align="center">

<el-button type="danger" @click="deleteDepartmentData()" round v-if="$hasPermission('department:save')">删除</el-button>

<el-button type="primary" @click="saveDepartmentData('editDepartmentForm')" round v-if="$hasPermission('department:save')">立即保存</el-button>

</el-form-item>

</el-col>

</el-row>

</el-form>

</el-col>

</el-row>

</div>

</template>

import { MP } from "@/utils/map";

import fetch from "@/utils/fetch.js";

import { Message } from "element-ui";

import Tree from "@/views/sys/tree";

import xzry from "@/template/selectpeople/xzry";

export default {

data() {

return {

danwei: false,

bumen: false,

//办公室主任

bangongshi: "",

//主管领导

zgld: "",

//分管领导

fgld: "",

//主负责人

zfzr: "",

text: [],

fileList: [],

deptLongitude: null,

deptLatitude: null,

departmentTreeData: [],

departmentFormData: {

deptLongitude: null,

deptLatitude: null

isVisiable: false,

type: "",

selectId: [],

//数据验证

departmentFormRules: {

deptCode: [

{ required: true, message: "请输入编号" },

{ min: 1, max: 11, message: "长度不能大于11位" }

deptName: [

{ required: true, message: "请输入名称" },

{ min: 2, max: 200, message: "长度2到200字符" }

deptSname: [

{ required: true, message: "请输入简称" },

{ min: 2, max: 200, message: "长度2到200字符" }

deptBillname: [{ min: 1, max: 200, message: "长度为1到200个字符" }],

deptAddress: [{ min: 1, max: 200, message: "长度为1到200个字符" }],

deptFlag: [{ required: true, message: "请选择你的标记" }],

m: null,

};

created: function() {

this.getDepartmentTreeList();

this.handleOpen();

this.leaderShow();

methods: {

leaderShow() {},

f() {

this.$refs.xzry.init();

huixian(data) {

if (this.departmentFormData.deptFlag == "1") {

this.text = data;

this.callback();

} else {

if (data.length > 1) {

Message({

message: "选择人员数大于1,请重新选择",

type: "error",

duration: 3 * 1000

});

} else {

this.text = data;

this.callback();

}

handleOpen() {

var that = this;

this.$nextTick(() => {

MP("R8b2KReUQd2osuCG4ORGqftcxvLXpNlG").then(BMap => {

this.m = new BMap.Map("container");

var point = new BMap.Point(125.349631, 43.869385);

var markers = new BMap.Marker(point);

this.m.addOverlay(markers);

markers.setAnimation(BMAP_ANIMATION_BOUNCE);

this.m.centerAndZoom("长春", 10);

this.m.enableScrollWheelZoom();

this.m.addEventListener("click", function(e) {

that.m.clearOverlays();

var marker = new BMap.Marker(

new BMap.Point(e.point.lng, e.point.lat)

);

that.m.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

that.departmentFormData.deptLongitude = e.point.lng;

that.departmentFormData.deptLatitude = e.point.lat;

});

handleSuccess(res) {

if (res.code == "0") {

this.departmentFormData.deptLogo = res.data.dir;

}

beforeAvatarUpload(file) {

// 类型验证

const extension = file.type.toString().split("/")[0] == "image";

// 大小验证

const isLt2M = file.size / 1024 / 1024 < 10;

if (!extension) {

this.$message.error("上传模板只能是图片!");

}

if (!isLt2M) {

this.$message.error("上传缩略图大小不能超过 10MB!");

}

return extension && isLt2M;

handleChange(file, fileList) {},

//获取部门数据

getDepartmentTreeList() {

//获取数据

fetch

.get("/api/department")

.then(res => {

if (res.code == "0") {

this.departmentTreeData = this.toTree(

res.data,

"deptId",

"deptName",

"deptPid"

);

} else {

Message({

message: res.msg,

type: "error",

duration: 5 * 1000

});

}

})

.catch(error => {

console.log(error);

});

//获取部门详细信息

departmentTreeNodeClick(data) {

this.zgld = "";

this.fgld = "";

this.zfzr = "";

this.bangongshi = "";

fetch

.get("/api/department/" + data.deptId)

.then(res => {

if (res.code == "0") {

this.departmentFormData = res.data;

if (res.data.deptPid == 1) {

this.danwei = true;

this.bumen = false;

} else {

this.bumen = true;

this.danwei = false;

}

// this.getleaders(data.deptId);

this.mapup();

} else {

Message({

message: res.msg,

type: "error",

duration: 5 * 1000

});

}

})

.catch(error => {

console.log("555", error);

});

getleaders(deptId) {

this.fgld = "";

fetch.get("/api/departmentmanager/getdept/" + deptId).then(res1 => {

if (res1.code == "0") {

if (res1.data != null) {

res1.data.forEach(element => {

if (element.managerType == "deputygeneral") {

this.zgld = element.userName;

} else if (element.managerType == "manager") {

this.fgld += element.userName + ",";

} else if (element.managerType == "leadership") {

this.zfzr = element.userName;

} else if (element.managerType == "office") {

this.bangongshi = element.userName;

}

});

if (this.fgld != "") {

// console.log(this.fgld)

this.fgld = this.fgld.substring(0, this.fgld.length - 1);

}

});

mapup() {

var xy = this.departmentFormData;

if (

xy.deptLongitude != null &&

xy.deptLatitude != null &&

xy.deptRange != null

) {

var po = new BMap.Point(xy.deptLongitude, xy.deptLatitude);

var markers = new BMap.Marker(po);

this.m.clearOverlays();

this.m.addOverlay(markers);

markers.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

this.m.centerAndZoom(po, 16);

this.m.enableScrollWheelZoom();

} else {

this.m.clearOverlays();

this.m.centerAndZoom("吉林市", 12);

this.m.enableScrollWheelZoom();

}

//更新信息

saveDepartmentData(editDepartmentForm) {

this.$refs[editDepartmentForm].validate(valid => {

if (valid) {

fetch

.post("/api/department/save", {

deptId: this.departmentFormData.deptId,

deptCode: this.departmentFormData.deptCode,

deptName: this.departmentFormData.deptName,

deptSname: this.departmentFormData.deptSname,

deptPid: this.departmentFormData.deptPid,

deptFlag: this.departmentFormData.deptFlag,

deptAddress: this.departmentFormData.deptAddress,

deptBillname: this.departmentFormData.deptBillname,

deptOrder: this.departmentFormData.deptOrder,

deptZt: this.departmentFormData.deptZt,

deptTel: this.departmentFormData.deptTel,

deptLogo: this.departmentFormData.deptLogo,

deptLongitude: this.departmentFormData.deptLongitude,

deptLatitude: this.departmentFormData.deptLatitude,

deptRange: this.departmentFormData.deptRange

})

.then(res => {

if (res.code == "0") {

Message({

message: "操作成功",

type: "success",

duration: 3 * 1000

});

//成功后刷新数据

this.getDepartmentTreeList();

//成功清除form中数据

this.$refs[editDepartmentForm].resetFields();

} else {

Message({

message: res.msg,

type: "error",

duration: 5 * 1000

});

}

})

.catch(error => {

console.log(error);

});

}

});

//添加下级部门

addSubDepartment() {

//父ID等于deptId

this.departmentFormData.deptPid = this.departmentFormData.deptId;

//状态默认为1

this.departmentFormData.deptZt = 1;

//id调整为0 新增

this.departmentFormData.deptId = 0;

//默认选择部门

this.departmentFormData.deptFlag = "0";

//清空信息

this.departmentFormData.deptName = null;

this.departmentFormData.deptSname = null;

this.departmentFormData.deptOrder = null;

this.departmentFormData.deptAddress = null;

this.departmentFormData.deptBillname = null;

this.departmentFormData.deptCode = null;

this.departmentFormData.deptTel = null;

this.departmentFormData.deptLongitude = null;

this.departmentFormData.deptLatitude = null;

//添加同级部门

addSameLevelDepartment() {

//id默认为0

this.departmentFormData.deptId = 0;

//同级父ID不变

this.departmentFormDatadeptPid = this.departmentFormData.deptPid;

//状态默认为1

this.departmentFormData.deptZt = 1;

//默认选择部门

this.departmentFormData.deptFlag = "0";

//清空信息

this.departmentFormData.deptName = null;

this.departmentFormData.deptSname = null;

this.departmentFormData.deptOrder = null;

this.departmentFormData.deptAddress = null;

this.departmentFormData.deptBillname = null;

this.departmentFormData.deptCode = null;

this.departmentFormData.deptTel = null;

this.departmentFormData.deptLongitude = null;

this.departmentFormData.deptLatitude = null;

//删除

deleteDepartmentData() {

this.departmentFormData.deptZt = "0";

this.$confirm("是否确定删除此信息", "提示", {

type: "warning",

confirmButtonText: "确定",

cancelButtonText: "取消"

})

.then(() => {

fetch

.get(

"/api/department/findChildList/" + this.departmentFormData.deptId

)

.then(res => {

if (res.data.length != 0) {

alert("该组织存在下级部门，不能删除");

} else {

this.saveDepartmentData("editDepartmentForm");

}

});

})

.catch(error => {

console.log(error);

});

setLeader(type) {

// console.log("999",this.departmentFormData)

this.selectId = [];

console.log(this.departmentFormData.deptCode);

if (this.notNull(this.departmentFormData.deptCode)) {

fetch

.post("/api/departmentmanager/getuser", {

deptId: this.departmentFormData.deptId,

type: type

})

.then(res => {

// console.log(888,res);

res.data.forEach(element => {

this.selectId.push("u_" + element.userId);

});

this.$refs.xzry.init(this.departmentFormData.deptId);

// this.isVisiable = !this.isVisiable;

// this.$nextTick(() => {

// this.$refs.Tree.init();

// });

this.type = type;

})

.catch(err => {

console.log("444", err);

});

// fetch

// .post("/api/department/getleader", {

// bmId: this.departmentFormData.deptId,

// type: type

// })

// .then(res => {

// res.data.forEach(element => {

// this.selectId.push("u_" + element.userId);

// });

// this.isVisiable = !this.isVisiable;

// this.$nextTick(() => {

// this.$refs.Tree.init()

// })

// this.type = type;

// })

// .catch(err => {

// });

} else {

Message({

message: "请先选择一个单位或部门",

type: "error",

duration: 5 * 1000

});

}

callback() {

var ids = [];

for (var i in this.text) {

if (this.text[i].userId != "" && this.text[i].userId != undefined) {

ids.push(this.text[i].userId);

}

// console.log("IDS",ids.join())

// var ids = this.$refs.Tree._setCheckedNodes();

// console.log("sdf",this.text)

fetch

.post("/api/departmentmanager/save", {

ids: ids.join(),

deptId: this.departmentFormData.deptId,

type: this.type

})

.then(res => {

if (res.code == "0") {

Message({

message: res.msg,

type: "success",

duration: 3 * 1000

});

this.isVisiable = !this.isVisiable;

this.getleaders(this.departmentFormData.deptId);

} else {

this.isVisiable = !this.isVisiable;

this.departmentTreeNodeClick(this.departmentFormData);

Message({

message: "删除成功",

type: "error",

duration: 3 * 1000

});

}

})

.catch(error => {

console.log(error);

});

scLogo() {}

components: {

Tree,

xzry

}

};

</script>

.departmentTree {

color: #373f4a;

height: 380px;

overflow: auto;

background: #e5e9f2;

border: 1px solid #e0dddd;

}

.departmentform {

margin: 40px 0px 0px 20px;

}

.savebutton {

margin: 40px 0px 0px 0px;

}

.wz {

margin: 5px 5px 0px 0px;

}

</style>

地图VUE2019-08-01

推荐阅读更多精彩内容