Browse Source

fix:投诉举报分页报错+整合组件为1个通过传参来区分内容

master
buaixuexideshitongxue 1 month ago
parent
commit
50aa2f9be2
  1. 589
      src/views/data/ComplaintCollectionSource.vue
  2. 11
      src/views/data/ComplaintCollection_12389ts.vue
  3. 11
      src/views/data/ComplaintCollection_gabxf.vue
  4. 11
      src/views/data/ComplaintCollection_gjxf.vue
  5. 12
      src/views/data/ComplaintCollection_jzxx.vue
  6. 11
      src/views/data/ComplaintCollection_ldxj.vue

589
src/views/data/ComplaintCollectionSource.vue

@ -0,0 +1,589 @@
<template>
<div class="container">
<header>
<el-form :label-width="114">
<el-row>
<el-col :span="6">
<el-form-item label="问题来源">
<el-select
v-model="query.sourceTableSubOneList"
clearable
filterable
multiple
collapse-tags
placeholder="请选择来源"
style="width: 100%"
>
<el-option
v-for="item in dict.sourceTableSubOneList"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="信件编号">
<el-input
placeholder="请输入编号"
v-model="query.originId"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="登记/受理时间">
<date-time-range-picker-ext
v-model="query.discoveryTimeList"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="来件人">
<el-input
placeholder="来件人姓名、身份证号码、联系电话"
v-model="query.personInfo"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="涉及二级机构" prop="secondDepartName">
<depart-tree-select
v-model="query.secondDepartId"
:check-strictly="true"
@node-click="(row) => (query.secondDepartName = row.shortName)"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="涉及三级机构" prop="thirdDepartId">
<depart-tree-select
v-model="query.thirdDepartId"
:check-strictly="true"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="办理方式">
<el-select
v-model="query.handleMethod"
placeholder="全部"
clearable
>
<el-option value="0" label="自办"/>
<el-option value="1" label="下发"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="办理状态">
<el-select
v-model="query.processingStatus"
clearable
multiple
collapse-tags
placeholder="办理状态"
>
<el-option
v-for="item in dict.processingStatus"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="来件内容">
<el-input
placeholder="请输入来件内容"
v-model="query.thingDesc"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否重复件">
<el-select
v-model="query.repeatt"
placeholder="全部"
clearable
>
<el-option value="0" label="否"/>
<el-option value="1" label="是"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="核查结论" >
<el-select v-model="query.checkStatusList" clearable multiple
style="width: 280px">
<el-option v-for="item in dict.checkStatus" :value="item.dictValue" :label="item.dictLabel"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="初核材料">
<el-select
v-model="query.initialReviewFileList"
placeholder="全部"
clearable
multiple
>
<el-option value="0" label="未上传"/>
<el-option value="1" label="已上传"/>
<el-option value="2" label="超时上传"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="涉嫌问题" prop="involveProblemIdList">
<el-select
v-model="query.involveProblemIdList"
multiple
clearable
collapse-tags
style="width: 100%"
placeholder="请选择涉嫌问题"
>
<el-option
v-for="item in dict.suspectProblem"
:key="item.dictValue"
:value="item.dictValue"
:label="item.dictLabel"
>
<el-checkbox :model-value="(query.involveProblemIdList || []).includes(item.dictValue)">
{{ item.dictLabel }}
</el-checkbox>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标签">
<el-select
placeholder="全部"
clearable
v-model="query.tags"
multiple
collapse-tags
>
<el-option
v-for="item in dict.sfssTags"
:key="item.id"
:value="item.dictValue"
:label="item.dictLabel"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="录入时间">
<date-time-range-picker-ext
v-model="query.createTimeList"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="办理单位" prop="handleDepartId">
<depart-tree-select
v-model="query.handleDepartId"
placeholder="办理单位"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mb-25 flex between">
<div>
<el-button type="primary" @click="handleExport">数据导出</el-button>
</div>
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search"/>
</template>
查询
</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container" v-loading="loading">
<el-table :data="list">
<el-table-column label="信件编号" width="130" prop="originId" show-overflow-tooltip/>
<el-table-column label="来源" width="100" show-overflow-tooltip>
<template #default="{ row }">
{{ row.sourceTablePath }}
</template>
</el-table-column>
<el-table-column
label="登记/受理时间"
width="170"
prop="discoveryTime"
:formatter="(_, __, v) => v ? timeFormat(v, 'yyyy-mm-dd hh:MM:ss') : '/'"
show-overflow-tooltip
/>
<el-table-column label="来件人姓名" width="100" prop="responderName"
:formatter="row => row.responderName ? row.responderName : '匿名'"/>
<el-table-column label="身份证号" width="100" prop="responderIdCode"
:formatter="row => row.responderIdCode ? row.responderIdCode : '无'" show-overflow-tooltip/>
<el-table-column label="联系电话" width="100" prop="responderPhone"
:formatter="row => row.responderPhone ? row.responderPhone : '无'" show-overflow-tooltip/>
<el-table-column label="被投诉机构" width="130" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ row.secondDepartName }}</span>
<span v-if="row.thirdDepartName"> {{ row.thirdDepartName }}</span>
</template>
</el-table-column>
<el-table-column label="办理单位" width="160" show-overflow-tooltip>
<template #default="{ row }">
{{ row.handleSecondDepartName || '' }}{{ row.handleThreeDepartName ? '/' + row.handleThreeDepartName : '' }}
</template>
</el-table-column>
<el-table-column label="来信内容" width="100" prop="thingDesc" show-overflow-tooltip/>
<el-table-column label="涉嫌问题" width="100" prop="involveProblemStr" show-overflow-tooltip/>
<el-table-column label="是否重复件" width="100">
<template #default="{ row }">
{{ getDictLabel(dict.yesNo, row.repeatt) }}
</template>
</el-table-column>
<el-table-column label="初核限时" width="150" align="center">
<template #default="{ row }">
<el-tag v-if="row.gwf3>=1" :type="row.gwf3 === '2' ? 'danger' : 'success'">
{{ row.gwf3 === '2' ? '超时完成初核' : '按时完成初核' }}
</el-tag>
<countdown v-else :time="Number(row.remainingDuration || 0)"/>
</template>
</el-table-column>
<el-table-column
label="录入时间"
width="170"
prop="createTime"
:formatter="(_, __, v) => v ? timeFormat(v, 'yyyy-mm-dd hh:MM:ss') : '/'"
show-overflow-tooltip
/>
<el-table-column label="标签" width="100" show-overflow-tooltip>
<template #default="{ row }">
{{ getDictLabel(dict.sfssTags, row.tag) }}
</template>
</el-table-column>
<el-table-column label="办结情况" width="100" prop="completionStatus">
<template #default="{ row }">
{{
row.completionStatus === '1' ? '程序办结' :
row.completionStatus === '2' ? '已解决合理诉求' :
'/'
}}
</template>
</el-table-column>
<el-table-column label="群众认可" width="100" prop="publicRecognition">
<template #default="{ row }">
{{
row.publicRecognition === '1' ? '认可' :
row.publicRecognition === '2' ? '不认可' :
row.publicRecognition === '3' ? '不接电话' :
'/'
}}
</template>
</el-table-column>
<el-table-column label="办理方式" width="100">
<template #default="{ row }">
{{ getDictLabel(dict.handleMethodType, row.handleMethod) }}
</template>
</el-table-column>
<el-table-column label="业务类别" width="100" prop="businessTypeName"/>
<el-table-column label="核查结论" width="140" prop="checkStatus" show-overflow-tooltip>
<template #default="{ row }">
{{ getDictLabel(dict.checkStatus, row.checkStatusCode) }}
</template>
</el-table-column>
<el-table-column label="办理状态" prop="processingStatus" width="100">
<template #default="{ row }">
<el-tag
:type="row.processingStatus === 'completed' ? 'success' : 'primary'"
v-if="row.processingStatus"
>
{{ getDictLabel(dict.processingStatus, row.processingStatus) }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleActionDetail(row)">办理详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
<negative-dialog
v-model="show"
:id="activeNegativeId"
@close="show = false"
ref="negativeDialogRef"
/>
<negative-mailbox-dialog
v-model="mailboxShow"
:id="activeNegativeId"
@close="mailboxShow = false"
/>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { timeFormat } from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";
import { exportData, getComplaintCollectionPage } from "@/api/data/complaintCollection.ts";
const route = useRoute();
const catchStore = useCatchStore();
const show = ref(false);
const mailboxShow = ref(false);
const activeNegativeId = ref("");
const isReady = ref(false);
// URL - hash
const getQueryParam = (key) => {
const hash = window.location.hash;
const queryString = hash.split('?')[1] || '';
const params = new URLSearchParams(queryString);
return params.get(key) || '';
};
// URL
const sourceParam = computed(() => {
// route.query window.location
return route.query.source || getQueryParam('source');
});
// source sourceTableList
const dynamicSourceTableList = computed(() => {
const source = sourceParam.value;
if (!source) return [];
return [source];
});
const query = ref({
size: 10,
current: 1,
sourceTableList: [],
sourceTableSubOneList: [],
secondDepartId: null,
thirdDepartId: null,
handleDepartId: null,
initialReviewFileList: [],
createTimeList: [],
personInfo: '',
});
const list = ref([]);
const total = ref(0);
const loading = ref(false)
const getList = async () => {
loading.value = true;
// sourceTableList source
let finalSourceTableList = [...dynamicSourceTableList.value];
if (query.value.sourceTableSubOneList && query.value.sourceTableSubOneList.length > 0) {
finalSourceTableList = [...finalSourceTableList, ...query.value.sourceTableSubOneList];
}
const params = {
...query.value,
sourceTableList: finalSourceTableList,
}
debugger
let res = await getComplaintCollectionPage(params);
list.value = res.records;
total.value = res.total;
loading.value = false;
}
function reset() {
query.value = {
size: 10,
current: 1,
sourceTableList: [],
sourceTableSubOneList: [],
secondDepartId: null,
thirdDepartId: null,
handleDepartId: null,
initialReviewFileList: [],
createTimeList: [],
personInfo: '',
};
getList();
}
onMounted(() => {
// nextTick
setTimeout(() => {
isReady.value = true;
console.log('sourceParam:', sourceParam.value);
console.log('route.fullPath:', route.fullPath);
console.log('route.query:', JSON.stringify(route.query));
getList();
}, 100);
});
//
watch(() => getQueryParam('source'), () => {
if (isReady.value) {
console.log('source changed:', getQueryParam('source'));
getList();
}
});
const storeDict = computed(() =>
catchStore.getDicts([
"businessType",
"suspectProblem",
"policeType",
"hostLevel",
"timeLimit",
"approvalFlow",
"specialSupervision",
"checkStatus",
"sfssSourceTable",
"sfssTags",
"accountabilityTarget",
"processingStatus",
"handleMethodType"
]) || {}
);
// source
const sourceTableSubOneList = computed(() => {
const list = storeDict.value.sfssSourceTable || [];
const source = sourceParam.value;
const children = list
.filter(d => d.remark === source)
.sort((a, b) => (a.dictSort ?? 0) - (b.dictSort ?? 0))
return children.map(c => ({
label: c.dictLabel,
value: String(c.dictValue),
}));
})
const localDict = {
yesNo: [
{id: 1, dictLabel: "是", dictValue: "1"},
{id: 2, dictLabel: "否", dictValue: "0"},
],
handleMethodType: [
{id: 1, dictLabel: "自办", dictValue: "0"},
{id: 2, dictLabel: "下发", dictValue: "1"},
],
};
const dict = computed(() => ({
...storeDict.value,
...localDict,
sourceTableSubOneList: sourceTableSubOneList.value,
}));
function getDictLabel(list, value) {
if (!Array.isArray(list)) return '/'
if (value === null || value === undefined || value === '') return '/'
let values = []
if (Array.isArray(value)) {
values = value
}
else if (typeof value === 'string' && value.includes(',')) {
values = value.split(',').map(v => v.trim())
}
else {
values = [value]
}
const labels = values
.map(v => {
const item = list.find(d => d.dictValue == v)
return item?.dictLabel
})
.filter(Boolean)
return labels.length ? labels.join(',') : '/'
}
function handleActionDetail(row) {
if (row.problemSources === '局长信箱') {
mailboxShow.value = true;
activeNegativeId.value = row.originId;
} else {
show.value = true;
activeNegativeId.value = row.negativeId;
}
}
const handleExport = async () => {
let finalSourceTableList = [...dynamicSourceTableList.value];
if (query.value.sourceTableSubOneList && query.value.sourceTableSubOneList.length > 0) {
finalSourceTableList = [...finalSourceTableList, ...query.value.sourceTableSubOneList];
}
const body = {
...query.value,
sourceTableList: finalSourceTableList,
};
await exportData(body);
}
</script>
<style lang="scss" scoped>
.el-form-item .el-form-item {
margin-bottom: 18px;
}
:deep() {
.el-form-item--label-right .el-form-item__label {
text-align: right;
line-height: 32px;
margin-bottom: 0;
}
}
p {
margin: 0;
line-height: 1.4;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
padding: 0 24px 16px;
}
</style>

11
src/views/data/ComplaintCollection_12389ts.vue

@ -364,10 +364,10 @@ import {
getComplaintCollectionPage getComplaintCollectionPage
} from "@/api/data/complaintCollection.ts"; } from "@/api/data/complaintCollection.ts";
const catchStore = useCatchStore();
const show = ref(false); const show = ref(false);
const mailboxShow = ref(false); const mailboxShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
@ -378,6 +378,7 @@ const query = ref({
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}); });
const list = ref([]); const list = ref([]);
@ -411,6 +412,7 @@ function reset() {
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}; };
getList(); getList();
} }
@ -506,9 +508,10 @@ function handleActionDetail(row) {
} }
const handleExport = async () => { const handleExport = async () => {
let body = { const body = {
...query.value ...query.value,
} sourceTableList: query.value.sourceTableList.filter(v => v !== '17'),
};
await exportData(body); await exportData(body);
} }
</script> </script>

