目录

  • js记录
    • 1)js操作数组元素的方法(unshift(前),splice,push(后))
    • 2)js如何获取当前时间(yy-MM-dd HH:MM:SS)
    • 3)”…”可迭代对象运算符–如：数组迭代解包添加元素
    • 4)map遍历数组和foreach遍历数组的区别
  • 通过路由path避免引用的代码生成页面–扩展设置同步
  • http请求 (第三个参数表示–是否显示发起请求时的提示信息(默认否))
  • 缓存实现子父组件传值(vuex)
  • 扩展js的 方法扩展
    • 1.明细表添加行，设置添加的默认值
    • 2.新建弹出框设置默认值
    • 3.新建或编辑保存后 返回状态提示
    • 4.grid点击行事件(不是前面的复选框就单纯点击行)
  • $parent获取父页面的数据如: $parent.editFormFields 或 $parent.currentRow
  • grid扩展js常用功能代码(如单选，选择数据等)

js记录

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

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

  1. unshift()

    • 作用：向数组的开头添加一个或多个元素，并返回新数组的长度。
    • 语法：array.unshift(element1, ..., elementN)
    • 示例：
      let myArray = [2, 3, 4];myArray.unshift(1); // 返回 4console.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); // 返回 5console.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方法会返回新数组的长度，即6console.log(array.push(...rows)); // 输出: 6

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

  • 当你需要基于现有数组生成一个新的数组，且新数组的元素是由原数组元素经过特定计算得出时，应使用 map()。
let _rows = rows.map((row) => {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

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

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

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 url = "api/表名/del";this.http.post(url, [rows[0].PRODUCT_DETAIL_LIST_ID], false).then((reslut) => {if (reslut.status === true) {//删除行//this.$refs.table1.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);}});},

缓存实现子父组件传值(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()}

扩展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 = 0this.editFormFields.CHANGE_COUNT = 0this.editFormFields.TEST_COUNT = 0}//(3)this.editFormFields.字段='xxx';//如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值//看不懂就把输出看：console.log(this.editFormOptions)//新建时隐藏按钮this.detailOptions.buttons[2].hidden = this.currentAction == 'Add'},

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},

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

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

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组件apiitem.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_NOthis.$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=>{ });},