1、操作界面

左侧菜单栏，流程管理，流程分类

选择某个分类记录，修改

修改分类名称，分类编码，其中分类编码是唯一标识。

如下是修改后数据库的记录

2、前端界面实现

如下截图

<!-- 添加或修改【请填写功能名称】对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="分类名称" prop="categoryName">
      <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
    </el-form-item>
    <el-form-item label="分类编码" prop="code">
      <el-input v-model="form.code" placeholder="请输入分类编码" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

如上述代码，该代码是一个有一个el-dialog组件包囊，触发修改和新增按钮，该对话框显示。

如上述第一行代码，显示和关闭的控制逻辑是有:visible.sync="open" open的变量来控制，如果open内容是true，显示对话框，如果是false，关闭对话框

<el-button
  size="mini"
  type="text"
  icon="el-icon-edit"
  @click="handleUpdate(scope.row)"
  v-hasPermi="['workflow:category:edit']"
>修改</el-button>

/** 修改按钮操作 */
handleUpdate(row) {
  this.loading = true;
  this.reset();
  const categoryId = row.categoryId || this.ids
  getCategory(categoryId).then(response => {
    this.loading = false;
    this.form = response.data;
    this.open = true;
    this.title = "修改流程分类";
  });
},

如上述两段代码可以看出，当产生点击修改事件，事件触发函数handleUpdate，该函数调用接口获取分类数据。

如上述第9行代码，接口返回成功数据后，将open变量设置为ture，对话框显示。

3、获取分类信息后端代码

/**
 * 获取流程分类详细信息
 * @param categoryId 分类主键
 */
@SaCheckPermission("workflow:category:query")
@GetMapping("/{categoryId}")
public R<WfCategoryVo> getInfo(@NotNull(message = "主键不能为空") @PathVariable("categoryId") Long categoryId) {
    return R.ok(categoryService.queryById(categoryId));
}

如上述代码，其中@GetMapping("/{categoryId}")，匹配规则categoryId是一个变量，通过@PathVariable注解，从url里面获取categoryId并赋值给categoryId。

如上述第8行代码categoryService.queryById(categoryId)：通过id获取该记录数据，具体执行sql如下：

Execute SQL：SELECT category_id,category_name,code,remark,del_flag,create_by,create_time,update_by,update_time FROM wf_category WHERE category_id=1677144216777637889 AND del_flag='0'

4、修改前端代码

<div slot="footer" class="dialog-footer">
  <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
  <el-button @click="cancel">取 消</el-button>
</div>

对话框里面有两个按钮，一个是确定，一个是取消，其中确定是将表单数据提交给后台接口。确定绑定对方法是submitForm

/** 提交按钮 */
submitForm() {
  this.$refs["form"].validate(valid => {
    if (valid) {
      this.buttonLoading = true;
      if (this.form.categoryId != null) {
        updateCategory(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        }).finally(() => {
          this.buttonLoading = false;
        });
      } else {
        addCategory(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        }).finally(() => {
          this.buttonLoading = false;
        });
      }
    }
  });
},

业务逻辑：

1、验证是否表单满足规则。

2、判断this.form.categoryId是否为空，如果为空，则表示新增，如果非空，则表示修改。

3、修改调用updateCategory函数，新增调用addCategory函数

如上述代码this.form表示表单全部数据。

5、新增修改后台接口

/**
 * 新增流程分类
 */
@SaCheckPermission("workflow:category:add")
@Log(title = "流程分类", businessType = BusinessType.INSERT)
@RepeatSubmit()
@PostMapping()
public R<Void> add(@Validated @RequestBody WfCategory category) {
    if (!categoryService.checkCategoryCodeUnique(category)) {
        return R.fail("新增流程分类'" + category.getCategoryName() + "'失败，流程编码已存在");
    }
    return toAjax(categoryService.insertCategory(category));
}

/**
 * 修改流程分类
 */
@SaCheckPermission("workflow:category:edit")
@Log(title = "流程分类", businessType = BusinessType.UPDATE)
@RepeatSubmit()
@PutMapping()
public R<Void> edit(@Validated @RequestBody WfCategory category) {
    if (!categoryService.checkCategoryCodeUnique(category)) {
        return R.fail("修改流程分类'" + category.getCategoryName() + "'失败，流程编码已存在");
    }
    return toAjax(categoryService.updateCategory(category));
}

/**
 * 删除流程分类
 * @param categoryIds 分类主键串
 */
@SaCheckPermission("workflow:category:remove")
@Log(title = "流程分类" , businessType = BusinessType.DELETE)
@DeleteMapping("/{categoryIds}")
public R<Void> remove(@NotEmpty(message = "主键不能为空") @PathVariable Long[] categoryIds) {
    return toAjax(categoryService.deleteWithValidByIds(Arrays.asList(categoryIds), true));
}

计划

1、ruoyi-flowable-plus工作流拆解

2、ruoyi-flowable-plus如何快速开发

3、电商项目源代码拆解

4、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我