拆分投诉列表组件

src/views/system/report/componments/add-report-dialog.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useLoading } from '/@/utils/loading-util'
+import complaints from '/@/api/system/report/complaints'
+import system from '/@/api/system'
+import { useAsyncState, useLocalStorage } from '@vueuse/core'
+import {
+	CreateComplaintRequest,
+	UpdateComplaintRequest,
+} from '/@/api/system/report/type'
+
+const { proxy } = getCurrentInstance() as any
+
+// 投诉等级，投诉来源，投诉类型
+const {
+	report_level,
+	report_source,
+	report_type,
+}: {
+	[key: string]: Array<{
+		label: string
+		value: string
+	}>
+} = proxy.useDict('report_level', 'report_source', 'report_type')
+
+const props = defineProps<{
+	visible: boolean
+	title: string
+	mode: 'add' | 'edit'
+	modelValue: CreateComplaintRequest | UpdateComplaintRequest
+}>()
+
+const emit = defineEmits<{
+	// eslint-disable-next-line no-unused-vars
+	(e: 'update:visible', value: boolean): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'update:modelValue', value: CreateComplaintRequest | UpdateComplaintRequest): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'success'): void
+}>()
+
+const visible = computed<boolean>({
+	get() {
+		return props.visible
+	},
+	set(value) {
+		emit('update:visible', value)
+	}
+})
+
+const modelValue = computed<CreateComplaintRequest | UpdateComplaintRequest>({
+	get() {
+		return props.modelValue
+	},
+	set(value) {
+		emit('update:modelValue', value)
+	}
+})
+
+// 表单引用
+const formRef = ref()
+
+// 草稿功能 - 仅在新增模式下可用
+type CCRWithDemoFlag = Partial<CreateComplaintRequest> & {
+	flag: boolean | undefined
+}
+
+const demo = useLocalStorage<CCRWithDemoFlag>('system-report-summary-index-demo-params', {
+	flag: false,
+})
+
+// 用户列表相关
+type SimpleUser = {
+	id: number
+	userNickname: string
+}
+
+const {
+	state: userList,
+	isLoading: isLoadingUserList,
+	execute: loadingUserList,
+} = useAsyncState<SimpleUser[]>(async (name: string) => {
+	// 为了防止默认情况下的用户列表不存在已经分配的用户，需要提前获取这个用户的bean。
+	const user_id = modelValue.value?.assignee ?? undefined
+
+	const [origin_user, data]: [origin_user: SimpleUser | undefined, data: SimpleUser[]] = await Promise.all([
+		user_id === undefined ? Promise.resolve(undefined) : system.user.detail(user_id).catch(() => undefined),
+		system.user
+			.getList({ keyWords: name, status: 1 })
+			.then((res: { list: SimpleUser[] }) => res.list)
+			.catch(() => []),
+	])
+
+	if (data.length === 0) {
+		return origin_user !== undefined ? [origin_user] : []
+	}
+
+	if (data.filter((item) => item.id === origin_user?.id).length !== 0) {
+		return data
+	}
+
+	if (origin_user !== undefined) {
+		return [origin_user, ...data]
+	} else {
+		return data
+	}
+}, [])
+
+// 表单验证规则
+const formRules = {
+	title: [{ required: true, message: '请输入投诉标题', trigger: 'blur' }],
+	category: [{ required: true, message: '请选择投诉类型', trigger: 'change' }],
+	source: [{ required: true, message: '请选择投诉来源', trigger: 'change' }],
+	area: [{ required: true, message: '请选择投诉区域', trigger: 'change' }],
+	complainantName: [{ required: true, message: '请输入投诉人姓名', trigger: 'blur' }],
+	level: [{ required: true, message: '请选择投诉等级', trigger: 'change' }],
+	content: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
+}
+
+// 加载状态
+const { loading: submitLoading, doLoading: handleSubmit } = useLoading(async () => {
+	const valid = await formRef.value?.validate().catch(() => false)
+	if (!valid) {
+		return
+	}
+
+	let result = false
+	if (props.mode === 'add') {
+		result = await complaints
+			.add(modelValue.value as CreateComplaintRequest)
+			.then(() => true)
+			.catch(() => false)
+	} else {
+		result = await complaints
+			.edit(modelValue.value as UpdateComplaintRequest)
+			.then(() => true)
+			.catch(() => false)
+	}
+
+	if (result) {
+		ElMessage.success(props.mode === 'add' ? '新增投诉成功' : '修改投诉成功')
+
+		// 删除草稿（仅在新增模式下）
+		if (props.mode === 'add') {
+			demo.value = {
+				flag: undefined,
+			}
+		}
+
+		// 关闭对话框并重置表单
+		visible.value = false
+		formRef.value?.resetFields()
+
+		// 通知父组件成功
+		emit('success')
+	} else {
+		ElMessage.error(props.mode === 'add' ? '新增投诉失败' : '修改投诉失败')
+	}
+})
+
+// 保存草稿（仅在新增模式下可用）
+const handleDemoAdded = () => {
+	if (props.mode === 'add') {
+		demo.value = {
+			...modelValue.value as CreateComplaintRequest,
+			flag: true,
+		}
+		ElMessage.success('草稿已经保存')
+	}
+}
+
+// 取消操作
+const handleCancel = () => {
+	visible.value = false
+	formRef.value?.resetFields()
+}
+
+// 监听对话框显示状态，加载草稿数据
+watch(visible, (newVal) => {
+	if (newVal && props.mode === 'add' && demo.value.flag !== undefined) {
+		// 加载草稿数据
+		Object.assign(modelValue.value, demo.value as CreateComplaintRequest)
+	}
+})
+
+// 组件挂载时加载草稿数据
+onMounted(() => {
+	if (props.mode === 'add' && demo.value.flag !== undefined) {
+		Object.assign(modelValue.value, demo.value as CreateComplaintRequest)
+	}
+})
+</script>
+
+<template>
+	<el-dialog v-model="visible" :title="title" width="800px" :close-on-click-modal="false">
+		<el-form ref="formRef" :model="modelValue" :rules="formRules" label-width="100px" label-position="left">
+			<el-row :gutter="35">
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="投诉标题" prop="title" required>
+						<el-input v-model="modelValue.title" placeholder="请输入投诉标题" maxlength="100" show-word-limit />
+					</el-form-item>
+				</el-col>
+
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="投诉类型" prop="category" required>
+						<el-select v-model="modelValue.category" placeholder="选择投诉类型" style="width: 100%">
+							<el-option v-for="item in report_type" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="投诉来源" prop="source" required>
+						<el-select v-model="modelValue.source" placeholder="选择投诉来源" style="width: 100%">
+							<el-option v-for="item in report_source" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="投诉区域" prop="area" required>
+						<el-select v-model="modelValue.area" placeholder="选择投诉区域" style="width: 100%">
+							<el-option label="A区" value="A区" />
+							<el-option label="B区" value="B区" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="投诉人姓名" prop="complainantName" required>
+						<el-input v-model="modelValue.complainantName" placeholder="请输入投诉人姓名" maxlength="50" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+					<el-form-item label="联系方式" prop="contact">
+						<el-input v-model="modelValue.contact" placeholder="请输入联系电话或邮箱" maxlength="50" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+			<el-form-item label="投诉等级" prop="level" required>
+				<el-radio-group v-model="modelValue.level">
+					<el-radio v-for="item in report_level" :label="item.value" :key="item.value">
+						<span>{{ item.label }}</span>
+					</el-radio>
+				</el-radio-group>
+			</el-form-item>
+
+			<el-form-item label="投诉内容" prop="content" required>
+				<el-input v-model="modelValue.content" type="textarea" :rows="4" placeholder="请详细描述投诉内容..." maxlength="500" show-word-limit />
+			</el-form-item>
+
+			<el-form-item label="指派负责人" prop="assignee">
+				<el-select
+					v-model="modelValue.assignee"
+					placeholder="选择负责人"
+					style="width: 100%"
+					filterable
+					remote
+					:remote-method="(data: string) => loadingUserList(data)"
+					:loading="isLoadingUserList"
+					clearable
+				>
+					<el-option v-for="user in userList" :key="user.id" :label="user.userNickname" :value="user.id" />
+				</el-select>
+			</el-form-item>
+		</el-form>
+
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="handleCancel">取消</el-button>
+				<el-button type="primary" @click="handleSubmit" :loading="submitLoading">
+					{{ mode === 'add' ? '提交投诉' : '提交修改' }}
+				</el-button>
+				<el-button v-if="mode === 'add'" @click="handleDemoAdded">保存草稿</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped lang="scss">
+.dialog-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+</style>