11
src/views/data/ComplaintCollection_gabxf.vue

@ -364,10 +364,10 @@ import {
getComplaintCollectionPage getComplaintCollectionPage
} from "@/api/data/complaintCollection.ts"; } from "@/api/data/complaintCollection.ts";
const catchStore = useCatchStore();
const show = ref(false); const show = ref(false);
const mailboxShow = ref(false); const mailboxShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
@ -378,6 +378,7 @@ const query = ref({
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}); });
const list = ref([]); const list = ref([]);
@ -411,6 +412,7 @@ function reset() {
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}; };
getList(); getList();
} }
@ -506,9 +508,10 @@ function handleActionDetail(row) {
} }
const handleExport = async () => { const handleExport = async () => {
let body = { const body = {
...query.value ...query.value,
} sourceTableList: query.value.sourceTableList.filter(v => v !== '22'),
};
await exportData(body); await exportData(body);
} }
</script> </script>

11
src/views/data/ComplaintCollection_gjxf.vue

@ -361,10 +361,10 @@ import {timeFormat} from "@/utils/util";
import useCatchStore from "@/stores/modules/catch"; import useCatchStore from "@/stores/modules/catch";
import {exportData, getComplaintCollectionPage} from "@/api/data/complaintCollection.ts"; import {exportData, getComplaintCollectionPage} from "@/api/data/complaintCollection.ts";
const catchStore = useCatchStore();
const show = ref(false); const show = ref(false);
const mailboxShow = ref(false); const mailboxShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
@ -375,6 +375,7 @@ const query = ref({
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}); });
const list = ref([]); const list = ref([]);
@ -408,6 +409,7 @@ function reset() {
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}; };
getList(); getList();
} }
@ -503,9 +505,10 @@ function handleActionDetail(row) {
} }
const handleExport = async () => { const handleExport = async () => {
let body = { const body = {
...query.value ...query.value,
} sourceTableList: query.value.sourceTableList.filter(v => v !== '21'),
};
await exportData(body); await exportData(body);
} }
</script> </script>

