當前位置：首頁 > 运维知识 > windows >内容正文

windows

OA系统添加审批模板

發布時間：2024/3/13 windows 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 OA系统添加审批模板小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、列表頁面

1.1、動態添加路由

在“系統管理”->“菜單管理”添加“審批設置”->“審批類型”

對于菜單信息，我們也可以直接導入菜單表初始化數據，后續不用再單獨配置

說明：“審批模板設置”頁面內容較多，因此單獨打開一個獨立頁面

1.3、列表頁面

創建views/processSet/processTemplate/list.vue

<template><div class="app-container"><div class="tools-div"><el-button type="success" icon="el-icon-plus" size="mini" @click="add()" :disabled="$hasBP('bnt.processTemplate.templateSet') === false">添加審批設置</el-button></div><el-tablev-loading="listLoading":data="list"stripeborderstyle="width: 100%;margin-top: 10px;"><el-table-columnlabel="序號"width="70"align="center"><template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template></el-table-column>iconPath<el-table-column prop="name" label="審批名稱"/><el-table-column label="圖標"><template slot-scope="scope"><img :src="scope.row.iconUrl" style="width: 30px;height: 30px;vertical-align: text-bottom;"></template></el-table-column><el-table-column prop="processTypeName" label="審批類型"/><el-table-column prop="description" label="描述"/><el-table-column prop="createTime" label="創建時間"/><el-table-column prop="updateTime" label="更新時間"/><el-table-column label="操作" width="250" align="center"><template slot-scope="scope"><el-button type="text" size="mini" @click="edit(scope.row.id)" :disabled="$hasBP('bnt.processTemplate.templateSet') === false">修改審批設置</el-button><el-button type="text" size="mini" @click="removeDataById(scope.row.id)" :disabled="$hasBP('bnt.processTemplate.remove') === false">刪除</el-button></template></el-table-column></el-table><el-pagination:current-page="page":total="total":page-size="limit":page-sizes="[5, 10, 20, 30, 40, 50, 100]"style="padding: 30px 0; text-align: center;"layout="sizes, prev, pager, next, jumper, ->, total, slot"@current-change="fetchData"@size-change="changeSize"/></div> </template> <script> import api from '@/api/process/processTemplate'export default {data() {return {listLoading: true, // 數據是否正在加載list: null, // banner列表total: 0, // 數據庫中的總記錄數page: 1, // 默認頁碼limit: 10, // 每頁記錄數searchObj: {} // 查詢表單對象}},// 生命周期函數：內存準備完畢，頁面尚未渲染created() {this.fetchData()},// 生命周期函數：內存準備完畢，頁面渲染成功mounted() {},methods: {// 當頁碼發生改變的時候changeSize(size) {this.limit = sizethis.fetchData(1)},// 加載banner列表數據fetchData(page = 1) {// 異步獲取遠程數據（ajax）this.page = pageapi.getPageList(this.page, this.limit, this.searchObj).then(response => {this.list = response.data.recordsthis.total = response.data.total// 數據加載并綁定成功this.listLoading = false})},// 重置查詢表單resetData() {this.searchObj = {}this.fetchData()},// 根據id刪除數據removeDataById(id) {this.$confirm('此操作將永久刪除該記錄, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => { // promise// 點擊確定，遠程調用ajaxreturn api.removeById(id)}).then((response) => {this.fetchData(this.page)this.$message.success(response.message)}).catch(() => {this.$message.info('取消刪除')})},add() {this.$router.push('/processSet/templateSet')},edit(id) {this.$router.push('/processSet/templateSet?id=' + id)}} } </script>

2、添加審批模板

1、基本設置：一些基本信息

2、表單設置：動態表單

3、流程設置：本地設計流程定義，上傳流程定義文件及流程定義圖片（壓縮上傳）

涉及未實現接口：

1、獲取全部審批分類

2、上傳流程定義壓縮文件

2.1、form-create

官網：http://www.form-create.com/v2/guide/

輕松搞定 form 表單,讓你不再為表單而煩惱。

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。

form-create-designer 是基于 form-create實現的表單設計器組件。可以通過拖拽的方式快速創建表單，提高開發者對表單的開發效率，節省開發者的時間

表單設計器：

http://www.form-create.com/designer/?fr=home

可以通過拖拽的方式快速配置動態表單，配置好的動態表單可以通過：生成JSON與生成Options獲取數據，這兩數據對于表字段：form_props與form_options，后續我們通過這兩字段渲染動態表單。

大家可以根據表單設計器，查看數據格式

2.2、集成form-create

1、添加依賴

在package.json文件添加依賴，注意版本號，更高的版本號可能與本項目不兼容

"@form-create/element-ui": "^2.5.17", "@form-create/designer": "^1.0.8",

2、在 main.js 中寫入以下內容：

import formCreatefrom'@form-create/element-ui' import FcDesignerfrom'@form-create/designer' Vue.use(formCreate) Vue.use(FcDesigner)

3、集成表單設計器

創建views/processSet/processTemplate/templateSet.vue

<template><div class="app-container"><div id="app1"><fc-designer class="form-build"ref="designer"/><el-button @click="save">獲取數據</el-button></div></div> </template> ? <script> ? export default {data() {return {}}, ?created() { ?}, ?methods: {save() {console.log(this.$refs.designer.getRule())console.log(this.$refs.designer.getOption())}} } </script>

顯示效果：

隨便拉幾個表單項，點擊“獲取數據”，就是我們需要的動態表單數據格式了。

2.3、獲取全部審批分類接口

1、在ProcessTypeController類添加接口

@ApiOperation(value="獲取全部審批分類") @GetMapping("findAll") publicResultfindAll() {returnResult.ok(processTypeService.list()); }

2、在processType.js添加前端接口

findAll() {returnrequest({url: `${api_name}/findAll`,method: 'get'}) }

2.4、上傳流程定義接口

在ProcessTemplateController類添加接口

@PreAuthorize("hasAuthority('bnt.processTemplate.templateSet')") @ApiOperation(value="上傳流程定義") @PostMapping("/uploadProcessDefinition") public Result uploadProcessDefinition(MultipartFilefile) throwsFileNotFoundException {String path=newFile(ResourceUtils.getURL("classpath:").getPath()).getAbsolutePath(); ? String fileName=file.getOriginalFilename();// 上傳目錄File tempFile=newFile(path+"/processes/");// 判斷目錄是否存著if (!tempFile.exists()) {tempFile.mkdirs();//創建目錄}// 創建空文件用于寫入文件FileimageFile=newFile(path+"/processes/"+fileName);// 保存文件流到本地try {file.transferTo(imageFile);} catch (IOExceptione) {e.printStackTrace();return Result.fail("上傳失敗");} ?Map<String, Object> map=new HashMap<>();//根據上傳地址后續部署流程定義，文件名稱為流程定義的默認keymap.put("processDefinitionPath", "processes/"+fileName);map.put("processDefinitionKey", fileName.substring(0, fileName.lastIndexOf(".")));return Result.ok(map); }

2.5、模板設置完整代碼

<template><div class="app-container"><el-steps :active="stepIndex" finish-status="success"><el-step title="基本設置"></el-step><el-step title="表單設置"></el-step><el-step title="流程設置"></el-step></el-steps> ?<div class="tools-div"><el-button v-if="stepIndex > 1"icon="el-icon-check"type="primary"size="small"@click="pre()"round>上一步</el-button><el-buttonicon="el-icon-check"type="primary"size="small"@click="next()"round>{{stepIndex == 3 ? '提交保存' : '下一步'}}</el-button><el-button type="primary"size="small"@click="back()">返回</el-button></div> ?<div v-show="stepIndex == 1"style="margin-top: 20px;"><el-formref="flashPromotionForm"label-width="150px"size="small"style="padding-right: 40px;"><el-form-itemlabel="審批類型"><el-selectv-model="processTemplate.processTypeId"placeholder="請選擇審批類型"><el-optionv-for="item in processTypeList":label="item.name":value="item.id"></el-option></el-select></el-form-item><el-form-itemlabel="審批名稱"><el-inputv-model="processTemplate.name"/></el-form-item><el-form-itemlabel="審批圖標"><el-selectv-model="processTemplate.iconUrl"placeholder="請選擇審批圖標"><el-optionv-for="item in iconUrlList":label="item.iconUrl":value="item.iconUrl"><img:src="item.iconUrl"style="width: 30px;height: 30px;vertical-align: text-bottom;"></el-option></el-select></el-form-item> ?<el-form-itemlabel="描述"><el-inputv-model="processTemplate.description"/></el-form-item></el-form></div> ?<divv-show="stepIndex == 2"style="margin-top: 20px;"><fc-designerclass="form-build"ref="designer"/></div> ?<divv-show="stepIndex == 3"style="margin-top: 20px;"><el-uploadclass="upload-demo"dragaction="/dev-api/admin/process/processTemplate/uploadProcessDefinition":headers="uploadHeaders"multiple="false":before-upload="beforeUpload":on-success="onUploadSuccess":file-list="fileList"><iclass="el-icon-upload"></i><divclass="el-upload__text">將Activiti流程設計文件拖到此處，或<em>點擊上傳</em></div><divclass="el-upload__tip"slot="tip">只能上傳zip壓縮文件，且不超過2048kb</div></el-upload></div></div> </template> ? <script> importapifrom'@/api/process/processTemplate' importprocessTypeApifrom'@/api/process/processType' importstorefrom'@/store' ? constdefaultForm= {id: '',name: '',iconUrl: '',formProps: '',formOptions: '',processDefinitionKey: '',processDefinitionPath: '',description: '' } exportdefault {data() {return {stepIndex: 1,processTypeList: [],processTemplate: defaultForm,iconUrlList: [{ iconUrl: 'https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png', tag: '請假' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png', tag: '出差' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png', tag: '機票出差' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png', tag: '機票改簽' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '外出' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png', tag: '補卡申請' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1Y8PlCNjaK1RjSZKzXXXVwXXa-112-112.png', tag: '加班' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB11X99CNTpK1RjSZFKXXa2wXXa-102-102.png', tag: '居家隔離' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '請假' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB13ca1CMDqK1RjSZSyXXaxEVXa-102-102.png', tag: '調崗' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1U9iBCSzqK1RjSZPcXXbTepXa-102-102.png', tag: '離職' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB11pS_CFzqK1RjSZSgXXcpAVXa-102-102.png', tag: '費用申請' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png', tag: '用章申請' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB13f_aCQzoK1RjSZFlXXai4VXa-102-102.png', tag: '攜章外出' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '學期內分期' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '特殊學費' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png', tag: '充值卡申領' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '禮品申領' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1FNG.CMHqK1RjSZFgXXa7JXXa-102-102.png', tag: '郵寄快遞申請' },{ iconUrl: 'https://gw.alicdn.com/imgextra/i3/O1CN01LLn0YV1LhBXs7T2iO_!!6000000001330-2-tps-120-120.png', tag: '合同審批' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '合同借閱' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '魔點臨時開門權限' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png', tag: '北京科技園車證審批' },{ iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '魔點訪客提前預約審批' }], ?uploadHeaders: {'token': store.getters.token},fileList: []}}, ?created() {letid=this.$route.query.idconsole.log(id)if (id>0) {this.fetchDataById(id)}this.fetchProcessTypeData()}, ?methods: {pre() {this.stepIndex-=1}, ?next() {if (this.stepIndex===2) {this.processTemplate.formProps=JSON.stringify(this.$refs.designer.getRule())this.processTemplate.formOptions=JSON.stringify(this.$refs.designer.getOption())console.log(JSON.stringify(this.processTemplate))}if (this.stepIndex===3) {this.saveOrUpdate()} ?this.stepIndex+=1}, ?fetchProcessTypeData() {processTypeApi.findAll().then(response=> {this.processTypeList=response.data})},fetchDataById(id) {api.getById(id).then(response=> {this.processTemplate=response.data// 給表單設計器賦值this.$refs.designer.setRule(JSON.parse(this.processTemplate.formProps))this.$refs.designer.setOption(JSON.parse(this.processTemplate.formOptions))this.fileList= [{name: this.processTemplate.processDefinitionPath,url: this.processTemplate.processDefinitionPath}]})}, ?saveOrUpdate() {this.saveBtnDisabled=true// 防止表單重復提交if (!this.processTemplate.id) {this.saveData()} else {this.updateData()}}, ?// 新增saveData() {api.save(this.processTemplate).then(response=> {this.$router.push('/processSet/processTemplate')})}, ?// 根據id更新記錄updateData() {api.updateById(this.processTemplate).then(response=> {this.$router.push('/processSet/processTemplate')})}, ?// 文件上傳限制條件beforeUpload(file) {constisZip=file.type==='application/x-zip-compressed'constisLt2M=file.size/1024/1024<2 ?if (!isZip) {this.$message.error('文件格式不正確!')returnfalse}if (!isLt2M) {this.$message.error('上傳大小不能超過 2MB!')returnfalse}returntrue}, ?// 上傳成功的回調onUploadSuccess(res, file) {// 填充上傳文件列表this.processTemplate.processDefinitionPath=res.data.processDefinitionPaththis.processTemplate.processDefinitionKey=res.data.processDefinitionKey}, ?back() {this.$router.push('/processSet/processTemplate')}} } </script>

3、查看審批模板

查看審批模板基本信息、動態表單信息

3.1、添加按鈕

<el-button type="text"size="mini"@click="show(scope.row)">查看審批設置</el-button>

3.2、定義data

rule: [], option: {}, processTemplate: {}, formDialogVisible: false

3.3、定義方法

show(row) {this.rule=JSON.parse(row.formProps)this.option=JSON.parse(row.formOptions)this.processTemplate=rowthis.formDialogVisible=true }

3.4、定義彈出層

<el-dialog title="查看審批設置":visible.sync="formDialogVisible"width="35%"><h3>基本信息</h3><el-divider/><el-formref="flashPromotionForm"label-width="150px"size="small"style="padding-right: 40px;"><el-form-itemlabel="審批類型"style="margin-bottom: 0px;">{{ processTemplate.processTypeName }}</el-form-item><el-form-itemlabel="名稱"style="margin-bottom: 0px;">{{ processTemplate.name }}</el-form-item><el-form-itemlabel="創建時間"style="margin-bottom: 0px;">{{ processTemplate.createTime }}</el-form-item></el-form><h3>表單信息</h3><el-divider/><div><form-create:rule="rule":option="option"></form-create></div><spanslot="footer"class="dialog-footer"><el-button@click="formDialogVisible = false"size="small">取消</el-button></span> </el-dialog>

4、部署流程定義

4.1、根據上傳部署

4.1.1、定義service接口

操作類：ProcessService

void deploy ByZip(StringdeployPath);

4.1.2、service接口實現

操作類：ProcessServiceImpl

@Override public void deployByZip(StringdeployPath) {// 定義zip輸入流InputStreaminputStream=this.getClass().getClassLoader().getResourceAsStream(deployPath);ZipInputStreamzipInputStream=newZipInputStream(inputStream);// 流程部署Deploymentdeployment=repositoryService.createDeployment().addZipInputStream(zipInputStream).deploy(); }

4.2、完善審批模板發布

操作類：ProcessTemplateServiceImpl

@Autowired privateProcessServiceprocessService; ? @Transactional @Override public void publish(Longid) {ProcessTemplateprocessTemplate=this.getById(id);processTemplate.setStatus(1);processTemplateMapper.updateById(processTemplate); ?//優先發布在線流程設計if(!StringUtils.isEmpty(processTemplate.getProcessDefinitionPath())) {processService.deployByZip(processTemplate.getProcessDefinitionPath());} }

說明：審批模板發布后不可以再編輯

4.3、頁面按鈕控制

按鈕添加判斷，發布后不可以編輯：v-if="scope.row.status == 0"

<el-button type="text"v-if="scope.row.status == 0"size="mini"@click="edit(scope.row.id)":disabled="$hasBP('bnt.processTemplate.templateSet') === false">修改審批設置</el-button> <el-button type="text"v-if="scope.row.status == 0"size="mini"@click="removeDataById(scope.row.id)":disabled="$hasBP('bnt.processTemplate.remove') === false">刪除</el-button>

總結

以上是生活随笔為你收集整理的OA系统添加审批模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【华为OD机试 2023最新】最短木
下一篇：微信公众号开发（１）－－微信公众平台与后