|
|
|
@ -1,55 +1,20 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<Breadcrumb :list="breadcrumbList"/> |
|
|
|
<Breadcrumb :list="breadcrumbList" /> |
|
|
|
<div class="screen"> |
|
|
|
<el-form :model="queryParams" inline> |
|
|
|
<el-date-picker |
|
|
|
size="small" |
|
|
|
popper-class="selectPopClass" |
|
|
|
v-model="queryParams.month" |
|
|
|
type="month" |
|
|
|
value-format="yyyy-MM" |
|
|
|
placeholder="按月度"> |
|
|
|
</el-date-picker> |
|
|
|
|
|
|
|
<el-select popper-class="selectPopClass" v-model="queryParams.agencyId" size="small" placeholder="按组织"> |
|
|
|
<el-option |
|
|
|
v-for="item in orgOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
<el-date-picker v-if="!hideSearch" size="small" popper-class="selectPopClass" v-model="queryParams.month" type="month" value-format="yyyy-MM" placeholder="按月度"> </el-date-picker> |
|
|
|
|
|
|
|
<el-select v-if="!hideSearch" popper-class="selectPopClass" v-model="queryParams.agencyId" size="small" placeholder="按组织"> |
|
|
|
<el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<el-select |
|
|
|
popper-class="selectPopClass" |
|
|
|
clearable |
|
|
|
v-model="queryParams.satisfactionSource" |
|
|
|
size="small" |
|
|
|
placeholder="按不满意事项来源" |
|
|
|
@change="getSatisfactionCategoryOptions" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in satisfactionSourceOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
<el-select class="searchSelect" popper-class="selectPopClass" clearable collapse-tags multiple v-model="queryParams.satisfactionSource" size="small" placeholder="按不满意事项来源" @change="getSatisfactionCategoryOptions"> |
|
|
|
<el-option v-for="item in satisfactionSourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<el-select |
|
|
|
popper-class="selectPopClass" |
|
|
|
clearable |
|
|
|
v-model="queryParams.satisfactionCategory" |
|
|
|
size="small" |
|
|
|
placeholder="按不满意事项类型" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in satisfactionCategoryOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
<el-select popper-class="selectPopClass" clearable v-model="queryParams.satisfactionCategory" size="small" placeholder="按不满意事项类型"> |
|
|
|
<el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
</el-select> |
|
|
|
<el-input v-model.trim="queryParams.name" size="small" placeholder="按人员姓名"></el-input> |
|
|
|
<el-input v-model.trim="queryParams.mobile" size="small" placeholder="按人员电话"></el-input> |
|
|
|
@ -58,96 +23,52 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table"> |
|
|
|
<el-table :data="list" |
|
|
|
v-loading="loading" |
|
|
|
element-loading-text="加载中..." |
|
|
|
element-loading-spinner="el-icon-loading" |
|
|
|
element-loading-background="rgba(0,0,0,0.5)" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
label="序号" |
|
|
|
type="index" |
|
|
|
width="80"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="month" |
|
|
|
label="月度" |
|
|
|
width="114"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="organizationName" |
|
|
|
width="118" |
|
|
|
label="所属社区"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="satisfactionSource" |
|
|
|
width="168" |
|
|
|
label="事项来源"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<span :style="{color: satisfactionSourceFormat(row.satisfactionSource).color}"> |
|
|
|
<el-table :data="list" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|
|
|
<el-table-column label="序号" type="index" width="80" /> |
|
|
|
|
|
|
|
<el-table-column prop="month" label="月度" width="114" /> |
|
|
|
|
|
|
|
<el-table-column prop="organizationName" width="118" label="所属社区" /> |
|
|
|
|
|
|
|
<el-table-column prop="satisfactionSource" width="168" label="事项来源"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<span :style="{ color: satisfactionSourceFormat(row.satisfactionSource).color }"> |
|
|
|
{{ satisfactionSourceFormat(row.satisfactionSource).label }} |
|
|
|
</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="satisfactionCategoryName" |
|
|
|
width="150" |
|
|
|
label="事项类型"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="reason" |
|
|
|
show-overflow-tooltip |
|
|
|
label="事项描述"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="createdTime" |
|
|
|
width="197" |
|
|
|
label="提交时间"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="name" |
|
|
|
width="119" |
|
|
|
label="姓名"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="mobile" |
|
|
|
width="153" |
|
|
|
label="电话"/> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="completeFlag" |
|
|
|
width="118px" |
|
|
|
label="是否完成"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<span :class="row.completeFlag==='是'?'light':'red'"> |
|
|
|
<el-table-column prop="satisfactionCategoryName" width="150" label="事项类型" /> |
|
|
|
|
|
|
|
<el-table-column prop="reason" show-overflow-tooltip label="事项描述" /> |
|
|
|
|
|
|
|
<el-table-column prop="createdTime" width="197" label="提交时间" /> |
|
|
|
|
|
|
|
<el-table-column prop="name" width="119" label="姓名" /> |
|
|
|
|
|
|
|
<el-table-column prop="mobile" width="153" label="电话" /> |
|
|
|
|
|
|
|
<el-table-column prop="completeFlag" width="118px" label="是否完成"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<span :class="row.completeFlag === '是' ? 'light' : 'red'"> |
|
|
|
{{ row.completeFlag }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="followUpStatus" |
|
|
|
width="118px" |
|
|
|
label="是否回访"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<span :class="row.followUpStatus==='是'?'light':'red'"> |
|
|
|
<el-table-column prop="followUpStatus" width="118px" label="是否回访"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<span :class="row.followUpStatus === '是' ? 'light' : 'red'"> |
|
|
|
{{ row.followUpStatus }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="dangerFlag" |
|
|
|
width="118px" |
|
|
|
label="消除风险"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<span :class="row.dangerFlag==='是'?'light':'red'"> |
|
|
|
<el-table-column prop="dangerFlag" width="118px" label="消除风险"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<span :class="row.dangerFlag === '是' ? 'light' : 'red'"> |
|
|
|
{{ row.dangerFlag }} |
|
|
|
</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
@ -156,35 +77,29 @@ |
|
|
|
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<Pagination |
|
|
|
v-show="total>0" |
|
|
|
:total="total" |
|
|
|
:page.sync="queryParams.pageNo" |
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
@pagination="getList" |
|
|
|
/> |
|
|
|
<DissatisfiedDetail ref="detail" :id="id"/> |
|
|
|
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
|
|
|
<DissatisfiedDetail ref="detail" :id="id" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb' |
|
|
|
import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination' |
|
|
|
import DissatisfiedDetail from './detail.vue' |
|
|
|
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|
|
|
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|
|
|
import DissatisfiedDetail from "./detail.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "dissatisfied", |
|
|
|
components: {Breadcrumb, DissatisfiedDetail, Pagination}, |
|
|
|
components: { Breadcrumb, DissatisfiedDetail, Pagination }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
hideSearch: false, |
|
|
|
queryParams: { |
|
|
|
month: this.$moment().format('YYYY-MM'), |
|
|
|
month: this.$moment().format("YYYY-MM"), |
|
|
|
agencyId: "", |
|
|
|
satisfactionSource: "", |
|
|
|
satisfactionSource: [], |
|
|
|
satisfactionCategory: "", |
|
|
|
name: "", |
|
|
|
mobile: "", |
|
|
|
@ -193,93 +108,153 @@ export default { |
|
|
|
}, |
|
|
|
id: {}, |
|
|
|
total: 0, |
|
|
|
breadcrumbList: [{ |
|
|
|
path: '/dataBoard/satisfactionEval/index', |
|
|
|
name: '满意度评价' |
|
|
|
}, { |
|
|
|
path: '', |
|
|
|
name: '不满意事项列表' |
|
|
|
}], |
|
|
|
timeRange: [], |
|
|
|
breadcrumbList: [ |
|
|
|
{ |
|
|
|
path: "/dataBoard/satisfactionEval/index", |
|
|
|
name: "满意度评价", |
|
|
|
}, |
|
|
|
{ |
|
|
|
path: "", |
|
|
|
name: "不满意事项列表", |
|
|
|
}, |
|
|
|
], |
|
|
|
orgOptions: [], |
|
|
|
satisfactionCategoryOptions: [], |
|
|
|
list: [], |
|
|
|
satisfactionSourceOptions: [{ |
|
|
|
value: 'satisfaction_12345', |
|
|
|
label: '12345投诉', |
|
|
|
color: '#FFB73C', |
|
|
|
}, { |
|
|
|
value: 'satisfaction_province', |
|
|
|
label: '省满意度调查', |
|
|
|
color: '#64C1FF' |
|
|
|
}, { |
|
|
|
value: 'satisfaction_community', |
|
|
|
label: '社区满意度自查', |
|
|
|
color: '#08EBAE' |
|
|
|
}], |
|
|
|
loading: true |
|
|
|
} |
|
|
|
satisfactionSourceOptions: [ |
|
|
|
{ |
|
|
|
value: "satisfaction_12345", |
|
|
|
label: "12345投诉", |
|
|
|
color: "#FFB73C", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "satisfaction_province", |
|
|
|
label: "省满意度调查", |
|
|
|
color: "#64C1FF", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "satisfaction_community", |
|
|
|
label: "社区满意度自查", |
|
|
|
color: "#08EBAE", |
|
|
|
}, |
|
|
|
], |
|
|
|
loading: true, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getOrg() |
|
|
|
this.getOldPageParamsData(); |
|
|
|
this.getOrg(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getOldPageParamsData() { |
|
|
|
const { id, timeType } = this.$route.params; |
|
|
|
let satisSourceArr = []; |
|
|
|
if (id == 1) { |
|
|
|
satisSourceArr = ["satisfaction_province", "satisfaction_community"]; |
|
|
|
} else if (id == 2) { |
|
|
|
satisSourceArr = ["satisfaction_12345"]; |
|
|
|
} |
|
|
|
this.queryParams.satisfactionSource = satisSourceArr; |
|
|
|
if (this.queryParams.satisfactionSource.length > 0) { |
|
|
|
this.getSatisfactionCategoryOptions(); |
|
|
|
} |
|
|
|
if (timeType != 0) { |
|
|
|
this.hideSearch = true; |
|
|
|
this.timeRange = this.timeChange(timeType); |
|
|
|
console.log(this.timeRange); |
|
|
|
} else { |
|
|
|
this.hideSearch = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
getSatisfactionCategoryOptions() { |
|
|
|
this.queryParams.satisfactionCategory = '' |
|
|
|
this.queryParams.satisfactionCategory = ""; |
|
|
|
if (!this.queryParams.satisfactionSource) { |
|
|
|
this.satisfactionCategoryOptions = [] |
|
|
|
return |
|
|
|
this.satisfactionCategoryOptions = []; |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=' + this.queryParams.satisfactionSource).then(({data: {data}}) => { |
|
|
|
this.satisfactionCategoryOptions = data.map(item => { |
|
|
|
const satisfactionSource = this.queryParams.satisfactionSource.toString(); |
|
|
|
this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" + satisfactionSource).then(({ data: { data } }) => { |
|
|
|
this.satisfactionCategoryOptions = data.map((item) => { |
|
|
|
return { |
|
|
|
label: item.categoryName, |
|
|
|
value: item.categoryCode |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
value: item.categoryCode, |
|
|
|
}; |
|
|
|
}); |
|
|
|
this.queryParams.satisfactionCategory = this.$route.params.type == 0 ? "" : this.$route.params.type; |
|
|
|
}); |
|
|
|
}, |
|
|
|
satisfactionSourceFormat(val) { |
|
|
|
let satisfactionSource = this.satisfactionSourceOptions.filter(item => item.value === val)[0] |
|
|
|
return satisfactionSource ? satisfactionSource : '' |
|
|
|
let satisfactionSource = this.satisfactionSourceOptions.filter((item) => item.value === val)[0]; |
|
|
|
return satisfactionSource ? satisfactionSource : ""; |
|
|
|
}, |
|
|
|
search() { |
|
|
|
this.queryParams.pageNo = 1 |
|
|
|
this.queryParams.pageNo = 1; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
this.loading = true |
|
|
|
this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedMattersList?' + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => { |
|
|
|
this.total = data.total |
|
|
|
this.list = data.list |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
this.loading = true; |
|
|
|
this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedMattersList?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => { |
|
|
|
this.total = data.total; |
|
|
|
this.list = data.list; |
|
|
|
this.loading = false; |
|
|
|
}); |
|
|
|
}, |
|
|
|
getOrg() { |
|
|
|
let params = { |
|
|
|
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|
|
|
level: this.$store.state.chooseArea.chooseName.level |
|
|
|
} |
|
|
|
|
|
|
|
this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => { |
|
|
|
this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId |
|
|
|
let parent = {value: data.id, label: data.name} |
|
|
|
this.orgOptions = [parent, ...data.children.map(item => { |
|
|
|
level: this.$store.state.chooseArea.chooseName.level, |
|
|
|
}; |
|
|
|
|
|
|
|
this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => { |
|
|
|
this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId; |
|
|
|
let parent = { value: data.id, label: data.name }; |
|
|
|
this.orgOptions = [ |
|
|
|
parent, |
|
|
|
...data.children.map((item) => { |
|
|
|
return { |
|
|
|
value: item.id, |
|
|
|
label: item.name |
|
|
|
} |
|
|
|
})] |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
label: item.name, |
|
|
|
}; |
|
|
|
}), |
|
|
|
]; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleView(id) { |
|
|
|
console.log(id) |
|
|
|
this.id = id |
|
|
|
this.$refs.detail.open(id) |
|
|
|
timeChange(type) { |
|
|
|
let startTime = "", |
|
|
|
endTime = ""; |
|
|
|
if (type == 1) { |
|
|
|
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
if (type == 2) { |
|
|
|
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
} |
|
|
|
if (type == 3) { |
|
|
|
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
if (type == 4) { |
|
|
|
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
if (type == 5) { |
|
|
|
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
|
|
|
|
if (type == 2) { |
|
|
|
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|
|
|
} else { |
|
|
|
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
return [startTime, endTime]; |
|
|
|
}, |
|
|
|
handleView(id) { |
|
|
|
console.log(id); |
|
|
|
this.id = id; |
|
|
|
this.$refs.detail.open(id); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
@ -288,10 +263,11 @@ export default { |
|
|
|
.screen { |
|
|
|
margin: 25px 0 40px; |
|
|
|
|
|
|
|
.el-select, .el-input { |
|
|
|
.el-select, |
|
|
|
.el-input { |
|
|
|
width: 150px; |
|
|
|
margin-right: 4px; |
|
|
|
border: 1px solid #126AC5; |
|
|
|
border: 1px solid #126ac5; |
|
|
|
border-radius: 2px; |
|
|
|
|
|
|
|
/deep/ .el-input__inner { |
|
|
|
@ -301,6 +277,14 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.searchSelect { |
|
|
|
width: 200px; |
|
|
|
/deep/ .el-select__tags { |
|
|
|
width: 200px !important; |
|
|
|
max-width: 200px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
margin-left: 46px; |
|
|
|
height: 32px; |
|
|
|
@ -308,22 +292,22 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.orange { |
|
|
|
color: #FFB73C; |
|
|
|
color: #ffb73c; |
|
|
|
} |
|
|
|
|
|
|
|
.blue { |
|
|
|
color: #64C1FF; |
|
|
|
color: #64c1ff; |
|
|
|
} |
|
|
|
|
|
|
|
.green { |
|
|
|
color: #08EBAE; |
|
|
|
color: #08ebae; |
|
|
|
} |
|
|
|
|
|
|
|
.light { |
|
|
|
color: #3CF5FF; |
|
|
|
color: #3cf5ff; |
|
|
|
} |
|
|
|
|
|
|
|
.red { |
|
|
|
color: #F95619; |
|
|
|
color: #f95619; |
|
|
|
} |
|
|
|
</style> |
PLUTO
2 years ago