ScoringTable组件（评分表）

一、约定

标题	内容
路由地址	公共组件无单独路由
路由页面	src/components/ScoringTable/index.vue
操作权限	无限制
API调用约定	当前组件进行API调用集中管理、内置组件仅做展现层控制。

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	说明	默认值	可选值
1	projectId	String	项目ID	''	-
2	mode	String	模式	'default'	-
3	height	Number	表格高度	300	-
4	isDisabled	Boolean	是否禁用操作按钮	false	true

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	multipleSelection	Array	表格中选中的行数据	[]	-
2	currentPage	Number	当前页码	1	-
3	pageSize	Number	每页显示数量	10	[10, 20, 50, 100]
4	total	Number	数据总数	0	-
5	scoringTableList	Array	评分表列表数据	[]	-
6	searchData	Object	搜索表单数据	{ projectId: props.projectId, markSheetName: "", enabled: "", projectMarkSheetModuleList: [] }	-
7	loading	Boolean	表格加载状态	false	true
8	drawerData	Object	抽屉数据	{ switch: false, title: "" }	-
9	scoringFormRef	Ref	评分表表单引用	-	-
10	scoringData	Object	评分表数据	{ projectId: props.projectId, markSheetName: "", markSheetDesc: "", projectModuleList: [], projectMarkItemList: [{ markItemName: "", markItemScore: 0, reviewContent: "" }] }	-
11	markItemTotalScore	Number	评分项总配分	0	-
12	previewMask	Boolean	预览弹窗显示状态	false	true
13	ConfirmDialogRef	Ref	确认对话框引用	-	-

三、组件管理

（一）组件事件

组件自身提供的功能

核心功能点，执行的事件关系

getModuleList() 和 getScoringTableList（）数据：

若 projectId 存在，则执行 getModuleList() 方法获取申报模块列表，并执行 getScoringTableList() 方法获取评分表列表数据。

（二）子组件

使用 XX 子组件提供 MMM 功能

对子组件的传参赋值

子组件上报事件的接收处理

ConfirmDialog组件（二次确认弹窗）
实现抽屉功能

父→子组件传参

v-model:show：抽屉显示状态

title：抽屉标题

showPreview：是否显示预览按钮

showCancel：是否显示取消按钮

confirmBtnText：确认按钮文本

子→父事件上报

上报通知	用途	执行内部事件
cancelClick	点击取消按钮	handleDrawerCancel
confirmClick	点击确认按钮	handleDrawerConfirm
previewClick	点击预览按钮	handleDrawerPreview

ConfirmDialog组件（确认对话框）
实现确认对话框功能

父→子组件传参

无

子→父事件上报

上报通知	用途	执行内部事件
confirm	点击确认按钮	confirmDialogConfirmFn

四、事件方法

核心事件，含数据处理、API调用、事件管理管理等

handleSelectionChange(val)表格选中行数据变

当表格选中行数据变化时，更新 multipleSelection 的值。

getModuleList() 获取申报模块列表-

获取申报模块列表，调用 projectModuleList() (/projectModule/loadList)项目模块表列表查询 API，根据项目ID获取申报模块列表，并更新 moduleList 的值。

getScoringTableList() 获取评分表列表

获取评分表列表数据，调用 getScoringListbyProjectId() (/projectMarkSheet/loadPage)项目评分表表分页查询 API，根据搜索条件和分页信息获取数据，并更新 scoringTableList 和 total 的值。

searchFn() 搜索评分表

搜索评分表，重置页码为1，并调用 getScoringTableList 方法重新获取评分表列表数据。

resetSearchForm() 重置搜索表单

重置搜索表单，重置搜索表单数据和页码为1，并调用 getScoringTableList() 方法重新获取评分表列表数据。

handleSizeChange(val) 数量变化

每页显示数量变化时，更新 pageSize 的值，并调用 getScoringTableList() 方法重新获取评分表列表数据。

handleCurrentChange(val) 页码变化

当前页码变化时，更新 currentPage 的值，并调用 getScoringTableList 方法重新获取评分表列表数据。