12
src/views/data/ComplaintCollection_jzxx.vue

@ -367,10 +367,10 @@ import {
getComplaintCollectionPage getComplaintCollectionPage
} from "@/api/data/complaintCollection.ts"; } from "@/api/data/complaintCollection.ts";
const catchStore = useCatchStore();
const show = ref(false); const show = ref(false);
const mailboxShow = ref(false); const mailboxShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
@ -381,7 +381,7 @@ const query = ref({
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
processingStatus: '', personInfo: '',
}); });
const list = ref([]); const list = ref([]);
@ -416,6 +416,7 @@ function reset() {
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
processingStatus: '', processingStatus: '',
personInfo: '',
}; };
getList(); getList();
} }
@ -511,9 +512,10 @@ function handleActionDetail(row) {
} }
const handleExport = async () => { const handleExport = async () => {
let body = { const body = {
...query.value ...query.value,
} sourceTableList: query.value.sourceTableList.filter(v => v !== '23'),
};
await exportData(body); await exportData(body);
} }
</script> </script>

11
src/views/data/ComplaintCollection_ldxj.vue

@ -364,10 +364,10 @@ import {
getComplaintCollectionPage getComplaintCollectionPage
} from "@/api/data/complaintCollection.ts"; } from "@/api/data/complaintCollection.ts";
const catchStore = useCatchStore();
const show = ref(false); const show = ref(false);
const mailboxShow = ref(false); const mailboxShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
@ -378,6 +378,7 @@ const query = ref({
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}); });
const list = ref([]); const list = ref([]);
@ -411,6 +412,7 @@ function reset() {
handleDepartId: null, handleDepartId: null,
initialReviewFileList: [], initialReviewFileList: [],
createTimeList: [], createTimeList: [],
personInfo: '',
}; };
getList(); getList();
} }
@ -506,9 +508,10 @@ function handleActionDetail(row) {
} }
const handleExport = async () => { const handleExport = async () => {
let body = { const body = {
...query.value ...query.value,
} sourceTableList: query.value.sourceTableList.filter(v => v !== 'leader_explain'),
};
await exportData(body); await exportData(body);
} }
</script> </script>

Loading…
Cancel
Save