Browse Source

联建单位增删改查基本样式修改

feature
mk 3 years ago
parent
commit
2e7e1c440f
  1. 954
      src/views/modules/communityParty/regionalParty/units.vue
  2. 119
      src/views/modules/communityParty/regionalParty/unitsDetail.vue
  3. 544
      src/views/modules/communityParty/regionalParty/unitsForm.vue
  4. 2
      src/views/modules/shequzhili/xiangmu/cpts/project-info.vue

954
src/views/modules/communityParty/regionalParty/units.vue

File diff suppressed because it is too large

119
src/views/modules/communityParty/regionalParty/unitsDetail.vue

@ -1,119 +1,105 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<div v-if="initLoading"
class="m-detail-main">
<div v-if="initLoading" class="m-detail-main">
<div class="m-info">
<div class="m-info-prop">
<span class="u-info-title-2">单位名称</span>
<span>{{ formData.unitName||'--' }}</span>
<span>{{ formData.unitName || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">分类</span>
<span>{{ formData.type||'--' }}</span>
<span>{{ formData.type || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">服务事项</span>
<span>{{ formData.serviceMatterList.join(',') }}</span>
<span>{{ formData.serviceMatterList.join(",") }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">联系人</span>
<span>{{ formData.contact||'--' }}</span>
<span>{{ formData.contact || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">联系电话</span>
<span>{{ formData.contactMobile||'--' }}</span>
<span>{{ formData.contactMobile || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">在职党员</span>
<span>{{ formData.memberCount||'--' }}</span>
<span>{{ formData.memberCount || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">备注</span>
<span>{{ formData.remark||'--' }}</span>
<span>{{ formData.remark || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">地理位置</span>
<span>{{ formData.address||'--' }}</span>
<span>{{ formData.address || "--" }}</span>
</div>
<div class="m-info-prop">
<span class="u-info-title-2">地图位置</span>
<div class="div_map">
<div id="app_detail_unit"></div>
</div>
</div>
</div>
</div>
</div>
<div class="div-btn">
<el-button size="small"
@click="handleCancle"> </el-button>
<div class="m-detail-btn">
<el-button size="small" @click="handleCancle"> </el-button>
</div>
</div>
</template>
<script>
import { Loading } from 'element-ui' // Loading
import nextTick from 'dai-js/tools/nextTick'
import { Loading } from "element-ui"; // Loading
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
var map
var search
var markers
var infoWindowList
var geocoder //
var map;
var search;
var markers;
var infoWindowList;
var geocoder; //
let loading //
let loading; //
export default {
data () {
data() {
return {
formData: {},
initLoading: false,
}
};
},
components: {},
created () {
},
created() {},
methods: {
handleCancle () {
this.diaDestroy()
this.$emit('diaDetailClose')
handleCancle() {
this.diaDestroy();
this.$emit("diaDetailClose");
},
diaDestroy () {
diaDestroy() {
if (map) {
// map.destroy()
}
},
async initForm (row) {
this.startLoading()
this.formData = JSON.parse(JSON.stringify(row))
this.initLoading = true
console.log(this.formData)
async initForm(row) {
this.startLoading();
this.formData = JSON.parse(JSON.stringify(row));
this.initLoading = true;
console.log(this.formData);
// await nextTick(200)
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
console.log("lat" + latitude + ",lon" + longitude);
if (this.formData.latitude && this.formData.longitude) {
latitude = this.formData.latitude
longitude = this.formData.longitude
latitude = this.formData.latitude;
longitude = this.formData.longitude;
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
@ -121,23 +107,18 @@ export default {
}
this.$nextTick(() => {
if (!map) {
this.initMap(latitude, longitude)
this.initMap(latitude, longitude);
} else {
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}
});
})
this.endLoading()
this.endLoading();
},
// init
initMap (latitude, longitude) {
initMap(latitude, longitude) {
map = new daiMap(
document.getElementById("app_detail_unit"),
{ latitude, longitude },
@ -155,30 +136,26 @@ export default {
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
//
startLoading () {
startLoading() {
loading = Loading.service({
lock: true, //
text: '正在加载……', //
background: 'rgba(0,0,0,.7)' //
})
text: "正在加载……", //
background: "rgba(0,0,0,.7)", //
});
},
//
endLoading () {
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
loading.close();
}
}
},
computed: {
},
},
props: {
}
}
computed: {},
props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";

544
src/views/modules/communityParty/regionalParty/unitsForm.vue

@ -1,287 +1,308 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="单位名称"
prop="unitName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入单位名称"
v-model="formData.unitName">
<el-form
ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form"
>
<el-form-item
label="单位名称"
prop="unitName"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入单位名称"
v-model="formData.unitName"
>
</el-input>
</el-form-item>
<el-form-item label="分类"
prop="type"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
v-model="formData.type"
placeholder="请选择"
filterable
clearable>
<el-option v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value">
<el-form-item
label="分类"
prop="type"
label-width="150px"
style="display: block"
>
<el-select
class="item_width_1"
v-model="formData.type"
placeholder="请选择"
filterable
clearable
>
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="服务事项"
prop="serviceMatterList"
label-width="150px"
style="display: block">
<el-checkbox-group class="item_width_1"
style="display:flex;flex-wrap:wrap"
v-model="formData.serviceMatterList">
<el-checkbox v-for="item in serviceList"
:key="item.value"
:label="item.value">{{item.label}}</el-checkbox>
<el-form-item
label="服务事项"
prop="serviceMatterList"
label-width="150px"
style="display: block"
>
<el-checkbox-group
class="item_width_1"
style="display: flex; flex-wrap: wrap"
v-model="formData.serviceMatterList"
>
<el-checkbox
v-for="item in serviceList"
:key="item.value"
:label="item.value"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-form-item label="联系人"
prop="contact"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人姓名"
v-model="formData.contact">
<el-form-item
label="联系人"
prop="contact"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
placeholder="请输入联系人姓名"
v-model="formData.contact"
>
</el-input>
</el-form-item>
<el-form-item label="联系电话"
prop="contactMobile"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人电话"
v-model="formData.contactMobile">
<el-form-item
label="联系电话"
prop="contactMobile"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
placeholder="请输入联系人电话"
v-model="formData.contactMobile"
>
</el-input>
</el-form-item>
<el-form-item label="在职党员"
style="display: block"
prop="memberCount"
label-width="150px">
<el-input-number class="item_width_4"
v-model="formData.memberCount"
:min="0"
:max="9999"
label="在职党员"></el-input-number>
<el-form-item
label="在职党员"
style="display: block"
prop="memberCount"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="formData.memberCount"
:min="0"
:max="9999"
label="在职党员"
></el-input-number>
</el-form-item>
<el-form-item label="备注"
prop="remark"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder="请输入备注,不超过500字"
v-model="formData.remark"></el-input>
<el-form-item
label="备注"
prop="remark"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder="请输入备注,不超过500字"
v-model="formData.remark"
></el-input>
</el-form-item>
<el-form-item label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
<el-form-item
label="地图位置"
prop="longitude"
label-width="150px"
style="display: block"
>
<div style="width: 500px">
<el-select v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
<el-select
v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="(item, index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div id="app_unit"
class="div_map"></div>
<div id="app_unit" class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="详细地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
v-model="formData.address">
</el-input>
<el-form-item
label="详细地址"
prop="address"
label-width="150px"
style="display: block"
>
<el-input class="item_width_1" v-model="formData.address"> </el-input>
</el-form-item>
</el-form>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"
> </el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // Loading
import { requestPost } from '@/js/dai/request'
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // Loading
import { requestPost } from "@/js/dai/request";
import daiMap from "@/utils/dai-map";
var map
var map;
let loading //
let loading; //
export default {
data () {
data() {
let initFormData = () => {
let _form = {
unitName: '',
unitName: "",
serviceMatterList: [],
type: '',
contact: '',
contactMobile: '',
type: "",
contact: "",
contactMobile: "",
memberCount: 0,
remark: '', //500
address: '', //
remark: "", //500
address: "", //
longitude: this.$store.state.user.longitude, //
latitude: this.$store.state.user.latitude//
}
latitude: this.$store.state.user.latitude, //
};
return _form
}
return _form;
};
return {
formType: 'add', // addeditdetail
formType: "add", // addeditdetail
searchOptions: [],
searchValue: '',
searchValue: "",
resultList: [],
loading: false,
btnDisable: false,
unitId: '',
keyWords: '',
unitId: "",
keyWords: "",
formData: initFormData(),
serviceList: [],//list
}
serviceList: [], //list
};
},
components: {},
mounted () {
mounted() {
// this.initMap()
},
methods: {
async initForm (type, unitId) {
this.startLoading()
async initForm(type, unitId) {
this.startLoading();
this.$refs.ref_form.resetFields();
//
await this.loadService()
await this.loadService();
let { latitude, longitude } = this.$store.state.user;
this.formType = type
this.formType = type;
if (unitId) {
this.unitId = unitId
this.formData.id = unitId
await this.loadFormData()
this.unitId = unitId;
this.formData.id = unitId;
await this.loadFormData();
} else {
this.formData.latitude = latitude
this.formData.longitude = longitude
this.formData.latitude = latitude;
this.formData.longitude = longitude;
}
// if (!map) {
this.initMap(this.formData.latitude, this.formData.longitude);
// }
this.endLoading()
this.endLoading();
},
//
async loadService () {
const url = "/actual/base/serviceitem/dict-list"
async loadService() {
const url = "/actual/base/serviceitem/dict-list";
let params = {
type: 'usable'
type: "usable",
// parentCategoryCode: '1010'
}
};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.serviceList = data
this.serviceList = data;
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
//
async loadFormData () {
const url = '/heart/icpartyunit/detail'
async loadFormData() {
const url = "/actual/base/icpartyunit/detail";
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
let params = {
id: this.unitId
}
id: this.unitId,
};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) {
data.serviceMatterList = []
data.serviceMatterList = [];
}
this.formData = { ...data }
this.formData = { ...data };
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
async handleComfirm () {
this.btnDisable = true
async handleComfirm() {
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
this.btnDisable = false;
}, 10000);
this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
app.util.validateRule(messageObj);
this.btnDisable = false;
} else {
this.addUnit()
this.addUnit();
}
})
});
},
async addUnit () {
async addUnit() {
// const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //
// if (regPhone.test(this.formData.contactMobile) === false) {
// this.btnDisable = false
@ -292,39 +313,36 @@ export default {
// return false;
// }
let url = '/heart/icpartyunit/save'
let url = "/actual/base/icpartyunit/save";
// let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/save"
// if (this.formType === 'edit') {
// this.formData.id = this.unitId
// }
// }
const { data, code, msg } = await requestPost(url, this.formData)
const { data, code, msg } = await requestPost(url, this.formData);
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
type: "success",
message: "操作成功",
});
this.resetData();
this.$emit('dialogOk')
this.btnDisable = false
this.$emit("dialogOk");
this.btnDisable = false;
} else {
this.btnDisable = false
this.$message.error(msg)
this.btnDisable = false;
this.$message.error(msg);
}
},
handleCancle () {
this.resetData()
this.$emit('dialogCancle')
handleCancle() {
this.resetData();
this.$emit("dialogCancle");
},
// init
initMap (latitude, longitude) {
initMap(latitude, longitude) {
map = new daiMap(
document.getElementById("app_unit"),
{ latitude, longitude },
@ -342,11 +360,9 @@ export default {
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
async handleMoveCenter () {
async handleMoveCenter() {
//
const { lat, lng } = map.getCenter();
this.formData.latitude = lat;
@ -355,133 +371,125 @@ export default {
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.formData.address = data.address
this.searchValue = data.address
this.searchOptions = []
this.formData.address = data.address;
this.searchValue = data.address;
this.searchOptions = [];
}
},
async remoteMethod (query) {
if (query !== '') {
async remoteMethod(query) {
if (query !== "") {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
this.resultList = [];
if (msg == "success" && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
this.resultList = data.resultList;
this.searchOptions = this.resultList.map((item) => {
return {
value: `${item.hotPointID}`,
label: `${item.address + item.name}`,
};
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
value: "0",
label: "未检索到结果",
},
];
}
} else {
this.searchOptions = [];
}
},
handleClickKey (index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
handleClickKey(index) {
let selPosition = this.resultList[index];
let lonlat = selPosition.lonlat.split(" ");
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.formData.latitude = lonlat[1];
this.formData.longitude = lonlat[0];
this.formData.address = selPosition.address + selPosition.name
this.formData.address = selPosition.address + selPosition.name;
},
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
resetData() {
this.searchValue = "";
this.searchOptions = [];
this.resultList = [];
if (map) {
console.log(map)
console.log(map);
// map.destroy()
}
this.unitId = ''
this.keyWords = ''
this.unitId = "";
this.keyWords = "";
this.formData = {
unitName: '',
unitName: "",
serviceMatterList: [],
type: '',
contact: '',
contactMobile: '',
type: "",
contact: "",
contactMobile: "",
memberCount: 0,
remark: '', //500
address: '', //
remark: "", //500
address: "", //
longitude: this.$store.state.user.longitude, //
latitude: this.$store.state.user.latitude//
}
latitude: this.$store.state.user.latitude, //
};
},
//
startLoading () {
startLoading() {
loading = Loading.service({
lock: true, //
text: '正在加载……', //
background: 'rgba(0,0,0,.7)' //
})
text: "正在加载……", //
background: "rgba(0,0,0,.7)", //
});
},
//
endLoading () {
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
loading.close();
}
}
},
},
computed: {
dataRule () {
dataRule() {
return {
unitName: [
{ required: true, message: '单位名称不能为空', trigger: 'blur' },
],
type: [
{ required: true, message: '分类不能为空', trigger: 'blur' }
{ required: true, message: "单位名称不能为空", trigger: "blur" },
],
type: [{ required: true, message: "分类不能为空", trigger: "blur" }],
contact: [
{ required: true, message: '联系人不能为空', trigger: 'blur' }
{ required: true, message: "联系人不能为空", trigger: "blur" },
],
contactMobile: [
{ required: true, message: '联系电话不能为空', trigger: 'blur' }
{ required: true, message: "联系电话不能为空", trigger: "blur" },
],
memberCount: [
{ required: true, message: '在职党员数不能为空', trigger: 'blur' }
{ required: true, message: "在职党员数不能为空", trigger: "blur" },
],
address: [
{ required: true, message: '详细地址不能为空', trigger: 'blur' }
{ required: true, message: "详细地址不能为空", trigger: "blur" },
],
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
{ required: true, message: "坐标不能为空", trigger: "blur" },
],
};
},
},
props: {
typeList: {
type: Array,
default: []
default: [],
},
}
}
},
};
</script>
<style scoped>
.div_map {

2
src/views/modules/shequzhili/xiangmu/cpts/project-info.vue

@ -15,6 +15,8 @@
<div :class="['m-info-prop',{'m-info-prop-vis':source==='visiual'}]">
<span class="u-info-title-2">项目背景</span>
<span>{{ projectInfo.backGround || "--" }}</span>
<a style="cursor: pointer"
@click="handleWatchOrigin">查看项目来源</a>
</div>
<div :class="['m-info-prop',{'m-info-prop-vis':source==='visiual'}]">
<span class="u-info-title-2">项目方案</span>

Loading…
Cancel
Save