openDrawerFn(row) 打开新建/编辑评分表抽屉

打开新建/编辑评分表抽屉，若 row 存在则为编辑模式，设置抽屉标题为“编辑评分表”并获取该评分表详情；若 row 不存在则为新建模式，设置抽屉标题为“新建评分表”，并显示抽屉。

addScoringFn() 添加评分表

添加评分表，验证表单数据，若验证通过则调用 addScoring (/projectMarkSheet/saveOne)项目评分表表保存一个对象 API 添加评分表，添加成功后关闭抽屉并更新数据。

10.

updateScoringFn() 编辑评分表

编辑评分表，验证表单数据，若验证通过则调用 updateScoring (/projectMarkSheet/updateOne)项目评分表表更新一个对象 API 更新评分表，更新成功后关闭抽屉并更新数据。

11.

handleDrawerConfirm() 确认新建/编辑评分表

确认新建/编辑评分表，计算评分项总配分，根据是否有 id 决定调用 addScoringFn 或 updateScoringFn 方法，操作成功后关闭抽屉并更新数据。

12.

handleDrawerCancel() 取消新建/编辑评分表，关闭抽屉

13.

handleDrawerPreview() 预览评分表

预览评分表，计算评分项总配分，打开预览弹窗显示评分表详情。

14.

opnePreviewFn(row) 预览评分表：

预览评分表，获取该评分表详情，打开预览弹窗显示评分表详情。

15.

deleteScoringFn(id) 删除单个评分表

删除单个评分表，调用 deleteScoring (/projectMarkSheet/deleteOne)项目评分表表删除一个对象 API 移除评分表，移除成功后更新数据。

16.

beforeDeleteScoring(row) ：删除单个评分表前确认

删除单个评分表前确认，弹出确认框，确认后调用 deleteScoringFn 方法移除评分表。

17.

enableScoringFn(ids) 启用评分

启用评分表，调用 enableScoring (/projectMarkSheet/enableOnes)项目评分表表启用多个对象API 启用评分表，启用成功后更新数据。

18.

disableScoringFn(ids) 禁用评分

禁用评分表，调用 disableScoring (/projectMarkSheet/deleteOne)项目评分表表删除一个对象 API 禁用评分表，禁用成功后更新数据。

18.

changeEnabledFn(row) 切换评分表状态

切换评分表状态，根据当前状态调用 enableScoringFn 或 disableScoringFn 方法更新评分表状态。

19.

multipleDeleteScoringFn(ids) 批量删除评分表

批量删除评分表，调用 multipleDeleteScoring (/projectMarkSheet/deleteOnes)项目评分表表删除多个对象API 批量删除评分表，删除成功后更新数据。

20.

verifyRepeatOperate(list, type) 验证批量操作是否存在重复状态

验证批量操作是否存在重复状态，若存在则提示并返回 false，否则返回 true。

21.

bulkOperationFn(type) 批量操作：

批量操作，根据操作类型（enable、disable、del）调用相应的方法进行批量操作。

22.

getMarkItemTotalScore() 计算评分项总配分

计算评分项总配分，遍历评分项列表计算总配分，并更新 markItemTotalScore 的值。

23.

initScoringData() 初始化评分表数据
. - 初始化评分表数据，将 scoringData 重置为默认值。

24.

addItem() 添加评分项：

添加评分项，在评分项列表中添加一个新的评分项。

24.

removeImte(index) 删除评分项

删除评分项，弹出确认框，确认后删除该评分项。

26.

getScoringByIdFn(id) 获取评分表详情

27.

获取评分表详情，调用 getScoringById (/projectMarkSheet/loadOne)项目评分表表加载一个对象 API 获取评分表详情，并更新 scoringData 的值。

28.

haveScoringTableList() 判断是否有评分表列表数据

判断是否有评分表列表数据，返回 scoringTableList 的长度是否大于0的布尔值。

29.

confirmDialogConfirmFn(data) 确认对话框确认事件

确认对话框确认事件，根据 data.key 执行相应的操作，操作完成后关闭确认对话框。

ScoringTable组件（评分表）

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

四、事件方法#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

四、事件方法