You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
654 lines
20 KiB
654 lines
20 KiB
<template>
|
|
<el-dialog
|
|
:visible.sync="visible"
|
|
:title="!dataForm.id ? '新增党组织' : '更新党组织'"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<el-form
|
|
class="form"
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
ref="dataForm"
|
|
@keyup.enter.native="dataFormSubmitHandle()"
|
|
:label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"
|
|
>
|
|
<el-form-item prop="partyOrgType" label="党组织类型">
|
|
<el-select
|
|
:disabled="dataForm.id || dataForm.orgId ? true : false"
|
|
v-model="dataForm.partyOrgType"
|
|
@change="changePartyOrgType"
|
|
clearable
|
|
placeholder="请选择党组织类型"
|
|
>
|
|
<el-option
|
|
v-for="item in partyOrgTypeList"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="partyOrgName" label="党组织名称">
|
|
<el-input
|
|
v-model="dataForm.partyOrgName"
|
|
placeholder="请输入党组织名称"
|
|
style="width: 300px"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="党组织编码" prop="partyOrgCode">
|
|
<el-input
|
|
v-model="dataForm.partyOrgCode"
|
|
placeholder="党组织编码"
|
|
style="width: 300px"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="dataForm.partyOrgType != '5'"
|
|
prop="agencyId"
|
|
label="行政组织"
|
|
>
|
|
<el-cascader
|
|
style="width: 300px"
|
|
v-model="dataForm.agencyId"
|
|
:options="agencyOrgList"
|
|
placeholder="请选择行政组织"
|
|
:props="{
|
|
emitPath: false,
|
|
checkStrictly: true,
|
|
label: 'name',
|
|
value: 'id',
|
|
children: 'children',
|
|
}"
|
|
:disabled="dataForm.id ? true : false"
|
|
:show-all-levels="false"
|
|
@change="changeAgencyOrg"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="!dataForm.sjdzzName"
|
|
prop="mySelectOrg"
|
|
label="上级党组织"
|
|
>
|
|
<el-cascader
|
|
ref="myOrg"
|
|
style="width: 300px"
|
|
v-model="dataForm.mySelectOrg"
|
|
:options="orgList"
|
|
placeholder="请选择上级党组织"
|
|
:props="{
|
|
checkStrictly: true,
|
|
label: 'partyOrgName',
|
|
value: 'id',
|
|
children: 'children',
|
|
}"
|
|
@change="handleChangeOrg"
|
|
:disabled="dataForm.id || dataForm.orgId ? true : false"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="dataForm.sjdzzName" label="上级党组织">
|
|
<el-input
|
|
:disabled="true"
|
|
v-model="dataForm.sjdzzName"
|
|
style="width: 300px"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="党组织介绍" prop="introduction">
|
|
<el-input
|
|
style="width: 300px"
|
|
v-model="dataForm.introduction"
|
|
type="textarea"
|
|
maxlength="500"
|
|
placeholder="党组织介绍"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="党组织位置" prop="longitude" style="display: block">
|
|
<div class="item_width_1">
|
|
<div class="div_map">
|
|
<div id="app"></div>
|
|
<div style="display: none" id="mapSeach_id" class="div_searchmap">
|
|
<el-input
|
|
class="item_width_4"
|
|
maxlength="50"
|
|
size="mini"
|
|
placeholder="请输入关键字"
|
|
v-model="keyWords"
|
|
>
|
|
</el-input>
|
|
<el-button
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
size="mini"
|
|
@click="handleSearchMap"
|
|
>查询</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div id="lon_lat_id" style="margin-top: 10px; display: none">
|
|
<span>经度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入经度"
|
|
:readonly="true"
|
|
v-model="dataForm.longitude">
|
|
</el-input>
|
|
<span style="margin-left: 20px">纬度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入纬度"
|
|
:readonly="true"
|
|
v-model="dataForm.latitude">
|
|
</el-input>
|
|
</div> -->
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template slot="footer">
|
|
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
|
|
<el-button type="primary" @click="dataFormSubmitHandle()">{{
|
|
$t("confirm")
|
|
}}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
var map;
|
|
var search;
|
|
var markers;
|
|
var infoWindowList;
|
|
var geocoder; // 新建一个正逆地址解析类
|
|
import debounce from "lodash/debounce";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
keyWords: "",
|
|
dataForm: {
|
|
id: "",
|
|
partyOrgType: "", // 党组织类型 0省委,1市委,2区委,3党工委,4党委,5支部
|
|
partyOrgName: "", // 组织名称
|
|
partyOrgCode: "", // 组织编码
|
|
mySelectOrg: "", // 我选中的当前党组织
|
|
orgPid: "", // 党组织的上级ID,没有上级时为0
|
|
orgPids: "", // 党组织的所有上级ID,没有上级时为0
|
|
agencyId: "", // 行政组织id
|
|
agencyPids: "", // 行政组织父ids(英文逗号隔开)
|
|
longitude: "", //经度
|
|
latitude: "", //纬度
|
|
address: "",
|
|
introduction: "", // 党组织介绍
|
|
orgId: "",
|
|
customerId: "",
|
|
staffId: "",
|
|
orgPidName: "",
|
|
agencyName: "",
|
|
pid: "",
|
|
sjdzzName: "", // 新增下级上级党组织名字
|
|
},
|
|
orgListVisible: false,
|
|
agencyListVisible: false,
|
|
orgList: [],
|
|
agencyId: "",
|
|
level: "",
|
|
partyOrgTypeList: [],
|
|
agencyOrgList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.visible = true;
|
|
this.agencyId = localStorage.getItem("agencyId");
|
|
this.dataForm.customerId = localStorage.getItem("customerId");
|
|
this.dataForm.staffId = localStorage.getItem("staffId");
|
|
this.keyWords = "";
|
|
//设置党组织类型
|
|
setTimeout(() => {
|
|
this.$refs["dataForm"].resetFields();
|
|
this.dataForm.latitude = "";
|
|
this.dataForm.agencyId = "";
|
|
if (this.dataForm.id) {
|
|
this.setPartyOrgType();
|
|
this.getInfo();
|
|
} else {
|
|
this.setPartyOrgType();
|
|
this.initMap();
|
|
if (this.dataForm.orgId) {
|
|
this.dataForm.mySelectOrg = this.dataForm.orgId;
|
|
this.dataForm.orgPid = this.dataForm.orgId;
|
|
this.dataForm.orgPids = this.dataForm.orgPids
|
|
? this.dataForm.orgPids + ":" + this.dataForm.orgId
|
|
: this.dataForm.orgId;
|
|
this.dataForm.partyOrgType = this.dataForm._partyOrgType;
|
|
|
|
this.setPartyOrgType_xzxj();
|
|
this.getInfoAgencyLisy();
|
|
} else {
|
|
this.dataForm.mySelectOrg = "";
|
|
}
|
|
}
|
|
}, 50);
|
|
// this.$nextTick(() => {
|
|
|
|
// })
|
|
},
|
|
// 设置组织类型 新增党组织
|
|
setPartyOrgType_xzxj() {
|
|
if (this.dataForm.partyOrgType === "0") {
|
|
// 党组织类型 0省委,1市委,2区委,3党工委,4党委,5支部
|
|
this.dataForm.partyOrgType = "1";
|
|
} else if (this.dataForm.partyOrgType === "1") {
|
|
this.dataForm.partyOrgType = "2";
|
|
} else if (this.dataForm.partyOrgType === "2") {
|
|
this.dataForm.partyOrgType = "3";
|
|
} else if (this.dataForm.partyOrgType === "3") {
|
|
this.dataForm.partyOrgType = "4";
|
|
} else if (this.dataForm.partyOrgType === "4") {
|
|
this.dataForm.partyOrgType = "5";
|
|
}
|
|
},
|
|
//设置组织类型
|
|
setPartyOrgType() {
|
|
// 社区级：community，街道级:street,区县级: district,市级: city 省级:province
|
|
// 党组织类型 0省委,1市委,2区委,3党工委,4党委,5支部
|
|
this.level = localStorage.getItem("level")
|
|
? localStorage.getItem("level")
|
|
: "";
|
|
if (this.level == "province") {
|
|
this.partyOrgTypeList = [
|
|
{ value: "0", name: "省委" },
|
|
{ value: "1", name: "市委" },
|
|
{ value: "2", name: "区委" },
|
|
{ value: "3", name: "党工委" },
|
|
{ value: "4", name: "党委" },
|
|
{ value: "5", name: "支部" },
|
|
];
|
|
} else if (this.level == "city") {
|
|
this.partyOrgTypeList = [
|
|
{ value: "1", name: "市委" },
|
|
{ value: "2", name: "区委" },
|
|
{ value: "3", name: "党工委" },
|
|
{ value: "4", name: "党委" },
|
|
{ value: "5", name: "支部" },
|
|
];
|
|
} else if (this.level == "district") {
|
|
this.partyOrgTypeList = [
|
|
{ value: "2", name: "区委" },
|
|
{ value: "3", name: "党工委" },
|
|
{ value: "4", name: "党委" },
|
|
{ value: "5", name: "支部" },
|
|
];
|
|
} else if (this.level == "street") {
|
|
this.partyOrgTypeList = [
|
|
{ value: "3", name: "党工委" },
|
|
{ value: "4", name: "党委" },
|
|
{ value: "5", name: "支部" },
|
|
];
|
|
} else if (this.level == "community") {
|
|
this.partyOrgTypeList = [
|
|
{ value: "4", name: "党委" },
|
|
{ value: "5", name: "支部" },
|
|
];
|
|
}
|
|
},
|
|
// 选中行政组织
|
|
changeAgencyOrg() {
|
|
if (!this.dataForm.orgId) {
|
|
// 有orgId 证明是从新增下级过来的，新增下级操作 上级党组织不需要查询
|
|
this.getOrgList();
|
|
}
|
|
},
|
|
// 选中组织类型 组织类型为支部时不需要选择行政组织
|
|
changePartyOrgType(value) {
|
|
if (value == "5") {
|
|
// 支部 不选择行政组织
|
|
this.dataForm.agencyId = localStorage.getItem("agencyId");
|
|
this.dataForm.agencyPids = "";
|
|
// 先清空数据
|
|
this.orgList = [];
|
|
(this.dataForm.mySelectOrg = ""), // 我选中的当前党组织
|
|
(this.dataForm.orgPid = ""), // 党组织的上级ID,没有上级时为0
|
|
(this.dataForm.orgPids = "");
|
|
this.getOrgList();
|
|
} else {
|
|
// 先清空数据
|
|
this.agencyOrgList = [];
|
|
this.dataForm.agencyId = "";
|
|
|
|
// 先清空数据
|
|
this.orgList = [];
|
|
(this.dataForm.mySelectOrg = ""), // 我选中的当前党组织
|
|
(this.dataForm.orgPid = ""), // 党组织的上级ID,没有上级时为0
|
|
(this.dataForm.orgPids = "");
|
|
this.getInfoAgencyLisy();
|
|
}
|
|
},
|
|
// 获取上级党组织列表
|
|
getOrgList() {
|
|
if (!this.dataForm.id) {
|
|
// 修改不做处理
|
|
this.orgList = [];
|
|
(this.dataForm.mySelectOrg = ""), // 我选中的当前党组织
|
|
(this.dataForm.orgPid = ""), // 党组织的上级ID,没有上级时为0
|
|
(this.dataForm.orgPids = "");
|
|
}
|
|
this.$http
|
|
.get("/resi/partymember/icPartyOrg/getParentOrgList", {
|
|
params: {
|
|
agencyId: this.dataForm.agencyId,
|
|
partyOrgType: this.dataForm.partyOrgType,
|
|
},
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(
|
|
res.internalMsg ? res.internalMsg : res.msg ? res.msg : "查询失败"
|
|
);
|
|
}
|
|
this.orgList = this.removeEmptyChildren(res.data);
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
removeEmptyChildren(orgArray) {
|
|
orgArray.forEach((orgInfo) => {
|
|
if (orgInfo && orgInfo.children) {
|
|
if (orgInfo.children.length === 0) {
|
|
orgInfo.children = undefined;
|
|
} else {
|
|
this.removeEmptyChildren(orgInfo.children);
|
|
}
|
|
}
|
|
});
|
|
return orgArray;
|
|
},
|
|
// 党组织选中事件
|
|
handleChangeOrg(e) {
|
|
if (this.dataForm.mySelectOrg.length > 0 && this.dataForm.mySelectOrg) {
|
|
this.dataForm.orgPid =
|
|
this.dataForm.mySelectOrg[this.dataForm.mySelectOrg.length - 1];
|
|
this.dataForm.orgPids =
|
|
this.$refs.myOrg.getCheckedNodes()[0].data.orgPids;
|
|
this.dataForm.mySelectOrg.forEach((element) => {
|
|
this.dataForm.orgPids = this.dataForm.orgPids
|
|
? this.dataForm.orgPids + ":" + element
|
|
: element;
|
|
});
|
|
} else {
|
|
this.dataForm.orgPid = "";
|
|
this.dataForm.orgPids = "";
|
|
}
|
|
},
|
|
// 获取信息
|
|
getInfo() {
|
|
this.$http
|
|
.get(`/resi/partymember/icPartyOrg/${this.dataForm.id}`)
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(
|
|
res.internalMsg ? res.internalMsg : res.msg ? res.msg : "查询失败"
|
|
);
|
|
}
|
|
this.dataForm = {
|
|
...this.dataForm,
|
|
...res.data,
|
|
};
|
|
// 党组织组织
|
|
this.dataForm.mySelectOrg = this.dataForm.orgPid;
|
|
// 行政组织
|
|
this.dataForm.agencyId = this.dataForm.agencyId;
|
|
//根据组织类型获取行政组织
|
|
this.getInfoAgencyLisy();
|
|
// 获取上级党组织
|
|
this.getOrgList();
|
|
this.initMap();
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
getInfoAgencyLisy() {
|
|
this.$http
|
|
.get("/gov/org/customeragency/getOrgTreeByUserAndType", {
|
|
params: {
|
|
agencyId: this.dataForm.pid ? this.dataForm.pid : this.agencyId,
|
|
orgType: this.dataForm.partyOrgType,
|
|
},
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(
|
|
res.internalMsg ? res.internalMsg : res.msg ? res.msg : "查询失败"
|
|
);
|
|
}
|
|
this.agencyOrgList = this.removeEmptyChildren(res.data);
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
|
|
initMap() {
|
|
document.getElementById("app").innerHTML = "";
|
|
if (document.getElementById("app")) {
|
|
document.getElementById("mapSeach_id").style.display = "block";
|
|
// document.getElementById('lon_lat_id').style.display = "block"
|
|
}
|
|
|
|
// 定义地图中心点坐标
|
|
var center = new window.TMap.LatLng(
|
|
this.dataForm.latitude ? this.dataForm.latitude : 36.0722275,
|
|
this.dataForm.longitude ? this.dataForm.longitude : 120.38945519
|
|
);
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图
|
|
map = new window.TMap.Map(document.getElementById("app"), {
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
});
|
|
|
|
search = new window.TMap.service.Search({ pageSize: 10 });
|
|
// 新建一个地点搜索类
|
|
markers = new TMap.MultiMarker({
|
|
map: map,
|
|
geometries: [],
|
|
});
|
|
infoWindowList = Array(10);
|
|
|
|
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
|
|
|
|
// 监听地图平移结束
|
|
map.on("panend", () => {
|
|
this.handleMoveCenter();
|
|
});
|
|
this.handleMoveCenter();
|
|
this.convert();
|
|
},
|
|
setMarker(lat, lng) {
|
|
markers.setGeometries([]);
|
|
markers.add([
|
|
{
|
|
id: "4",
|
|
styleId: "marker",
|
|
position: new TMap.LatLng(lat, lng),
|
|
properties: {
|
|
title: "marker4",
|
|
},
|
|
},
|
|
]);
|
|
},
|
|
|
|
handleSearchMap() {
|
|
infoWindowList.forEach((infoWindow) => {
|
|
infoWindow.close();
|
|
});
|
|
infoWindowList.length = 0;
|
|
markers.setGeometries([]);
|
|
// 在地图显示范围内以给定的关键字搜索地点
|
|
search
|
|
.searchNearby({
|
|
keyword: this.keyWords,
|
|
radius: 1000,
|
|
autoExtend: true,
|
|
center: map.getCenter(),
|
|
})
|
|
.then((result) => {
|
|
let { data } = result;
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
const {
|
|
location: { lat, lng },
|
|
} = data[0];
|
|
map.setCenter(new TMap.LatLng(lat, lng));
|
|
this.setMarker(lat, lng);
|
|
this.dataForm.latitude = lat;
|
|
this.dataForm.longitude = lng;
|
|
this.convert();
|
|
} else {
|
|
this.$message.error("未检索到相关位置坐标");
|
|
}
|
|
});
|
|
},
|
|
|
|
handleMoveCenter() {
|
|
//修改地图中心点
|
|
const center = map.getCenter();
|
|
const lat = center.getLat();
|
|
const lng = center.getLng();
|
|
if (lng === 120.38945519) {
|
|
this.dataForm.latitude = "";
|
|
this.dataForm.longitude = "";
|
|
} else {
|
|
this.dataForm.latitude = lat;
|
|
this.dataForm.longitude = lng;
|
|
}
|
|
this.setMarker(lat, lng);
|
|
this.convert(lat, lng);
|
|
},
|
|
|
|
convert(lat, lng) {
|
|
markers.setGeometries([]);
|
|
// var input = document.getElementById('location').value.split(':');
|
|
let location;
|
|
if (lat && lng) {
|
|
location = new TMap.LatLng(lat, lng);
|
|
} else {
|
|
location = new TMap.LatLng(
|
|
this.dataForm.latitude,
|
|
this.dataForm.longitude
|
|
);
|
|
}
|
|
// map.setCenter(location);
|
|
markers.updateGeometries([
|
|
{
|
|
id: "main", // 点标注数据数组
|
|
position: location,
|
|
},
|
|
]);
|
|
// 将给定的坐标位置转换为地址
|
|
geocoder.getAddress({ location: location }).then((result) => {
|
|
this.dataForm.address = result.result.address;
|
|
// 显示搜索到的地址
|
|
});
|
|
},
|
|
// 表单提交
|
|
dataFormSubmitHandle: debounce(
|
|
function () {
|
|
if (!this.dataForm.latitude || !this.dataForm.longitude) {
|
|
return this.$message.error("请滑动地图选择党组织位置");
|
|
}
|
|
if (this.dataForm.orgPids === "0") {
|
|
this.dataForm.orgPids = "";
|
|
}
|
|
this.$refs["dataForm"].validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
this.$http[!this.dataForm.id ? "post" : "put"](
|
|
"/resi/partymember/icPartyOrg/",
|
|
this.dataForm
|
|
)
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(
|
|
res.internalMsg
|
|
? res.internalMsg
|
|
: res.msg
|
|
? res.msg
|
|
: "查询失败"
|
|
);
|
|
}
|
|
this.$message({
|
|
message: this.$t("prompt.success"),
|
|
type: "success",
|
|
duration: 500,
|
|
onClose: () => {
|
|
this.visible = false;
|
|
this.$emit("refreshDataList");
|
|
},
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
});
|
|
},
|
|
1000,
|
|
{ leading: true, trailing: false }
|
|
),
|
|
},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
partyOrgName: [
|
|
{ required: true, message: "党组织名称不能为空", trigger: "blur" },
|
|
],
|
|
mySelectOrg: [
|
|
{ required: true, message: "上级党组织不能为空", trigger: "blur" },
|
|
],
|
|
partyOrgType: [
|
|
{ required: true, message: "党组织类型不能为空", trigger: "blur" },
|
|
],
|
|
agencyId: [
|
|
{ required: true, message: "行政组织不能为空", trigger: "blur" },
|
|
],
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/visual/communityManageForm.scss";
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.item_width_1 {
|
|
width: 560px;
|
|
|
|
/deep/.tox .tox-dialog {
|
|
z-index: 20000;
|
|
}
|
|
}
|
|
|
|
.div_map {
|
|
position: relative;
|
|
}
|
|
.div_searchmap {
|
|
z-index: 5000;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.tinymce_view {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
.text_p {
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
> p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|