17. Springboot3+Vue3实现提交审核业务功能

CREATE TABLE `apply` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `user_id` int 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=InnoDB 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>