VOL_常用记录!!-----前端

置顶 已于 2024-04-20 21:41:41 修改
阅读量1.1k 收藏 8
点赞数 5
分类专栏： Vol低代码开发 文章标签： vue.js vscode
于 2024-02-06 11:02:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58647634/article/details/136053348
版权

目录

1、扩展js方法会与serviceFilter.js进行合并，终终执行的就是扩展js的方法 2、serviceFilter.is//所有的代码都最终会合并到viewGrid.vue文件中
3、text为grid页面显示额外描述信息 具体看框架演示项目的路由--/SellOrder
4、methods为整个页面所有方法的业务代码扩展，如果需要在界面上的操作前、后编写业务，请覆盖此方法
5、methods方法中可获取任意vue对象、方法、属性,可査看viewGridconfig路径下的js文件及viewGrid.vue的data属性，如手动刷新表数据:this.search()
6、明细表表的配置信息this.detai1.columns 刷新明细表数据 this.resetDetailTable()
7、子父件传参，另可使用己封装的vuex,使用方式:this.$store.getters.data().xxx= this;使用实例:App_News.js

js记录

1)js操作数组元素的方法(unshift(前),splice,push(后))

  • 总结来说，unshift() 是在数组前面添加元素，splice() 是在一个指定的位置上进行插入或删除等复杂操作，而 push() 则是在数组后面添加元素。

  1. unshift()

    • 作用：向数组的开头添加一个或多个元素，并返回新数组的长度。
    • 语法：array.unshift(element1, ..., elementN)
    • 示例：
      let myArray = [2, 3, 4];
myArray.unshift(1); // 返回 4
console.log(myArray); // 输出：[1, 2, 3, 4]

  2. splice()

    • 作用：灵活地从数组中添加/删除项目，然后返回被删除的项（如果有的话）。它可以用于多种操作，如插入、替换或删除数组中的元素。
    • 语法：array.splice(start, deleteCount, item1, ..., itemX)
    • 参数：
      • start: 要修改的数组起始位置（索引）。
      • deleteCount: 可选参数，要删除的元素数量。如果设置为0，则不删除任何元素，仅插入。
      • item1, ..., itemX: 可选参数，要插入到数组中的元素。
    • 示例：
      let myArray = [1, 2, 3, 4, 5];
myArray.splice(0, 0, 'a', 'b'); // 返回 []
console.log(myArray); // 输出：['a', 'b', 1, 2, 3, 4, 5]

// 删除前两个元素并插入一个元素
myArray.splice(0, 2, 'x'); // 返回 [1, 'a']
console.log(myArray); // 输出：['x', 2, 3, 4, 5]

  3. push()

    • 作用：向数组的末尾添加一个或多个元素，并返回新数组的长度。
    • 语法：array.push(element1, ..., elementN)
    • 示例：
      let myArray = [1, 2, 3];
myArray.push(4, 5); // 返回 5
console.log(myArray); // 输出：[1, 2, 3, 4, 5]

2)js如何获取当前时间(yy-MM-dd HH:MM:SS)

getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${(now.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now
        .getHours()
        .toString()
        .padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now
        .getSeconds()
        .toString()
        .padStart(2, "0")}`;
    },

3)"…"可迭代对象运算符–如：数组迭代解包添加元素

用于将一个可迭代对象（如数组）的内容展开，并将其元素作为单独的参数传给函数。
例子如下：

  • …rows 将 rows 数组的所有元素“解包”并逐个添加到 array 的末尾。
// 假设我们有一个数组
let array = [4, 5, 6];

// 另一个数组
let rows = [1, 2, 3];

// 使用扩展运算符将rows数组的元素添加到array数组的末尾
array.push(...rows);

// 此时，array数组的内容将会是[4, 5, 6, 1, 2, 3]
console.log(array); // 输出: [4, 5, 6, 1, 2, 3]

// push方法会返回新数组的长度，即6
console.log(array.push(...rows)); // 输出: 6

4)map遍历数组和foreach遍历数组的区别

  • 当你需要基于现有数组生成一个新的数组比如(对象数组，值数组)，且新数组的元素是由原数组元素经过特定计算得出时，应使用 map()。
let _rows = rows.map((row) => {
		//返回一个对象数组[{GoodsId: row.GoodsId,GoodsCode: row.GoodsCode...}....]
        return {
          GoodsId: row.GoodsId,
          GoodsCode: row.GoodsCode,
          GoodsName: row.GoodsName,
          Img: row.Img,
          Specs: row.Specs,
          Price: row.Price
        };
      });
  • 当你只需要对数组中的每个元素进行某种操作（例如修改DOM、打印结果、累计求和等），并不关心返回值时，可以使用 forEach()。
const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
console.log(sum); // 输出: 6

5.:style={}实现html元素—动态添加行内样式

<div
      class="leftNav"
      :style="{
        width: leftNavWidth,
        visibility: show,
        transition: transitionParam,
      }"
    >

data() {
    return {
      //设置导航和主界面默认宽高
      leftNavWidth: "16%",//默认宽度
      show: "visible",//默认显示
      transitionParam: "width 0.5s ease",默认过度0.5秒
    };
  },

扩展js的 方法扩展

1.明细表添加行，设置添加的默认值

addRow() {
      //明细表添加行，设置添加的默认值
      if (this.editFormFields.DEVELOPMENT_PROJECT_NO != "") {
        let obj = {
          DEVELOPMENT_PROJECT_NO: this.editFormFields.DEVELOPMENT_PROJECT_NO,
        };
        //给明细表添加行时，设置默认值。--onInited方法中对this.detailOptions.columns进行formatter也可以实现)
        //obj.xx=123;
        this.$refs.detail.addRow(obj);
        //明细表批量添加行this.$refs. detail.rowData.push(...[{},{}]);
      }else{
        this.$message.info("请先设置研发方案编号");
      }

    },

2.新建弹出框设置默认值

modelOpenAfter(row) {
      //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
      //(1)判断是编辑还是新建操作： this.currentAction=='Add';
      
      //给弹出框设置默认值
      if (this.currentAction == "Add") {
        this.editFormFields.REVIEW_COUNT = 0
        this.editFormFields.CHANGE_COUNT = 0
        this.editFormFields.TEST_COUNT = 0
      }
      //(3)this.editFormFields.字段='xxx';
      //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
      //看不懂就把输出看：console.log(this.editFormOptions)

	//新建时隐藏按钮
      this.detailOptions.buttons[2].hidden = this.currentAction == 'Add'
      //也可以设置只读
      this.boxButtons[0].disabled=this.currentAction == 'update'
    },

3.新建或编辑保存后 返回状态提示

addAfter(result) {//编辑保存后result返回的状态及表单对象
      // this.$Notice.success({ title: this.detailOptions.cnName + '编辑完成后：', desc: '返回的数据' + JSON.stringify(result) });
      result.status == true ?
        this.$Message.success('保存成功') :
        this.$Message.error('失败！' + result.message)
      return true;
    },
updateAfter(result) {//编辑保存后result返回的状态及表单对象
  // this.$Notice.success({ title: this.detailOptions.cnName + '编辑完成后：', desc: '返回的数据' + JSON.stringify(result) });
  result.status == true ?
    this.$Message.success('保存成功') :
    this.$Message.error('失败！' + result.message)
  return true;
},

4.grid点击行事件(不是前面的复选框就单纯点击行)

rowClick({ row, column, event }) {
      //查询界面点击行事件
      this.$store.getters.data().hahaha = { obj: row.DEVELOPMENT_PROJECT_NO }; //缓存当前行的某个字段
      // console.log(this.$store.getters.data().hahaha.obj);
      $this.$refs.gridHeader.open2()//打开gridHeader的第二个box
    },

5.grid扩展js常用功能代码(如单选，选择数据等)

onInit() {
	//获取明细表的行数据  
	this.$refs.detail.getSelected() 注意获取的是一个数组
	//获取grid的点击行数据
	this.getSelectRows() 注意获取的是一个数组
	//新建或编辑-页面获取从表行数据--这不一定要写在这个方法只要在扩展js即可
	this.$refs.modelBody.$refs.table1.rowData()
	// 1.grid的table单选
 	this.single = true;
 	//设置界面上最多可显示的按钮数量 
    this.maxBtnLength = 6; 	
    //grid固定查询条件
    this.setFiexdSearchForm(true);
    //设置表高度
    this.tableHeight = 350;
    //设置弹出框标签宽度
    this.boxOptions.labelWidth = 150;
    // 2.选择数据
	this.editFormOptions.forEach(x => {
	        x.forEach(item => {
	          if (item.field == '选择的字段') {
	            //给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
	            item.extra = {
	              icon: "el-icon-zoom-out",
	              text: "选择数据",
	              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
	              click: item => {
	                this.$refs.modelBody.openDemo("RD_PROJECT_ModelBody");
	              }
	            }
	          }
	        })
	      })
	      
	// 3.onInit中给grid添加按钮(splice方法可换成unshift或push)
      this.buttons.splice(2, 0, ...
        [{
          name: "查 看",
          icon: 'md-add',
          type: 'success',
          onClick: function () {
            let row = this.getSelectRows()
            if (row.length > 0) {
              this.$store.getters.data().hahaha = { obj: row[0].DEVELOPMENT_PROJECT_NO };
              $this.$refs.gridHeader.open2()
            }
            else {
              this.$Message.error('请选择一条数据');
              return
            }
          }
        }
        ]
      )

	//4.onInited中给明细表添加按钮(splice方法可换成unshift或push)
	this.detailOptions.buttons.splice(2, 0, ...
        [{
          name: "变 更",
          icon: 'md-add',
          type: 'success',
          onClick: function () {
            let row = this.$refs.detail.getSelected()
            if (row.length > 0) {
              let a = this.editFormFields.DEVELOPMENT_PROJECT_NO
              this.$store.getters.data().prjDetail = {
                dRow: row[0]
                , devID: this.editFormFields.DEVELOPMENT_PROJECT_NO,
                proDID: row[0].PROJECT_DETAIL_ID
              };
              $this.$refs.gridHeader.open3();
            }
            else {
              this.$Message.error('请选择一条研发方案明细');
              return
            }

          }
        }
        ]
      )
	
},
onInited() {
	  //设置弹出框宽度
      this.boxOptions.width = 1000;
      //框架初始化配置后
      //如果要配置明细表,在此方法操作
      //this.detailOptions.columns.forEach(column=>{ });
    },

其余记录

1、http请求 (第三个参数表示–是否显示发起请求时的提示信息(默认否))

// 添加请求
submit() {
      let data = {
        delKeys: null,
        detailData: null,
        mainData: this.fields,
      };
      let Url = "api/表名/Add";
      this.http.post(Url, data, true).then((result) => {
        if (result.status == true) {
          this.$Message.success("提交成功");
          this.reset();
          this.$emit("call-parent-method");
          //自定义事件通知父组件执行方法这边没有传值要传值可以添加参数("call-parent-method",参数数据)
        } else {
          this.$Message.success("失败" + reslut.message);
        }
      });
    },
//增加表单验证  具体看vol组件API文档volForm组件查看代码
{
            field: "CHANGE_CONTENT",
            title: "变更内容",
            type: "text",
            required: true,//不能为空
            readonly: false,
            colSize: 6,
},
submit() {
      //同上

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.http.post(Url, data, true).then((result) => {
            //同上
          });
        } else {
          console.log("校验未通过");
          return false;
        }
      });
    },

//删除请求
        let rows = this.$refs.table2.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        //可以this.http.post调用后台实际执行查询
        //请求后台删除从表2的数据
        let url = "api/CY_RD_PRODUCT_TEST_REPORT/del";
        //处理请求参数
        let _rows = rows.map((item) => {
          return item.PRODUCT_REPORT_ID;
        });

        this.http
          .post(url, _rows, false)
          .then((reslut) => {
            if (reslut.status === true) {
              //删除行
              this.$refs.table2.delRow();
              this.$Message.error("删除成功");
            } else {
              this.$Message.error("删除失败" + reslut.message);
            }
          });

//获取请求
        let Url = "api/表名/GetPageData";
        this.http.post(Url, {}, true).then((result) => {
          if (result.status == true) {
            // this.$Message.success("成功");
          } else {
            this.$Message.error("失败" + result.message);
          }
        });
//获取某一页特定条件的30行数据
search() {
      let url = "api/CY_RD_PRODUCT_DETAIL/GetPageData";
      let Development_project_no = this.$store.getters.data().hahaha.obj;

      let wheres = {
        name: "DEVELOPMENT_PROJECT_NO",
        value: Development_project_no,
        displayType: "like",
      }
      let condition= []
      condition.push(wheres)
      let data = {
        page: 1,
        rows: 30,
        order: "desc",
        wheres: JSON.stringify(condition)
      }
      this.http
        .post(url, data , true)
        .then((result) => {
          console.log(result);
          if (result.status == 0) {
            let row = result.rows[0];
            this.fields.PRODUCT_DETAIL_CODE = row.PRODUCT_DETAIL_CODE;
            this.fields.PRODUCT_DETAIL_NAME = row.PRODUCT_DETAIL_NAME;
          } else {
            this.$Message.error(result.msg);
          }
        });
    },

2、缓存实现子父组件传值(vuex)

//写入缓存对象(xxx为全局缓存的唯一key)
this.$store.getters.data().xxx={obj:'123'};
//读取缓存对象
this.$store.getters.data().xxx.obj;
//修改缓存对象
this.$store.getters.data().xxx.obj="456";

//代码生成页面使用全局缓存,在methods方法中：
onInit(){
  //将整个查询页面的viewgrid组件全部缓存起来
  this.$store.getters.data().viewPageTest=this;
 //在子组件中可以直接使用,如刷新查询页面:this.$store.getters.data().viewPageTest.refresh()
}

3、$parent获取父页面的数据如: $parent.editFormFields 或 $parent.currentRow

      //当前是子页面，获取查询viewgrid页面的对象()
      this.$emit("parentCall", ($parent) => {
        //$parent父组件vue对象
      });

4、通过路由path避免引用的代码生成页面–扩展设置同步

onInited() {
      //在订单管理的选择数据弹出框显示此页面时，重新调整页面高度与隐藏其他的按钮
      if (this.$route.path == '/应用本页面(onInited所在页面)的路由path') {
        this.height = 550 - 150;
        //订单页面隐藏非查询按钮
        this.buttons.forEach((item) => {
          if (item.value != 'Search') {
            item.hidden = true;
          }
        });
      }
    },

5、Home首页面包屑二级路由URL方法修改

具体可参照vol开发文档手动打开/关闭tabs页面

<div class="h-top-center">
        <div class="n-item">
          <div
            @click="openUrl(item)"
            class="item"
            :class="'item' + (index + 1)"
            v-for="(item, index) in center"
            :key="index"
          >
            <i
              style="font-size: 30px; padding-bottom: 10px"
              :class="item.icon"
              :size="20"
            ></i>
            <br />
            {{ item.title }}
          </div>
        </div>
      </div>

openUrl(item) {
        this.$tabs.open({
          text: item.title,
          path: item.url,
          query: {}
        });
      },

6、vol框架替换ico文件,设置网页title–具体也可研究vue-meta

替换ico文件

1.替换public下的ico文件：

在这里插入图片描述

2.替换assets下的favicon.ico文件

  • 解读：index.html中的favicon.ico link定义
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

这行代码用于设置网站的 favicon，即网站的图标。<%= BASE_URL %> 是 Vue CLI 默认提供的一个变量，用于指向项目的根路径。这样做可以确保无论你的项目部署在什么样的路径下，都能正确地引用到 favicon.ico 文件。

<link rel="icon" href="/path/to/favicon.ico"> 这种不行！

7、设置网页title

// 再main.js中设置
document.title = '设置的值';

8、自定义主从一对多-出现的问题分页配置自动更新

在这里插入图片描述
在vol-table：v-bind一个参数值,data定义一个参数变量

:pagination="pagination1"
data() {
	return{
		pagination1: {}
	}
}

9、grid添加自定义动态权限按钮

注意事项：在buttons.js添加按钮时要注意value要改一下 不然会出现所有菜单都有这个按钮
参考链接（切换到前端开发的自定义权限按钮）：http://v3.volcore.xyz/dev

Tang_Monk
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
The RISC-V Instruction Set Manual Vol I
10-22
The RISC-V Instruction Set Manual
The RISC-V Instruction Set Manual Vol II
10-22
The RISC-V Instruction Set Manual Volume II: Privileged Architecture Document Version 1.12-draft
Visio_Pro-2013-64
04-16
Visio_Pro-2013-64
Big Environment Vol 2 - Unity_Big!_unity_
09-29
unity assest editor 3d
LS-DYNA_manual_Vol_I_R6.1.0.pdf
07-12
LS-DYNA_manual_Vol_I_R6.1.0
VOL_常用记录!!-----后端
TangMonk的博客
02-23 703
注意事项：后台扩展必须写在代码生成的Partial部分类里面。
【RP-RV1126】SDK编译常用记录
似水流年
04-08 3211
荣品的RV1126。
云原生系列3-Kubernetes
ma1782072的博客
12-21 1867
k8s缩写是因为k和s之间有八个字符。k8s是基于容器技术的分布式架构方案。官网：https://kubernetes.io/zh-cn/Google在 2014年开源了Kubernetes项目，Kubernetes是一个用于自动化部署、扩展和管理容器化应用程序的开源系统。同样类似的容器编排工具还有docker swarm等，但kubernetes应用最为广泛，社区更为活跃。为什么要使用 Kubernetes？
云计算-运维笔记
weixin_52099680的博客
07-13 1万+
source 刷新环境变量的作用是当前终端可以生效使用 切换另一个终端时会重新加载一便环境变量 awk ‘{print $1}’ 1.log |sort -n |uniq -c |sort -n xargs 将上一个命令的输出 变成下一个命令的参数 删除中文 a d 你 好 ls | grep -vP[a-z-.]+|rm -rf ‘xargs’ #egrep -P 扩展正则 ‘[ ]’ 规范写法加’’ 号 *脚本 1.系统初始化脚本 #!/bin/bash cat <<EOF
KVM详解-WEB管理界面及安装win2016
ivesgg的博客
06-02 4967
解析：不符合，三次握手第三次的ACK=b+1即ACK=201，但题中的ACK=202所以错误，状态监测防火墙不会转发该报文# 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术
linux常用命令-part3
热门推荐
chinayuan的专栏
05-01 2万+
中文怎么发音 Ubuntu 有奔头，乌版图 Fedora 费德勒，菲朵拉 Debian 迪扁，德槟 CentOS 桑托斯 森头斯       Linux发展历史: 1) RedHat ---> 1.RedHat                2.CentOS                3.Fedora  桌面图形系统        rpm, yum 命令 2)
技术周刊 Vol.40 - 来学习一门新的编程语言吧！
Sunny Tech Share
08-16 607
新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获和感悟，那对于刚刚到来的 2018，有什么期待和规划呢？不防就来学习一门新的语言吧，进一步提高编程技能，扩宽自己的知识领域。希望所有小伙伴的 2018，都是元气满满的一年。 ##Objective-C iOS开发60分钟入门 本文面向已有其它语言（如Java，C，PHP，Javascript）编程经验的iOS开发初学者，初...
汉字笔顺动画C端实现&B端原理 - [大力智能 前端]
小朱的专栏
06-23 2774
✊ Give Me the Font, Back to You the Animation一、简介笔顺后台的目标是只要对于给定的字体文件（WOFF, OTF, TTF ）以及需要的字形（汉字，字母 or 其他各国的语言），就能产出与之对应的笔顺动画数据。是对开源项目Make me han zi[1]的实践。二、效果演示展示效果大力硬件端展示效果后台数据资源后台产出笔顺动画的 json 文件，并通过 CDN 资源分发。确定字体的情况下，一个字形对应唯一一个数据资源（字形通过encodeURI，并去除"%"进行
vue数据大屏并发请求
qq_60839348的博客
05-09 550
vue数据大屏并发请求
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
徐同保的专栏
05-09 74
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 437
注释很详细，直接上代码……
vue3自定义拖拽指令
weixin_43641912的博客
05-09 87
自定义拖拽指令: 鼠标位置相对于当前文档的x坐标 - 鼠标位置相对于当前物体的x坐标 就是 物体在文档中的位置。
el-dialog设置el-head固定
最新发布
Gpointy的博客
05-09 41
【代码】el-dialog设置el-head固定。
vol框架开发实战讲解
08-19
CSDN上有很多关于vol框架开发实战的教程，你可以在CSDN上搜索相关的文章来学习。以下是一个基本的vol框架开发实战讲解的步骤： 1. 确定项目需求：首先，你需要明确你的项目需求和目标。了解你要开发的应用程序的功能和特性，以及你希望在vol框架中实现的功能。 2. 安装vol框架：在开始开发之前，你需要安装vol框架并设置好环境。可以在vol官方网站或GitHub页面上找到安装指南和文档。 3. 创建项目结构：根据你的项目需求，创建一个适当的项目结构。这包括定义模型、控制器、视图和其他必要的组件。 4. 编写模型：使用vol框架提供的模型功能来定义你的数据模型。这包括定义实体类、属性和关系。 5. 编写控制器：创建控制器类来处理业务逻辑和用户请求。你可以定义路由、处理请求和返回响应等。 6. 编写视图：创建视图模板来呈现数据和生成用户界面。这包括HTML、CSS和JavaScript等前端技术。 7. 实现功能：根据你的项目需求，使用vol框架提供的功能和API来实现你的应用程序功能。这可能涉及数据库操作、表单验证、用户认证等。 8. 测试和调试：在开发过程中，进行适当的测试和调试，确保你的应用程序能够正常运行并满足需求。 9. 部署和发布：最后，将你的应用程序部署到合适的服务器上，并进行发布。你可以使用vol框架提供的工具和指南来完成这一过程。 这些是vol框架开发实战的一般步骤，具体的实现可能因项目需求而有所不同。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值