李素
1 year ago
3 changed files with 742 additions and 37 deletions
@ -0,0 +1,635 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
|||
<div> |
|||
|
|||
|
|||
<el-form-item label="标签名称" prop="title"> |
|||
<el-input v-model.trim="formData.title" size="small" class="item_width_1" clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="首页显示" prop="unitId"> |
|||
<el-select class="item_width_1" v-model.trim="formData.unitId" size="small" placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in unitList" :key="item.value" :label="item.name" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<div style="display: flex; justify-content: flex-end;"> |
|||
<el-button style="margin-left:10px" class="diy-button--blue" size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" class="diy-button--white" size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="m-table"> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button style="" class="diy-button--add" size="small" @click="handleAdd">新增</el-button> |
|||
</div> |
|||
|
|||
<el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading" |
|||
style="width: 100%"> |
|||
|
|||
<el-table-column label="序号" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column prop="unitName" header-align="center" align="center" label="类型名称" width="380"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="peopleCount" header-align="center" align="center" label="创建时间" width="380"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" fixed="right" width="250" 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"> |
|||
<activity-records ref="ref_form" :unitList="corganizerList" :gridList="gridList" |
|||
@dialogCancle="addFormCancle" @dialogOk="addFormOk"></activity-records> |
|||
</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"> |
|||
<event-details ref="ref_detail" :serviceList="serviceList" :gridList="gridList" |
|||
@diaDetailClose="detailClosed"></event-details> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import activityRecords from '../../communityParty/activity/activityRecords' |
|||
import eventDetails from '../../communityParty/activity/eventDetails' |
|||
import util from '@js/util.js'; |
|||
import { requestPost,requestGet } 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: [{value:'是',name:'是',id:'1'},{value:'否',name:'否',id:'2'}],//单位list |
|||
corganizerList:[],//协办方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: '', |
|||
xbf:'', |
|||
title: '', |
|||
serviceMatter:"", |
|||
startTime: '', |
|||
endTime: '', |
|||
gridId: '' |
|||
}, |
|||
|
|||
|
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增活动', |
|||
detailShow: false, |
|||
|
|||
files: "", |
|||
fileName: "", |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import', |
|||
searchdemandOptions:[], |
|||
detail:{} |
|||
} |
|||
}, |
|||
components: { |
|||
activityRecords, eventDetails |
|||
}, |
|||
async created () { |
|||
|
|||
}, |
|||
async mounted () { |
|||
//获取服务事项 |
|||
await this.getDemandOptions() |
|||
|
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
|
|||
//获取建联单位 |
|||
// this.loadUnit() |
|||
this.loadGrid() |
|||
//获取网格下拉框数据 |
|||
this.loadTable() |
|||
|
|||
this.listServerOrg() |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async listServerOrg() { |
|||
const url = "/actual/base/serviceitem/listServerOrgNewTask"; |
|||
let params = { |
|||
// serviceTypeId: "1037", |
|||
// serverOrgType: "1044", |
|||
// businessType: "party_unit", |
|||
serverOrgCategoryCode: "", |
|||
serverOrgType: "party_unit", |
|||
serverParentOrgCategoryCode: "" |
|||
}; |
|||
|
|||
let { data, code, msg } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
this.corganizerList = data; |
|||
console.log("datadata",this.corganizerList) |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleCateCHange(val) { |
|||
if (val.length === 2) { |
|||
this.formData.serviceMatter = val[1]; |
|||
} else { |
|||
this.formData.serviceMatter = val[0]; |
|||
} |
|||
}, |
|||
async getDemandOptions() { |
|||
this.$http |
|||
.post("/actual/base/serviceitem/listAllCategory") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.searchdemandOptions = this.getTreeData(res.data); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
getTreeData(data) { |
|||
if (!Array.isArray(data)) return []; |
|||
let arr = data.map((item) => { |
|||
let _item = {}; |
|||
if (item.childCateList) { |
|||
if (item.childCateList.length === 0) |
|||
_item = { ...item, childCateList: undefined }; |
|||
else _item = { ...item, childCateList: this.getTreeData(item.childCateList) }; |
|||
} else { |
|||
_item = { ...item }; |
|||
} |
|||
return _item; |
|||
}); |
|||
return arr; |
|||
}, |
|||
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 = "/actual/base/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 = "/actual/base/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 = "/actual/base/icpartyactivity/search" |
|||
// const url = "/actual/base/communityActivity/page" |
|||
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) |
|||
}) |
|||
}, |
|||
// startProcess () { |
|||
// 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 deleteActivity (row) { |
|||
const url = "/actual/base/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' |
|||
} else { |
|||
this.formData.startTime = '' |
|||
this.formData.endTime = '' |
|||
} |
|||
|
|||
}, |
|||
|
|||
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 > |
|||
.g-main { |
|||
width: 100%; |
|||
} |
|||
|
|||
.m-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; |
|||
} |
|||
|
|||
.m-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 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue