tianq
3 years ago
2 changed files with 620 additions and 0 deletions
@ -0,0 +1,322 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleCancle" top="5vh"> |
|||
<span slot="title"> |
|||
<span v-if="pageType == 'add'">发布</span> |
|||
<span v-if="pageType == 'edit'">修改</span> |
|||
<span v-if="pageType == 'view'">查看</span> |
|||
</span> |
|||
<div> |
|||
<div class="dialog-h-content2 scroll-h"> |
|||
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" v-if="pageType != 'view'"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="发布渠道" prop="publishDitch"> |
|||
<el-select v-model="formData.publishDitch" placeholder="请选择"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="发布范围" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
filterable |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="发布内容" prop="content"> |
|||
<el-input |
|||
v-model="formData.content" |
|||
type="textarea" |
|||
:autosize="{ minRows:4, maxRows:10}" |
|||
:disabled="disabled" |
|||
style="width:500px;" |
|||
|
|||
clearable |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<div id="app_event" class="div_map"></div> |
|||
</el-form> |
|||
<el-form :inline="false" :model="formData" ref="form" label-width="140px" v-if="pageType == 'view'"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="发布渠道" prop="publishDitch">{{ formData.publishDitch }}</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="12"> |
|||
<el-form-item label="发布范围" prop="publishRangeName">{{ formData.publishRangeName }}</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<el-form-item label="发布内容" prop="content">{{ formData.content }}</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
|
|||
|
|||
<div class="div_btn" v-if="pageType != 'view'"> |
|||
<el-button size="small" @click="handleCancle">取 消</el-button> |
|||
<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> --> |
|||
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">保 存</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer" v-if="pageType == 'view'"> |
|||
<el-button @click="handleCancle">关 闭</el-button> |
|||
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> --> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isMobile } from '@/utils/validate'; |
|||
import { mapGetters } from 'vuex'; |
|||
import { Loading } from 'element-ui'; // 引入Loading服务 |
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
import daiMap from '@/utils/dai-map'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
|
|||
let loading; // 加载动画 |
|||
let map; |
|||
var search; |
|||
var markers; |
|||
var infoWindowList; |
|||
var geocoder; // 新建一个正逆地址解析类 |
|||
|
|||
export default { |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: '' |
|||
}, |
|||
defaultData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
options: [ |
|||
{ |
|||
value: 0, |
|||
label: '专属app' |
|||
} |
|||
], |
|||
btnDisable: false, |
|||
user: '', |
|||
agencyId: '', |
|||
orgOptions: [], //组织 |
|||
orgOptionProps: { |
|||
//组织 |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
checkStrictly: true |
|||
}, |
|||
formData: { |
|||
publishDitch: '', |
|||
publishRange: '', |
|||
content: '' |
|||
}, |
|||
dataRule: { |
|||
publishDitch: [{ required: true, message: '发布渠道不能为空', trigger: 'bulr' }], |
|||
orgId: [{ required: true, message: '发布范围不能为空', trigger: 'bulr' }], |
|||
content: [{ required: true, message: '内容不能为空', trigger: 'bulr' }] |
|||
}, |
|||
//地图 |
|||
loading: false, |
|||
|
|||
searchValue: '', |
|||
searchOptions: [] |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
components: {}, |
|||
created() {}, |
|||
async mounted() { |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.startLoading(); |
|||
this.getOrgTreeList(); |
|||
|
|||
if (this.pageType != 'add') { |
|||
this.getDetail(); |
|||
} else { |
|||
} |
|||
await this.endLoading(); |
|||
this.endLoading(); |
|||
}, |
|||
|
|||
methods: { |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
// let { agencyList, subAgencyList } = res.data; |
|||
// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
// this.orgOptions = this.deepTree(_arr); |
|||
this.orgOptions = []; |
|||
this.orgOptions.push(res.data); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
this.formData.orgType= obj.level |
|||
// if (obj) { |
|||
// this.orgType = obj.level === 'grid' ? 'grid' : 'agency'; |
|||
// } else { |
|||
// this.orgType = ''; |
|||
// } |
|||
}, |
|||
async getDetail() { |
|||
const url = `/message/organization/message/detail/${this.detailId}`; |
|||
const { data, code, msg } = await requestPost(url); |
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleComfirm() { |
|||
this.save(); |
|||
}, |
|||
|
|||
async save() { |
|||
// this.formData.agencyId = this.agencyId; |
|||
this.formData.rangeList={ |
|||
orgId:this.formData.orgId, |
|||
orgType:this.formData.orgType |
|||
} |
|||
var url = ''; |
|||
var params = {}; |
|||
url = '/message/organization/message/publish'; |
|||
params = { ...this.formData }; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('操作成功'); |
|||
|
|||
this.handleCancle(); |
|||
// // this.resetData(); |
|||
// this.$emit('handleComfirm'); |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
// this.resetData(); |
|||
this.$emit('handleClose'); |
|||
}, |
|||
resetData() { |
|||
this.$refs.form.resetFields(); |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
} // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/modules/management/form-main.scss'; |
|||
@import '@/assets/scss/modules/management/form.scss'; |
|||
// @import '@/assets/scss/modules/visual/a_customize.scss'; |
|||
.div_map { |
|||
width: 350px; |
|||
} |
|||
/deep/.el-dialog__header { |
|||
padding: 25px 20px 10px 25px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: #333; |
|||
} |
|||
/deep/.el-dialog__body { |
|||
padding: 30px 0px 30px 40px; |
|||
} |
|||
/deep/.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
/deep/.el-form { |
|||
.el-form-item { |
|||
position: relative; |
|||
margin-bottom: 22px; |
|||
.el-form-item__label { |
|||
font-size: 14px; |
|||
padding-left: 15px; |
|||
text-align: left; |
|||
// &::before { |
|||
// position: absolute; |
|||
// left: 0; |
|||
// top: 12px; |
|||
// content: ''; |
|||
// display: block; |
|||
// width: 7px; |
|||
// height: 7px; |
|||
// background: #0c81fe; |
|||
// border-radius: 3px; |
|||
// } |
|||
} |
|||
.el-form-item__content { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
/deep/.dialog-h-content2 { |
|||
max-height: calc(83vh - 90px); |
|||
box-sizing: border-box; |
|||
padding: 0 10px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'110px'"> |
|||
<div> |
|||
<el-form-item label="发布渠道" prop="publishDitch"> |
|||
<el-select v-model="formData.publishDitch" placeholder="请选择"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发布范围" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
filterable |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="操作时间" label-width="110px" prop="timeRange"> |
|||
<el-date-picker |
|||
v-model="timeRange" |
|||
size="small" |
|||
type="datetimerange" |
|||
@change="handleTimeChange" |
|||
format="yyyy-MM-dd HH:mm" |
|||
value-format="yyyy-MM-dd HH:mm" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-button style="margin-left:30px" size="small" class="diy-button--search" @click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" size="small" class="diy-button--reset" @click="resetSearch">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<div class="div_btn"><el-button style="" class="diy-button--reset" size="small" @click="add()">发布</el-button></div> |
|||
|
|||
<el-table |
|||
class="table" |
|||
ref="ref_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="content" header-align="center" align="center" label="发布内容" min-width="100"></el-table-column> |
|||
<el-table-column prop="publishDitch" header-align="center" align="center" label="发布渠道" min-width="110"></el-table-column> |
|||
<el-table-column prop="publishRangeName" header-align="center" align="center" label="发布范围" min-width="110"></el-table-column> |
|||
<el-table-column prop="publishTime" header-align="center" align="center" label="发布时间" min-width="110"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="small" type="text" @click="show(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="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<addForm |
|||
v-if="dialogVisible" |
|||
:dialogVisible="dialogVisible" |
|||
:pageType="pageType" |
|||
:disabled="disabled" |
|||
:detailId="detailId" |
|||
:detailData="detailData" |
|||
@handleClose="handleClose" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import { mapGetters } from 'vuex'; |
|||
import { Loading } from 'element-ui'; // 引入Loading服务 |
|||
import addForm from './addFormNotice'; |
|||
let loading; // 加载动画 |
|||
export default { |
|||
data() { |
|||
return { |
|||
dialogVisible:false, |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
tableLoading: false, |
|||
|
|||
agencyId: '', |
|||
|
|||
timeRange: [], |
|||
formData: { |
|||
category: '', |
|||
operatorName: '', //姓名 |
|||
operatorMobile: '', //手机号 |
|||
startTime: '', //检测开始时间yyyy-MM-dd HH:mm |
|||
endTime: '' //检测结束时间yyyy-MM-dd HH:mm |
|||
}, |
|||
options: [ |
|||
{ |
|||
value: 0, |
|||
label: '专属app' |
|||
} |
|||
], |
|||
orgOptions: [], //组织 |
|||
orgOptionProps: { |
|||
//组织 |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
checkStrictly: true |
|||
}, |
|||
tableData: [] |
|||
}; |
|||
}, |
|||
components: {addForm}, |
|||
|
|||
async mounted() { |
|||
//获取场所类型 |
|||
|
|||
const { user } = this.$store.state; |
|||
this.agencyId = user.agencyId; |
|||
this.getOrgTreeList(); |
|||
await this.loadTable(); |
|||
}, |
|||
computed: { |
|||
tableHeight() { |
|||
return this.$store.state.inIframe ? this.clientHeight - 330 + this.iframeHeight : this.clientHeight - 330; |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
activated() { |
|||
this.$refs['ref_table'].doLayout(); |
|||
}, |
|||
|
|||
methods: { |
|||
resetForm() { |
|||
for (const n in this.formData) { |
|||
if (typeof this.formData[n] == 'object') this.formData[n] = []; |
|||
else this.formData[n] = ''; |
|||
} |
|||
this.orgType = ''; |
|||
this.handleSearch(); |
|||
}, |
|||
add() { |
|||
this.dialogVisible = true; |
|||
this.pageType = 'add'; |
|||
// this.detailId = row.messageId; |
|||
// this.detailData = row; |
|||
}, |
|||
show(row) { |
|||
this.dialogVisible = true; |
|||
this.pageType = 'view'; |
|||
this.detailId = row.messageId; |
|||
this.detailData = row; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
this.pageType = 'list'; |
|||
this.detailId = ''; |
|||
this.getTableData(); |
|||
}, |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
// let { agencyList, subAgencyList } = res.data; |
|||
// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
// this.orgOptions = this.deepTree(_arr); |
|||
this.orgOptions = []; |
|||
this.orgOptions.push(res.data); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
if (obj) { |
|||
this.orgType = obj.level === 'grid' ? 'grid' : 'agency'; |
|||
} else { |
|||
this.orgType = ''; |
|||
} |
|||
}, |
|||
async handleSearch() { |
|||
await this.loadTable(); |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_table.doLayout(); // 解决表格错位 |
|||
}); |
|||
}, |
|||
|
|||
async loadTable() { |
|||
this.tableLoading = true; |
|||
|
|||
const url = '/message/organization/message/list'; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/natlist" |
|||
let params = { |
|||
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; |
|||
|
|||
this.tableData.forEach(item => {}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.tableLoading = false; |
|||
}, |
|||
|
|||
handleTimeChange(time) { |
|||
if (time) { |
|||
this.formData.startDate = time[0]; |
|||
this.formData.endDate = time[1]; |
|||
} else { |
|||
this.formData.startDate = ''; |
|||
this.formData.endDate = ''; |
|||
} |
|||
}, |
|||
|
|||
//重置搜索条件 |
|||
resetSearch() { |
|||
this.formData = { |
|||
publishDitch: '', //渠道 |
|||
orgId: '', //范围 |
|||
startDate: '', //检测开始时间yyyy-MM-dd HH:mm |
|||
endDate: '' //检测结束时间yyyy-MM-dd HH:mm |
|||
}; |
|||
this.timeRange = []; |
|||
this.pageNo = 0; |
|||
// this.loadTable() |
|||
}, |
|||
|
|||
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(); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/modules/management/epidemic.scss'; |
|||
</style> |
|||
Loading…
Reference in new issue