JeecgBoot 前端开发随笔

Jeecg-Boot 技术文档 v2.0: https://www.bookstack.cn/read/jeecg-boot-2.0/custom-component.md(一些现成的组件很实用,常见的用法里面都有详细介绍)

【修改页面的一些默认文字,logo等】

1.loading文字(正在加载 Jeecg-Boot 快速开发平台,请耐心等待)

位置:public-index.html

另外,服务器地址也是在改页面上配置的:window._CONFIG['domianURL'] = '你的服务器地址'。

2.浏览器标题(菜单名称 + Jeecg-Boot 企业级快速开发平台)

位置:src-components-layouts-TabLayout.vue

methods下的changeTitle方法内的projectTitle,可以将其赋值为你需要的内容。

3.面包屑默认禁止关闭的首页导航菜单

位置:src-components-layouts-TabLayout.vue

如果你的项目登录后的首页没有在其默认的dashboard-analysis文件上修改,那么面包屑上一直会有这个页面的菜单导航项,需要改成你项目的首页组件。只需要修改methods下的addIndexToFirst方法,将其改为你的首页组件。还有默认的 const indexKey = '/dashboard/analysis'也相应改成你的首页组件路由名称。

4.侧边栏菜单上方的logo

位置:src-components-tools-Logo.vue

修改两个img标签的src。

logo右侧的文字:

props-title-default值

5.侧边栏菜单展开关闭icon右侧的文字

位置:src-components-page-GlobalHeader.vue

修改两span标签的内容。

6.头部导航栏右侧的模块

位置:src-components-tools-UserMenu.vue

那些欢迎、登出等都在这个文件里修改。

7.底部备案信息

位置:src\components\page\GlobalFooter.vue

8.登录界面

位置:src-components-layouts-UserLayout.vue

利用在线开发生成的前端页面里的相关默认方法

使用生成的前端页面时,页面上的获取列表、新增、编辑、删除都是现成的。页面上调用的一些例如add、edit、handleOk等方法,具体的实现代码在src\mixins\JEditableTableMixin.js这个文件中。

简单的表单界面可以直接生成代码,新增、编辑、删除等都是现成的,拷到项目中即可使用。但如果你的项目接口需要添加传输的字段,就有些麻烦了,因为你加了新的字段后会有一连串的警告出现。如果你的接口新增的这个字段是通过query获取的,那么你可以简单的直接在Modal组件中的对应的Ulr后面直接添加这个字段。对于编辑中需要添加到body中获取的,下面“奇怪报错”中也有涉及这个问题的解决方案。

【特殊取值等】

获取form中的某个字段值

this.form.getFieldsValue().fieldName

设置form的某个字段

this.form.setFieldsValue({fieldName: fieldValue})

单独触发主表验证

validateFormAndTables(this.form)

一次性触发主表子表所有的验证

this.getAllTable().then(tables => {

          /** 一次性验证主表和所有的次表 */

          return validateFormAndTables(this.form, tables)

        }).then(allValues => {

          let formData = this.classifyIntoFormData(allValues)

          // 发起请求

          return this.requestAddOrEdit(formData)

        }).catch(e => {

          if (e.error === VALIDATE_NO_PASSED) {

            // 如果有未通过表单验证的子表,就自动跳转到它所在的tab

            this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()

          } else {

            console.error(e)

          }

        })

【遇到的奇怪报错】

1.custom validator check failed for prop "pagination"

列表获取list接口默认返回的字段被修改,让写后台的小伙伴检查一下。

2.You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render。

属于使用Form组件setFieldsValue方法的警告,是因为传入了form默认的字段外的其它字段,多传了就会报错。当时开发时遇到这个问题也是网上查了些办法,资料不多,好多办法试了也没效果,一开始找到两种,后来经过一段时间发现了最简单的办法三:

解决办法一:

在componentDidMount钩子里对form进行setFieldsValue操作。

componentDidMount() {

    this.$nextTick(() => {

        this.form.setFieldsValue(pick(this.model,'新字段', ...默认字段)) // 注意:这边如果添加了页面上没有用于显示的字段,控制台就会出现警告

     })

}

解决办法二:

在template中form组件里加入你需要的新的字段,然后需要隐藏的话可以对其设置v-show为false(注意不能设置v-for为false)。

若新加的字段随着输入变化的,可以在页面的model上进行修改,默认的新增修改提交的数据都是这个model。

解决办法三:整理formData时添加(最好的办法)

步骤1.classifyIntoFormData方法中添加新的字段

classifyIntoFormData(allValues) {

        let main = Object.assign(this.model, allValues.formValue)

        return {

          ...main, 

          projectId : this.newPro, // 新字段

        }

      }

步骤2.handleOk方法中添加新的字段

......

let formData = Object.assign(this.model, values)

formData.projectId = this.curProjectId()

3.[antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead

Ant 的日期组件的value需要为moment类型,因此在接口获取值之后需要进行类型转化,moment(this.dataValue, 'YYYY-MM-DD'),如果是编辑的modal,那么可以在nextTick中通过setFieldsValue来重置。

【功能】

编辑完关闭当前页签

1.src/components/layouts/TabLayout.vue

         

 

methods:{

    closeTab(key){

        this.remove(key)

     }

}

TabLayout.vue


TabLayout.vue

2.src/components/layouts/RouteView.vue

export default {

    props:{

      closeTab:{

        type:Function,

        default:null

      }

    },

...

    methods:{

      closeRouteViewTab(key){

        if(this.closeTab){

          this.closeTab(key)

        }

      }

    }

  }


RouteView.vue

3.在当前页面调用方法关闭该页

this.$parent.closeRouteViewTab(this.$route.path)

【一些注意点】

日期类型

moment转换成字符串:moment(this.fdate).format('YYYY-MM-DD')

ant时间控件值需要为moment类型:moment(this.date, 'YYYY-MM-DD')

关于table的一些配置

1.需要横向滚动

:scroll="{ x: true/或者是数值 }",最好还是算好总长度不然有时候没有效果,表格的每一项也设置width,这样表格不会显得挤。

2.列表上的日期截取

customRender:function (text) {

              return !text?"":(text.length>10?text.substr(0,10):text)

  }

你可能感兴趣的:(JeecgBoot 前端开发随笔)