标签:vue 读取 笔记 js jeeplus import 表单 data
前端笔记
加载顺序
- vue的入口都是从index.html开始,所以项目页面入口在public/index.html
- vue脚本的入口从main.js开始,main.js有vue的初始化代码
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
-
状态存储位于src/store下,会自动读取其中index.js
-
路由存储位于src/router,会自动读取其中的index.js
-
全部的页面都是index.html加载main.js,main.js再引入app.vue,所以实际上页面的渲染时再app.vue上面渲染的,通过该语句进行导入
import Vue from 'vue' import App from '@/App'
-
该项目使用vue-cli 4.0进行搭建,配置文件存储在vue.config.js中,该配置文件定义了根目录---publicPath。定义了less配置---loaderOptions,小型开发服务器---devServer,import中变量路径的简写---chainWebpack
-
route中引入了main组件,所以会调用main.vue中的内容,mian.vue主要进行模板的布局的加载使用,获取用户信息等
-
.env.development和.env.production用于针对不同的环境进行不同的配置,代码中判断时什么环境可以使用process.env.NODE_ENV进行判断,这个变量是自定义变量,不是process.env提供的变量,这个变量目前猜测在使用vue-cli进行serve和build的时候会自动变更,如果不行的话参考https://cn.vuejs.org/v2/guide/deployment.html,dotenv会使用这个变量加载对应.env文件配置,还有invariant也会根据环境判断错误提示显示内容,具体参考https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F,目前来看环境的切换由vue-cli负责,我们不需关系
工作流笔记
1.启动流程后访问/task/TaskForm页面
2.taskForm执行this.init方法进行初始化,从浏览器的queryString取参数进行赋值
3.判断表单类型,1是内置表单,2是外置表单,内置表单使用以下方法进行表单渲染
<PreviewForm v-if="formType !== '2'" :processDefinitionId="procDefId" :edit="true" :taskFormData="taskFormData" ref="form"/>
import PreviewForm from '@/views/modules/flowable/form/GenerateFlowableForm'
this.$refs.form.createForm(this.formUrl)
外置表单使用以下方法进行表单渲染;
<component :formReadOnly="formReadOnly" v-if="formType === '2'" :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId" :is="form"></component>
const _import = require('@/router/import-' + process.env.NODE_ENV)
//这个form的内容就是渲染到上面的自定义component
this.form = _import(`modules${this.formUrl}`)
if (this.status === 'start') {
// 读取启动表单配置
this.$http.get('/flowable/form/getStartFormData',
{params: {processDefinitionId: this.procDefId}}
).then(({data}) => {
this.taskFormData = data.startFormData
})
} else {
// 读取任务表单配置
this.$http.get('/flowable/form/getTaskFormData',
{params: {taskId: this.taskId}}
).then(({data}) => {
this.taskFormData = data.taskFormData
})
}
//任务表单读取成功后读取按钮和历史任务
// 读取按钮配置
if (this.status === 'start') {
this.buttons = [{id: 'start', name: '启动', isHide: '0'}]
} else if (this.procDefKey && this.taskDefKey) {
// 读取按钮
this.$http.get('/extension/taskDefExtension/queryByDefIdAndTaskId', {params: {
processDefId: this.procDefKey,
taskDefId: this.taskDefKey
}}).then(({data}) => {
if (data.success) {
this.buttons = data.taskDefExtension.flowButtonList
}
})
}
// 读取历史任务列表
this.$http.get(`/flowable/task/histoicFlowList?procInsId=${this.procInsId}`).then(({data}) => {
this.histoicFlowList = data.histoicFlowList
})
渲染完成后提交表单时会先提交业务表
this.$refs.form.saveForm
业务表提交保存完成后再进行流程的提交,提交表单时如果是新提交的流程,会更新业务表中的流程实例id字段
工作流审批人设置位置:ExtUserTaskActivityBehavior.java
工作流自定义内容
- 流程设计器选人时选择自定义,可以使用${流程变量}的方式读取变量值作为审批人
- 使用以下变量时不会读取流程变量,会根据扩展类型进行选人
//发起人部门负责人
case "ext_depart_mgr":break;
//发起人公司负责人
case "ext_company_mgr":break;
//发起人分管领导
case "ext_charge_mgr":break;
ProcessStatus字典:
英文 | 中文 | code | 按钮样式 |
---|---|---|---|
SUSPENDED | 已挂起 | 0 | danger |
WAITING | 等待审核 | 1 | primary |
AGREE | 审核通过 | 2 | success |
REVOKE | 流程撤回 | 3 | warning |
REJECT | 审核驳回 | 4 | danger |
STOP | 审核终止 | 5 | info |
DELETED | 流程作废 | 6 | danger |
标签名赋值
\src\router\index.js 中fnAddDynamicMenuRoutes进行菜单的读取
const route = {
path: menuList[i].href.split('?')[0],
component: null,
name: menuList[i].href.replace(/^\//g, '').replace(/[/]/g, '-').replace(/[?]/g, '-').replace(/&/g, '-').replace(/=/g, '-'),
meta: {
parentIds: menuList[i].parentIds,
menuId: menuList[i].id,
title: menuList[i].name,
isDynamic: true,
type: menuList[i].target,
affix: menuList[i].affix === '1',
iframeUrl: ''
}
}
D:\code\xxcyjt\xxjsb_projectmgr\jp-ui\src\views\layout\components\TagsView\index.vue 读取相应js
D:\code\xxcyjt\xxjsb_projectmgr\jp-ui\src\store\modules\tagsView.js 的相应方法
addView
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
标签:vue,读取,笔记,js,jeeplus,import,表单,data 来源: https://www.cnblogs.com/336hzh/p/16394166.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。