vue2制作高复用页面

已于 2024-09-14 16:25:27 修改
阅读量153 收藏 1
点赞数 5
文章标签： javascript 前端 vue.js
于 2024-09-14 16:24:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a983677218/article/details/142261011
版权

        记录一下页面搭建记录，利用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-button
            type="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-item
              v-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分类
        <span
          style="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" />&nbsp; {{ data.code }} -
          {{ data.name }}
        </span>
      </span>
    </el-tree>
    <el-dialog
      title="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-input
        v-model="searchForm.code"
        placeholder="请输入"
        class="searchInput"
        clearable
      />
    </el-form-item>
    <el-form-item :size="size" label="产品编码：" class="searchItem">
      <el-input
        v-model="searchForm.productCode"
        placeholder="请输入"
        class="searchInput"
        clearable
      />
    </el-form-item>
    <div class="searchItem">
      <el-button
        type="primary"
        :size="size"
        icon="el-icon-search"
        @click="handleClickSearch()"
      >
        搜索
      </el-button>
      <el-button
        icon="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-column
        label="关联产品"
        align="center"
        prop="productCode"
        width="230"
      />
      <el-table-column label="版本号" align="center" prop="version" />
      <el-table-column label="状态" align="center" prop="status" />
      <!-- 操作栏 -->
      <el-table-column
        label="操作"
        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-form
      ref="editForm"
      :model="editForm"
      :rules="rules"
      label-width="115px"
      size="small"
    >
      <el-form-item
        :size="size"
        label="BOM编码："
        prop="code"
        style="float: left"
      >
        <el-input
          v-model="editForm.code"
          class="editItem"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        :size="size"
        label="产品信息："
        prop="name"
        style="float: left"
      >
        <el-input
          v-model="editForm.name"
          class="editItem"
          placeholder="请输入"
        />
      </el-form-item>
      <div style="clear: both"></div>
      <el-form-item label="备注：" prop="remark" style="float: left">
        <el-input
          v-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-button
          v-if="editStatus"
          type="primary"
          size="mini"
          @click="submitForm('editForm')"
          >保 存</el-button
        >
        <el-button
          v-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>

洗发水很好用
关注
Vue插槽，组件，可复用技术
weixin_46285310的博客
08-27 377
1. 插槽 1.1 分类 插槽分为：普通插槽，具名插槽，作用域插槽 1.1.1 普通插槽 插槽允许我们在调用子组件的时候为子组件传递模板 插槽可以放任何东西，默认不指定位置是放在main里 <slot></slot> <template v-slot="default"> 默认插槽 </template> 1.1.2 具名插槽 为了不混淆，默认插槽，内容是放入main里，为了实现我们想要的效果，这里就有了具名插槽，说白了就是具有名
【项目复盘Vue2.0】利用具名插槽制作可复用多样式导航栏
Weiqian_的博客
04-03 1575
一、实现效果： 本项目涉及到的导航栏样式如下： 1.首页的导航栏 2.商品详情页导航栏 二、思路分析： 先确定导航栏框架： 因为每个页面的导航栏需求不一样，因此可以利用插槽建立框架组件，再将此导航栏框架组件在其他页面甚至下个项目进行复用。 三、实现思路复盘： 注：以下思路源于本人对b站coderwhy老师项目的过程复盘，并非本人创作（侵删），仅做学习复盘用 结构搭建： 1.新建NavBar组件，里面放入3个slot插槽：左中右各一个 <template&
vue制作一个好看的网页
m0_70965903的博客
12-12 7543
vue 模板的使用
Vue2学习文档
qq_41882944的博客
05-15 3166
文章目录1. Vue简介P1 课程简介P2 Vue技术P3 官网指南P4 开发环境2. 简单例子P5 Hello 案例P6 分析Hello3. 数据绑定P7 模板语法P8 数据绑定P9 el和data两写法4. 数据代理(JS知识补充)P10 MVVMP11 definePropertyP12 数据代理P13 Vue中的数据代理5. 事件绑定P14 事件处理P15 修饰符P16 键盘事件P17 事件总结6. 计算属性P18 姓名案例P19 计算属性P20 简写7. 监视属性P21 天气案例P22 监视属性P
VUE2中不同API的作用
m0_66051368的博客
03-05 331
选项/数据 data 用于存放页面上使用的数据 组件的data是函数类型 -- 复用组件时 每个组件都是通过函数调用后得到的全新对象, 互相之间不影响 props 用途1: 为组件自定义属性, 便于父子传参 用途2: 搭配路由系统使用时, 如果路由开启了 属性解构 props:true 就可以通过 props 来接收路由的参数 computed 计算属性: 本质是函数, 使用时不需要() 就能触发 -- 使
【Vue2】组件的使用
Superman_H的博客
02-09 2286
# 模块 & 组件 1. 模块：向外提供特定功能的 JS 程序，一般就是一个 JS 文件 因为 JS 文件很多很复杂，这样做可以复用 JS 代码、简化 JS 的编写、提高 JS 的运行效率 2. 组件：用来实现局部功能效果的代码集合 ( HTML / CSS / JS / images... ) 因为一个界面的功能很复杂，这样做可以复用代码、简化项目结构、提高运行效率 # 组件的使用 - 组件是可复用的 Vue 实例，可配置 `data`、`methods`、`com
Vue2 —— 项目实战（电影网首页的制作） 附源码
Bonsoir777的博客
10-18 5640
本文主要介绍有关vue2 实战小demo的是实现过程。
vue制作翻牌游戏
2201_75321887的博客
03-21 805
点击开始进行翻牌游戏
vue学习笔记，购物车清单制作
aiwanchengxu的博客
07-26 543
大家想不想知道vue的判断语句是怎么样的呢？直接加载标签的属性后面一个v-if一个v-else就可以了，当然后面的就是一个Boolean值了，来我们接着往下讲这就是声明式编程，大家要习惯，其实还挺好用的，我们的判断语句直接v-if="表达式或者值"加载标签的属性后面就可以，非常的方便，不过如果是判断那种很多数据分类的类型，大家还是直接使用计算属性的好，更加规范；......
VUE+DataV+ECharts组合页面制作看板
06-30
在IT行业中，前端开发是一项关键任务，而"VUE+DataV+ECharts组合页面制作看板"的主题聚焦于使用这三种技术栈构建数据可视化界面。Vue.js是一个流行的JavaScript框架，ECharts是百度提供的一个强大的数据可视化库，...
vue 将页面公用的头部组件化的方法
11-30
在Vue.js框架中，组件化是一种非常重要的设计思想，它允许开发者将UI界面拆分成可重用、独立的模块，从而提高代码复用性、可维护性和开发效率。本篇文章将详细讲解如何在Vue项目中将公共的头部部分组件化。 首先，...
基于vue开发的前端微信小程序完整页面示例#资源达人分享计划#
08-10
在基于Vue.js开发的项目中，你可以创建可复用的组件，这些组件能够独立地处理自身的状态和UI更新。 【微信小程序】 微信小程序是腾讯公司推出的一种运行于微信内部的应用程序，它允许开发者构建原生体验的移动应用...
Vue脚手架编写试卷页面功能
11-21
此外，还可以在`mixin`文件夹下的`index.js`中定义过滤器（如`fmtSubjectType`, `fmtOrder2ABC`）和方法（如`checkSubjectType`），这样可以复用这些功能，提高代码的可维护性。例如，`checkSubjectType`方法可以...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2792
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 830
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 413
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 855
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值