17. Springboot3+Vue3实现提交审核业务功能,请假申请、发布帖子审核、作业提交等等 – 朝汐の小站
17. Springboot3+Vue3实现提交审核业务功能,请假申请、发布帖子审核、作业提交等等
本文最后更新于 276 天前,如有错误请邮件至 zhiligyi222na@gmail.com

业务申请模块

关键代码

CREATE TABLE `apply` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `user_id` int(11) DEFAULT NULL COMMENT '用户ID',
  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '申请标题',
  `content` text COLLATE utf8mb4_unicode_ci COMMENT '申请内容',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '申请时间',
  `status` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '审核状态',
  `reason` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '审核说明',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='业务申请表';
public void add(Apply apply) {
    Account currentUser = TokenUtils.getCurrentUser();
    apply.setUserId(currentUser.getId());
    apply.setTime(DateUtil.now());
    apply.setStatus("待审核");
    applyMapper.insert(apply);
}
      <el-table :data="data.tableData" style="width: 100%"
                :header-cell-style="{ color: '#333',backgroundColor: '#eaf4ff' }">
        <el-table-column prop="title" label="业务标题" />
        <el-table-column prop="content" label="业务内容" />
        <el-table-column prop="userName" label="申请人" />
        <el-table-column prop="time" label="申请时间" />
        <el-table-column prop="status" label="审核状态" >
          <template v-slot="scope">
            <el-tag type="warning" v-if="scope.row.status === '待审核'">{{ scope.row.status }}</el-tag>
            <el-tag type="success" v-if="scope.row.status === '审核通过'">{{ scope.row.status }}</el-tag>
            <el-tag type="danger" v-if="scope.row.status === '审核不通过'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="审核说明" />
        <el-table-column label="操作" width="100" >
          <template #default="scope" v-if="data.user.role === 'USER'">
            <el-button :disabled="scope.row.status !== '待审核'" type="primary" icon="Edit" circle @click="handleEdit(scope.row)"></el-button>
            <el-button :disabled="scope.row.status !== '待审核'" type="danger" icon="Delete" circle @click="del(scope.row.id)"></el-button>
          </template>
          <template #default="scope" v-if="data.user.role === 'ADMIN'">
            <el-button :disabled="scope.row.status !== '待审核'" type="primary" @click="handleEdit(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
<el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="title" label="业务标题" v-if="data.user.role === 'USER'">
          <el-input v-model="data.form.title" autocomplete="off" placeholder="请输入业务标题"/>
        </el-form-item>
        <el-form-item prop="content" label="业务内容" v-if="data.user.role === 'USER'">
          <el-input type="textarea" :rows="3" v-model="data.form.content" autocomplete="off" placeholder="请输入业务内容"/>
        </el-form-item>
        <el-form-item prop="status" label="审核状态" v-if="data.user.role === 'ADMIN'">
          <el-radio-group v-model="data.form.status">
            <el-radio-button label="待审核" value="待审核" />
            <el-radio-button label="审核通过" value="审核通过" />
            <el-radio-button label="审核不通过" value="审核不通过" />
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="reason" label="审核说明" v-if="data.user.role === 'ADMIN' && data.form.status === '审核不通过'">
          <el-input v-model="data.form.reason" autocomplete="off" placeholder="请输入拒绝说明"/>
        </el-form-item>
      </el-form>

核心总结

  1. 提交审核业务必须要有角色id和status字段
  2. 在提交的接口里面需要绑定好角色id以及初始化状态(待审核)
  3. 用户只能看到自己提交的申请
  4. 管理员审核后需要跟新状态
  5. 提交角色的操作按钮和审核角色的操作按钮可以通过状态字段进行控制
文末附加内容
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