上海翼成信息科技有限公司做的什么网站,手表网站 源码,工作室起名大全免费取名,无锡自助网站更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码#xff1a…更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码 https://gitee.com/nbacheng/ruoyi-nbcio
演示地址RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码 https://gitee.com/nbacheng/nbcio-boot
前端代码https://gitee.com/nbacheng/nbcio-vue.git
在线演示包括H5 http://122.227.135.243:9888
1、原先demo的vue2代码如下
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-idString(scope.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-idString(scope.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、修改后的vue3代码如下
templatediv classapp-containerel-form v-modelqueryParams refqueryFormRef 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-idString(scope.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-idString(scope.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 refformRef v-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
/templatescript setup nameWDemo langtsimport { 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;const { proxy } getCurrentInstance() as ComponentInternalInstance;const queryFormRef ref(null)const formRef ref(null)// 按钮loadingconst buttonLoading ref(false)// 遮罩层const loading ref(true)// 选中数组const ids refany([])// 非单个禁用const single ref(true)// 非多个禁用const multiple ref(true)// 显示搜索条件const showSearch ref(true)// 总条数const total ref(0)// DEMO表格数据const demoList refany([])// 弹出层标题const title ref()// 是否显示弹出层const open ref(false)// 查询参数const queryParams ref ({pageNum: 1,pageSize: 10,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,})const serviceName ref(wfDemoService)// 表单参数const form refany({})// 表单校验const rules ref({demoId: [{ required: true, message: DEMO-ID不能为空, trigger: blur }],userName: [{ required: true, message: 用户账号不能为空, trigger: blur }]})/** 查询DEMO列表 */const getList () {loading.value true;listDemo(queryParams.value).then(response {demoList.value response.rows;total.value response.total;loading.value false;});}// 取消按钮const cancel () {open.value false;reset();}// 表单重置const reset () {form.value {demoId: undefined,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,delFlag: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined,remark: undefined};formRef.value?.resetFields();}/** 搜索按钮操作 */const handleQuery () {queryParams.value.pageNum 1;getList();}/** 重置按钮操作 */const resetQuery () {queryFormRef.value?.resetFields();handleQuery();}// 多选框选中数据const handleSelectionChange (selection) {ids.value selection.map(item item.demoId)single.value selection.length!1multiple.value !selection.length}/** 新增按钮操作 */const handleAdd () {reset();open.value true;title.value 添加DEMO;}/** 修改按钮操作 */const handleUpdate (row) {loading.value true;reset();const demoId row.demoId || ids.valuegetDemo(demoId).then(response {loading.value false;form.value response.data;open.value true;title.value 修改DEMO;});}/** 提交按钮 */const submitForm () {formRef.validate(valid {if (valid) {buttonLoading.value true;if (form.value.demoId ! null) {updateDemo(form.value).then(response {proxy?.$modal.msgSuccess(修改成功);open.value false;getList();}).finally(() {buttonLoading.value false;});} else {addDemo(form.value).then(response {proxy?.$modal.msgSuccess(新增成功);open.value false;getList();}).finally(() {buttonLoading.value false;});}}});}/** 删除按钮操作 */const handleDelete (row) {const demoIds row.demoId || ids.value;proxy?.$modal.confirm(是否确认删除DEMO编号为 demoIds 的数据项).then(() {loading.value true;return delDemo(demoIds);}).then(() {loading.value false;getList();proxy?.$modal.msgSuccess(删除成功);}).catch(() {}).finally(() {loading.value false;});}/** 导出按钮操作 */const handleExport () {this.download(workflow/demo/export, {...queryParams.value}, demo_${new Date().getTime()}.xlsx)}onMounted(() {getList();})/script3、效果图图如下:
