jiangyy
3 years ago
1 changed files with 574 additions and 0 deletions
@ -0,0 +1,574 @@ |
|||||
|
<template> |
||||
|
<div class="div_main"> |
||||
|
<div v-show="pageType == 'list'"> |
||||
|
<div class="div_search"> |
||||
|
<el-form :inline="true" |
||||
|
:model="formData" |
||||
|
ref="ref_searchform" |
||||
|
:label-width="'80px'"> |
||||
|
<div> |
||||
|
|
||||
|
<el-form-item label="服务类别" |
||||
|
prop="sourceType"> |
||||
|
<el-select v-model="formData.sourceType" |
||||
|
placeholder="请选择" |
||||
|
size="small" |
||||
|
clearable |
||||
|
class="item_width_2"> |
||||
|
<el-option v-for="item in qudaoArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="服务项目" |
||||
|
prop="eventContent"> |
||||
|
<el-input v-model="formData.eventContent" |
||||
|
class="item_width_1" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务组织" |
||||
|
prop="name"> |
||||
|
<el-input v-model="formData.name" |
||||
|
class="item_width_2" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务时间" |
||||
|
prop="startTime"> |
||||
|
<el-date-picker v-model="formData.startTime" |
||||
|
:picker-options="startPickerOptions" |
||||
|
class="item_width_2" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
value="yyyy-MM-dd" |
||||
|
placeholder="开始时间"> |
||||
|
</el-date-picker> |
||||
|
<span class="data-tag">至</span> |
||||
|
<el-date-picker v-model="formData.endTime" |
||||
|
:picker-options="endPickerOptions" |
||||
|
class="item_width_2 data-tag" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
value="yyyy-MM-dd" |
||||
|
placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务状态" |
||||
|
prop="status"> |
||||
|
<el-select class="item_width_2" |
||||
|
v-model="formData.status" |
||||
|
placeholder="全部" |
||||
|
size="small" |
||||
|
clearable> |
||||
|
<el-option v-for="item in statusArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="满意度" |
||||
|
prop="status"> |
||||
|
<el-select class="item_width_2" |
||||
|
v-model="formData.status" |
||||
|
placeholder="全部" |
||||
|
size="small" |
||||
|
clearable> |
||||
|
<el-option v-for="item in statusArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</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 class="diy-button--add" |
||||
|
size="small" |
||||
|
@click="handleAdd">新增</el-button> |
||||
|
|
||||
|
<el-button @click="handleExport" |
||||
|
class="diy-button--reset" |
||||
|
size="small">导出</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
||||
|
class="table" |
||||
|
style="width: 100%" |
||||
|
:height="maxTableHeight"> |
||||
|
<el-table-column label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
align="center" |
||||
|
width="50" /> |
||||
|
|
||||
|
<el-table-column prop="gridName" |
||||
|
align="center" |
||||
|
label="服务类别" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="eventContent" |
||||
|
label="服务项目" |
||||
|
align="center" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="sourceTypeName" |
||||
|
align="center" |
||||
|
width="110" |
||||
|
label="服务组织名称" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="address" |
||||
|
align="center" |
||||
|
width="140" |
||||
|
:show-overflow-tooltip="true" |
||||
|
label="服务时间"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="name" |
||||
|
align="center" |
||||
|
width="100" |
||||
|
label="服务状态" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="mobile" |
||||
|
align="center" |
||||
|
width="110" |
||||
|
label="服务人数" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column fixed="right" |
||||
|
label="操作" |
||||
|
align="center" |
||||
|
width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button v-if="scope.row.status==='processing'&&!scope.row.operationId " |
||||
|
@click="handleDispose(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="div-table-button--edit">处理</el-button> |
||||
|
|
||||
|
<!-- <el-button v-else-if="scope.row.status==='closed_case' && !scope.row.satisfactionName && user.id===scope.row.createdUserId" |
||||
|
@click="handleSatisfy(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="div-table-button--edit">评价</el-button> --> |
||||
|
<el-button v-else |
||||
|
@click="handleWatch(scope.row)" |
||||
|
type="text" |
||||
|
size="small">查看</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="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div v-if="pageType == 'dispose' || pageType == 'info'|| pageType == 'add'"> |
||||
|
<!-- <event-info ref="eleEditForm" |
||||
|
:pageType="pageType" |
||||
|
:eventId="eventId" |
||||
|
:eventDetailData="eventDetailData" |
||||
|
@handleClose="handleClose" |
||||
|
@handleOk="handleOk" |
||||
|
@dialogOk="handleEditSuccess" /> --> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog :title="'播放语音'" |
||||
|
:visible.sync="showVoice" |
||||
|
width="40%" |
||||
|
top="5vh" |
||||
|
append-to-body |
||||
|
class="dialog-h" |
||||
|
:close-on-click-modal="false"> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<div style="display:flex;justify-content:center;margin:50px"> |
||||
|
|
||||
|
<audio controls> |
||||
|
<source :src="selVoiceUrl" |
||||
|
type="" /> |
||||
|
</audio> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="resi-btns"> |
||||
|
<el-button size="small" |
||||
|
@click="showVoice=false">取消</el-button> |
||||
|
|
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
// import eventInfo from "./cpts/event-info"; |
||||
|
import axios from "axios"; |
||||
|
|
||||
|
export default { |
||||
|
components: {}, |
||||
|
|
||||
|
data () { |
||||
|
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
if (this.formData.startTime) { |
||||
|
let startTime = new Date(this.formData.startTime) |
||||
|
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime |
||||
|
} else { |
||||
|
return time.getTime() > nowData |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
return time.getTime() > nowData |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
pageType: "list", // 列表list 新增add 处理dispose 详情info |
||||
|
user: {}, |
||||
|
agencyId: '', |
||||
|
|
||||
|
tableData: [], |
||||
|
|
||||
|
statusArray: [ |
||||
|
{ |
||||
|
value: "processing", |
||||
|
label: "处理中", |
||||
|
}, |
||||
|
{ |
||||
|
value: "closed_case", |
||||
|
label: "已完成", |
||||
|
}, |
||||
|
], |
||||
|
qudaoArray: [ |
||||
|
{ |
||||
|
value: "0", |
||||
|
label: "随手拍/随时讲", |
||||
|
}, |
||||
|
{ |
||||
|
value: "1", |
||||
|
label: "多媒体反应", |
||||
|
}, |
||||
|
{ |
||||
|
value: "2", |
||||
|
label: "社区电话", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3", |
||||
|
label: "12345", |
||||
|
}, |
||||
|
{ |
||||
|
value: "4", |
||||
|
label: "网络员手持终端", |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
formData: { |
||||
|
gridId: '', |
||||
|
sourceType: '', |
||||
|
eventContent: '', |
||||
|
name: '', |
||||
|
mobile: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
status: '', |
||||
|
|
||||
|
}, |
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem("pageSize") || 20, |
||||
|
total: 1, |
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
disabledDate: startDisabledDate |
||||
|
}, |
||||
|
eventId: '', |
||||
|
|
||||
|
eventDetailData: {}, |
||||
|
|
||||
|
|
||||
|
showVoice: false, |
||||
|
selVoiceUrl: '', |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
maxTableHeight () { |
||||
|
return this.$store.state.inIframe |
||||
|
? this.clientHeight - 410 + this.iframeHeigh |
||||
|
: this.clientHeight - 410; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: { |
||||
|
"formData.endTime": function (val) { |
||||
|
if (val && val != '') { |
||||
|
let arrayTemp = val.split(' ') |
||||
|
this.formData.endTime = arrayTemp[0] + ' 23:59:59' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
mounted () { |
||||
|
console.log(this.$store.state) |
||||
|
this.user = this.$store.state.user |
||||
|
|
||||
|
this.agencyId = this.user.agencyId |
||||
|
|
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
handleSearch (val) { |
||||
|
console.log(this.formData); |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async handleExport () { |
||||
|
const url = "/gov/project/icEvent/export"; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
axios({ |
||||
|
url: window.SITE_CONFIG["apiURL"] + url, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
...formData, |
||||
|
}, |
||||
|
responseType: "blob", |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
let fileName = window.decodeURI( |
||||
|
res.headers["content-disposition"].split(";")[1].split("=")[1] |
||||
|
); |
||||
|
console.log("filename", fileName); |
||||
|
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); |
||||
|
var url = window.URL.createObjectURL(blob); |
||||
|
var aLink = document.createElement("a"); |
||||
|
aLink.style.display = "none"; |
||||
|
aLink.href = url; |
||||
|
aLink.setAttribute("download", fileName); |
||||
|
document.body.appendChild(aLink); |
||||
|
aLink.click(); |
||||
|
document.body.removeChild(aLink); //下载完成移除元素 |
||||
|
window.URL.revokeObjectURL(url); //释放掉blob对象 |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log("获取导出情失败", err); |
||||
|
return this.$message.error("网络错误"); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async handleAdd () { |
||||
|
|
||||
|
this.pageType = "add"; |
||||
|
}, |
||||
|
|
||||
|
async handleWatch (row) { |
||||
|
this.eventId = row.icEventId |
||||
|
|
||||
|
this.eventId = row.icEventId |
||||
|
const url = "/gov/project/icEvent/detail"; |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
icEventId: this.eventId, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
|
||||
|
this.eventDetailData = { ...data }; |
||||
|
this.pageType = "info"; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async handleDispose (row) { |
||||
|
this.eventId = row.icEventId |
||||
|
const url = "/gov/project/icEvent/detail"; |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
icEventId: this.eventId, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
|
||||
|
this.eventDetailData = { ...data }; |
||||
|
this.pageType = "dispose"; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//显示语音窗口 |
||||
|
handleShowVoice (url) { |
||||
|
this.selVoiceUrl = url |
||||
|
this.showVoice = true |
||||
|
}, |
||||
|
|
||||
|
handleClose () { |
||||
|
this.pageType = "list"; |
||||
|
this.eventId = "" |
||||
|
this.getTableData() |
||||
|
|
||||
|
}, |
||||
|
handleOk () { |
||||
|
this.pageType = "list"; |
||||
|
this.eventId = "" |
||||
|
this.pageNo = 1 |
||||
|
this.getTableData() |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleEditSuccess () { |
||||
|
this.handleClose(); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
async handleDel (rowData, rowIndex) { |
||||
|
console.log(rowData, rowIndex); |
||||
|
const url = |
||||
|
"/heart/iccommunityselforganization/delcommunityselforganization"; |
||||
|
const { tableData } = this; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
orgId: tableData[rowIndex].orgId, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("删除成功！"); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error("操作失败！"); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getTableData () { |
||||
|
const url = "/gov/project/icEvent/list"; |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/list"; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
...formData, |
||||
|
}); |
||||
|
if (code === 0) { |
||||
|
|
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list |
||||
|
? data.list.map((item) => { |
||||
|
return item; |
||||
|
}) |
||||
|
: []; |
||||
|
|
||||
|
this.tableData.forEach(item => { |
||||
|
if (item.operationType === '2') { |
||||
|
item.operationTypeShow = '已转需求' |
||||
|
} |
||||
|
if (item.operationType === '1') { |
||||
|
item.operationTypeShow = '已立项' |
||||
|
} |
||||
|
if (item.operationType === '0') { |
||||
|
item.operationTypeShow = '已回复' |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
|
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem("pageSize", val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
|
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
resetSearch () { |
||||
|
this.formData = { |
||||
|
gridId: '', |
||||
|
sourceType: '', |
||||
|
eventContent: '', |
||||
|
name: '', |
||||
|
mobile: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
status: '', |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// this.pageNo = 1 |
||||
|
// this.loadTable() |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue