6 changed files with 2866 additions and 1144 deletions
@ -0,0 +1,853 @@ |
|||
<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" |
|||
size="small" |
|||
placeholder="全部" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in unitList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务事项" prop="serviceMatter"> |
|||
<el-select |
|||
class="item_width_2" |
|||
v-model="formData.serviceMatter" |
|||
size="small" |
|||
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="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> |
|||
</div> |
|||
<div> |
|||
<el-form-item label="活动标题" prop="title"> |
|||
<el-input |
|||
v-model="formData.title" |
|||
size="small" |
|||
class="item_width_1" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="活动时间" prop="startTime"> |
|||
<el-date-picker |
|||
v-model="timeRange" |
|||
size="small" |
|||
type="daterange" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
@change="handleTimeChange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
> |
|||
</el-date-picker> |
|||
</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="resi-row-btn"> |
|||
<el-button |
|||
class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd" |
|||
>新增</el-button |
|||
> |
|||
|
|||
<el-button |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule" |
|||
>下载模板</el-button |
|||
> |
|||
|
|||
<el-upload |
|||
:headers="$getElUploadHeaders()" |
|||
ref="upload" |
|||
class="upload-demo" |
|||
: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" |
|||
class="diy-button--delete" |
|||
>导入</el-button |
|||
> |
|||
</el-upload> |
|||
|
|||
<el-button |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="handleExport" |
|||
>导出</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="unitName" |
|||
header-align="center" |
|||
align="center" |
|||
label="单位名称" |
|||
width="180" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gridName" |
|||
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 |
|||
prop="activityTime" |
|||
header-align="center" |
|||
align="center" |
|||
label="来源" |
|||
width="100" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.actId">小程序</span> |
|||
<span v-else>管理平台</span> |
|||
</template> |
|||
</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 |
|||
v-if=" |
|||
agencyId === scope.row.agencyId && |
|||
!scope.row.actId |
|||
" |
|||
type="text" |
|||
style="color: #00a7a9; text-decoration: underline" |
|||
size="small" |
|||
@click="handleEdit(scope.row)" |
|||
>修改</el-button |
|||
> |
|||
|
|||
<el-button |
|||
v-if="agencyId === scope.row.agencyId" |
|||
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="950px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose" |
|||
> |
|||
<activitys-form |
|||
ref="ref_form" |
|||
:unitList="unitList" |
|||
:gridList="gridList" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk" |
|||
></activitys-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="detailClosed" |
|||
> |
|||
<activitys-detail |
|||
ref="ref_detail" |
|||
:serviceList="serviceList" |
|||
:gridList="gridList" |
|||
@diaDetailClose="detailClosed" |
|||
></activitys-detail> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import activitysForm from "./activitysForm"; |
|||
import activitysDetail from "./activitysDetail"; |
|||
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: "", |
|||
gridList: [], //所属网格 |
|||
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: "", |
|||
gridId: "", |
|||
}, |
|||
|
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: "新增活动", |
|||
detailShow: false, |
|||
|
|||
files: "", |
|||
fileName: "", |
|||
uploadUlr: |
|||
window.SITE_CONFIG["apiURL"] + "/gov/org/neighborhood/import", |
|||
}; |
|||
}, |
|||
components: { |
|||
activitysForm, |
|||
activitysDetail, |
|||
}, |
|||
async created() {}, |
|||
async mounted() { |
|||
//获取服务事项 |
|||
await this.loadService(); |
|||
|
|||
const { user } = this.$store.state; |
|||
this.agencyId = user.agencyId; |
|||
|
|||
//获取建联单位 |
|||
this.loadUnit(); |
|||
this.loadGrid(); |
|||
//获取网格下拉框数据 |
|||
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 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/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/icpartyactivity/search"; |
|||
// 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; |
|||
}, |
|||
|
|||
detailClosed() { |
|||
console.log(this.$refs.ref_detail); |
|||
this.$refs.ref_detail.diaDestroy(); |
|||
this.detailShow = false; |
|||
}, |
|||
|
|||
handleDetail(row) { |
|||
this.detailShow = true; |
|||
this.formTitle = "详情"; |
|||
|
|||
this.$nextTick(() => { |
|||
this.$refs.ref_detail.initForm(row); |
|||
// 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.deleteActivity(row); |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
async handleExportModule() { |
|||
let url = "/heart/icpartyactivity/import-template-download"; |
|||
|
|||
let params = {}; |
|||
await this.$http({ |
|||
method: "POST", |
|||
url, |
|||
responseType: "blob", |
|||
data: params, |
|||
}) |
|||
.then((res) => { |
|||
console.log("res-------dd", res); |
|||
if (res.headers["content-disposition"]) { |
|||
let fileName = window.decodeURI( |
|||
res.headers["content-disposition"] |
|||
.split(";")[1] |
|||
.split("=")[1] |
|||
); |
|||
this.download(res.data, fileName); |
|||
} else this.$message.error("下载失败"); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
async deleteActivity(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: "", |
|||
}; |
|||
this.pageSize = 10; |
|||
this.pageNo = 0; |
|||
this.loadTable(); |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport() { |
|||
let title = "联建活动列表"; |
|||
|
|||
const url = "/heart/icpartyactivity/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/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] + |
|||
" 00:00:00"; |
|||
this.formData.endTime = |
|||
endTimeArray[0] + |
|||
"-" + |
|||
endTimeArray[1] + |
|||
"-" + |
|||
endTimeArray[2] + |
|||
" 23:59:59"; |
|||
|
|||
// 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.$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: 495px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.div_btn { |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
|
|||
.resi-row-btn { |
|||
display: flex; |
|||
margin-bottom: 13px; |
|||
::v-deep .el-button { |
|||
// margin-left: 10px; |
|||
border: 0; |
|||
} |
|||
::v-deep .el-select { |
|||
margin-right: 10px; |
|||
} |
|||
.el-button--success { |
|||
background: rgba(34, 193, 195, 1); |
|||
} |
|||
.el-button { |
|||
margin-left: 10px; |
|||
border: 0; |
|||
} |
|||
.el-button--success { |
|||
background: rgba(34, 193, 195, 1); |
|||
} |
|||
.el-button--warning { |
|||
background: rgba(254, 179, 73, 1); |
|||
} |
|||
.el-button--danger { |
|||
background: rgba(254, 98, 82, 1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,623 @@ |
|||
<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="所属网格" |
|||
label-width="150px" |
|||
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="服务事项" |
|||
label-width="150px" |
|||
prop="serviceMatterList"> |
|||
|
|||
<el-checkbox-group class="item_width_1" |
|||
style="display:flex;flex-wrap:wrap" |
|||
v-model="formData.serviceMatterList"> |
|||
<el-checkbox v-for="item in serviceList" |
|||
:key="item.value" |
|||
:label="item.value">{{item.label}}</el-checkbox> |
|||
|
|||
</el-checkbox-group> |
|||
|
|||
<!-- <el-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="unitIdList" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox-group class="item_width_1" |
|||
style="display:flex;flex-wrap:wrap" |
|||
v-model="formData.unitIdList"> |
|||
<el-checkbox v-for="item in unitList" |
|||
:key="item.value" |
|||
:label="item.value">{{item.label}}</el-checkbox> |
|||
|
|||
</el-checkbox-group> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.unitId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in unitList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</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="formData.content"></p> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务人数" |
|||
style="display: block" |
|||
prop="peopleCount" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_4" |
|||
v-model="formData.peopleCount" |
|||
:min="0" |
|||
:max="9999" |
|||
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="yyyy-MM-dd HH:mm:ss" |
|||
type="datetime" |
|||
placeholder="选择时间"> |
|||
</el-date-picker> |
|||
</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_activity" |
|||
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-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="formData.result"></p> |
|||
</div> |
|||
</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 Tinymce from '@c/tinymce2/index.vue' |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
let initFormData = () => { |
|||
let _form = { |
|||
gridId: '', |
|||
serviceMatter: '',//服务事项 |
|||
serviceMatterList: [], |
|||
unitId: '',//单位ID |
|||
unitIdList: [], |
|||
title: '',//活动标题 |
|||
target: '',//活动目标 |
|||
content: '',//活动内容 |
|||
activityTime: '',//活动时间 |
|||
peopleCount: 0,//服务人数 |
|||
result: '', //活动结果 |
|||
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, |
|||
|
|||
btnDisable: false, |
|||
|
|||
keyWords: '', |
|||
activityId: '', |
|||
formData: initFormData(), |
|||
serviceList: [], |
|||
// gridList: [], |
|||
agencyId: '' |
|||
|
|||
} |
|||
}, |
|||
components: { Tinymce }, |
|||
mounted () { |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initForm (type, activityId) { |
|||
this.startLoading() |
|||
this.$refs.ref_form.resetFields(); |
|||
|
|||
|
|||
//获取服务事项 |
|||
await this.loadService() |
|||
|
|||
let { latitude, longitude } = this.$store.state.user; |
|||
|
|||
this.formType = type |
|||
if (activityId) { |
|||
this.activityId = activityId |
|||
this.formData.id = activityId |
|||
await this.loadFormData() |
|||
} else { |
|||
this.formData.latitude = latitude |
|||
this.formData.longitude = longitude |
|||
} |
|||
this.$nextTick(() => { |
|||
if (!map) { |
|||
this.initMap(this.formData.latitude, this.formData.longitude); |
|||
} else { |
|||
map.setCenter(this.formData.latitude, this.formData.longitude); |
|||
map.setMarker(this.formData.latitude, this.formData.longitude); |
|||
} |
|||
}) |
|||
this.endLoading() |
|||
|
|||
}, |
|||
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/serviceitem/dict-list" |
|||
|
|||
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 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 |
|||
console.log(this.formData.content) |
|||
let style_img = "style='width:50px;height:40px;' " |
|||
|
|||
if (this.formData.content) { |
|||
// this.formData.content = this.formData.content.replace(/<img/g, "<img style='width:200px;height:120px;'") |
|||
// let array=this.formData.content.split('<img') |
|||
|
|||
} |
|||
console.log(this.formData.content) |
|||
|
|||
} 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 (latitude, longitude) { |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_activity"), |
|||
{ 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 = [] |
|||
this.activityId = '' |
|||
this.keyWords = '' |
|||
this.formData = { |
|||
gridId: '', |
|||
serviceMatter: '',//服务事项 |
|||
serviceMatterList: [], |
|||
unitId: '',//单位ID |
|||
unitIdList: [], |
|||
title: '',//活动标题 |
|||
target: '',//活动目标 |
|||
content: '',//活动内容 |
|||
activityTime: '',//活动时间 |
|||
peopleCount: 0,//服务人数 |
|||
result: '', //活动结果 |
|||
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 { |
|||
serviceMatterList: [ |
|||
{ required: true, message: '服务事项不能为空', trigger: 'blur' } |
|||
], |
|||
unitIdList: [ |
|||
{ 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: [] |
|||
}, |
|||
gridList: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.item_width_1 { |
|||
width: 560px; |
|||
|
|||
/deep/.tox .tox-dialog { |
|||
z-index: 20000; |
|||
} |
|||
} |
|||
.tinymce_view { |
|||
::v-deep .tox .tox-dialog { |
|||
z-index: 2000000000; |
|||
} |
|||
} |
|||
|
|||
.div_map { |
|||
position: relative; |
|||
} |
|||
.div_searchmap { |
|||
z-index: 5000; |
|||
position: absolute; |
|||
top: 5px; |
|||
left: 5px; |
|||
} |
|||
|
|||
.tinymce_view { |
|||
height: 400px; |
|||
overflow: auto; |
|||
} |
|||
.text_p { |
|||
margin: 0; |
|||
padding: 0 10px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 5px; |
|||
> p { |
|||
margin: 0; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div class=""> |
|||
<el-card> |
|||
<el-table |
|||
border |
|||
:data="this.tableData" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
prop="userName" |
|||
align="center" |
|||
header-align="center" |
|||
label="姓名" |
|||
width="180" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="mobile" |
|||
align="center" |
|||
header-align="center" |
|||
label="手机号" |
|||
width="180" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gridName" |
|||
align="center" |
|||
header-align="center" |
|||
label="报名网格" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="signUpTime" |
|||
align="center" |
|||
header-align="center" |
|||
label="报名时间" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<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> |
|||
|
|||
</el-card> |
|||
<div class="div_btn"> |
|||
<el-button size="small" @click="handleCancle">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
activityId: "", |
|||
total: 0, |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
async getTable() { |
|||
const url = "/heart/icpartyactivity/querySignUpRecord"; |
|||
let params = { |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
activityId: this.activitysId, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
console.log(data); |
|||
this.tableData = data.list; |
|||
this.total = data.total; |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
this.pageNo = 1; |
|||
this.getTable(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTable(); |
|||
}, |
|||
handleCancle(){ |
|||
this.$emit('resiListCancle') |
|||
} |
|||
}, |
|||
props: { |
|||
activitysId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
|
|||
.div_btn { |
|||
margin-top: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue