4 changed files with 346 additions and 129 deletions
@ -0,0 +1,229 @@ |
|||||||
|
<template> |
||||||
|
<!-- 重复件抽屉 --> |
||||||
|
<el-drawer |
||||||
|
v-model="visible" |
||||||
|
direction="rtl" |
||||||
|
size="40%" |
||||||
|
class="duplicate-drawer" |
||||||
|
> |
||||||
|
<template #header> |
||||||
|
<div class="drawer-header danger"> |
||||||
|
<el-icon size="22"> |
||||||
|
<WarningFilled /> |
||||||
|
</el-icon> |
||||||
|
<div class="title-group"> |
||||||
|
<div class="title">信息重复件风险提醒</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<div class="drawer-body"> |
||||||
|
<el-alert type="warning" show-icon :closable="false" class="drawer-alert"> |
||||||
|
<template #title>系统检测到信息可能存在重复登记记录</template> |
||||||
|
</el-alert> |
||||||
|
|
||||||
|
<div class="id-highlight"> |
||||||
|
当前信息： |
||||||
|
<span> |
||||||
|
身份证：{{ query.responderIdCode || "-" }} |
||||||
|
|
||||||
|
姓名：{{ query.responderName || "-" }} |
||||||
|
|
||||||
|
电话：{{ query.responderPhone || "-" }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-empty v-if="list.length === 0" description="暂无重复数据" /> |
||||||
|
|
||||||
|
<el-table |
||||||
|
v-else |
||||||
|
:data="list" |
||||||
|
stripe |
||||||
|
style="width: 100%" |
||||||
|
:row-class-name="rowClassName" |
||||||
|
@row-click="handleRowClick" |
||||||
|
> |
||||||
|
<el-table-column prop="originId" label="编号" width="140" /> |
||||||
|
<el-table-column prop="sourceTable" label="来源" width="120" /> |
||||||
|
<!-- <el-table-column prop="sourceTable" label="来源" width="120">--> |
||||||
|
<!-- <template #default="{ row }">--> |
||||||
|
<!-- <span :class="{ 'source-highlight': String(row?.sourceTable || '').includes('（投）') }">--> |
||||||
|
<!-- {{ row.sourceTable || '-' }}--> |
||||||
|
<!-- </span>--> |
||||||
|
<!-- </template>--> |
||||||
|
<!-- </el-table-column>--> |
||||||
|
|
||||||
|
<el-table-column prop="responderName" label="姓名" width="90" /> |
||||||
|
<el-table-column prop="responderIdCode" label="身份证号" width="100" show-overflow-tooltip /> |
||||||
|
<el-table-column prop="thingDesc" label="投诉内容" width="150" show-overflow-tooltip /> |
||||||
|
<el-table-column prop="discoveryTime" label="登记/受理时间" width="180"> |
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.discoveryTime ? dayjs(row.discoveryTime).format("YYYY-MM-DD HH:mm:ss") : "-" }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-drawer> |
||||||
|
|
||||||
|
<!-- 详情弹窗：封装在组件内部 --> |
||||||
|
<complaint_detail |
||||||
|
width="80vw" |
||||||
|
v-model="detailShow" |
||||||
|
:id="activeId" |
||||||
|
:dict="dict" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { computed, ref, watch } from "vue"; |
||||||
|
import dayjs from "dayjs"; |
||||||
|
import { WarningFilled } from "@element-plus/icons-vue"; |
||||||
|
import Complaint_detail from "@/components/data/complaint_detail.vue"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 目标：组件内部封装： |
||||||
|
* 1) 抽屉展示重复件列表 |
||||||
|
* 2) 点击行 -> 打开 complaint_detail |
||||||
|
* |
||||||
|
* props: |
||||||
|
* - modelValue: 抽屉开关 |
||||||
|
* - query: 查重条件（身份证/姓名/电话） |
||||||
|
* - dict: 详情组件需要的 dict |
||||||
|
* - requestFn: 请求查重函数（如 maileRepeatt） |
||||||
|
* - autoFetchOnOpen: 打开抽屉是否自动查一次 |
||||||
|
* |
||||||
|
* emits: |
||||||
|
* - update:modelValue |
||||||
|
* - loaded: 查重结果（给父组件可选做缓存/提示） |
||||||
|
* - opened-detail: 打开了哪条详情（可选） |
||||||
|
*/ |
||||||
|
const props = defineProps({ |
||||||
|
modelValue: { type: Boolean, default: false }, |
||||||
|
query: { |
||||||
|
type: Object, |
||||||
|
default: () => ({ responderIdCode: "", responderName: "", responderPhone: "" }), |
||||||
|
}, |
||||||
|
dict: { type: Object, default: () => ({}) }, |
||||||
|
requestFn: { type: Function, required: true }, |
||||||
|
autoFetchOnOpen: { type: Boolean, default: true }, |
||||||
|
// 允许父组件指定用哪个字段当详情id（默认 complaintId） |
||||||
|
detailIdKey: { type: String, default: "complaintId" }, |
||||||
|
excludeId: { type: [String, Number], default: "" }, |
||||||
|
}); |
||||||
|
|
||||||
|
const emit = defineEmits(["update:modelValue", "loaded", "opened-detail"]); |
||||||
|
|
||||||
|
const visible = computed({ |
||||||
|
get: () => props.modelValue, |
||||||
|
set: (v) => emit("update:modelValue", v), |
||||||
|
}); |
||||||
|
|
||||||
|
const list = ref([]); |
||||||
|
|
||||||
|
const detailShow = ref(false); |
||||||
|
const activeId = ref(""); |
||||||
|
|
||||||
|
const fetchList = async () => { |
||||||
|
const body = { |
||||||
|
responderIdCode: props.query?.responderIdCode, |
||||||
|
responderName: props.query?.responderName, |
||||||
|
responderPhone: props.query?.responderPhone, |
||||||
|
}; |
||||||
|
const res = await props.requestFn(body); |
||||||
|
const rows = res?.complaintCollectionRepeatDTOS || []; |
||||||
|
|
||||||
|
const exclude = String(props.excludeId || ""); |
||||||
|
list.value = exclude |
||||||
|
? rows.filter(r => String(r?.complaintId || "") !== exclude) |
||||||
|
: rows; |
||||||
|
emit("loaded", rows); |
||||||
|
return rows; |
||||||
|
}; |
||||||
|
|
||||||
|
watch( |
||||||
|
() => visible.value, |
||||||
|
async (v) => { |
||||||
|
if (!v) return; |
||||||
|
list.value = []; |
||||||
|
if (props.autoFetchOnOpen) { |
||||||
|
try { |
||||||
|
await fetchList(); |
||||||
|
} catch (e) { |
||||||
|
list.value = []; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
const handleRowClick = (row) => { |
||||||
|
const id = row?.[props.detailIdKey]; |
||||||
|
if (!id) return; // 可选：这里也可以 ElMessage.warning("缺少详情ID") |
||||||
|
activeId.value = id; |
||||||
|
detailShow.value = true; |
||||||
|
emit("opened-detail", row); |
||||||
|
}; |
||||||
|
|
||||||
|
const rowClassName = ({ row }) => { |
||||||
|
return String(row?.sourceTable || "").includes("投") ? "row-highlight" : ""; |
||||||
|
}; |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
/* 抽屉整体 */ |
||||||
|
.duplicate-drawer { |
||||||
|
--el-drawer-padding-primary: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.drawer-header { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 12px; |
||||||
|
padding: 4px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.drawer-header.danger { |
||||||
|
color: #0d73ee; |
||||||
|
} |
||||||
|
|
||||||
|
.drawer-header .title { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 1.2; |
||||||
|
} |
||||||
|
|
||||||
|
.drawer-body { |
||||||
|
padding-top: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.drawer-alert { |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.id-highlight { |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 12px 16px; |
||||||
|
background: #fafafa; |
||||||
|
border-left: 4px solid #faad14; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.id-highlight span { |
||||||
|
margin-left: 8px; |
||||||
|
font-weight: 600; |
||||||
|
color: #d4380d; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.clickable-row:hover > td { |
||||||
|
background: #f5f7fa; |
||||||
|
} |
||||||
|
|
||||||
|
.row-highlight > td { |
||||||
|
background: #fff4e6 !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue