最近遇到一个问题
需求是 三张表 一对多对一的关系
用到的技术 vue vxetable mybatis
需要让它显示在一个表格中并且合并单元格
思路:
后端:利用resultMap进行关系映射 形成父子关系
<resultMap type="RtProbProblemAccount" id="RtProbProblemAccountResult">
<result property="problemId" column="problem_id"/>
<result property="accountId" column="suc_account_id"/>
<result property="inventId" column="invent_id"/>
<result property="problemNo" column="problem_no"/>
<result property="rectUnit" column="rect_unit"/>
<result property="problemStatus" column="problem_status"/>
<result property="preparedBy" column="prepared_by"/>
<result property="preparedDate" column="prepared_date"/>
<result property="problemTypeId" column="problem_type_id"/>
<result property="problemType" column="problem_type"/>
<result property="otherProblems" column="other_problems"/>
<result property="title" column="title"/>
<result property="describe" column="describe"/>
<result property="problemOccurUnit" column="problem_occur_unit"/>
<result property="qualitativeBasis" column="qualitative_basis"/>
<result property="auditOpinion" column="audit_opinion"/>
<result property="duty" column="duty"/>
<result property="importance" column="importance"/>
<result property="problemDiscoveryTime" column="problem_discovery_time"/>
<result property="riskQualitative" column="risk_qualitative"/>
<result property="auditProblemMajor" column="audit_problem_major"/>
<result property="auditProblemSubclass" column="audit_problem_subclass"/>
<result property="involveAmount" column="involve_amount"/>
<result property="problemFinder" column="problem_finder"/>
<result property="problemDiscoveryNumber" column="problem_discovery_number"/>
<result property="auditDiscoveryType" column="audit_discovery_type"/>
<result property="violationAmount" column="violation_amount"/>
<result property="violationType" column="violation_type"/>
<result property="orderNum" column="order_num"/>
<result property="whCancel" column="wh_cancel"/>
<result property="createBy" column="create_by"/>
<result property="createTime" column="create_time"/>
<result property="updateBy" column="update_by"/>
<result property="updateTime" column="update_time"/>
<result property="remark" column="remark"/>
<result property="delFlag" column="del_flag"/>
</resultMap>
<resultMap type="RtRectMeasure" id="RtRectMeasureResult">
<result property="measureId" column="measure_id"/>
<result property="planId" column="plan_id"/>
<result property="problemId" column="problem_id"/>
<result property="rectMeasures" column="rect_measures"/>
<result property="proHappenReason" column="pro_happen_reason"/>
<result property="rectTargetResult" column="rect_target_result"/>
<result property="reviewComments" column="review_comments"/>
<result property="rectLeader" column="rect_leader"/>
<result property="rectContact" column="rect_contact"/>
<result property="methodCompletion" column="method_completion"/>
<result property="planCompleteDate" column="plan_complete_date"/>
<result property="actualCompleteDate" column="actual_complete_date"/>
<result property="orderNum" column="order_num"/>
<result property="createBy" column="create_by"/>
<result property="createTime" column="create_time"/>
<result property="updateBy" column="update_by"/>
<result property="updateTime" column="update_time"/>
<result property="remark" column="remark"/>
<result property="delFlag" column="del_flag"/>
<association property="historical" javaType="com.guhg.rt.domain.RtRectFeedbackHistorical" resultMap="RtRectFeedbackHistoricalResult" />
</resultMap>
<resultMap type="RtRectFeedbackHistorical" id="RtRectFeedbackHistoricalResult">
<result property="historicalId" column="historical_id" />
<result property="feedbackId" column="feedback_id" />
<result property="accountId" column="account_id" />
<result property="projectId" column="project_id" />
<result property="measureId" column="measure_id" />
<result property="feedbackNumber" column="feedback_number" />
<result property="feedbackDate" column="feedback_date" />
<result property="rectUnit" column="rect_unit" />
<result property="unitName" column="unit_name" />
<result property="year" column="year" />
<result property="feedbackStatus" column="feedback_status" />
<result property="rectFeedback" column="rect_feedback" />
<result property="rectProofDescribe" column="rect_proof_describe" />
<result property="methodCompletion" column="method_completion" />
<result property="actualCompletionDate" column="actual_completion_date" />
<result property="whAdopt" column="wh_adopt" />
<result property="noAdoptReason" column="no_adopt_reason" />
<result property="undoneReason" column="undone_reason" />
<result property="continueMeasures" column="continue_measures" />
<result property="orderNum" column="order_num" />
<result property="createBy" column="create_by" />
<result property="createTime" column="create_time" />
<result property="updateBy" column="update_by" />
<result property="updateTime" column="update_time" />
<result property="remark" column="remark" />
<result property="delFlag" column="del_flag" />
</resultMap>
<resultMap id="RtProbProblemAccountRtRectMeasureResult" type="RtProbProblemAccount"
extends="RtProbProblemAccountResult">
<association property="rtRectMeasures" notNullColumn="measure_id" javaType="com.guhg.rt.domain.RtRectMeasure"
resultMap="RtRectMeasureResult"/>
</resultMap>
<select id="queryProblemByProblemId" parameterType="String" resultMap="RtProbProblemAccountRtRectMeasureResult">
select a.problem_id, a.account_id as suc_account_id, a.invent_id, a.problem_no, a.rect_unit, a.problem_status, a.prepared_by, a.prepared_date, a.problem_type_id, a.problem_type, a.other_problems, a.title, a.describe, a.problem_occur_unit, a.qualitative_basis, a.audit_opinion, a.wh_cancel,
b.*,
c.*
from rt_prob_problem_account a
left join rt_rect_measure b
on b.problem_id = a.problem_id
left join rt_rect_feedback_historical c
on b.measure_id = c.measure_id
where a.account_id = #{accountId}
</select>
注:因为我们需求是合并单元格 查询时结果会有很多一致的字段 而mybatis会自动把一致的字段合并起来 需要让查询出来数据的自带一个主键 让mybatis不去合并我们一致的数据 从而查询出所有的数据
前端:
这里是vxe的表格合并
在vxe的表头定义合并方法
// 通用行合并函数(将相同多列数据合并为一行)
rowspanMethod({row, _rowIndex, column, visibleData}) {
// 对象中什么字段需要合并就往后面填写
let fields = ['problemStatus','title','problemOccurUnit','whCancel']
// 拿到一行中所有列中的值
// 一行中只要problemNo属性值一样 就合并
let cellValue = row['problemNo']
if (cellValue && fields.includes(column.property)) {
let prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
// 一行中只要problemNo属性值一样 就合并
if (prevRow && prevRow['problemNo'] === cellValue) {
return {rowspan: 0, colspan: 0}
} else {
let countRowspan = 1
// 一行中只要problemNo属性值一样 就合并
while (nextRow && nextRow['problemNo'] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return {rowspan: countRowspan, colspan: 1}
}
}
}
},
方法还有很多 会的可以分享一下