免费自学平面设计的网站,直播网站开发源码,wordpress免,多用户商城数据库设计更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统
前面讲了集成的后端部分内容#xff0c;下面简单介绍一下前端的内容 1、前端生成的页面需要进行修改 https://gitee.com/nbacheng/ruoyi-nbcio
演示地址RuoYi-Nbcio后台管理系统
前面讲了集成的后端部分内容下面简单介绍一下前端的内容 1、前端生成的页面需要进行修改增加流程状态启动等相关信息如demo的index修改如下
templatediv classapp-containerel-form :modelqueryParams refqueryForm sizesmall :inlinetrue v-showshowSearch label-width68pxel-form-item label用户账号 propuserNameel-inputv-modelqueryParams.userNameplaceholder请输入用户账号clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label用户昵称 propnickNameel-inputv-modelqueryParams.nickNameplaceholder请输入用户昵称clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label用户邮箱 propemailel-inputv-modelqueryParams.emailplaceholder请输入用户邮箱clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label头像地址 propavatarel-inputv-modelqueryParams.avatarplaceholder请输入头像地址clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-itemel-button typeprimary iconel-icon-search sizemini clickhandleQuery搜索/el-buttonel-button iconel-icon-refresh sizemini clickresetQuery重置/el-button/el-form-item/el-formel-row :gutter10 classmb8el-col :span1.5el-buttontypeprimaryplainiconel-icon-plussizeminiclickhandleAddv-hasPermi[workflow:demo:add]新增/el-button/el-colel-col :span1.5el-buttontypesuccessplainiconel-icon-editsizemini:disabledsingleclickhandleUpdatev-hasPermi[workflow:demo:edit]修改/el-button/el-colel-col :span1.5el-buttontypedangerplainiconel-icon-deletesizemini:disabledmultipleclickhandleDeletev-hasPermi[workflow:demo:remove]删除/el-button/el-colel-col :span1.5el-buttontypewarningplainiconel-icon-downloadsizeminiclickhandleExportv-hasPermi[workflow:demo:export]导出/el-button/el-colright-toolbar :showSearch.syncshowSearch queryTablegetList/right-toolbar/el-rowel-table v-loadingloading :datademoList selection-changehandleSelectionChangeel-table-column typeselection width30 aligncenter /el-table-column label用户ID aligncenter propdemoId v-iftrue/el-table-column label用户账号 aligncenter propuserName /el-table-column label用户昵称 aligncenter propnickName /el-table-column label流程状态 aligncenter propactStatus /el-table-column label待处理节点 aligncenter proptaskName /el-table-column label处理人 aligncenter proptodoUsers /el-table-column label操作 aligncenter class-namesmall-padding fixed-widthtemplate slot-scopescopeact-apply-btn successgetList :data-idscope.row.demoId :serviceNameserviceName :variablesscope.row/act-apply-btn!--act-handle-btn successgetList :data-idscope.row.demoId :type0 text通过/act-handle-btnact-handle-btn successgetList :data-idscope.row.demoId :type1 text驳回/act-handle-btnact-handle-btn successgetList :data-idscope.row.demoId :type2 text退回/act-handle-btnact-cancel-btn successgetList :data-idscope.row.demoId/act-cancel-btn--act-historic-detail-btn :data-idscope.row.demoId/act-historic-detail-btna-divider typevertical /el-buttonsizemediumtypetexticonel-icon-editclickhandleUpdate(scope.row)v-hasPermi[workflow:demo:edit]修改/el-buttonel-buttonsizemediumtypetexticonel-icon-deleteclickhandleDelete(scope.row)v-hasPermi[workflow:demo:remove]删除/el-button/template/el-table-column/el-tablepaginationv-showtotal0:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSizepaginationgetList/!-- 添加或修改DEMO对话框 --el-dialog :titletitle :visible.syncopen width500px append-to-bodyel-form refform :modelform :rulesrules label-width80pxel-form-item label用户账号 propuserNameel-input v-modelform.userName placeholder请输入用户账号 //el-form-itemel-form-item label用户昵称 propnickNameel-input v-modelform.nickName placeholder请输入用户昵称 //el-form-itemel-form-item label用户邮箱 propemailel-input v-modelform.email placeholder请输入用户邮箱 //el-form-itemel-form-item label头像地址 propavatarel-input v-modelform.avatar placeholder请输入头像地址 //el-form-itemel-form-item label备注 propremarkel-input v-modelform.remark typetextarea placeholder请输入内容 //el-form-item/el-formdiv slotfooter classdialog-footerel-button :loadingbuttonLoading typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog/div
/templatescriptimport { listDemo, getDemo, delDemo, addDemo, updateDemo } from /api/workflow/demo;import ActApplyBtn from /views/workflow/components/ActApplyBtn;import ActCancelBtn from /views/workflow/components/ActCancelBtn;import ActHandleBtn from /views/workflow/components/ActHandleBtn;import ActHistoricDetailBtn from /views/workflow/components/ActHistoricDetailBtn;export default {name: Demo,components: {ActApplyBtn,ActCancelBtn,ActHandleBtn,ActHistoricDetailBtn},data() {return {// 按钮loadingbuttonLoading: false,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// DEMO表格数据demoList: [],// 弹出层标题title: ,// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,},serviceName: wfDemoService,// 表单参数form: {},// 表单校验rules: {demoId: [{ required: true, message: DEMO-ID不能为空, trigger: blur }],userName: [{ required: true, message: 用户账号不能为空, trigger: blur }]}};},created() {this.getList();},methods: {/** 查询DEMO列表 */getList() {this.loading true;listDemo(this.queryParams).then(response {this.demoList response.rows;this.total response.total;this.loading false;});},// 取消按钮cancel() {this.open false;this.reset();},// 表单重置reset() {this.form {demoId: undefined,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,delFlag: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined,remark: undefined};this.resetForm(form);},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm(queryForm);this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids selection.map(item item.demoId)this.single selection.length!1this.multiple !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open true;this.title 添加DEMO;},/** 修改按钮操作 */handleUpdate(row) {this.loading true;this.reset();const demoId row.demoId || this.idsgetDemo(demoId).then(response {this.loading false;this.form response.data;this.open true;this.title 修改DEMO;});},/** 提交按钮 */submitForm() {this.$refs[form].validate(valid {if (valid) {this.buttonLoading true;if (this.form.demoId ! null) {updateDemo(this.form).then(response {this.$modal.msgSuccess(修改成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});} else {addDemo(this.form).then(response {this.$modal.msgSuccess(新增成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});}}});},/** 删除按钮操作 */handleDelete(row) {const demoIds row.demoId || this.ids;this.$modal.confirm(是否确认删除DEMO编号为 demoIds 的数据项).then(() {this.loading true;return delDemo(demoIds);}).then(() {this.loading false;this.getList();this.$modal.msgSuccess(删除成功);}).catch(() {}).finally(() {this.loading false;});},/** 导出按钮操作 */handleExport() {this.download(workflow/demo/export, {...this.queryParams}, demo_${new Date().getTime()}.xlsx)}}
};
/script2、同时需要在flowableMixin里需要维护下面的一条记录
/*所有的自定义业务流程表单组件化注册在此维护*/allFormComponent:function(){return [{text:单表示例,routeName: /views/workflow/demo/wf,component: () import(/views/workflow/demo/wf),businessTable:wf_demo}, 3、同时上面需要增加一个进行流程流转过程中的页面wfdemo的wf如下
templatediv classapp-container!-- 显示DEMO数据 --el-form refform :modelform label-width80px :disableddisabledel-form-item label用户账号 propuserNameel-input v-modelform.userName placeholder //el-form-itemel-form-item label用户昵称 propnickNameel-input v-modelform.nickName placeholder //el-form-itemel-form-item label用户邮箱 propemailel-input v-modelform.email placeholder //el-form-itemel-form-item label头像地址 propavatarel-input v-modelform.avatar placeholder //el-form-itemel-form-item label备注 propremarkel-input v-modelform.remark typetextarea placeholder //el-form-item/el-form!--div slotfooter classdialog-footerel-button :loadingbuttonLoading typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div --/div
/templatescriptimport {getDemo, delDemo, addDemo, updateDemo } from /api/workflow/demo;export default {name: wfDemo,components: {},props: {//表单禁用disabled: {type: Boolean,default: false,required: false},/*流程自定义表单数据*/customFormData:{type:Object,default:(){return {}},required:false},},data() {return {// 按钮loadingbuttonLoading: false,// 弹出层标题title: ,// 是否显示弹出层open: true,// 表单参数form: {},}},created() {//流程调用自定义表单的传入参数if(this.customFormData ! null) {console.log(this.customFormData,this.customFormData);this.form this.customFormData;}//this.handleView(this.form);},methods: {// 取消按钮cancel() {this.open false;this.reset();},// 表单重置reset() {this.form {demoId: undefined,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,delFlag: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined,remark: undefined};this.resetForm(form);},/** 新增按钮操作 */handleAdd() {this.reset();this.open true;this.title 添加DEMO;},/** 查看按钮操作 */handleView(row) {this.loading true;this.reset();const demoId row.demoId || this.idsgetDemo(demoId).then(response {this.loading false;this.form response.data;this.open true;this.title DEMO详情;});},/** 修改按钮操作 */handleUpdate(row) {this.loading true;this.reset();const demoId row.demoId || this.idsgetDemo(demoId).then(response {this.loading false;this.form response.data;this.open true;this.title 修改DEMO;});},/** 提交按钮 */submitForm() {this.$refs[form].validate(valid {if (valid) {this.buttonLoading true;if (this.form.demoId ! null) {updateDemo(this.form).then(response {this.$modal.msgSuccess(修改成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});} else {addDemo(this.form).then(response {this.$modal.msgSuccess(新增成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});}}});},}}
/scriptstyle
/style