src/views/system/report/list/index.vue

@@ -14,9 +14,9 @@ import {
 	FeedbackCreateParams,
 	UpdateComplaintRequest,
 } from '/@/api/system/report/type'
-import system from '/@/api/system'
-import { useAsyncState, useLocalStorage } from '@vueuse/core'
+
 import ReportDetailDialog from '/@/views/system/report/componments/report-detail-dialog.vue'
+import AddReportDialog from '/@/views/system/report/componments/add-report-dialog.vue'
 import { MessageProps } from 'element-plus/es/components/message/src/message'
 import { FlowDemoTableColumns } from '/@/views/flow/flowDemo/list/component/model'
 import CheckFlow from '/@/components/gFlow/checkFlow.vue'
@@ -26,14 +26,13 @@ const { proxy } = getCurrentInstance() as any
 //投诉等级，投诉来源，投诉类型
 const {
 	report_level,
-	report_source,
 	report_type,
 }: {
 	[key: string]: Array<{
 		label: string
 		value: string
 	}>
-} = proxy.useDict('report_level', 'report_source', 'report_type')
+} = proxy.useDict('report_level', 'report_type')
 
 // eslint-disable-next-line no-unused-vars
 const formatReportLevel = computed<(value: string) => string>(() => {
@@ -136,7 +135,6 @@ const handleSelectionChange = (selection: Complaint[]) => {
 
 // 新增投诉相关
 const addDialogVisible = ref(false)
-const addFormRef = ref()
 const addForm = ref<CreateComplaintRequest>({
 	title: '',
 	category: '',
@@ -149,94 +147,13 @@ const addForm = ref<CreateComplaintRequest>({
 	assignee: undefined,
 })
 
-//草稿，若有内容则会patch上去
-//添加flag的原因是：useLocalStorage不允许初值为undefined
-//flag为undefined证明有草稿，否则无草稿。
-type CCRWithDemoFlag = Partial<CreateComplaintRequest> & {
-	flag: boolean | undefined
-}
-
-const demo = useLocalStorage<CCRWithDemoFlag>('system-report-summary-index-demo-params', {
-	flag: false,
-})
-
-onMounted(() => {
-	if (demo.value.flag !== undefined) {
-		addForm.value = {
-			...(demo.value as CreateComplaintRequest),
-		}
-	}
-})
-
-// 表单验证规则
-const addFormRules = {
-	title: [{ required: true, message: '请输入投诉标题', trigger: 'blur' }],
-	category: [{ required: true, message: '请选择投诉类型', trigger: 'change' }],
-	source: [{ required: true, message: '请选择投诉来源', trigger: 'change' }],
-	area: [{ required: true, message: '请选择投诉区域', trigger: 'change' }],
-	complainantName: [{ required: true, message: '请输入投诉人姓名', trigger: 'blur' }],
-	level: [{ required: true, message: '请选择投诉等级', trigger: 'change' }],
-	content: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
-}
-
 const handleAdd = () => {
 	addDialogVisible.value = true
 }
 
-const handleAddCancel = () => {
-	addDialogVisible.value = false
-	addFormRef.value?.resetFields()
-}
-
-const handleDemoAdded = () => {
-	demo.value = {
-		...addForm.value,
-		flag: true,
-	}
-	ElMessage.success('草稿已经保存')
-}
-
-const handleAddConfirm = async () => {
-	const valid = await addFormRef.value?.validate().catch(() => false)
-	if (!valid) {
-		return
-	}
-
-	const result = await complaints
-		.add(addForm.value)
-		.then(() => true)
-		.catch(() => false)
-
-	if (result) {
-		ElMessage.success('新增投诉成功')
-
-		//删除草稿
-		demo.value = {
-			flag: undefined,
-		}
-
-		//关闭新增对话框
-		addDialogVisible.value = false
-		addFormRef.value?.resetFields()
-		await getComplaintList()
-	} else {
-		ElMessage.error('新增投诉失败')
-	}
-}
-
 //修改投诉相关
 const editDialogVisible = ref(false)
-const editFormRef = ref()
 const editForm = ref<UpdateComplaintRequest | undefined>(undefined)
-const editFormRules = {
-	title: [{ required: true, message: '请输入投诉标题', trigger: 'blur' }],
-	category: [{ required: true, message: '请选择投诉类型', trigger: 'change' }],
-	source: [{ required: true, message: '请选择投诉来源', trigger: 'change' }],
-	area: [{ required: true, message: '请选择投诉区域', trigger: 'change' }],
-	complainantName: [{ required: true, message: '请输入投诉人姓名', trigger: 'blur' }],
-	level: [{ required: true, message: '请选择投诉等级', trigger: 'change' }],
-	content: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
-}
 
 const currentLoadingEdit = ref(-1)
 const { loading: loadingEdit, doLoading: handleEdit } = useLoading(async (id: number) => {
@@ -249,33 +166,9 @@ const { loading: loadingEdit, doLoading: handleEdit } = useLoading(async (id: nu
 	editDialogVisible.value = true
 })
 
-const handleEditCancel = () => {
-	editDialogVisible.value = false
-	editFormRef.value?.resetFields()
+const handleEditSuccess = async () => {
 	currentLoadingEdit.value = -1
-}
-
-const handleEditConfirm = async () => {
-	const valid = await editFormRef.value?.validate().catch(() => false)
-	if (!valid) {
-		return
-	}
-	const data = editForm.value
-	if (!data) {
-		return
-	}
-	const result = await complaints
-		.edit(data)
-		.then(() => true)
-		.catch(() => false)
-
-	if (result) {
-		ElMessage.success('修改投诉成功')
-		editDialogVisible.value = false
-		editFormRef.value?.resetFields()
-
-		await getComplaintList()
-	}
+	await getComplaintList()
 }
 const handleDeleteSingle = async (row: Complaint) => {
 	const status = await ElMessageBox.confirm(`确定要删除投诉 "${row.title}" 吗？`, '提示', {
@@ -331,43 +224,6 @@ onMounted(() => {
 	getComplaintList()
 })
 
-type SimpleUser = {
-	id: number
-	userNickname: string
-}
-
-//用户获取
-const {
-	state: userList,
-	isLoading: isLoadingUserList,
-	execute: loadingUserList,
-} = useAsyncState<SimpleUser[]>(async (name: string) => {
-	//为了防止默认情况下的用户列表不存在已经分配的用户，需要提前获取这个用户的bean。
-	const user_id = editForm.value?.assignee ?? undefined
-
-	const [origin_user, data]: [origin_user: SimpleUser | undefined, data: SimpleUser[]] = await Promise.all([
-		user_id === undefined ? Promise.resolve(undefined) : system.user.detail(user_id).catch(() => undefined),
-		system.user
-			.getList({ keyWords: name, status: 1 })
-			.then((res: { list: SimpleUser[] }) => res.list)
-			.catch(() => []),
-	])
-
-	if (data.length === 0) {
-		return origin_user !== undefined ? [origin_user] : []
-	}
-
-	if (data.filter((item) => item.id === origin_user?.id).length !== 0) {
-		return data
-	}
-
-	if (origin_user !== undefined) {
-		return [origin_user, ...data]
-	} else {
-		return data
-	}
-}, [])
-
 const feedback = ref(false)
 const feedFormRef = ref()
 const feedCreateForm = ref<Omit<FeedbackCreateParams, 'surveyCode'>>({
@@ -456,7 +312,7 @@ const handleDetail = (row: Complaint) => {
 	showDetail.value = true
 }
 
-const fn = watch(showDetail,(newVal) => {
+const fn = watch(showDetail, (newVal) => {
 	if (newVal) return
 	complaintDetailId.value = undefined
 	complaintDetailProps.value = undefined
@@ -602,171 +458,10 @@ const handleStartFlow = (row: FlowDemoTableColumns | null) => {
 		</el-card>
 
 		<!-- 新增投诉对话框 -->
-		<el-dialog v-model="addDialogVisible" title="新建投诉" width="800px" :close-on-click-modal="false">
-			<el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="100px" label-position="left">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉标题" prop="title" required>
-							<el-input v-model="addForm.title" placeholder="请输入投诉标题" maxlength="100" show-word-limit />
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉类型" prop="category" required>
-							<el-select v-model="addForm.category" placeholder="选择投诉类型" style="width: 100%">
-								<el-option v-for="item in report_type" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉来源" prop="source" required>
-							<el-select v-model="addForm.source" placeholder="选择投诉来源" style="width: 100%">
-								<el-option v-for="item in report_source" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉区域" prop="area" required>
-							<el-select v-model="addForm.area" placeholder="选择投诉区域" style="width: 100%">
-								<el-option label="A区" value="A区" />
-								<el-option label="B区" value="B区" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉人姓名" prop="complainantName" required>
-							<el-input v-model="addForm.complainantName" placeholder="请输入投诉人姓名" maxlength="50" />
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="联系方式" prop="contact">
-							<el-input v-model="addForm.contact" placeholder="请输入联系电话或邮箱" maxlength="50" />
-						</el-form-item>
-					</el-col>
-				</el-row>
-				<el-form-item label="投诉等级" prop="level" required>
-					<el-radio-group v-model="addForm.level">
-						<el-radio v-for="item in report_level" :label="item.value" :key="item.value">
-							<span>{{ item.label }}</span>
-						</el-radio>
-					</el-radio-group>
-				</el-form-item>
-
-				<el-form-item label="投诉内容" prop="content" required>
-					<el-input v-model="addForm.content" type="textarea" :rows="4" placeholder="请详细描述投诉内容..." maxlength="500" show-word-limit />
-				</el-form-item>
-
-				<el-form-item label="指派负责人" prop="assignee">
-					<el-select
-						v-model="addForm.assignee"
-						placeholder="选择负责人"
-						style="width: 100%"
-						filterable
-						remote
-						:remote-method="(data: string) => loadingUserList(100,data)"
-						:loading="isLoadingUserList"
-						clearable
-					>
-						<el-option v-for="user in userList" :key="user.id" :label="user.userNickname" :value="user.id" />
-					</el-select>
-				</el-form-item>
-			</el-form>
-
-			<template #footer>
-				<div class="dialog-footer">
-					<el-button @click="handleAddCancel">取消</el-button>
-					<el-button type="primary" @click="handleAddConfirm"> 提交投诉 </el-button>
-					<el-button @click="handleDemoAdded">保存草稿</el-button>
-				</div>
-			</template>
-		</el-dialog>
+		<add-report-dialog v-model:visible="addDialogVisible" v-model:modelValue="addForm" title="新建投诉" mode="add" @success="handleAddSuccess" />
 
 		<!-- 编辑投诉对话框 -->
-		<el-dialog v-model="editDialogVisible" title="编辑投诉" width="700px" :close-on-click-modal="false">
-			<el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="100px" label-position="left">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉标题" prop="title" required>
-							<el-input v-model="editForm.title" placeholder="请输入投诉标题" maxlength="100" show-word-limit />
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉类型" prop="category" required>
-							<el-select v-model="editForm.category" placeholder="选择投诉类型" style="width: 100%">
-								<el-option v-for="item in report_type" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉来源" prop="source" required>
-							<el-select v-model="editForm.source" placeholder="选择投诉来源" style="width: 100%">
-								<el-option v-for="item in report_source" :key="item.value" :label="item.label" :value="item.value" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉区域" prop="area" required>
-							<el-select v-model="editForm.area" placeholder="选择投诉区域" style="width: 100%">
-								<el-option label="A区" value="A区" />
-								<el-option label="B区" value="B区" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="投诉人姓名" prop="complainantName" required>
-							<el-input v-model="editForm.complainantName" placeholder="请输入投诉人姓名" maxlength="50" />
-						</el-form-item>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="联系方式" prop="contact">
-							<el-input v-model="editForm.contact" placeholder="请输入联系电话或邮箱" maxlength="50" />
-						</el-form-item>
-					</el-col>
-				</el-row>
-
-				<el-form-item label="投诉等级" prop="level" required>
-					<el-radio-group v-model="editForm.level">
-						<el-radio v-for="item in report_level" :label="item.value" :key="item.value">
-							<span>{{ item.label }}</span>
-						</el-radio>
-					</el-radio-group>
-				</el-form-item>
-
-				<el-form-item label="投诉内容" prop="content" required>
-					<el-input v-model="editForm.content" type="textarea" :rows="4" placeholder="请详细描述投诉内容..." maxlength="500" show-word-limit />
-				</el-form-item>
-				<el-form-item label="指派负责人" prop="assignee">
-					<el-select
-						v-model="editForm.assignee"
-						placeholder="选择负责人"
-						style="width: 100%"
-						filterable
-						remote
-						:remote-method="(data: string) => loadingUserList(100,data)"
-						:loading="isLoadingUserList"
-						clearable
-					>
-						<el-option v-for="user in userList" :key="user.id" :label="user.userNickname" :value="user.id" />
-					</el-select>
-				</el-form-item>
-			</el-form>
-			<template #footer>
-				<div class="dialog-footer">
-					<el-button @click="handleEditCancel">取消</el-button>
-					<el-button type="primary" @click="handleEditConfirm"> 提交修改 </el-button>
-					<el-button @click="handleEditCancel">保存草稿</el-button>
-				</div>
-			</template>
-		</el-dialog>
+		<add-report-dialog v-model:visible="editDialogVisible" v-model:modelValue="editForm" title="编辑投诉" mode="edit" @success="handleEditSuccess" />
 
 		<!-- 反馈对话框 -->
 		<el-dialog v-model="feedback" title="投诉反馈" width="700px" :close-on-click-modal="false">
@@ -850,7 +545,7 @@ const handleStartFlow = (row: FlowDemoTableColumns | null) => {
 			</template>
 		</el-dialog>
 
-		<report-detail-dialog :id="complaintDetailId" v-model:visible="showDetail" :wf-prop="complaintDetailProps"/>
+		<report-detail-dialog :id="complaintDetailId" v-model:visible="showDetail" :wf-prop="complaintDetailProps" />
 
 		<checkFlow ref="ckFlowRef" @getList="getComplaintList"></checkFlow>
 	</div>