若依前后端分离版本vue文件模版

2024-08-21 14:04
文章标签 javascript 分离 vue 版本 frontend 模版 若依

本文主要是介绍若依前后端分离版本vue文件模版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

若依前后端分离版本vue文件模版
<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="广告主体id" prop="advertiserId"><el-inputv-model="queryParams.advertiserId"placeholder="请输入广告主体id"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="检查日期" prop="checkTime"><el-date-picker clearablev-model="queryParams.checkTime"type="date"value-format="yyyy-MM-dd"placeholder="请选择检查日期"></el-date-picker></el-form-item><el-form-item label="问题描述" prop="quesDescription"><el-inputv-model="queryParams.quesDescription"placeholder="请输入问题描述"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="照片证据id" prop="evidenceId"><el-inputv-model="queryParams.evidenceId"placeholder="请输入照片证据id"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="检查人员" prop="checkPepole"><el-inputv-model="queryParams.checkPepole"placeholder="请输入检查人员"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="记录类型" prop="recordTypesId"><el-inputv-model="queryParams.recordTypesId"placeholder="请输入记录类型"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['jg:check:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate"v-hasPermi="['jg:check:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['jg:check:remove']">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="handleExport"v-hasPermi="['jg:check:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="checkList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="监管记录id" align="center" prop="checkId" /><el-table-column label="广告主体id" align="center" prop="advertiserId" /><el-table-column label="检查日期" align="center" prop="checkTime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="问题描述" align="center" prop="quesDescription" /><el-table-column label="照片证据id" align="center" prop="evidenceId" /><el-table-column label="检查人员" align="center" prop="checkPepole" /><el-table-column label="记录类型" align="center" prop="recordTypesId" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['jg:check:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['jg:check:remove']">删除</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 添加或修改监管记录对话框 --><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="广告主体id" prop="advertiserId"><el-input v-model="form.advertiserId" placeholder="请输入广告主体id" /></el-form-item><el-form-item label="检查日期" prop="checkTime"><el-date-picker clearablev-model="form.checkTime"type="date"value-format="yyyy-MM-dd"placeholder="请选择检查日期"></el-date-picker></el-form-item><el-form-item label="问题描述" prop="quesDescription"><el-input v-model="form.quesDescription" placeholder="请输入问题描述" /></el-form-item><el-form-item label="照片证据id" prop="evidenceId"><el-input v-model="form.evidenceId" placeholder="请输入照片证据id" /></el-form-item><el-form-item label="检查人员" prop="checkPepole"><el-input v-model="form.checkPepole" placeholder="请输入检查人员" /></el-form-item><el-form-item label="记录类型" prop="recordTypesId"><el-input v-model="form.recordTypesId" placeholder="请输入记录类型" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import { listCheck, getCheck, delCheck, addCheck, updateCheck } from "@/api/jg/check";export default {name: "Check",data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 监管记录表格数据checkList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,advertiserId: null,checkTime: null,quesDescription: null,evidenceId: null,checkPepole: null,recordTypesId: null},// 表单参数form: {},// 表单校验rules: {}};},created() {this.getList();},methods: {/** 查询监管记录列表 */getList() {this.loading = true;listCheck(this.queryParams).then(response => {this.checkList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {checkId: null,advertiserId: null,checkTime: null,quesDescription: null,evidenceId: null,checkPepole: null,createTime: null,createBy: null,updateTime: null,updateBy: null,recordTypesId: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.checkId)this.single = selection.length!==1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加监管记录";},/** 修改按钮操作 */handleUpdate(row) {this.reset();const checkId = row.checkId || this.idsgetCheck(checkId).then(response => {this.form = response.data;this.open = true;this.title = "修改监管记录";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.checkId != null) {updateCheck(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addCheck(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const checkIds = row.checkId || this.ids;this.$modal.confirm('是否确认删除监管记录编号为"' + checkIds + '"的数据项？').then(function() {return delCheck(checkIds);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},/** 导出按钮操作 */handleExport() {this.download('jg/check/export', {...this.queryParams}, `check_${new Date().getTime()}.xlsx`)}}
};
</script>

这篇关于若依前后端分离版本vue文件模版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1093364。

相关文章

SpringBoot返回文件让前端下载的几种方式

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存，通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流
阅读更多...
SpringBoot+Vue3整合SSE实现实时消息推送功能

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现（SpringBoot）前端实现（vue3）1. 数据类型定义2.
阅读更多...
在SpringBoot+MyBatis项目中实现MySQL读写分离的实战指南

在SpringBoot+MyBatis项目中实现MySQL读写分离的实战指南

《在SpringBoot+MyBatis项目中实现MySQL读写分离的实战指南》在SpringBoot和MyBatis项目中实现MySQL读写分离,主要有两种思路：一种是在应用层通过代码和配置手动控制... 目录如何选择实现方案核心实现：应用层手动分离实施中的关键问题与解决方案总结在Spring Boot和
阅读更多...
前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2
阅读更多...
MySQL数据库读写分离与负载均衡的实现逻辑

MySQL数据库读写分离与负载均衡的实现逻辑

《MySQL数据库读写分离与负载均衡的实现逻辑》读写分离与负载均衡是数据库优化的关键策略,读写分离的核心是将数据库的读操作与写操作分离,本文给大家介绍MySQL数据库读写分离与负载均衡的实现方式,感兴... 目录读写分离与负载均衡的核心概念与目的读写分离的必要性与实现逻辑读写分离的实现方式及优缺点读负载均衡
阅读更多...
Python包管理工具uv下载python版本慢问题解决办法

Python包管理工具uv下载python版本慢问题解决办法

《Python包管理工具uv下载python版本慢问题解决办法》uv是一个非常快的Python包和项目管理器,用Rust编写,使用热缓存安装Trio的依赖项的速度对比,：本文主要介绍Python包... 目录发现问题对于 MACOS / linux 用户 (zsh/bash):对于 Windows 用户:总
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
Python版本与package版本兼容性检查方法总结

Python版本与package版本兼容性检查方法总结

《Python版本与package版本兼容性检查方法总结》：本文主要介绍Python版本与package版本兼容性检查方法的相关资料,文中提供四种检查方法,分别是pip查询、conda管理、PyP... 目录引言为什么会出现兼容性问题方法一：用 pip 官方命令查询可用版本方法二：conda 管理包环境方法
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2