投诉点击后弹出新建投诉对话框

src/views/flow/flowCraft/index.vue

@@ -5,6 +5,8 @@ import { useStore } from '/@/store'
 import { useLoading } from '/@/utils/loading-util'
 import AddFormData from '/@/views/flow/flowForm/list/component/addFormData.vue'
 import { FlowFormTableColumns, FlowFormTableDataState } from '/@/views/flow/flowForm/list/component/model'
+import AddReportDialog from '/@/views/system/report/componments/add-report-dialog.vue'
+import { CreateComplaintRequest } from '/@/api/system/report/type'
 
 const store = useStore()
 
@@ -54,6 +56,21 @@ const getSummaryCardBgColor = (index: number) => {
 // 表单数据相关
 const addFormDataRef = ref()
 
+// 投诉管理对话框相关
+const complaintDialogRef = ref()
+const complaintDialogVisible = ref(false)
+const complaintFormData = ref<CreateComplaintRequest>({
+	title: '',
+	category: '',
+	source: '',
+	area: '',
+	complainantName: '',
+	contact: '',
+	level: '',
+	content: '',
+	assignee: undefined,
+})
+
 const state = reactive<FlowFormTableDataState>({
 	ids: [],
 	tableData: {
@@ -117,6 +134,30 @@ const getFormDataList = () => {
 	// 这里可以根据需要实现刷新逻辑
 	console.log('刷新表单数据列表')
 }
+
+// 处理投诉管理点击事件
+const handleComplaintClick = () => {
+	// 重置表单数据
+	complaintFormData.value = {
+		title: '',
+		category: '',
+		source: '',
+		area: '',
+		complainantName: '',
+		contact: '',
+		level: '',
+		content: '',
+		assignee: undefined,
+	}
+	// 打开对话框
+	complaintDialogVisible.value = true
+}
+
+// 处理投诉管理对话框成功事件
+const handleComplaintSuccess = () => {
+	// 关闭对话框
+	complaintDialogVisible.value = false
+}
 </script>
 
 <template>
@@ -235,8 +276,41 @@ const getFormDataList = () => {
 			</div>
 		</div>
 
+		<!-- 系统表单区域 -->
+		<div class="section-container">
+			<div class="section-header">
+				<div class="section-bar"></div>
+				<h3 class="section-title">系统表单</h3>
+			</div>
+
+			<!-- 系统表单列表 -->
+			<el-row :gutter="20">
+				<el-col :span="8">
+					<el-card class="function-card" shadow="hover" @click="handleComplaintClick">
+						<div class="card-content">
+							<el-icon :size="32" color="#f56c6c">
+								<ele-Warning />
+							</el-icon>
+							<div class="card-title">投诉管理</div>
+							<div class="card-subtitle">点击发起投诉申请</div>
+						</div>
+					</el-card>
+				</el-col>
+			</el-row>
+		</div>
+
 		<!-- 发起表单审批组件 -->
 		<add-form-data ref="addFormDataRef" @getFormDataList="getFormDataList" />
+
+		<!-- 投诉管理对话框 -->
+		<add-report-dialog
+			ref="complaintDialogRef"
+			v-model:visible="complaintDialogVisible"
+			v-model:modelValue="complaintFormData"
+			title="新增投诉"
+			mode="add"
+			@success="handleComplaintSuccess"
+		/>
 	</div>
 </template>