7 changed files with 2168 additions and 4 deletions
@ -0,0 +1,559 @@ |
|||
<template> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div class="div_table"> |
|||
<el-button type="green" |
|||
size="small" |
|||
@click="handleAdd">新增</el-button> |
|||
|
|||
<el-table class="table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%"> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="year" |
|||
header-align="center" |
|||
align="center" |
|||
label="年份" |
|||
min-width="120"> |
|||
|
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit" |
|||
class="picker_year"> |
|||
<!-- <el-select class="item_width_2" |
|||
v-model="scope.row.year" |
|||
placeholder="请选择"> |
|||
<el-option v-for="(item,index) in yearList" |
|||
@click.native="hancleChangeYear(scope.row,index,scope.$index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
<el-date-picker v-model="scope.row.year" |
|||
type="year" |
|||
format="yyyy" |
|||
value-format="yyyy" |
|||
placeholder="选择年"> |
|||
</el-date-picker> |
|||
</div> |
|||
<span v-else>{{scope.row.year}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="type" |
|||
header-align="center" |
|||
align="center" |
|||
label="类型" |
|||
min-width="90"> |
|||
|
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit"> |
|||
<el-select class="item_width_2" |
|||
v-model="scope.row.type" |
|||
placeholder="请选择"> |
|||
<el-option v-for="(item,index) in typeList" |
|||
@click.native="hancleChangeType(scope.row,index,scope.$index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<span v-else>{{scope.row.typeShow}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="monthQuarter" |
|||
header-align="center" |
|||
align="center" |
|||
label="时间" |
|||
min-width="100"> |
|||
|
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit"> |
|||
<el-select class="item_width_3" |
|||
v-model="scope.row.monthQuarter" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in scope.row.timeList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<span v-else>{{scope.row.monthQuarterName}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="status" |
|||
header-align="center" |
|||
align="center" |
|||
label="完成情况" |
|||
min-width="90"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit"> |
|||
<el-select class="item_width_2" |
|||
v-model="scope.row.status" |
|||
placeholder="全部"> |
|||
<el-option v-for="item in statusList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<span v-else>{{scope.row.status==='1'?'已完成':'未完成'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="score" |
|||
header-align="center" |
|||
align="center" |
|||
label="评分（百分制）" |
|||
min-width="120"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit"> |
|||
<!-- <el-input class="item_width_2" |
|||
v-model.number="scope.row.score" |
|||
onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>--> |
|||
<el-input-number class="item_width_1" |
|||
v-model="scope.row.score" |
|||
:precision="1" |
|||
:controls="false" |
|||
:max="100"></el-input-number> |
|||
</div> |
|||
<span v-else>{{scope.row.score}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="120" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="scope.row.isEdit" |
|||
type="text" |
|||
style="color:#00A7A9;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleComfirm(scope.row,scope.$index)">保存</el-button> |
|||
<el-button v-if="!scope.row.isEdit" |
|||
type="text" |
|||
style="color:#1C6AFD;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleEdit(scope.row,scope.$index)">修改</el-button> |
|||
|
|||
<el-button type="text" |
|||
style="color:#D51010;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDelete(scope.row,scope.$index)">删除</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</div> |
|||
<!-- <div class="div_btn"> |
|||
<el-button @click="handleCancle">取 消</el-button> |
|||
|
|||
</div> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
tableLoading: false, |
|||
unitId: '', |
|||
typeList: [ |
|||
{ |
|||
value: 'quarter', |
|||
label: '季度' |
|||
}, |
|||
{ |
|||
value: 'monthly', |
|||
label: '月度' |
|||
} |
|||
], |
|||
|
|||
yearList: [], |
|||
quarterList: [ |
|||
{ |
|||
value: 'Q1', |
|||
label: '第一季度' |
|||
}, |
|||
{ |
|||
value: 'Q2', |
|||
label: '第二季度' |
|||
}, |
|||
{ |
|||
value: 'Q3', |
|||
label: '第三季度' |
|||
}, |
|||
{ |
|||
value: 'Q4', |
|||
label: '第四季度' |
|||
}, |
|||
], |
|||
monthlist: [], |
|||
timeList: [], |
|||
|
|||
statusList: [ |
|||
{ |
|||
value: '1', |
|||
label: '已完成' |
|||
}, |
|||
{ |
|||
value: '0', |
|||
label: '未完成' |
|||
}, |
|||
], |
|||
|
|||
tableData: [], |
|||
|
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initTable (row) { |
|||
this.unitId = row.id |
|||
//初始化时间 |
|||
this.initData() |
|||
|
|||
await this.loadTable() |
|||
|
|||
}, |
|||
|
|||
//初始化时间 |
|||
initData () { |
|||
let today = new Date((new Date).getTime()) |
|||
let year = today.getFullYear() |
|||
this.yearList = [] |
|||
for (let i = 0; i < 20; i++) { |
|||
let obj = { |
|||
label: (year - i) + '', |
|||
value: (year - i) + '', |
|||
} |
|||
|
|||
this.yearList.push(obj) |
|||
} |
|||
this.monthlist = [] |
|||
for (let i = 1; i < 13; i++) { |
|||
let m = i |
|||
if (m < 10) { |
|||
m = '0' + m |
|||
} |
|||
let obj = { |
|||
label: m + '月', |
|||
value: m, |
|||
} |
|||
|
|||
this.monthlist.push(obj) |
|||
} |
|||
}, |
|||
|
|||
|
|||
//切换类型 |
|||
async hancleChangeType (row, index, tableIndex) { |
|||
let empetArray = [] |
|||
this.tableData[tableIndex].timeList = [...empetArray] |
|||
let rowData = JSON.parse(JSON.stringify(row)) |
|||
rowData.monthQuarter = '' |
|||
|
|||
this.$set(this.tableData, tableIndex, rowData) |
|||
|
|||
if (row.type === 'monthly') { |
|||
this.tableData[tableIndex].timeList = [...this.monthlist] |
|||
} else if (row.type === 'quarter') { |
|||
this.tableData[tableIndex].timeList = [...this.quarterList] |
|||
} |
|||
}, |
|||
|
|||
//切换年份 row行数据 index timeList的索引 tableIndex 行索引 |
|||
hancleChangeYear (row, index, tableIndex) { |
|||
|
|||
}, |
|||
|
|||
|
|||
//加载form |
|||
async loadTable () { |
|||
|
|||
this.tableLoading = true |
|||
const url = '/heart/icpartyunitcompletion/list' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunitcompletion/list' |
|||
let params = { |
|||
unitId: this.unitId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
|
|||
if (data.list && data.list.length > 0) { |
|||
|
|||
data.list.forEach(item => { |
|||
item.isEdit = false |
|||
item.timeList = [] |
|||
item.typeShow = item.type === 'monthly' ? '月度' : '季度' |
|||
|
|||
}); |
|||
|
|||
this.tableData = [...data.list] |
|||
} else { |
|||
this.tableData = [] |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleAdd () { |
|||
let obj = { |
|||
|
|||
isEdit: true,//是否编辑 |
|||
type: '', |
|||
typeShow: '', |
|||
year: '', |
|||
monthQuarter: '', |
|||
timeShow: '', |
|||
status: '', |
|||
unitId: '', |
|||
score: undefined |
|||
} |
|||
this.tableData.push(obj) |
|||
}, |
|||
|
|||
async handleEdit (row, tableIndex) { |
|||
|
|||
let rowData = JSON.parse(JSON.stringify(row)) |
|||
rowData.isEdit = true |
|||
|
|||
this.$set(this.tableData, tableIndex, rowData) |
|||
if (row.type === 'monthly') { |
|||
this.tableData[tableIndex].timeList = [...this.monthlist] |
|||
} else if (row.type === 'quarter') { |
|||
this.tableData[tableIndex].timeList = [...this.quarterList] |
|||
} |
|||
}, |
|||
|
|||
|
|||
async handleComfirm (row, tableIndex) { |
|||
let valiMsg = this.validata(row) |
|||
if (valiMsg) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: valiMsg |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
this.addReview(row, tableIndex) |
|||
|
|||
}, |
|||
async addReview (row, tableIndex) { |
|||
|
|||
let url = "/heart/icpartyunitcompletion/save" |
|||
|
|||
// let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunitcompletion/save" |
|||
|
|||
let params = JSON.parse(JSON.stringify(row)) |
|||
|
|||
params.unitId = this.unitId |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
|
|||
row.isEdit = false |
|||
row.typeShow = row.type === 'monthly' ? '月度' : '季度' |
|||
|
|||
if (row.type === 'monthly') { |
|||
row.monthQuarterName = row.monthQuarter + '月' |
|||
} else { |
|||
|
|||
for (let index in row.timeList) { |
|||
|
|||
if (row.timeList[index].value === row.monthQuarter) { |
|||
row.monthQuarterName = row.timeList[index].label |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
this.$set(this.tableData, tableIndex, row) |
|||
|
|||
} else { |
|||
|
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
validata (row) { |
|||
|
|||
let message = '' |
|||
if (!row.year) { |
|||
message = message + '年份不能为空；' |
|||
} |
|||
if (!row.type) { |
|||
message = message + '类型不能为空；' |
|||
} |
|||
if (!row.monthQuarter) { |
|||
message = message + '时间不能为空；' |
|||
} |
|||
if (!row.status) { |
|||
message = message + '完成情况不能为空；' |
|||
} |
|||
|
|||
if (row.score !== 0 && !row.score) { |
|||
message = message + '评分不能为空；' |
|||
} |
|||
if (row.score > 100) { |
|||
message = message + '评分不能超过100分；' |
|||
} |
|||
return message |
|||
}, |
|||
|
|||
async handleDelete (row, tableIndex) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
if (row.id) {//存在id，调用服务删除 |
|||
this.deleteRecord(row, tableIndex) |
|||
} else {//不存在id，直接删除数组数据 |
|||
this.tableData.splice(tableIndex, 1); |
|||
} |
|||
|
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async deleteRecord (row, tableIndex) { |
|||
|
|||
const url = "/heart/icpartyunitcompletion/delete" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunitcompletion/delete" |
|||
|
|||
let params = { |
|||
id: row.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
// this.$message({ |
|||
// type: "success", |
|||
// message: "删除成功" |
|||
// }); |
|||
|
|||
this.tableData.splice(tableIndex, 1); |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
|
|||
return (this.clientHeight - 360) |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight']) |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
.item_width_1 { |
|||
width: 150px; |
|||
} |
|||
.item_width_2 { |
|||
width: 100px; |
|||
} |
|||
.item_width_3 { |
|||
width: 120px; |
|||
} |
|||
.div_table { |
|||
margin-top: 10px; |
|||
// background: #ffffff; |
|||
// box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
|||
// border-radius: 4px; |
|||
|
|||
.table { |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
.div_btn { |
|||
margin-top: 10px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.picker_year { |
|||
/deep/ .el-date-editor.el-input, |
|||
.el-date-editor.el-input__inner { |
|||
width: 140px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<div v-if="initLoading" |
|||
class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">单位名称：</span> |
|||
<span>{{ formData.name||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">分类：</span> |
|||
<span>{{ formData.type||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务事项：</span> |
|||
<span>{{ formData.serviceMatterName }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">联系人：</span> |
|||
<span>{{ formData.contact||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">联系电话：</span> |
|||
<span>{{ formData.contactMobile||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ formData.remark||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">地理位置：</span> |
|||
<span>{{ formData.address||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
import daiMap from "@/utils/dai-map"; |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { log } from 'console'; |
|||
|
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formData: { |
|||
name:"", |
|||
type:"", |
|||
serviceMatterName:"", |
|||
contact:"", |
|||
contactMobile:"", |
|||
remark:"", |
|||
address:"", |
|||
latitude:"", |
|||
longitude:"", |
|||
}, |
|||
initLoading: false, |
|||
unitId:"" |
|||
} |
|||
}, |
|||
components: {}, |
|||
created () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
handleCancle () { |
|||
this.diaDestroy() |
|||
this.$emit('diaDetailClose') |
|||
|
|||
}, |
|||
|
|||
diaDestroy () { |
|||
if (map) { |
|||
// map.destroy() |
|||
} |
|||
}, |
|||
// async initForm (row) { |
|||
// this.startLoading() |
|||
// let { latitude, longitude } = this.$store.state.user; |
|||
// this.unitId = row.id |
|||
// await this.getDetail() |
|||
|
|||
// if (!latitude || latitude == "" || latitude == "0") { |
|||
// latitude = 39.9088810666821; |
|||
// longitude = 116.39743841556731; |
|||
// } |
|||
// this.$nextTick(() => { |
|||
// if (!map) { |
|||
// this.initMap(latitude, longitude) |
|||
// } else { |
|||
// map.setCenter(latitude, longitude); |
|||
// map.setMarker(latitude, longitude); |
|||
|
|||
// } |
|||
|
|||
// }) |
|||
|
|||
// this.endLoading() |
|||
|
|||
// }, |
|||
async initForm (row) { |
|||
this.startLoading() |
|||
// this.formData = JSON.parse(JSON.stringify(row)) |
|||
this.initLoading = true |
|||
this.unitId = row.id |
|||
// await nextTick(200) |
|||
await this.getDetail() |
|||
console.log(this.formData); |
|||
let { latitude, longitude } = this.$store.state.user; |
|||
console.log('lat' + latitude + ',lon' + longitude) |
|||
if (this.formData.latitude && this.formData.longitude) { |
|||
latitude = this.formData.latitude |
|||
longitude = this.formData.longitude |
|||
} |
|||
if (!latitude || latitude == "" || latitude == "0") { |
|||
latitude = 39.9088810666821; |
|||
longitude = 116.39743841556731; |
|||
} |
|||
this.$nextTick(() => { |
|||
if (!map) { |
|||
this.initMap(latitude, longitude) |
|||
} else { |
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
|
|||
} |
|||
|
|||
}) |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
async getDetail () { |
|||
const url = `/heart/icPublicServiceOrg/detail/${this.unitId}` |
|||
|
|||
const { data, code, msg } = await requestPost(url) |
|||
if (code === 0) { |
|||
this.formData = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap (latitude, longitude) { |
|||
console.log(latitude, longitude); |
|||
map = new daiMap( |
|||
document.getElementById("app_detail_unit"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
// // 监听地图平移结束 |
|||
// map.on("dragend", (e) => { |
|||
// this.handleMoveCenter(e); |
|||
// }); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
|
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
</style> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,521 @@ |
|||
<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="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入单位名称" |
|||
v-model="formData.name"> |
|||
</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-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.categoryCode" |
|||
:label="item.categoryCode">{{item.categoryName}}</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-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-input> |
|||
</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> |
|||
<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-option> |
|||
</el-select> |
|||
<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> |
|||
</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> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
let initFormData = () => { |
|||
let _form = { |
|||
name: '', |
|||
serviceMatterList: [], |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '', |
|||
remark: '', //备注【最大500字】 |
|||
address: '', //详细地址 |
|||
longitude: this.$store.state.user.longitude, //经度 |
|||
latitude: this.$store.state.user.latitude //纬度 |
|||
} |
|||
|
|||
return _form |
|||
} |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
searchOptions: [], |
|||
searchValue: '', |
|||
resultList: [], |
|||
loading: false, |
|||
serviceMatterListCody:[], |
|||
btnDisable: false, |
|||
|
|||
unitId: '', |
|||
keyWords: '', |
|||
formData: initFormData(), |
|||
serviceList: [],//服务list |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
// this.initMap() |
|||
}, |
|||
watch:{ |
|||
}, |
|||
methods: { |
|||
|
|||
async initForm (type, unitId) { |
|||
this.startLoading() |
|||
this.$refs.ref_form.resetFields(); |
|||
|
|||
//获取服务事项 |
|||
await this.loadService() |
|||
|
|||
let { latitude, longitude } = this.$store.state.user; |
|||
|
|||
|
|||
this.formType = type |
|||
if (unitId) { |
|||
this.unitId = unitId |
|||
await this.getDetail() |
|||
} else { |
|||
this.formData.latitude = latitude |
|||
this.formData.longitude = longitude |
|||
} |
|||
|
|||
// if (!map) { |
|||
this.initMap(this.formData.latitude, this.formData.longitude); |
|||
// } |
|||
|
|||
|
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
//获取服务事项下拉框 |
|||
async loadService () { |
|||
const url = "/heart/serviceitem/dict-options" |
|||
let params = { |
|||
type: 'usable' |
|||
// parentCategoryCode: '1010' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.serviceList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
async getDetail () { |
|||
const url = `/heart/icPublicServiceOrg/detail/${this.unitId}` |
|||
|
|||
const { data, code, msg } = await requestPost(url) |
|||
if (code === 0) { |
|||
for(let key in data){ |
|||
if(key == 'serviceMatterList'){ |
|||
let arr =[] |
|||
for(let val of data[key]){ |
|||
arr.push(val.categoryCode) |
|||
} |
|||
this.serviceMatterListCody = arr |
|||
} |
|||
} |
|||
|
|||
this.formData = data |
|||
this.formData.serviceMatterList = this.serviceMatterListCody |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
//加载组织 |
|||
async loadFormData () { |
|||
const url = '/heart/icpartyunit/detail' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail' |
|||
let params = { |
|||
id: this.unitId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
if (!data.serviceMatterList) { |
|||
data.serviceMatterList = [] |
|||
} |
|||
|
|||
this.formData = { ...data } |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
|
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 10000) |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
this.btnDisable = false |
|||
} else { |
|||
this.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 |
|||
// this.$message({ |
|||
// type: 'warning', |
|||
// message: '请输入正确的手机号码' |
|||
// }) |
|||
// return false; |
|||
// } |
|||
|
|||
let url = '/heart/icPublicServiceOrg/save' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/save" |
|||
if (this.formType === 'edit') { |
|||
this.formData.id = this.unitId |
|||
url = '/heart/icPublicServiceOrg/update' |
|||
} |
|||
if(this.formData.serviceMatterList.length>0){ |
|||
let arr = [] |
|||
for( let code of this.formData.serviceMatterList){ |
|||
this.serviceList.forEach(item=>{ |
|||
if( item.categoryCode == code){ |
|||
arr.push({categoryCode:item.categoryCode,categoryId:item.categoryId}) |
|||
} |
|||
return arr |
|||
}) |
|||
} |
|||
this.formData.serviceMatterList = arr |
|||
this.formData.latitude = this.formData.latitude.toString() |
|||
this.formData.longitude = this.formData.longitude.toString() |
|||
} |
|||
const { data, code, msg } = await requestPost(url,this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
|
|||
this.$emit('dialogOk') |
|||
this.btnDisable = false |
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap (latitude, longitude) { |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_unit"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
// 监听地图平移结束 |
|||
map.on("dragend", (e) => { |
|||
this.handleMoveCenter(e); |
|||
}); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const { lat, lng } = map.getCenter(); |
|||
this.formData.latitude = lat; |
|||
this.formData.longitude = lng; |
|||
map.setMarker(lat, lng); |
|||
|
|||
let { msg, data } = await map.getAddress(lat, lng); |
|||
if (msg == "success") { |
|||
this.formData.address = data.address |
|||
this.searchValue = data.address |
|||
this.searchOptions = [] |
|||
|
|||
} |
|||
}, |
|||
|
|||
async remoteMethod (query) { |
|||
|
|||
if (query !== '') { |
|||
this.loading = true; |
|||
|
|||
const { msg, data } = await map.searchNearby(query); |
|||
this.loading = false; |
|||
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}` }; |
|||
|
|||
}); |
|||
} |
|||
} else { |
|||
this.searchOptions = [ |
|||
{ |
|||
value: '0', |
|||
label: '未检索到结果' |
|||
} |
|||
] |
|||
} |
|||
} else { |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
|
|||
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 |
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.searchValue = '' |
|||
this.searchOptions = [] |
|||
this.resultList = [] |
|||
if (map) { |
|||
console.log(map) |
|||
// map.destroy() |
|||
} |
|||
this.unitId = '' |
|||
this.keyWords = '' |
|||
this.formData = { |
|||
name: '', |
|||
serviceMatterList: [], |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '', |
|||
remark: '', //备注【最大500字】 |
|||
address: '', //详细地址 |
|||
longitude: this.$store.state.user.longitude, //经度 |
|||
latitude: this.$store.state.user.latitude//纬度 |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
name: [ |
|||
{ required: true, message: '单位名称不能为空', trigger: 'blur' }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: '分类不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
contact: [ |
|||
{ required: true, message: '联系人不能为空', trigger: 'blur' } |
|||
], |
|||
contactMobile: [ |
|||
{ required: true, message: '联系电话不能为空', trigger: 'blur' } |
|||
], |
|||
address: [ |
|||
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
|||
], |
|||
longitude: [ |
|||
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
typeList: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.div_map { |
|||
position: relative; |
|||
} |
|||
.div_searchmap { |
|||
z-index: 5000; |
|||
position: absolute; |
|||
top: 5px; |
|||
left: 5px; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
|
|||
@ -0,0 +1,840 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'100px'"> |
|||
<div> |
|||
|
|||
<el-form-item label="所属组织" |
|||
prop="agencyId"> |
|||
<el-cascader class="item_width_1" |
|||
ref="myCascader" |
|||
v-model="agencyIdArray" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency"></el-cascader> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="单位名称" |
|||
prop="name"> |
|||
<el-input v-model="formData.name" |
|||
class="item_width_1" |
|||
clearable |
|||
size="small" |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="服务事项" |
|||
prop="serviceMatter"> |
|||
<el-select class="item_width_2" |
|||
v-model="formData.serviceMatter" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
</div> |
|||
<div> |
|||
<el-form-item label="分类" |
|||
prop="type"> |
|||
<el-select class="item_width_1" |
|||
v-model="formData.type" |
|||
placeholder="请选择" |
|||
size="small" |
|||
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="contact"> |
|||
<el-input v-model="formData.contact" |
|||
class="item_width_1" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="联系电话" |
|||
prop="contactMobile"> |
|||
<el-input v-model="formData.contactMobile" |
|||
class="item_width_1" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--search" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<div class="div_btn"> |
|||
<el-button class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增</el-button> |
|||
|
|||
</div> |
|||
|
|||
<el-table class="table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%"> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="name" |
|||
header-align="center" |
|||
align="center" |
|||
label="单位名称" |
|||
min-width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="agencyName" |
|||
header-align="center" |
|||
align="center" |
|||
label="所属组织" |
|||
min-width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="typeName" |
|||
header-align="center" |
|||
align="center" |
|||
label="分类" |
|||
min-width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceMatterName" |
|||
header-align="center" |
|||
align="center" |
|||
label="服务事项" |
|||
show-overflow-tooltip |
|||
min-width="250"> |
|||
|
|||
<!-- <template slot-scope="scope"> |
|||
<p style="text-align:center;margin:2px 0;" |
|||
v-for="(item,index) in scope.row.serviceMatterList" |
|||
:key="index">{{item}}</p> |
|||
|
|||
</template> --> |
|||
</el-table-column> |
|||
<el-table-column prop="contact" |
|||
header-align="center" |
|||
align="center" |
|||
label="联系人" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="contactMobile" |
|||
header-align="center" |
|||
align="center" |
|||
label="联系电话" |
|||
width="120"> |
|||
</el-table-column> |
|||
|
|||
<!-- <el-table-column prop="satisfaction" |
|||
header-align="center" |
|||
align="center" |
|||
label="群众满意度" |
|||
width="100"> |
|||
</el-table-column> --> |
|||
<!-- <el-table-column prop="score" |
|||
header-align="center" |
|||
align="center" |
|||
label="积分" |
|||
width="80"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="remark" |
|||
header-align="center" |
|||
align="center" |
|||
label="备注" |
|||
show-overflow-tooltip |
|||
width="150"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="150" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
class="div-table-button--detail" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button v-if="agencyId===scope.row.agencyId" |
|||
type="text" |
|||
class="div-table-button--edit" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
<el-button type="text" |
|||
class="div-table-button--delete" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
:destroy-on-close="true" |
|||
width="950px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="editDiaClose"> |
|||
<org-form ref="ref_form" |
|||
:typeList="typeList" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></org-form> |
|||
</el-dialog> |
|||
|
|||
<el-dialog :visible.sync="detailShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'单位详情'" |
|||
width="950px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaDetailClose"> |
|||
<org-detail ref="ref_detail" |
|||
@diaDetailClose="diaDetailClose"></org-detail> |
|||
</el-dialog> |
|||
|
|||
<!-- 完成情况 --> |
|||
<el-dialog :visible.sync="finishDiaShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="finishDiaTitle" |
|||
width="950px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<finish-list ref="ref_finish"></finish-list> |
|||
</el-dialog> |
|||
|
|||
<!-- 积分记录 --> |
|||
<el-dialog :visible.sync="scoreDiaShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="scoreDiaTitle" |
|||
width="1050px" |
|||
top="5vh" |
|||
@closed="diaClose"> |
|||
<score-record ref="ref_score" |
|||
:serviceType="'party_unit'"></score-record> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import orgForm from './orgForm' |
|||
import orgDetail from './orgDetail' |
|||
import finishList from './finishList' |
|||
import scoreRecord from '../../../components/scoreRecord.vue' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 10, |
|||
pageNo: 0, |
|||
tableLoading: false, |
|||
agencyId: '', |
|||
|
|||
unitList: [],//单位list |
|||
serviceList: [],//服务list |
|||
typeList: [{label:'实有单位',value:'1'},{label:'社会服务组织',value:'2'},{label:'志愿单位',value:'3'}],//分类list |
|||
agencyIdArray: [], |
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
unitId: '', |
|||
formData: { |
|||
agencyId: '', |
|||
name: '', |
|||
serviceMatter: '', |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '' |
|||
}, |
|||
|
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增单位', |
|||
detailShow: false, |
|||
|
|||
//完成情况 |
|||
finishDiaTitle: '区域化党建单位完成情况', |
|||
finishDiaShow: false, |
|||
//积分记录 |
|||
scoreDiaTitle: '积分记录', |
|||
scoreDiaShow: false, |
|||
|
|||
files: "", |
|||
fileName: "", |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
orgForm, orgDetail, finishList, scoreRecord |
|||
}, |
|||
async created () { |
|||
|
|||
}, |
|||
async mounted () { |
|||
//获取服务事项 |
|||
await this.loadService() |
|||
this.getOrgTreeList() |
|||
|
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
|
|||
await this.loadTable() |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
handleChangeAgency (val) { |
|||
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
if (obj) { |
|||
|
|||
this.formData.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''; |
|||
|
|||
} else { |
|||
this.formData.agencyId = '' |
|||
|
|||
} |
|||
|
|||
}, |
|||
|
|||
getOrgTreeList () { |
|||
const { user } = this.$store.state |
|||
this.$http |
|||
.post('/gov/org/customeragency/my-subagency-list', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取组织树成功', res.data) |
|||
this.orgOptions = [] |
|||
this.orgOptions.push(res.data) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
|
|||
|
|||
handleSearch () { |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
|
|||
//获取服务事项下拉框 |
|||
async loadService () { |
|||
const url = "/heart/serviceitem/dict-list" |
|||
|
|||
|
|||
let params = { |
|||
// parentCategoryCode: '1010' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.serviceList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
async loadTable () { |
|||
this.tableLoading = true |
|||
|
|||
const url = "/heart/icPublicServiceOrg/page" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/list" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
agencyId: this.agencyId, |
|||
...this.formData |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
data.list.forEach(element => { |
|||
if (element.serviceMatterList.length > 0) { |
|||
element.serviceMatterListShow = element.serviceMatterList.join(',') |
|||
} else { |
|||
element.serviceMatterListShow = '' |
|||
} |
|||
|
|||
}); |
|||
this.tableData = data.list |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
editDiaClose () { |
|||
this.$refs.ref_form.resetData() |
|||
this.formShow = false |
|||
}, |
|||
diaClose () { |
|||
this.detailShow = false |
|||
this.finishDiaShow = false |
|||
this.scoreDiaShow = false |
|||
}, |
|||
diaDetailClose () { |
|||
console.log(this.$refs.ref_detail) |
|||
this.$refs.ref_detail.diaDestroy() |
|||
this.detailShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
// this.formTitle = '详情' |
|||
this.detailShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_detail.initForm(row) |
|||
}) |
|||
}, |
|||
|
|||
//完成情况 |
|||
handleFinish (row) { |
|||
this.finishDiaTitle = row.name + '完成情况' |
|||
this.finishDiaShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_finish.initTable(row) |
|||
}) |
|||
}, |
|||
//积分记录 |
|||
handleScore (row) { |
|||
this.scoreDiaShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_score.initForm(row.id) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('edit',row.id) |
|||
}) |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
|
|||
}, |
|||
|
|||
async handleSync (row) { |
|||
|
|||
this.$confirm("确认同步到通讯录？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.syncUnit(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
}, |
|||
async handleNoSync (row) { |
|||
|
|||
this.$confirm("确认取消同步?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.noSyncUnit(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async syncUnit (row) { |
|||
const url = "/gov/org/department/syncdept" |
|||
|
|||
let params = { |
|||
id: row.id, |
|||
deptName: row.name, |
|||
mobile: row.contactMobile, |
|||
personName: row.contact, |
|||
deptType: 'party_unit', |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
if (data.type) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: data.msg || "同步成功" |
|||
}); |
|||
|
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(data.msg) |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async noSyncUnit (row) { |
|||
const url = "/gov/org/department/notsyncdept" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/delete" |
|||
|
|||
let params = { |
|||
id: row.id, |
|||
deptId: row.deptId, |
|||
deptStaffId: row.deptStaffId, |
|||
deptType: 'party_unit', |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
if (data.type) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "取消同步成功" |
|||
}); |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(data.msg) |
|||
} |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteUnit(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async deleteUnit (row) { |
|||
const url = "/heart/icPublicServiceOrg/delete" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/delete" |
|||
|
|||
let params = { |
|||
id: row.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, [row.id]) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
|
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//重置搜索条件 |
|||
resetSearch () { |
|||
this.agencyIdArray = [] |
|||
this.formData = { |
|||
agencyId: '', |
|||
name: '', |
|||
serviceMatter: '', |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '' |
|||
} |
|||
this.pageSize = 10 |
|||
this.pageNo = 0 |
|||
// this.loadTable() |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = '联建单位列表' |
|||
|
|||
const url = "/heart/icpartyunit/export" |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
...this.formData |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
this.loading = true |
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/heart/icpartyunit/import' |
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
const { data, code, msg } = await requestPost(url, fileFormData) |
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "导入成功" |
|||
}); |
|||
|
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
|
|||
return this.$store.state.inIframe ? this.clientHeight - 430 + this.iframeHeight : this.clientHeight - 430 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_main { |
|||
width: 100%; |
|||
} |
|||
|
|||
.div_search { |
|||
background: #ffffff; |
|||
border-radius: 4px; |
|||
padding: 30px 20px 5px; |
|||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.item_width_1 { |
|||
width: 260px; |
|||
} |
|||
.item_width_2 { |
|||
width: 620px; |
|||
} |
|||
|
|||
.div_table { |
|||
background: #ffffff; |
|||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
|||
border-radius: 4px; |
|||
margin-top: 15px; |
|||
padding: 23px 30px 10px; |
|||
|
|||
.table { |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue