vue2制作高复用页面
记录一下页面搭建记录,利用vue2组件化开发的思想。这个页面适合于大部分信息管理系统~。模板固定,每次使用,直接修改表单表格参数,api接口等。
以上图页面为例,一个基础数据信息页面可以分为,分类(左侧),数据信息(右侧),搜索表单(右上),数据表格(右下),新增或编辑表单(对话框)。
全局css样式部分
.top_box {// min-height: 10vh;width: 100%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */padding: 10px 10px 10px;margin-bottom: 10px;
}.down_box {min-height: 10vh;width: 100%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
}.left_box {float: left;width: 20%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */padding-bottom: 5%;
}.right_box {float: left;min-height: 90vh;width: 79%;margin-left: 1%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */
}
index.vue(主页面)
<template><div class="app-container"><div class="left_box"><CategoryMenu @selectNode="selectNode" /></div><div class="right_box"><div class="top_box"><search-form:searchForm="searchForm":size="size"@search="performSearch"@reset="resetSearch"/><div style="float: left; margin: 5px 0 0 20px"><el-button:disabled="currentCategoryId === null || currentCategoryId === ''"type="primary"plain:size="size"icon="el-icon-circle-plus-outline"@click="toAdd">新增</el-button><el-buttontype="success"plain:size="size"icon="el-icon-document-copy"disabled>迭代</el-button></div><div style="clear: both"></div></div><div class="down_box"><div style="padding: 20px 20px 10px 20px"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-itemv-for="(item, index) in currentCategory":key="index">{{ item }}</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px; min-height: 400px"><customTable :list="list" @toEdit="toEdit" @toDelete="toDelete" /></div><div style="padding-bottom: 10px"><el-pagination:page-sizes="[10, 20, 40, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="counts":current-page.sync="page"@size-change="(val) => handleSizeChange(val, this)"@current-change="(val) => handleCurrentChange(val, this)"align="center"></el-pagination></div></div></div><editForm:edit-vis="editVis":edit-status="editStatus":edit-form="editForm":rules="rules":userOption="userOption"@submit="submitForm"@cancel="cancel"/></div>
</template><script>
import {addStorageWarehouse,pageStorageWarehouse,updateStorageWarehouse,deleteStorageWarehouse,
} from "@/api/storage/storage-warehouse";
import { list } from "@/api/system/user";
import {confirmAction,submitWithConfirmation,
} from "@/utils/confirmationHelper";
import paginationMethods from "@/utils/pagination.js";
import searchForm from "./components/searchForm.vue";
import customTable from "./components/customTable.vue";
import editForm from "./components/editForm.vue";
import CategoryMenu from "./components/CategoryMenu.vue";
export default {name: "bom",components: {searchForm,customTable,editForm,CategoryMenu,},data() {return {content: "BOM信息",size: "small",list: [],searchForm: {},currentCategoryId: "",currentCategoryName: "",currentCategory: [],counts: 0,page: 1,pageSize: 10,userOption: [],editVis: false,editStatus: false,editForm: {},rules: {code: [{ required: true, message: "BOM编码不能为空", trigger: "blur" }],},};},watch: {},created() {this.init();},mounted() {document.addEventListener("keyup", this.handleKeyUp);},beforeDestroy() {document.removeEventListener("keyup", this.handleKeyUp);},methods: {init() {list().then((res) => {this.userOption = res.data.list.map((item) => {return {value: item.id,label: item.name,};});});this.fetchData();},handleKeyUp(event) {if (event.key === "Enter") {this.fetchData();}},fetchData() {var vm = this;const params = {page: vm.page,pageSize: vm.pageSize,categoryId: vm.currentCategoryId ? vm.currentCategoryId : undefined,code: vm.searchForm.code ? vm.searchForm.code : undefined,productCode: vm.searchForm.productCode? vm.searchForm.productCode: undefined,};// pageStorageWarehouse(params).then((res) => {// vm.list = res.data.page.records;// vm.counts = res.data.page.total;// });},...paginationMethods, // 导入分页方法performSearch(searchForm) {this.searchForm = searchForm;this.handleClickSearch(this);},resetSearch() {this.pageSize = 10;this.currentCategoryId = "";this.currentCategoryName = "";this.currentCategory = [];this.resetTable(this);},toAdd() {this.editForm = {};this.editStatus = false;this.editVis = true;},toEdit(row) {this.editForm = { ...row };this.editStatus = true;this.editVis = true;},toDelete(row) {const message = "是否删除" + this.content + "?";const action = () => deleteStorageWarehouse(row.id);confirmAction(this, message, action);},cancel() {this.editVis = false;this.editForm = {};},// 提交submitForm(editForm) {this.editForm.bomCategoryId = this.currentCategoryId;const action = this.editStatus? () => updateStorageWarehouse(editForm): () => addStorageWarehouse(editForm);submitWithConfirmation(this, action);},selectNode(id, name, category) {this.currentCategoryId = id;this.currentCategoryName = name;this.currentCategory = category.split(",");this.fetchData();},},
};
</script><style lang="less" scoped>
</style>
分类菜单(左侧)
<template><div style="padding: 5px"><div><h3 style="margin: 8px 0; color: rgb(111, 111, 111); text-align: center">BOM分类<spanstyle="float: right; margin-right: 10px; cursor: pointer"@click="editVis = true"><i class="el-icon-edit-outline" /></span></h3></div><div style="margin-bottom: 10px"><el-input placeholder="输入BOM分类" v-model="filterText" size="mini"></el-input></div><el-tree:data="data"default-expand-all:filter-node-method="filterNode":expand-on-click-node="false"ref="tree"><span slot-scope="{ data }"><span style="font-size: 14px" @click="toFind(data)"><i class="el-icon-folder" /> {{ data.code }} -{{ data.name }}</span></span></el-tree><el-dialogtitle="BOM分类":visible.sync="editVis"width="1280px"top="56px"append-to-body><CategoryEdit /></el-dialog></div>
</template><script>
import { getBomCategoryList } from "@/api/product/bom-category";
import CategoryEdit from "./CategoryEdit.vue";
export default {components: {CategoryEdit,},data() {return {filterText: "",data: [],editVis: false,};},watch: {filterText(val) {this.$refs.tree.filter(val);},},created() {this.fetchData();},methods: {fetchData() {getBomCategoryList().then((res) => {this.data = res.data.list;});},filterNode(value, data) {if (!value) return true;return data.name.indexOf(value) !== -1;},toFind(data) {// 返回目录id和目录分级this.$parent.selectNode(data.id, data.name, this.findParentById(data.id));},findParentById(id) {const findParentRecursive = (data, id, path = []) => {for (let item of data) {if (item.id === id) {return path.concat(item);} else if (item.children) {const result = findParentRecursive(item.children,id,path.concat(item));if (result) {return result;}}}return null;};const result = findParentRecursive(this.data, id);if (result) {return result.map((item) => item.name).join(",");} else {return "未找到父级元素";}},},
};
</script>
搜索表单
<template><el-form label-width="100px" v-model="searchForm"><el-form-item :size="size" label="BOM编码:" class="searchItem"><el-inputv-model="searchForm.code"placeholder="请输入"class="searchInput"clearable/></el-form-item><el-form-item :size="size" label="产品编码:" class="searchItem"><el-inputv-model="searchForm.productCode"placeholder="请输入"class="searchInput"clearable/></el-form-item><div class="searchItem"><el-buttontype="primary":size="size"icon="el-icon-search"@click="handleClickSearch()">搜索</el-button><el-buttonicon="el-icon-refresh-right":size="size"@click="() => resetTable()">重置</el-button></div><div style="clear: both"></div><!-- 清除浮动 --></el-form>
</template><script>
export default {name: "SearchForm",props: {searchForm: {type: Object,required: true,},size: {type: String,default: "mini",},},methods: {handleClickSearch() {this.$emit("search", this.searchForm);},resetTable() {this.$emit("reset");},},
};
</script><style scoped>
.searchItem {float: left;margin-left: 20px;
}
.searchInput {width: 160px;
}
</style>
数据表格
<template><div><el-table :data="list" fit highlight-current-row><el-table-column type="selection" width="55"> </el-table-column><el-table-column label="BOM编码" align="center" prop="code" width="230"><template slot-scope="scope"><span><el-link:underline="false"type="primary"@click="toEdit(scope.row)">{{ scope.row.code }}</el-link></span></template></el-table-column><el-table-columnlabel="关联产品"align="center"prop="productCode"width="230"/><el-table-column label="版本号" align="center" prop="version" /><el-table-column label="状态" align="center" prop="status" /><!-- 操作栏 --><el-table-columnlabel="操作"align="center"width="230"fixed="right"prop="operation"><template slot-scope="{ row, $index }"><el-button size="mini" type="success" @click="toCopy(row)">迭代</el-button><el-button size="mini" type="success" v-if="row.status === 1">提交</el-button><el-button size="mini" type="warning" v-if="row.status === 2">审核</el-button><el-button size="mini" type="primary" @click="toEdit(row)">查看</el-button><el-button size="mini" type="danger" @click="toDelete(row)">删除</el-button></template></el-table-column></el-table></div>
</template><script>
export default {name: "custom-table",props: {list: {type: Array,required: true,},},data() {return {size: "small",};},watch: {list(newVal, oldVal) {},},methods: {toEdit(row) {this.$emit("toEdit", row);},toCopy(row) {},toDelete(row) {this.$emit("toDelete", row);},},
};
</script><style>
</style>
新增或编辑表单(对话框)
<template><el-dialog:title="editStatus ? '查看BOM信息' : '新增BOM信息'":visible="vis"width="730px"top="56px"append-to-body:before-close="handleClose"><el-formref="editForm":model="editForm":rules="rules"label-width="115px"size="small"><el-form-item:size="size"label="BOM编码:"prop="code"style="float: left"><el-inputv-model="editForm.code"class="editItem"placeholder="请输入"/></el-form-item><el-form-item:size="size"label="产品信息:"prop="name"style="float: left"><el-inputv-model="editForm.name"class="editItem"placeholder="请输入"/></el-form-item><div style="clear: both"></div><el-form-item label="备注:" prop="remark" style="float: left"><el-inputv-model="editForm.remark"type="textarea"placeholder="请输入备注"style="width: 515px"/></el-form-item><div style="clear: both"></div></el-form><div slot="footer" class="dialog-footer"><div style="margin-right: 60px"><el-buttonv-if="editStatus"type="primary"size="mini"@click="submitForm('editForm')">保 存</el-button><el-buttonv-if="!editStatus"type="primary"size="mini"@click="submitForm('editForm')">新 增</el-button><el-button size="mini" @click="cancel">取 消</el-button></div></div></el-dialog>
</template><script>
export default {name: "edit",props: {editVis: {type: Boolean,required: true,},editStatus: {type: Boolean,required: true,},editForm: {type: Object,required: true,},rules: {type: Object,required: true,},userOption: {type: Array,required: true,},},data() {return {size: "small",vis: false,};},watch: {editVis(newVal, oldVal) {this.vis = this.editVis;},},methods: {handleClose(done) {this.$confirm("您确定要关闭吗?", "确认", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.cancel();done();}).catch(() => {// 用户点击取消时的处理});},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$emit("submit", this.editForm);} else {console.log("error submit!!");return false;}});},cancel() {this.$refs["editForm"].resetFields();this.$emit("cancel");},},
};
</script><style lang="less" scoped>
.editItem {width: 200px;
}/deep/ .el-collapse-item__header {padding-left: 50px;
}
</style>
相关文章:

vue2制作高复用页面
记录一下页面搭建记录,利用vue2组件化开发的思想。这个页面适合于大部分信息管理系统~。模板固定,每次使用,直接修改表单表格参数,api接口等。 以上图页面为例,一个基础数据信息页面可以分为,分类ÿ…...

Feed流系统重构:架构篇
重构对我而言,最大的乐趣在于解决问题。我曾参与一个C#彩票算奖系统的重构,那时系统常因超时引发用户投诉。接手任务时,我既激动又紧张,连续两天几乎废寝忘食地编码。结果令人振奋,算奖时间从一小时大幅缩短至十分钟。…...
Android 后台服务之Persistent 属性
在 Android 开发中,有时我们需要后台服务持续运行,以保持应用的某些功能。例如,音乐播放器需要在后台播放音乐,或者健康应用需要持续跟踪用户的运动数据。后台服务是 Android 中的一种组件,它不与用户界面交互,能够在后台执行长时间运行的任务。由于 Android 系统的资源管…...

STM32+ESP01连接到机智云
机智云,全球领先的智能硬件软件自助开发及物联网(iot)云服务平台。机智云平台为开发者提供了自助式智能硬件开发工具与开放的云端服务。通过傻瓜化的自助工具、完善的SDK与API服务能力最大限度降低了物联网硬件开发的技术门槛,降低开发者的研发成本,提升…...

电脑实时监控软件有哪些?七个电脑屏幕监控软件任你选择
电脑实时监控软件种类繁多,每款软件都有其独特的功能和适用场景。 以下是七个备受推荐的电脑屏幕监控软件,供您选择: 1.安企神: 功能:它是一款国内领先的企业级电脑监控解决方案, 提供实时屏幕监控、 文…...

信奥学习规划(CSP-J/S)
CSP-J组学习路线规划 CSP-S组学习规划...

【Linux取经之路】编译器gcc/g++的使用 调试器gdb的使用
目录 背景知识 编译器gcc/g的安装 编译器gcc/g的使用 调试器gdb的使用 cgdb 条件断点 背景知识 子曰:“温故而知新”。在谈gcc/g的使用之前,我们先来复习编译的4个阶段,也算是为下面的内容做一些铺垫,请看思维导图。 编译…...
自动化流程机器人(RPA)
自动化流程机器人(RPA)正逐渐成为企业提高效率和降低成本的强有力工具。 一、RPA的概念 自动化流程机器人(Robotic Process Automation,简称RPA)是一种利用软件机器人(Robot)模拟和执行复杂任务…...
Unity persistentDataPath使用案例
Unity persistentDataPath使用案例 一、Application.persistentDataPath 1、概念 persistentDataPath:此属性用于返回一个持久化数据存储目录的路径,可以在此路径下存储一些持久化的数据文件;是一个可读写的目录;此文件夹在Edi…...
Android 测试手册
1. 介绍 Android 测试是确保应用程序质量的重要步骤。它包括不同类型的测试,用于验证应用程序的功能、性能、安全性和用户体验。这个手册将指导你了解和实施 Android 测试的主要方法和工具。 2. 测试类型 2.1 单元测试 目的:验证单个组件(…...

各大平台统遭入侵??区块链市场遭攻击损失近3亿!
今年,全球发生多起骇人听闻的勒索入侵软件攻击事件,黑客组织利用各种手段和技术,不断试图突破网络安全防线,窃取敏感信息、破坏系统运行,甚至进行勒索和敲诈,使得网络安全问题日益凸显其重要性和紧迫性。 S…...

Java泛型(“代码模板”,一套代码套用各种类型)
1.什么是泛型 a.定义 i.如果不用泛型定义,在使用ArrayList时需要为每个class编写特定类型代码。 ii.泛型就是定义一种模板,既实现了编写一次,万能匹配,又通过编译器保证了类型安全。 iii.编写模板代码来适应任意…...

速响低代码平台:升级营销管理系统,开启高效无忧新体验!
当前日新月异的商业环境,企业面临着前所未有的挑战与机遇。随着市场竞争的日益加剧和企业业务的不断拓展,传统的营销方式和管理手段逐渐显露出其局限性,难以适应快速变化的市场需求。 数据收集难:传统的营销管理缺乏对客户数据的收…...
Gitlab升级14.0.12-->14.3.6遇到的gitlab-ctl reconfigure错误
问题描述 在按照官方文档升级路线11.0.2>17.2.2的过程中,升级14.0.12–》14.3.6时遇到一个错误: Running handlers: There was an error running gitlab-ctl reconfigure:rails_migration[gitlab-rails] (gitlab::database_migrations line 51) had…...

JDBC导图
思维歹徒 一、使用步骤 二、SQL注入 三、数据库查询(查询) 四、数据库写入(增删改) 五、Date日期对象处理 六、连接池使用 创建连接是从连接池拿,释放连接是放回连接池 七、事务和批次插入 八、Apache Commons DBUtil…...

飞思实验室与中飞院联合开发教学课程,校企联袂共绘教育蓝图
近日,飞思实验室与中国民用航空飞行学院(以下简称“中飞院”) 航空电子电气学院合作,共同开发《无人智能视觉导航控制技术》、《多旋翼无人飞行器集群系统》实验课程。这一举措旨在深化校企融合,学校通过引入企业带来的…...

Telephony Call
1、Telephony 架构 Telephony整体架构和Android架构一样的,包括APP层,框架层,HAL层,内核层。 其中HAL层不同平台实现方式不同,其中MTK SPRD 平台使用AT通道的方式实现,高通使用QMI方式实现。 2、通话业务介绍 APP包括Dialer.apk、TeleService.apk、Tele…...

Python--TCP/UDP通信
文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 一.客户端与服务端通信原理 1. 服务器端 服务器端的主要任务是监听来自客户端的连接请求,并与之建立连接,然后接收和发送数据。 创建套接字:首先࿰…...

【已解决】请教 “Sa-Token 集成 xxl-job,报错:非 web 上下文无法获取 HttpServletRequest” 如何解决
1. xxl-job 报错日志 2024-09-11 17:19:04 [com.xxl.job.core.thread.JobThread#run]-[133]-[xxl-job, JobThread-3-1726046344528] <br>----------- xxl-job job execute start -----------<br>----------- Param: 2024-09-11 17:19:04 [com.xxl.job.core.thread…...

Redis——常用数据类型string
目录 常用数据结构(类型)Redis单线程模型Reids为啥效率这么高?速度这么快?(参照于其他数据库) stringsetgetMSET 和 MGETSETNX,SETEX,PSETEXincr,incrby,decr…...

linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...