After obtaining the source code from the official site, follow the setup instructions to launch the front-end and back-end components of the decoupled project.

Environment Constraints

• On Windows 7, Node.js must be version 10 or earlier; newer releases are incompatible.
• When using MySQL, executing the provided SQL scripts may yield incomplete tables—manual adjustments are often required to finalize the schema.

Front-End Launch Variations

The reference documentation assumes WebStorm: open Show NPM Scripts and run serve from application.json. With Visual Studio Code, start the project via terminal:

npm run serve

Using Yarn is recommended for consistency:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g yarn
yarn install
yarn run serve

Fixing Ineffective Dictionary Rendering on List Pages

Gneerated column definitions may point to a _dictText field, which fails to resolve display values. Replace the auto-generated snippet:

{
  title: 'Order Status',
  align: "center",
  dataIndex: 'orderState_dictText'
}

With inline mapping logic:

{
  title: 'Order Status',
  align: "center",
  dataIndex: 'orderState',
  customRender: (val) => {
    if (val === 0) return 'Pending Payment';
    if (val === 1) return 'Awaiting Use';
    if (val === 2) return 'Completed';
    return val;
  }
}

Back-End Complex Query with MyBatis-Plus

Define a mapper method accepting a DTO and returning results mapped to a entity:

<select id="fetchAll" parameterType="com.zz.MissionScoreDTO" resultMap="com.zz.model.MissionScore">
  SELECT * FROM t_mission_score
  <where>
    <if test="criteria.id != null and criteria.id != ''">
      AND t_mission_score.id = #{criteria.id}
    </if>
    <if test="criteria.missionId != null and criteria.missionId != ''">
      AND t_mission_score.mission_id = #{criteria.missionId}
    </if>
    <if test="criteria.missionKind != null and criteria.missionId != ''">
      AND t_mission_score.mission_kind = #{criteria.missionKind}
    </if>
    <if test="criteria.teamIds != null and criteria.teamIds > 0">
      AND (
        <foreach collection="criteria.teamIds" index="idx" open="(" separator="or" close=")" item="entry">
          <if test="entry.groupName != null and entry.groupName != '' and entry.missionGroupRole != null and entry.missionGroupRole != ''">
            (
              t_mission_score.group_name LIKE CONCAT('%', #{entry.groupName}, '%')
              AND t_mission_score.mission_group_role = #{entry.missionGroupRole}
            )
          </if>
        </foreach>
      )
    </if>
  </where>
  ORDER BY t_mission_score.create_time DESC
</select>

Converting Page Query Results

Transform a raw Page into a DTO-backed page:

LambdaQueryWrapper<JobTask> qw = new LambdaQueryWrapper<>();
qw.eq(JobTask::getRemoveMark, DeleteFlagEnum.NO.getCode());

Page<JobTask> srcPage = new Page<>(pageNum, pageSize);
Page<JobTask> fetched = jobTaskMapper.selectPage(srcPage, qw);

Page<JobTaskViewDTO> viewPage = new Page<>(fetched.getCurrent(), fetched.getSize(), fetched.getTotal());
List<JobTaskViewDTO> dtoList = fetched.getRecords().stream()
    .map(item -> item.toViewDTO(JobTaskViewDTO.class))
    .collect(Collectors.toList());
viewPage.setRecords(dtoList);
return viewPage;

Generic Pagination Helper for In-Memory Lists

When pagination must be applied to a preloaded collection:

public static <T> List<T> slicePage(int current, int size, List<T> source) {
    if (source == null || source.isEmpty()) return source;
    int total = source.size();
    current = Math.max(current - 1, 0);
    int begin = current * size;
    if (begin >= total) return source;
    int end = Math.min((current + 1) * size, total);
    return source.subList(begin, end);
}