13176889840
4 years ago
6 changed files with 2451 additions and 574 deletions
@ -0,0 +1,652 @@ |
|||||
|
<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="unitId"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.unitId" |
||||
|
placeholder="全部" |
||||
|
clearable> |
||||
|
<el-option v-for="item in unitList" |
||||
|
:key="item.unitId" |
||||
|
:label="item.unitName" |
||||
|
:value="item.unitId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间" |
||||
|
prop="startTime"> |
||||
|
<el-date-picker v-model="timeRange" |
||||
|
type="daterange" |
||||
|
@change="handleTimeChange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
</div> |
||||
|
<div> |
||||
|
<el-form-item label="活动标题" |
||||
|
prop="title"> |
||||
|
<el-input v-model="formData.title" |
||||
|
class="item_width_1" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入内容"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="服务事项" |
||||
|
prop="serviceMatter"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.serviceMatter" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-button style="margin-left:10px" |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left:10px" |
||||
|
type="yellow" |
||||
|
size="small" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="div_table"> |
||||
|
<div class="div_btn"> |
||||
|
<el-button style="float:left" |
||||
|
type="green" |
||||
|
size="small" |
||||
|
@click="handleAdd">新增</el-button> |
||||
|
<el-upload ref="upload" |
||||
|
:multiple='false' |
||||
|
:show-file-list='false' |
||||
|
:before-upload="beforeUpload" |
||||
|
action="" |
||||
|
accept=".xls,.xlsx" |
||||
|
:limit="1" |
||||
|
:on-exceed="handleExceed" |
||||
|
:http-request="uploadFile"> |
||||
|
<el-button style="margin-left:10px" |
||||
|
size="small" |
||||
|
type="red">导入</el-button> |
||||
|
|
||||
|
<el-button style="float:left" |
||||
|
type="yellow" |
||||
|
size="small" |
||||
|
@click="handleExport">导出</el-button> |
||||
|
|
||||
|
</el-upload> |
||||
|
|
||||
|
</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="unitName" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="单位名称" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="title" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动标题" |
||||
|
min-width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动地址" |
||||
|
min-width="230"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="peopleCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="服务人数" |
||||
|
width="100"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="activityTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动时间" |
||||
|
width="230"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="操作" |
||||
|
fixed="right" |
||||
|
width="140" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
class="operate"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleDetail(scope.row)">查看</el-button> |
||||
|
<el-button type="text" |
||||
|
style="color:#00A7A9;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleEdit(scope.row)">修改</el-button> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#D51010;text-decoration: underline;" |
||||
|
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" |
||||
|
width="850px" |
||||
|
top="5vh" |
||||
|
@closed="diaClose"> |
||||
|
<activitys-form ref="ref_form" |
||||
|
:unitList="unitList" |
||||
|
:serviceList="serviceList" |
||||
|
@dialogCancle="addFormCancle" |
||||
|
@dialogOk="addFormOk"></activitys-form> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import activitysForm from './activitysForm' |
||||
|
import util from '@js/util.js'; |
||||
|
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: [ |
||||
|
{ |
||||
|
id: "1", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。' |
||||
|
}, |
||||
|
{ |
||||
|
id: "2", |
||||
|
name: '积极配合' |
||||
|
}, |
||||
|
{ |
||||
|
id: "3", |
||||
|
name: '积极配合社区安全巡查员进行' |
||||
|
}, |
||||
|
{ |
||||
|
id: "4", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施' |
||||
|
}, |
||||
|
],//服务list |
||||
|
pickerOptions: { //控制时间范围 |
||||
|
disabledDate (time) { |
||||
|
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000)) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
timeRange: [], |
||||
|
unitId: '', |
||||
|
formData: { |
||||
|
unitId: '', |
||||
|
title: '', |
||||
|
serviceMatter: '', |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
}, |
||||
|
|
||||
|
tableData: [], |
||||
|
|
||||
|
//form相关 |
||||
|
formShow: false, |
||||
|
formTitle: '新增单位', |
||||
|
|
||||
|
files: "", |
||||
|
fileName: "", |
||||
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
activitysForm |
||||
|
}, |
||||
|
async created () { |
||||
|
|
||||
|
}, |
||||
|
async mounted () { |
||||
|
//获取服务事项 |
||||
|
await this.loadService() |
||||
|
|
||||
|
const { user } = this.$store.state |
||||
|
this.agencyId = user.agencyId |
||||
|
|
||||
|
//获取建联单位 |
||||
|
await this.loadUnit() |
||||
|
//获取网格下拉框数据 |
||||
|
await this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleSearch () { |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
async loadUnit () { |
||||
|
// const url = "/heart/icpartyunit/option" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option" |
||||
|
|
||||
|
let params = { |
||||
|
agencyId: this.agencyId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.unitList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取服务事项下拉框 |
||||
|
async loadService () { |
||||
|
// const url = "/heart/icresidemanddict/subcodelist" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icresidemanddict/subcodelist" |
||||
|
|
||||
|
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/icpartyactivity/list" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list" |
||||
|
let params = { |
||||
|
agencyId: this.agencyId, |
||||
|
pageSize: this.pageSize, |
||||
|
pageNo: this.pageNo, |
||||
|
...this.formData |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.tableLoading = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
diaClose () { |
||||
|
this.$refs.ref_form.resetData() |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
|
||||
|
handleDetail (row) { |
||||
|
this.formTitle = '详情' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm('detail', 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 handleDelete (row) { |
||||
|
|
||||
|
this.$confirm("确认删除?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteUnit(row) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async deleteUnit (row) { |
||||
|
// const url = "/heart/icpartyactivity/delete" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete" |
||||
|
|
||||
|
let params = { |
||||
|
id: row.id |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "删除成功" |
||||
|
}); |
||||
|
|
||||
|
this.loadTable() |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//重置搜索条件 |
||||
|
resetSearch () { |
||||
|
this.timeRange = [] |
||||
|
this.formData = { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: '', |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//导出表格 |
||||
|
async handleExport () { |
||||
|
let title = '—联建活动列表' |
||||
|
|
||||
|
const url = "/heart/icpartyactivity/export" |
||||
|
let params = { |
||||
|
ownerName: this.ownerName, |
||||
|
ownerPhone: this.ownerPhone, |
||||
|
level: this.agencyObj.level, |
||||
|
id: this.agencyObj.id |
||||
|
} |
||||
|
|
||||
|
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/icpartyactivity/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) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleTimeChange (time) { |
||||
|
if (time) { |
||||
|
const startTimeArray = util.dateFormatter(time[0], 'date').split('-') |
||||
|
const endTimeArray = util.dateFormatter(time[1], 'date').split('-') |
||||
|
|
||||
|
this.formData.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2] |
||||
|
this.formData.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2] |
||||
|
|
||||
|
// this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日' |
||||
|
// this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
||||
|
} else { |
||||
|
this.formData.startTime = '' |
||||
|
this.formData.endTime = '' |
||||
|
// this.startTimeShow = '' |
||||
|
// this.endTimeShow = '' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
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.clientHeight - 460) |
||||
|
|
||||
|
}, |
||||
|
rowHeight () { |
||||
|
return (this.clientHeight - 200) + 'px' |
||||
|
}, |
||||
|
...mapGetters(['clientHeight']) |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
|
||||
|
.div_main { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.div_search { |
||||
|
background: #ffffff; |
||||
|
border-radius: 4px; |
||||
|
padding: 35px 20px; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.item_width_1 { |
||||
|
width: 260px; |
||||
|
} |
||||
|
|
||||
|
.div_table { |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 4px; |
||||
|
margin-top: 20px; |
||||
|
padding: 23px 30px 10px; |
||||
|
|
||||
|
.table { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
/* margin-bottom: 20px; */ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 10px; |
||||
|
margin-right: 50px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,550 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="服务事项" |
||||
|
label-width="150px" |
||||
|
prop="serviceMatter"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.serviceMatter" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitId" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.unitId" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in unitList" |
||||
|
:key="item.unitId" |
||||
|
:label="item.unitName" |
||||
|
:value="item.unitId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动标题" |
||||
|
prop="title" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
maxlength="50" |
||||
|
show-word-limit |
||||
|
placeholder="请输入活动标题" |
||||
|
v-model="formData.title"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动目标" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
type="textarea" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
placeholder="请输入活动目标，不超过100字" |
||||
|
v-model="formData.target"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动内容" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
<Tinymce class="tinymce_view " |
||||
|
v-if="formType!='detail'" |
||||
|
v-model="formData.content" |
||||
|
:height="250" |
||||
|
placeholder="在这里输入文字" /> |
||||
|
|
||||
|
<p v-else |
||||
|
class="text_p" |
||||
|
v-html="item.content"></p> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务人数" |
||||
|
style="display: block" |
||||
|
prop="peopleCount" |
||||
|
label-width="150px"> |
||||
|
<el-input-number class="item_width_1" |
||||
|
v-model="formData.peopleCount" |
||||
|
:min="0" |
||||
|
label="服务人数"></el-input-number> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间" |
||||
|
style="display: block" |
||||
|
prop="activityTime" |
||||
|
label-width="150px"> |
||||
|
<el-date-picker v-model="formData.activityTime" |
||||
|
value-format="yyyyMMdd" |
||||
|
type="date" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动坐标" |
||||
|
prop="longitude" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
|
||||
|
<div class="div_map"> |
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
<div 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 style="margin-top: 10px"> |
||||
|
<span>经度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入经度" |
||||
|
v-model="formData.longitude"> |
||||
|
</el-input> |
||||
|
<span style="margin-left: 20px">纬度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入纬度" |
||||
|
v-model="formData.latitude"> |
||||
|
</el-input> |
||||
|
</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-item label="活动结果" |
||||
|
prop="result" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
<Tinymce class="tinymce_view " |
||||
|
v-if="formType!='detail'" |
||||
|
v-model="formData.result" |
||||
|
:height="250" |
||||
|
placeholder="在这里输入文字" /> |
||||
|
|
||||
|
<p v-else |
||||
|
class="text_p" |
||||
|
v-html="item.result"></p> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="div_btn"> |
||||
|
<el-button @click="handleCancle">取 消</el-button> |
||||
|
<el-button 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 Tinymce from '@c/tinymce/index.vue' |
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
|
||||
|
btnDisable: false, |
||||
|
|
||||
|
keyWords: '', |
||||
|
activityId: '', |
||||
|
formData: { |
||||
|
serviceMatter: '',//服务事项 |
||||
|
unitId: '',//单位ID |
||||
|
title: '',//活动标题 |
||||
|
target: '',//活动目标 |
||||
|
contact: '',//活动内容 |
||||
|
activityTime: '',//活动时间 |
||||
|
peopleCount: 0,//服务人数 |
||||
|
result: '', //活动结果 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { Tinymce }, |
||||
|
mounted () { |
||||
|
this.initMap() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async initForm (type, activityId) { |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
// debugger |
||||
|
// map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude)) |
||||
|
|
||||
|
this.formType = type |
||||
|
if (activityId) { |
||||
|
this.activityId = activityId |
||||
|
this.formData.id = activityId |
||||
|
await this.loadFormData() |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//加载组织 |
||||
|
async loadFormData () { |
||||
|
// const url = '/heart/icpartyactivity/detail' |
||||
|
const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/detail' |
||||
|
let params = { |
||||
|
id: this.activityId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
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.addActivity() |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
async addActivity () { |
||||
|
// let url = '/heart/icpartyactivity/save' |
||||
|
let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/save" |
||||
|
|
||||
|
|
||||
|
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 () { |
||||
|
// 定义地图中心点坐标 |
||||
|
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) |
||||
|
|
||||
|
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 |
||||
|
.searchRectangle({ |
||||
|
keyword: this.keyWords, |
||||
|
bounds: map.getBounds() |
||||
|
}) |
||||
|
.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.formData.latitude = lat |
||||
|
this.formData.longitude = lng |
||||
|
this.convert() |
||||
|
} else { |
||||
|
this.$message.error('未检索到相关位置坐标') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleMoveCenter () { |
||||
|
//修改地图中心点 |
||||
|
const center = map.getCenter() |
||||
|
const lat = center.getLat() |
||||
|
const lng = center.getLng() |
||||
|
this.formData.latitude = lat |
||||
|
this.formData.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.formData.latitude, this.formData.longitude); |
||||
|
} |
||||
|
// map.setCenter(location); |
||||
|
markers.updateGeometries([ |
||||
|
{ |
||||
|
id: 'main', // 点标注数据数组 |
||||
|
position: location, |
||||
|
}, |
||||
|
]); |
||||
|
geocoder |
||||
|
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
||||
|
.then((result) => { |
||||
|
this.formData.address = result.result.address |
||||
|
// 显示搜索到的地址 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
resetData () { |
||||
|
this.activityId = '' |
||||
|
this.keyWords = '' |
||||
|
this.formData = { |
||||
|
serviceMatter: '',//服务事项 |
||||
|
unitId: '',//单位ID |
||||
|
title: '',//活动标题 |
||||
|
target: '',//活动目标 |
||||
|
contact: '',//活动内容 |
||||
|
activityTime: '',//活动时间 |
||||
|
peopleCount: 0,//服务人数 |
||||
|
result: '', //活动结果 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
serviceMatter: [ |
||||
|
{ required: true, message: '服务事项不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
unitId: [ |
||||
|
{ required: true, message: '单位名称不能为空', trigger: 'blur' }, |
||||
|
], |
||||
|
title: [ |
||||
|
{ required: true, message: '活动标题不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
target: [ |
||||
|
{ required: true, message: '活动目标不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: '活动内容不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
activityTime: [ |
||||
|
{ required: true, message: '活动时间不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
result: [ |
||||
|
{ required: true, message: '活动结果不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
unitList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
|
||||
|
serviceList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.item_width_1 { |
||||
|
width: 560px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 600px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
.item_width_4 { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
position: relative; |
||||
|
} |
||||
|
.div_searchmap { |
||||
|
z-index: 5000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.el-upload__tip { |
||||
|
color: rgb(155, 155, 155); |
||||
|
margin: 0; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.tinymce_view { |
||||
|
height: 400px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang=scss> |
||||
|
.el-dialog__body { |
||||
|
padding: 0 10px 20px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,694 @@ |
|||||
|
<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="gridId"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.gridId" |
||||
|
placeholder="全部" |
||||
|
clearable> |
||||
|
<el-option v-for="item in gridList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitName"> |
||||
|
<el-input v-model="formData.unitName" |
||||
|
class="item_width_1" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入内容"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="服务事项" |
||||
|
prop="serviceMatter"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.serviceMatter" |
||||
|
placeholder="请选择" |
||||
|
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="请选择" |
||||
|
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" |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left:10px" |
||||
|
type="yellow" |
||||
|
size="small" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="div_table"> |
||||
|
<div class="div_btn"> |
||||
|
<el-button style="float:left" |
||||
|
type="green" |
||||
|
size="small" |
||||
|
@click="handleAdd">新增</el-button> |
||||
|
<el-upload ref="upload" |
||||
|
:multiple='false' |
||||
|
:show-file-list='false' |
||||
|
:before-upload="beforeUpload" |
||||
|
action="" |
||||
|
accept=".xls,.xlsx" |
||||
|
:limit="1" |
||||
|
:on-exceed="handleExceed" |
||||
|
:http-request="uploadFile"> |
||||
|
<el-button style="margin-left:10px" |
||||
|
size="small" |
||||
|
type="red">导入</el-button> |
||||
|
|
||||
|
<el-button style="float:left" |
||||
|
type="yellow" |
||||
|
size="small" |
||||
|
@click="handleExport">导出</el-button> |
||||
|
|
||||
|
</el-upload> |
||||
|
|
||||
|
</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="gridName" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="所属网格" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="unitName" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="单位名称" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="type" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="分类" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="serviceMatter" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="服务事项" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="contact" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="联系人" |
||||
|
width="100"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="contactMobile" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="联系电话" |
||||
|
width="110"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="memberCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="在职党员数" |
||||
|
width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="satisfaction" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="群众满意度" |
||||
|
width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remark" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="备注" |
||||
|
:show-overflow-tooltip="true" |
||||
|
width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" |
||||
|
fixed="right" |
||||
|
width="140" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
class="operate"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleDetail(scope.row)">查看</el-button> |
||||
|
<el-button type="text" |
||||
|
style="color:#00A7A9;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleEdit(scope.row)">修改</el-button> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#D51010;text-decoration: underline;" |
||||
|
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" |
||||
|
width="850px" |
||||
|
top="5vh" |
||||
|
@closed="diaClose"> |
||||
|
<units-form ref="ref_form" |
||||
|
:gridList="gridList" |
||||
|
:serviceList="serviceList" |
||||
|
:typeList="typeList" |
||||
|
@dialogCancle="addFormCancle" |
||||
|
@dialogOk="addFormOk"></units-form> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import unitsForm from './unitsForm' |
||||
|
|
||||
|
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: '', |
||||
|
gridList: [],//所属网格list |
||||
|
unitList: [],//单位list |
||||
|
serviceList: [ |
||||
|
{ |
||||
|
id: "1", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。' |
||||
|
}, |
||||
|
{ |
||||
|
id: "2", |
||||
|
name: '积极配合' |
||||
|
}, |
||||
|
{ |
||||
|
id: "3", |
||||
|
name: '积极配合社区安全巡查员进行' |
||||
|
}, |
||||
|
{ |
||||
|
id: "4", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施' |
||||
|
}, |
||||
|
],//服务list |
||||
|
typeList: [],//分类list |
||||
|
|
||||
|
unitId: '', |
||||
|
formData: { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: '', |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '' |
||||
|
}, |
||||
|
|
||||
|
tableData: [], |
||||
|
|
||||
|
//form相关 |
||||
|
formShow: false, |
||||
|
formTitle: '新增单位', |
||||
|
|
||||
|
files: "", |
||||
|
fileName: "", |
||||
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
unitsForm |
||||
|
}, |
||||
|
async created () { |
||||
|
|
||||
|
}, |
||||
|
async mounted () { |
||||
|
//获取服务事项 |
||||
|
await this.loadService() |
||||
|
|
||||
|
//获取分类 |
||||
|
await this.loadType() |
||||
|
|
||||
|
const { user } = this.$store.state |
||||
|
this.agencyId = user.agencyId |
||||
|
//获取网格下拉框数据 |
||||
|
await this.loadGrid() |
||||
|
|
||||
|
await this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleSearch () { |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
async loadGrid () { |
||||
|
const url = "/gov/org/customergrid/gridoption" |
||||
|
|
||||
|
let params = { |
||||
|
agencyId: this.agencyId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.gridList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取服务事项下拉框 |
||||
|
async loadService () { |
||||
|
// const url = "/heart/icresidemanddict/subcodelist" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icresidemanddict/subcodelist" |
||||
|
|
||||
|
let params = { |
||||
|
parentCategoryCode: '1010' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.serviceList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//获取分类 |
||||
|
async loadType () { |
||||
|
const url = "/sys/dict/data/dictlist" |
||||
|
|
||||
|
let params = { |
||||
|
dictType: 'party_unit_type' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.typeList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
this.tableLoading = true |
||||
|
|
||||
|
// const url = "/heart/icpartyunit/list" |
||||
|
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 |
||||
|
this.tableData = data.list |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.tableLoading = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
diaClose () { |
||||
|
this.$refs.ref_form.resetData() |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
|
||||
|
handleDetail (row) { |
||||
|
this.formTitle = '详情' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm('detail', 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 handleDelete (row) { |
||||
|
|
||||
|
this.$confirm("确认删除?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteUnit(row) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async deleteUnit (row) { |
||||
|
// const url = "/heart/icpartyunit/delete" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/delete" |
||||
|
|
||||
|
let params = { |
||||
|
id: row.id |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "删除成功" |
||||
|
}); |
||||
|
|
||||
|
this.loadTable() |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//重置搜索条件 |
||||
|
resetSearch () { |
||||
|
this.formData = { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: '', |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//导出表格 |
||||
|
async handleExport () { |
||||
|
let title = '联建单位列表' |
||||
|
|
||||
|
|
||||
|
const url = "/partyunit/export" |
||||
|
let params = { |
||||
|
ownerName: this.ownerName, |
||||
|
ownerPhone: this.ownerPhone, |
||||
|
level: this.agencyObj.level, |
||||
|
id: this.agencyObj.id |
||||
|
} |
||||
|
|
||||
|
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 = '/partyunit/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.clientHeight - 460) |
||||
|
|
||||
|
}, |
||||
|
rowHeight () { |
||||
|
return (this.clientHeight - 200) + 'px' |
||||
|
}, |
||||
|
...mapGetters(['clientHeight']) |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
|
||||
|
.div_main { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.div_search { |
||||
|
background: #ffffff; |
||||
|
border-radius: 4px; |
||||
|
padding: 35px 20px; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.item_width_1 { |
||||
|
width: 260px; |
||||
|
} |
||||
|
|
||||
|
.div_table { |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 4px; |
||||
|
margin-top: 20px; |
||||
|
padding: 23px 30px 10px; |
||||
|
|
||||
|
.table { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
/* margin-bottom: 20px; */ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 10px; |
||||
|
margin-right: 50px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,553 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="所属网格" |
||||
|
prop="gridId" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.gridId" |
||||
|
placeholder="全部" |
||||
|
clearable> |
||||
|
<el-option v-for="item in gridList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<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-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="服务事项" |
||||
|
prop="serviceMatter" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-checkbox-group class="item_width_1" |
||||
|
style="display:flex;flex-wrap:wrap" |
||||
|
v-model="formData.serviceMatter"> |
||||
|
<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-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="在职党员" |
||||
|
style="display: block" |
||||
|
prop="memberCount" |
||||
|
label-width="150px"> |
||||
|
<el-input-number class="item_width_1" |
||||
|
v-model="formData.memberCount" |
||||
|
:min="1" |
||||
|
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> |
||||
|
<el-form-item label="位置坐标" |
||||
|
prop="longitude" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div style="width:500px"> |
||||
|
|
||||
|
<div class="div_map"> |
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
<div 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 style="margin-top: 10px"> |
||||
|
<span>经度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入经度" |
||||
|
v-model="formData.longitude"> |
||||
|
</el-input> |
||||
|
<span style="margin-left: 20px">纬度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入纬度" |
||||
|
v-model="formData.latitude"> |
||||
|
</el-input> |
||||
|
</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> |
||||
|
<div class="div_btn"> |
||||
|
<el-button @click="handleCancle">取 消</el-button> |
||||
|
<el-button 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' |
||||
|
|
||||
|
|
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
|
||||
|
btnDisable: false, |
||||
|
|
||||
|
unitId: '', |
||||
|
keyWords: '', |
||||
|
formData: { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: [], |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '', |
||||
|
memberCount: 0, |
||||
|
remark: '', //备注【最大500字】 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted () { |
||||
|
this.initMap() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async initForm (type, unitId) { |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
// debugger |
||||
|
// map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude)) |
||||
|
|
||||
|
this.formType = type |
||||
|
if (unitId) { |
||||
|
this.unitId = unitId |
||||
|
this.formData.id = unitId |
||||
|
await this.loadFormData() |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//加载组织 |
||||
|
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) { |
||||
|
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/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) |
||||
|
|
||||
|
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 () { |
||||
|
// 定义地图中心点坐标 |
||||
|
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) |
||||
|
|
||||
|
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 |
||||
|
.searchRectangle({ |
||||
|
keyword: this.keyWords, |
||||
|
bounds: map.getBounds() |
||||
|
}) |
||||
|
.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.formData.latitude = lat |
||||
|
this.formData.longitude = lng |
||||
|
this.convert() |
||||
|
} else { |
||||
|
this.$message.error('未检索到相关位置坐标') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleMoveCenter () { |
||||
|
//修改地图中心点 |
||||
|
const center = map.getCenter() |
||||
|
const lat = center.getLat() |
||||
|
const lng = center.getLng() |
||||
|
this.formData.latitude = lat |
||||
|
this.formData.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.formData.latitude, this.formData.longitude); |
||||
|
} |
||||
|
|
||||
|
// map.setCenter(location); |
||||
|
markers.updateGeometries([ |
||||
|
{ |
||||
|
id: 'main', // 点标注数据数组 |
||||
|
position: location, |
||||
|
}, |
||||
|
]); |
||||
|
geocoder |
||||
|
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
||||
|
.then((result) => { |
||||
|
this.formData.address = result.result.address |
||||
|
// 显示搜索到的地址 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
resetData () { |
||||
|
this.unitId = '' |
||||
|
this.keyWords = '' |
||||
|
this.formData = { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: [], |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '', |
||||
|
memberCount: 0, |
||||
|
remark: '', //备注【最大500字】 |
||||
|
address: '', //详细地址 |
||||
|
longitude: '', //经度 |
||||
|
latitude: '' //纬度 |
||||
|
} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
gridId: [ |
||||
|
{ required: true, message: '所属网格不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
unitName: [ |
||||
|
{ required: true, message: '单位名称不能为空', trigger: 'blur' }, |
||||
|
], |
||||
|
type: [ |
||||
|
{ required: true, message: '分类不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
contact: [ |
||||
|
{ required: true, message: '联系人不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
contactMobile: [ |
||||
|
{ required: true, message: '联系电话不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
memberCount: [ |
||||
|
{ required: true, message: '在职党员数不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
gridList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
typeList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
serviceList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.item_width_1 { |
||||
|
width: 500px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
.item_width_4 { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
position: relative; |
||||
|
} |
||||
|
.div_searchmap { |
||||
|
z-index: 5000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
.el-tabs { |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
.el-upload__tip { |
||||
|
color: rgb(155, 155, 155); |
||||
|
margin: 0; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang=scss> |
||||
|
.el-dialog__body { |
||||
|
padding: 0 10px 20px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -1,572 +0,0 @@ |
|||||
<template> |
|
||||
<div class="div_main"> |
|
||||
<div class="div_btn"> |
|
||||
|
|
||||
<el-button type="default" |
|
||||
size="mini" |
|
||||
@click="diaCancel">取消返回</el-button> |
|
||||
<el-button v-if="formType!='D'" |
|
||||
type="primary" |
|
||||
size="mini" |
|
||||
@click="saveForm">保存发布</el-button> |
|
||||
|
|
||||
</div> |
|
||||
<div class="div_content"> |
|
||||
<el-form :inline="true" |
|
||||
:model="dataForm" |
|
||||
:rules="dataRule" |
|
||||
ref="dataForm" |
|
||||
:disabled="formType=='D'" |
|
||||
:label-width="'120px'"> |
|
||||
<el-form-item label="标题" |
|
||||
prop="title"> |
|
||||
<el-input class="item_width_1" |
|
||||
v-model="dataForm.title" |
|
||||
placeholder="标题"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="分类" |
|
||||
prop="categoryCode"> |
|
||||
<el-select class="item_width_1" |
|
||||
v-model="dataForm.categoryCode" |
|
||||
placeholder="请选择"> |
|
||||
<el-option v-for="item in categoryList" |
|
||||
:key="item.categoryCode" |
|
||||
:label="item.categoryName" |
|
||||
:value="item.categoryCode"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
|
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="发布单位" |
|
||||
prop="orgId"> |
|
||||
<el-select class="item_width_1" |
|
||||
v-model="dataForm.orgId" |
|
||||
placeholder="请选择"> |
|
||||
<el-option v-for="(item,index) in orgList" |
|
||||
@click.native="orgChange(index)" |
|
||||
:key="item.orgId" |
|
||||
:label="item.orgName" |
|
||||
:value="item.orgId"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
</el-form> |
|
||||
|
|
||||
<div class="div_editor"> |
|
||||
<el-tabs v-model="activeName" |
|
||||
@tab-click="tabClick"> |
|
||||
<el-tab-pane style="height:500px" |
|
||||
v-for="item in moduleArray" |
|
||||
:key="item.moduleId" |
|
||||
:label="item.moduleName" |
|
||||
:name="item.moduleId"> |
|
||||
|
|
||||
<quill-editor v-if="formType!='D'" |
|
||||
:ref="'text'+item.moduleId" |
|
||||
v-model="item.moduleContent" |
|
||||
:disabled="formType=='D'" |
|
||||
class="ql-container" |
|
||||
:options="item.editorOption" |
|
||||
@change="onEditorChange" /> |
|
||||
<!-- <text v-else>{{item.moduleContent}}</text> --> |
|
||||
<p v-else |
|
||||
class="text_p" |
|
||||
v-html="item.moduleContent"></p> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<el-form :inline="true" |
|
||||
:model="externalLink" |
|
||||
ref="externalLink" |
|
||||
:disabled="formType=='D'" |
|
||||
:label-width="'120px'"> |
|
||||
|
|
||||
<el-form-item label="外链地址" |
|
||||
prop="externalLink"> |
|
||||
<el-input class="item_width_1" |
|
||||
v-model="externalLink.externalLink" |
|
||||
placeholder="外链地址"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="地址说明" |
|
||||
prop="description"> |
|
||||
<el-input class="item_width_1" |
|
||||
v-model="externalLink.description" |
|
||||
placeholder="地址说明"></el-input> |
|
||||
</el-form-item> |
|
||||
<div> |
|
||||
<el-form-item class="block" |
|
||||
label="附件" |
|
||||
prop="attach"> |
|
||||
<el-upload class="upload-demo" |
|
||||
:action="uploadUlr" |
|
||||
:data="{customerId:customerId}" |
|
||||
accept=".doc,.pdf,.xls,.docx,.xlsx" |
|
||||
:on-success="handleFileSuccess" |
|
||||
:on-remove="handleFileRemove" |
|
||||
:on-preview="handleFileDownload" |
|
||||
:limit="3" |
|
||||
:before-upload="beforeUpload" |
|
||||
:file-list="fileList"> |
|
||||
<el-button size="small" |
|
||||
type="primary">点击上传</el-button> |
|
||||
<div slot="tip" |
|
||||
class="el-upload__tip">只能上传word、excel、pdf文件</div> |
|
||||
</el-upload> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import { Loading } from 'element-ui' // 引入Loading服务 |
|
||||
import { requestPost } from '@/js/dai/request' |
|
||||
|
|
||||
import 'quill/dist/quill.core.css' |
|
||||
import 'quill/dist/quill.snow.css' |
|
||||
import 'quill/dist/quill.bubble.css' |
|
||||
|
|
||||
import { quillEditor } from 'vue-quill-editor' |
|
||||
import Tinymce from '@c/tinymce/index.vue' |
|
||||
|
|
||||
let loading// 加载动画 |
|
||||
export default { |
|
||||
data () { |
|
||||
return { |
|
||||
customerId: '', |
|
||||
formType: '', // 操作类型A/U D(详情) |
|
||||
guideId: '', // 父组件传来功能id |
|
||||
categoryList: [], |
|
||||
orgList: [], |
|
||||
|
|
||||
dataForm: { |
|
||||
guideId: '', |
|
||||
title: '', |
|
||||
categoryCode: '', |
|
||||
orgId: '', |
|
||||
orgType: '', |
|
||||
orgName: '', |
|
||||
moduleList: [], |
|
||||
externalLinks: [], |
|
||||
attachmentList: [] |
|
||||
}, |
|
||||
externalLink: { |
|
||||
externalLink: "", |
|
||||
description: "" |
|
||||
}, |
|
||||
|
|
||||
isLoaded: false,//是否加载结束 |
|
||||
editorOption: { |
|
||||
placeholder: '编辑文章内容' |
|
||||
}, |
|
||||
activeName: "", |
|
||||
moduleArray: [], |
|
||||
selTabIndex: 0, |
|
||||
|
|
||||
fileList: [ |
|
||||
// { |
|
||||
// name: 'food.jpeg', |
|
||||
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|
||||
// }, { |
|
||||
// name: 'food2.jpeg', |
|
||||
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|
||||
// } |
|
||||
], |
|
||||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/upload-guide-file', |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted () { |
|
||||
this.customerId = localStorage.getItem('customerId') |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
saveProjectInfo () { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
async initData (guideId, formType) { |
|
||||
this.startLoading() |
|
||||
this.formType = formType |
|
||||
this.guideId = guideId |
|
||||
this.resetData() |
|
||||
await this.loadOrg() |
|
||||
await this.getcategory() |
|
||||
await this.loadModule() |
|
||||
|
|
||||
if (formType === 'A') { |
|
||||
|
|
||||
|
|
||||
} else { |
|
||||
this.guideId = guideId |
|
||||
this.dataForm.guideId = guideId |
|
||||
await this.loadFormData() |
|
||||
} |
|
||||
|
|
||||
this.endLoading() |
|
||||
this.isLoaded = true |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
async getcategory () { |
|
||||
const url = '/gov/voice/guidecategory/getcategory' |
|
||||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/getcategory' |
|
||||
|
|
||||
const params = { |
|
||||
queryOrigin: 'saveorupdate' |
|
||||
} |
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
if (code === 0) { |
|
||||
this.categoryList = data |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
async loadOrg () { |
|
||||
const url = '/gov/org/staff/orgList' |
|
||||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/staff/orgList' |
|
||||
|
|
||||
const params = {} |
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
if (code === 0) { |
|
||||
this.orgList = data |
|
||||
if (data.length > 0) { |
|
||||
this.dataForm.orgId = data[0].orgId |
|
||||
this.dataForm.orgType = data[0].orgType |
|
||||
this.dataForm.orgName = data[0].orgName |
|
||||
} |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
//获取模块tab |
|
||||
async loadModule () { |
|
||||
const url = '/gov/voice/guidemodule/list' |
|
||||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidemodule/list' |
|
||||
|
|
||||
const params = {} |
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
if (code === 0) { |
|
||||
this.moduleArray = data |
|
||||
|
|
||||
this.moduleArray.forEach(element => { |
|
||||
element.editorOption = { |
|
||||
placeholder: '输入' + element.moduleName |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
if (data.length > 0) { |
|
||||
this.activeName = data[0].moduleId |
|
||||
} |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
//单位下拉框改变 |
|
||||
orgChange (index) { |
|
||||
console.log(index) |
|
||||
this.dataForm.orgName = this.orgList[index].orgName |
|
||||
this.dataForm.orgType = this.orgList[index].orgType |
|
||||
}, |
|
||||
|
|
||||
tabClick (selTab) { |
|
||||
console.log(selTab.index) |
|
||||
this.selTabIndex = selTab.index |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
onEditorChange ({ editor, html, text }) { |
|
||||
|
|
||||
if (this.isLoaded) { |
|
||||
this.moduleArray[this.selTabIndex].moduleContent = html |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
async loadFormData () { |
|
||||
this.isLoaded = false |
|
||||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/detail' |
|
||||
const url = '/gov/voice/guide/detail' |
|
||||
let params = { |
|
||||
guideId: this.guideId |
|
||||
} |
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
if (code === 0) { |
|
||||
this.dataForm = data |
|
||||
// debugger |
|
||||
|
|
||||
if (data.externalLinks && data.externalLinks.length > 0) { |
|
||||
this.externalLink = data.externalLinks[0] |
|
||||
} |
|
||||
if (data.attachmentList) { |
|
||||
this.fileList = data.attachmentList |
|
||||
} |
|
||||
|
|
||||
if (data.moduleList && data.moduleList.length > 0) { |
|
||||
this.moduleArray = data.moduleList |
|
||||
} |
|
||||
|
|
||||
console.log(this.moduleArray) |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
saveForm () { |
|
||||
this.dataForm.moduleList = [] |
|
||||
this.moduleArray.forEach(element => { |
|
||||
if (element.moduleContent) { |
|
||||
this.dataForm.moduleList.push(element) |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
if (this.externalLink.externalLink && this.externalLink.description) { |
|
||||
this.dataForm.externalLinks = [] |
|
||||
this.dataForm.externalLinks.push(this.externalLink) |
|
||||
} else if (!this.externalLink.externalLink && !this.externalLink.description) { |
|
||||
this.dataForm.externalLinks = [] |
|
||||
} else { |
|
||||
this.$message({ |
|
||||
type: 'error', |
|
||||
message: '链接地址和地址说明必须同时填写' |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
if (this.fileList.length > 0) { |
|
||||
this.dataForm.attachmentList = this.fileList |
|
||||
} |
|
||||
|
|
||||
if (this.moduleArray.length === 0 && this.dataForm.externalLinks.length === 0 && this.fileList.length === 0) { |
|
||||
this.$message({ |
|
||||
type: 'error', |
|
||||
message: '文档内容、外链、附件至少填写一样' |
|
||||
}) |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
console.log(this.dataForm) |
|
||||
|
|
||||
// return false |
|
||||
|
|
||||
this.$refs['dataForm'].validate((valid, messageObj) => { |
|
||||
|
|
||||
if (!valid) { |
|
||||
app.util.validateRule(messageObj) |
|
||||
} else { |
|
||||
let url = '' |
|
||||
if (this.formType === 'U') { |
|
||||
url = '/gov/voice/guide/edit' |
|
||||
// url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/edit' |
|
||||
} else { |
|
||||
url = "/gov/voice/guide/add" |
|
||||
// url = "http://yapi.elinkservice.cn/mock/102/gov/voice/guide/add" |
|
||||
} |
|
||||
|
|
||||
window.app.ajax.post(url, this.dataForm, |
|
||||
(data, rspMsg) => { |
|
||||
this.$message({ |
|
||||
type: 'success', |
|
||||
message: '保存成功' |
|
||||
}) |
|
||||
this.$emit('refresh') |
|
||||
this.$emit('cancleBack') |
|
||||
}, |
|
||||
(rspMsg, data) => { |
|
||||
this.endLoading() |
|
||||
this.$message.error(rspMsg) |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
resetData () { |
|
||||
this.moduleArray = [] |
|
||||
// this.moduleArray.forEach(element => { |
|
||||
// if (element.moduleContent) { |
|
||||
// element.moduleContent = '' |
|
||||
// } |
|
||||
// }); |
|
||||
this.externalLink = { |
|
||||
externalLink: "", |
|
||||
description: "" |
|
||||
} |
|
||||
this.fileList = [] |
|
||||
this.dataForm = { |
|
||||
guideId: '', |
|
||||
title: '', |
|
||||
categoryCode: '', |
|
||||
orgId: '', |
|
||||
orgType: '', |
|
||||
orgName: '', |
|
||||
moduleList: [], |
|
||||
externalLinks: [], |
|
||||
attachmentList: [] |
|
||||
} |
|
||||
}, |
|
||||
// 取消 |
|
||||
diaCancel () { |
|
||||
this.resetData() |
|
||||
this.$emit('cancleBack') |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
beforeUpload (file) { |
|
||||
const array = file.name.split('.') |
|
||||
const extension = array[array.length - 1] |
|
||||
|
|
||||
if (extension !== 'xls' |
|
||||
&& extension !== 'xlsx' |
|
||||
&& extension !== 'doc' |
|
||||
&& extension !== 'docx' |
|
||||
&& extension !== 'pdf') { |
|
||||
this.$message.error('只能上传word、excel、pdf文件！') |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
// if (!isLt2M) { |
|
||||
// this.$message.warning('上传模板大小不能超过 5MB!') |
|
||||
// return |
|
||||
// } |
|
||||
|
|
||||
// return false // 返回false不会自动上传 |
|
||||
}, |
|
||||
|
|
||||
handleFileRemove (file) { |
|
||||
|
|
||||
if (file && file.status === "success") { |
|
||||
this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
handleFileSuccess (res, file) { |
|
||||
|
|
||||
if (res.code === 0 && res.msg === 'success') { |
|
||||
const array = file.name.split('.') |
|
||||
const fileType = array[array.length - 1] |
|
||||
|
|
||||
file.url = res.data.url |
|
||||
file.type = fileType |
|
||||
this.fileList.push(file) |
|
||||
console.log(this.fileList) |
|
||||
} else this.$message.error(res.msg) |
|
||||
}, |
|
||||
|
|
||||
//下载 |
|
||||
handleFileDownload (file) { |
|
||||
|
|
||||
var a = document.createElement('a'); |
|
||||
var event = new MouseEvent('click'); |
|
||||
a.download = file.name; |
|
||||
console.log(a) |
|
||||
a.href = file.url; |
|
||||
a.dispatchEvent(event); |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
|
|
||||
// 开启加载动画 |
|
||||
startLoading () { |
|
||||
loading = Loading.service({ |
|
||||
lock: true, // 是否锁定 |
|
||||
text: '正在加载……', // 加载中需要显示的文字 |
|
||||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|
||||
}) |
|
||||
}, |
|
||||
// 结束加载动画 |
|
||||
endLoading () { |
|
||||
// clearTimeout(timer); |
|
||||
if (loading) { |
|
||||
loading.close() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
components: { |
|
||||
quillEditor, Tinymce |
|
||||
|
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule () { |
|
||||
return { |
|
||||
categoryCode: [ |
|
||||
{ required: true, message: '分类不能为空', trigger: 'blur' } |
|
||||
], |
|
||||
orgId: [ |
|
||||
{ required: true, message: '发布单位不能为空', trigger: 'blur' } |
|
||||
], |
|
||||
title: [ |
|
||||
{ required: true, message: '标题不能为空', trigger: 'blur' } |
|
||||
|
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
...mapGetters(['clientHeight', 'resolution']), |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="css" scoped> |
|
||||
.div_btn { |
|
||||
z-index: 10; |
|
||||
position: absolute; |
|
||||
right: 50px; |
|
||||
top: 20px; |
|
||||
/* margin: 0 0 20px 0; */ |
|
||||
} |
|
||||
|
|
||||
.div_editor { |
|
||||
margin-left: 60px; |
|
||||
width: 90%; |
|
||||
} |
|
||||
|
|
||||
.div_editor >>> .el-tabs--card > .el-tabs__header .el-tabs__nav { |
|
||||
border: none; |
|
||||
} |
|
||||
.el-tabs__nav-wrap::after { |
|
||||
background-color: white; |
|
||||
} |
|
||||
.el-tabs__active-bar { |
|
||||
background-color: white; |
|
||||
} |
|
||||
|
|
||||
.div_content { |
|
||||
margin-top: 30px; |
|
||||
} |
|
||||
|
|
||||
.item_width_1 { |
|
||||
width: 300px; |
|
||||
} |
|
||||
.item_width_2 { |
|
||||
width: 500px; |
|
||||
} |
|
||||
.block { |
|
||||
display: block; |
|
||||
} |
|
||||
.text_p { |
|
||||
height: 400px; |
|
||||
overflow: auto; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style> |
|
||||
.aui-content .ql-container { |
|
||||
height: 400px; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue