Browse Source

飞飞飞

shibei_master
dai 3 years ago
parent
commit
aa4ae983bf
  1. 701
      src/views/modules/base/huji/chusheng/cpts/edit.vue
  2. 38
      src/views/modules/base/huji/chusheng/index.vue

701
src/views/modules/base/huji/chusheng/cpts/edit.vue

@ -4,14 +4,120 @@
<el-form
ref="ref_form"
:inline="true"
:model="dataForm"
:model="fmData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form"
>
<el-form-item
label="组织名称 "
prop="organizationName"
label="所属网格 "
prop="gridId"
label-width="150px"
style="display: block"
>
<el-select
v-model.trim="fmData.gridId"
placeholder="请选择"
size="small"
clearable
class="resi-cell-select"
@change="handleChangeGrid"
style="width: 250px"
>
<el-option
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="所属房屋 "
prop="homeId"
label-width="150px"
style="display: block"
>
<el-select
v-model.trim="fmData.villageId"
placeholder="请选择小区"
size="small"
clearable
class="resi-cell-select"
@clear="handleClearVillage"
@change="handleChangeV"
style="margin-right: 8px; width: 120px"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="fmData.buildId"
placeholder="楼号"
size="small"
clearable
style="margin-right: 8px; width: 120px"
class="resi-cell-select"
:disabled="changeVDisabled"
@clear="handleClearBuild"
@change="handleChangeB"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="fmData.unitId"
:disabled="changeBDisabled"
placeholder="单元"
size="small"
clearable
style="margin-right: 8px; width: 120px"
class="resi-cell-select"
@click="handleClearDan"
@change="handleChangeD"
>
<el-option
v-for="item in optionsD"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model.trim="fmData.homeId"
:disabled="changeDDisabled"
placeholder="房号"
size="small"
clearable
style="width: 120px"
class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="姓名"
prop="name"
label-width="150px"
style="display: block"
>
@ -19,15 +125,15 @@
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入组织名称 "
v-model="dataForm.organizationName"
placeholder="请输入姓名 "
v-model="fmData.name"
>
</el-input>
</el-form-item>
<el-form-item
label="组织人数 "
prop="organizationPersonCount"
label="手机号"
prop="mobile"
label-width="150px"
style="display: block"
>
@ -36,75 +142,84 @@
type="number"
maxlength="50"
show-word-limit
placeholder="请输入组织人数 "
v-model="dataForm.organizationPersonCount"
placeholder="请输入手机号 "
v-model="fmData.mobile"
>
</el-input>
</el-form-item>
<el-form-item
label="组织成员 "
prop="organizationPersonnel"
label="身份证号"
prop="idCard"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
placeholder="请输入身份证号"
v-model="fmData.idCard"
@blur="handleBlurId"
></el-input>
</el-form-item>
<el-form-item
label="性别"
prop="principalName"
label-width="150px"
style="display: block"
>
<div class="m-staffs">
<div
class="item"
:key="'staff' + index"
v-for="(item, index) in dataForm.organizationPersonnel"
<el-select
v-model.trim="fmData.gender"
placeholder="性别"
size="small"
clearable
style="width: 120px"
class="resi-cell-select"
>
<el-option
v-for="item in optionsGender"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="成员姓名"
v-model="item.personName"
/>
<el-input
style="margin-left: 10px"
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="联系电话"
v-model="item.personPhone"
/>
<el-button
style="margin-left: 10px"
size="small"
@click="handleDelStaff(index)"
>删除</el-button
>
</div>
<div class="item-add">
<el-button size="small" @click="handleAddStaff">添加</el-button>
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="出生日期"
prop="birthday"
label-width="150px"
style="display: block"
>
<el-date-picker
v-model="fmData.birthday"
type="date"
placeholder="出生日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="服务事项"
prop="serviceItem"
label="出生地"
prop="birthplace"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
type="textarea"
maxlength="1000"
maxlength="50"
show-word-limit
:rows="3"
placeholder="请输入服务事项,不超过1000字"
v-model="dataForm.serviceItem"
></el-input>
placeholder="请输入出生地"
v-model="fmData.birthplace"
>
</el-input>
</el-form-item>
<el-form-item
label="负责人 "
prop="principalName"
label="出生人父亲姓名"
prop="father"
label-width="150px"
style="display: block"
>
@ -112,15 +227,15 @@
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入负责人 "
v-model="dataForm.principalName"
placeholder="请输入出生人父亲姓名"
v-model="fmData.father"
>
</el-input>
</el-form-item>
<el-form-item
label="联系电话 "
prop="principalPhone"
label="出生人母亲姓名"
prop="mother"
label-width="150px"
style="display: block"
>
@ -128,70 +243,82 @@
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入联系电话 "
v-model="dataForm.principalPhone"
placeholder="请输入出生人母亲姓名"
v-model="fmData.mother"
>
</el-input>
</el-form-item>
<el-form-item
label="创建时间"
prop="organizationCreatedTime"
label="胎次"
prop="count"
label-width="150px"
style="display: block"
>
<el-input-number
v-model="fmData.count"
:min="1"
:max="50"
label="请输入胎次"
></el-input-number>
</el-form-item>
<el-form-item
label="申报户口日期"
prop="reportDate"
label-width="150px"
style="display: block"
>
<el-date-picker
v-model="dataForm.organizationCreatedTime"
placeholder="创建时间"
v-model="fmData.reportDate"
placeholder="申报户口日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="位置坐标"
prop="longitude"
label="户主姓名"
prop="houseHolderName"
label-width="150px"
style="display: block"
>
<div style="width: 500px">
<el-input
class="item_width_4"
maxlength="50"
placeholder="请输入关键字"
v-model="dataForm.address"
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入户主姓名"
v-model="fmData.houseHolderName"
>
</el-input>
</el-form-item>
<el-form-item
label="与户主关系"
prop="houseHolderRelation"
label-width="150px"
style="display: block"
>
<el-select
v-model.trim="fmData.houseHolderRelation"
placeholder="与户主关系"
size="small"
clearable
style="width: 120px"
class="resi-cell-select"
>
<el-option
v-for="item in optionsRelation"
:key="item.value"
:label="item.label"
:value="item.value"
>
<div id="app" class="div_map"></div>
<div style="margin-top: 10px">
<span>经度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
>
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
>
</el-input>
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="false"
label="备注"
prop="remark"
label-width="150px"
@ -204,7 +331,7 @@
show-word-limit
:rows="3"
placeholder="请输入备注,不超过500字"
v-model="dataForm.remark"
v-model="fmData.remark"
></el-input>
</el-form-item>
</el-form>
@ -228,6 +355,8 @@ import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // Loading
import { requestPost } from "@/js/dai/request";
import formVltHelper from "dai-js/tools/formVltHelper";
import { computedCard } from "@/utils/index";
import { isCard, isMobile } from "@/utils/validate";
var map;
var search;
@ -235,6 +364,28 @@ var markers;
var infoWindowList;
let loading; //
function iniFmData() {
return {
gridId: "",
villageId: "",
buildId: "",
unitId: "",
homeId: "",
name: "",
mobile: "",
idCard: "",
welfare: "", //01
gender: "",
birthplace: "",
father: "",
mother: "",
count: "",
reportDate: "",
houseHolderName: "",
houseHolderRelation: "",
};
}
export default {
data() {
return {
@ -242,149 +393,243 @@ export default {
btnDisable: false,
orgId: "",
dataForm: {
organizationName: "",
serviceItem: "",
organizationPersonCount: "",
principalName: "",
principalPhone: "",
organizationCreatedTime: "",
address: "",
remark: "",
longitude: "",
latitude: "",
organizationPersonnel: [],
},
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
optionsG: [],
optionsGender: [
{
value: "1",
label: "男",
},
{
value: "2",
label: "女",
},
],
optionsRelation: [],
fmData: iniFmData(),
};
},
components: {},
computed: {
dataRule() {
let checkIdCard = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入身份证"));
} else {
if (!isCard(value)) {
callback(new Error("身份证号格式不正确"));
}
callback();
}
};
return {
organizationName: [
{ required: true, message: "组织名称 不能为空", trigger: "blur" },
{
min: 1,
max: 50,
message: "组织名称 长度在 1 到 50个字符",
trigger: "blur",
},
],
organizationPersonCount: [
{ required: true, message: "组织人数不能为空", trigger: "blur" },
],
serviceItem: [
{ required: true, message: "服务事项不能为空", trigger: "blur" },
gridId: [
{ required: true, message: "所属网格不能为空", trigger: "blur" },
],
principalName: [
{ required: true, message: "负责人不能为空", trigger: "blur" },
homeId: [
{ required: true, message: "所属房屋不能为空", trigger: "blur" },
],
principalPhone: [
{ required: true, message: "联系电话不能为空", trigger: "blur" },
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
idCard: [
{ required: true, message: "身份证号不能为空", trigger: "blur" },
{ required: true, validator: checkIdCard, trigger: "blur" },
],
longitude: [
{ required: true, message: "位置坐标不能为空", trigger: "blur" },
birthplace: [
{ required: true, message: "出生地不能为空", trigger: "blur" },
],
};
},
changeVDisabled() {
return !this.fmData.villageId;
},
changeBDisabled() {
return !this.fmData.buildId;
},
changeDDisabled() {
return !this.fmData.unitId;
},
},
props: {},
watch: {},
async mounted() {
this.initMap();
this.getGridList();
this.getValiheList();
this.getRelationList();
},
methods: {
handleAddStaff() {
this.dataForm.organizationPersonnel = [
...this.dataForm.organizationPersonnel,
{ personName: "", personPhone: "" },
];
handleBlurId() {
console.log("33333333333333333333");
const { sex, birth, age } = computedCard(this.fmData.idCard);
this.fmData.birthday = birth;
this.fmData.gender = sex == 1 ? "1" : "2";
},
handleDelStaff(index) {
const { organizationPersonnel } = this.dataForm;
organizationPersonnel.splice(index, 1);
this.dataForm.organizationPersonnel = organizationPersonnel;
},
// init
initMap() {
//
var center = new window.TMap.LatLng(36.0722275, 120.38945519);
// map TMap.Map()
map = new window.TMap.Map(document.getElementById("app"), {
center: center, //
zoom: 17.2, //
pitch: 43.5, //
rotation: 45, //
});
search = new window.TMap.service.Search({ pageSize: 10 });
//
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
//
map.on("panend", () => {
this.handleMoveCenter();
});
this.handleMoveCenter();
handleClearVillage() {
this.fmData.buildId = "";
this.fmData.homeId = "";
},
handleClearBuild() {
this.fmData.buildId = "";
this.fmData.unitId = "";
this.fmData.homeId = "";
},
handleClearDan() {
this.fmData.unitId = "";
this.fmData.homeId = "";
},
handleChangeGrid(val) {
console.log("val", val);
this.fmData.villageId = "";
this.fmData.buildId = "";
this.fmData.unitId = "";
this.fmData.homeId = "";
this.getValiheList();
},
handleChangeV(val) {
console.log("val", val);
this.fmData.buildId = "";
this.fmData.unitId = "";
this.fmData.homeId = "";
this.getBuildList();
},
handleChangeB(val) {
console.log("val", val);
this.fmData.unitId = "";
this.fmData.homeId = "";
this.getUniList();
},
handleChangeD(val) {
console.log("val", val);
this.fmData.homeId = "";
this.getHouseList();
},
setMarker(lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
getRelationList() {
const { user } = this.$store.state;
this.$http
.post("/sys/dict/data/relationship", {
formCode: "resi_base_info",
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log("获取查询详情成功", res.data);
this.optionsRelation = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
handleSearchMap() {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
//
search
.searchRectangle({
keyword: this.dataForm.address,
bounds: map.getBounds(),
getGridList() {
const { user } = this.$store.state;
this.$http
.post("/gov/org/customergrid/gridoption", {
agencyId: user.agencyId,
purpose: "query",
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log("获取查询详情成功", res.data);
this.optionsG = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
getValiheList() {
const { user } = this.$store.state;
this.$http
.post("/gov/org/icneighborhood/neighborhoodoption", {
gridId: this.fmData.gridId,
agencyId: "",
// agencyId: user.agencyId
})
.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;
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
this.$message.error("未检索到相关位置坐标");
console.log("获取查询详情成功", res.data);
this.optionsV = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
getBuildList() {
this.$http
.post("/gov/org/icbuilding/buildingoption", {
neighborHoodId: this.fmData.villageId,
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log("获取查询详情成功", res.data);
this.optionsB = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
getUniList() {
this.$http
.post("/gov/org/icbuildingunit/unitoption", {
buildingId: this.fmData.buildId,
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log("获取查询详情成功", res.data);
this.optionsD = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
getHouseList() {
this.$http
.post("/gov/org/ichouse/houseoption", { unitId: this.fmData.unitId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log("获取查询详情成功", res.data);
this.optionsH = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
handleMoveCenter() {
//
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
handleAddStaff() {
this.fmData.organizationPersonnel = [
...this.fmData.organizationPersonnel,
{ personName: "", personPhone: "" },
];
},
handleDelStaff(index) {
const { organizationPersonnel } = this.fmData;
organizationPersonnel.splice(index, 1);
this.fmData.organizationPersonnel = organizationPersonnel;
},
async initForm(type, row) {
@ -393,9 +638,7 @@ export default {
this.formType = type;
console.log(row);
if (row) {
this.dataForm = { ...this.dataForm, ...row };
this.orgId = this.dataForm.orgId;
map.setCenter(new TMap.LatLng(row.latitude, row.longitude));
this.fmData = { ...this.fmData, ...row };
}
},
@ -409,7 +652,7 @@ export default {
app.util.validateRule(messageObj);
this.btnDisable = false;
} else {
if (!formVltHelper.userOrMobile(this.dataForm.principalPhone)) {
if (!formVltHelper.userOrMobile(this.fmData.mobile)) {
return this.$message({
type: "error",
message: "手机号格式有误",
@ -423,16 +666,14 @@ export default {
async submit() {
let url = "";
if (this.formType === "add") {
url = "/heart/iccommunityselforganization/addcommunityselforganization";
// url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
url = "/epmetuser/birth/save";
} else {
url =
"/heart/iccommunityselforganization/editcommunityselforganization";
url = "/epmetuser/birth/edit";
this.dataForm.orgId = this.orgId;
this.fmData.orgId = this.orgId;
}
const { data, code, msg } = await requestPost(url, this.dataForm);
const { data, code, msg } = await requestPost(url, this.fmData);
if (code === 0) {
this.$message({
@ -454,19 +695,7 @@ export default {
},
resetData() {
this.orgId = "";
this.dataForm = {
organizationName: "",
serviceItem: "",
organizationPersonCount: "",
principalName: "",
principalPhone: "",
organizationCreatedTime: "",
address: "",
remark: "",
longitude: "",
latitude: "",
organizationPersonnel: [],
};
this.fmData = iniFmData();
},
//
startLoading() {

38
src/views/modules/base/huji/chusheng/index.vue

@ -195,7 +195,7 @@
<el-card class="resi-card-table">
<div class="resi-row-btn">
<el-button class="diy-button--add" size="small" @click="handleAdd"
>新增</el-button
>出生登记</el-button
>
<el-button
v-if="false"
@ -238,7 +238,13 @@
class="resi-table"
:height="maxTableHeight"
>
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
<el-table-column
label="序号"
fixed="left"
type="index"
align="center"
width="50"
/>
<el-table-column prop="name" fixed="left" label="姓名" align="center">
<template slot-scope="scope">
@ -284,7 +290,11 @@
<el-table-column prop="birthplace" align="center" label="出生地">
</el-table-column>
<el-table-column prop="parentName" align="center" label="出生人父/母姓名">
<el-table-column
prop="parentName"
align="center"
label="出生人父/母姓名"
>
</el-table-column>
<el-table-column prop="count" align="center" label="胎次">
@ -387,7 +397,7 @@ export default {
openSearch: false,
formShow: false,
formTitle: "组织信息",
formTitle: "出生登记",
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
@ -474,17 +484,17 @@ export default {
},
methods: {
handleClearVillage() {
this.form.buildId = "";
this.form.homeId = "";
this.fmData.buildId = "";
this.fmData.homeId = "";
},
handleClearBuild() {
this.form.buildId = "";
this.form.unitId = "";
this.form.homeId = "";
this.fmData.buildId = "";
this.fmData.unitId = "";
this.fmData.homeId = "";
},
handleClearDan() {
this.form.unitId = "";
this.form.homeId = "";
this.fmData.unitId = "";
this.fmData.homeId = "";
},
handleChangeGrid(val) {
console.log("val", val);
@ -882,14 +892,14 @@ export default {
overflow: visible;
}
.resi-cell {
.demo-form-inline .resi-cell {
display: flex;
align-items: center;
margin-bottom: 20px;
// margin-bottom: 20px;
.resi-cell-label {
flex-shrink: 0;
// min-width: 70px;
min-width: 0;
box-sizing: border-box;
margin-right: 15px;
// text-align: right;

Loading…
Cancel
Save