jeecgboot前端开发_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)
}