<template> <div> <div class="flow-wrap"> <div class="refer"> <div class="refer-left">{{$t('view.submit')}}:</div> <div class="refer-right"> <!--鑷敱娴佺▼--> <div class="free-flow" v-if="act.workFlowType==1"> <div class="list-right"> <div class="select-peo">{{$t('placeholder.select')</div> <div class="add"> <img src="../assets/images/add.png" /> </div> </div> </div> <!-- 鍗曢€夋椂 --> <div class="refer-radio" v-if="!isSplit"> <el-radio-group v-model="nextNodeIds"> <el-radio v-for="(item, index) in selectData" :key="index" :label="item.id"> {{item.name}} </el-radio> </el-radio-group> </div> <!-- 澶嶉€夋椂 --> <div class="refer-check" v-if="isSplit"> <el-checkbox-group @change="handleCheckedCitiesChange" v-model="nextNodeIds" > <el-checkbox v-for="(item, index) in selectData" :label="item.id" :key="index"> {{item.name}} </el-checkbox> </el-checkbox-group> </div> {{nextNodeIds}} </div> </div> <transition :duration="1000" name="face"> <div v-bind:class="[currentAct ? 'idea' : 'bigIdea' , 'common-idea']"> <div class="idea-left"> {{$t('suggest')}}: </div> <div class="idea-right"> <div class="idea-use" > <span class="use-tip" @click="hiddenSuggest()"> {{$t('view.fre_suggesst')}} <i class="fa fa-caret-down common-opinion-icon"></i> </span> <div class="use-suggest" v-if="isOrSuggest"> <div class="sug-data" v-if="allSuggests"> <span class="data-row" v-for="(item, index) in allSuggests" :key="index" @click="putData(item.content)"> <span>{{item.content}}</span> <span class="icon" v-if="showDelAndEdit"> <i class="fa fa-trash-o" @click="deleteSuggestion(item.id)"></i> <i class="fa fa-pencil-square-o" @click.stop.prevent="editSuggestion(item.id, item.content)"></i> </span> </span> </div> <div class="sug-btn" v-if="!showInput"> <div class="btns"> <span @click="showInputBox">{{$t('view.add_fre_suggesst')}}</span> <span @click="editSuggest">{{$t('view.edit_suggesst')}}</span> </div> </div> <div class="sug-new" v-if="showEditFirst"> <div class="new-input"> <input type="text" v-model="input" /> </div> <div class="keep-cancel"> <span @click="cancelAddSuggest(1)">{{$t('btns.cancel')}}</span> <span @click="addSuggestion">{{$t('btns.save')}}</span> </div> </div> <div class="sug-new" v-if="showEditSecond"> <div class="new-input"> <input type="text" v-model="inputSecond" /> </div> <div class="keep-cancel"> <span @click="cancelAddSuggest(2)">{{$t('btns.cancel')}}</span> <span @click="updateSuggestion">{{$t('btns.save')}}2</span> </div> </div> </div> </div> <!-- 鏂囨湰妗� --> <div class="idea-textbox"> <el-input type="textarea" :rows="3" :placeholder="$t('view.submit_note')" maxLength="140" v-model="attitude"> </el-input> </div> <!--搴曢儴--> <div class="idea-opinion"> <span> </span> <span @click="changeDiv"> <img src="../assets/images/qianzi.png" /> {{$t('view.Hand_signed')}} </span> </div> <!--鎵嬬鎰忚--> <div class="idea-canvas" v-show="!currentAct"> <canvas class="canvas" id="canvas" width="510" height="125" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp($event)" @mouseleave="canvasLeave($event)" ref="canvas" >{{$t('view.nosupport_canvas')}}</canvas> </div> <div class="idea-clear" v-if="!currentAct"> <el-button class="btn" size="mini" @click="clear"> {{$t('view.rewrite')}} </el-button> </div> </div> </div> </transition> </div> <div class="footer-btn"> <div> <!-- <el-button size="medium" type="success" @click="getPhoto">{{$t('view.sub')}}</el-button> --> <el-button size="medium" type="success" @click="onSubmit(firstSubmission)">{{$t('view.sub')}}</el-button> <span class="pack-up">{{$t('retracting')}}</span> </div> </div> </div> </template> <script> import API from "@/api.js"; export default { props: [ "stateId", "act", "buildFormData", ], data: function() { return { checkedCities: ['涓婃捣'],//澶嶉€� cities: ['涓婃捣', '鍖椾含'], nextNodeIds: undefined, radio: '', selectData:[], isSplit:true, currentAct:true, isOrSuggest:false, attitude: '', input: '', //鍗曢€夋鏁版嵁 showInput:false, //鏄惁灞曠ず娣诲姞甯歌鎰忚妗� showEditFirst:false, //灞曠ず{{$t('view.edit_suggesst')}}妗� showDelAndEdit:false, allSuggests:[], showEditSecond:false, inputSecond:'', opinionId:'', //鏇存柊鎰忚淇℃伅鐨処D /* 鎵嬬 */ points: [], canvasTxt: null, startX: 0, startY: 0, moveY: 0, moveX: 0, endY: 0, endX: 0, isDown: false, flowId:"", //褰撳墠娴佺▼ID isAppentCirculator: "", //鏄惁鎶勯€� currentNodeId: "", isToPerson: "", firstSubmission: true, //绗竴娆$偣鍑绘彁浜ょ姝㈡寜閽啀娆$偣鍑� existCanvas: false, //鏄惁瀛樺湪鎵嬪啓绛惧悕 }; }, mounted(){ this.getSubmission(); this.getSuggest(); this.show(); }, methods: { handleCheckedCitiesChange(value) { console.log("------------->",value) }, //淇濆瓨閲嶆柊缂栬緫鐨勬剰瑙� updateSuggestion() { console.log("鏇存柊缂栬緫鐨勬暟鎹�-->"); console.log(this.inputSecond); let userId = this.$store.state.userId, opId = this.opinionId, opinion = this.inputSecond; const employeeId = localStorage.getItem("employeeId") || this.$store.state.userId ; API.editMostUseSuggestion( employeeId, opId, opinion, { onSucess: response => { if(response.data.data) { let id = response.data.data.id; let content = response.data.data.content; for(let i=0; i<this.allSuggests.length; i++) { if(this.allSuggests[i].id == id) { this.allSuggests[i].content = content; this.inputSecond = ''; } } } } } ) }, //閲嶆柊缂栬緫鎰忚 editSuggestion(id, content) { this.inputSecond = content; this.opinionId = id; }, //鍒犻櫎鎰忚 deleteSuggestion(id) { const employeeId = localStorage.getItem("employeeId") || this.$store.state.userId; let opId = id; API.deleteMostUseSuggestion( employeeId, opId, { onSucess: response => { console.log(response.data.data); //鍚庡彴杩斿洖500锛屾湭鎵ц浠ヤ笅姝ラ if(response.data.data) { let delId = response.data.data.id; let allSug = this.allSuggests; for (let i = 0; i < allSug.length; i++) { if (allSug[i].id == delId) { allSug.splice(i, 1); i--; } } this.allSuggest = allSug; } } } ) }, //娣诲姞鎰忚 addSuggestion() { console.log(this.input); // let userId = this.$store.state.userId; const employeeId = localStorage.getItem("employeeId") || this.$store.state.userId ; let opinion = this.input; API.AddMostUseSuggestion( employeeId, opinion, { onSucess: response => { console.log(response.data.data); let newSuggest = response.data.data; this.allSuggests.push(newSuggest); this.input=""; } } ) }, // 閫変腑鐨勬暟鎹斁杩涙枃鏈涓� putData(content){ if(this.showDelAndEdit == false) { if(!this.textarea) { this.textarea = content; }else if(this.textarea){ this.textarea = this.textarea + "," + content; } } }, editSuggest(){ this.showInput = true; this.showEditFirst = false; this.showEditSecond = true; this.showDelAndEdit = true; }, cancelAddSuggest(num){ if(num == 1) { this.showInput = false; this.showDelAndEdit = false; this.showEditFirst = false; }else if(num == 2) { this.showInput = false; this.showDelAndEdit = false; this.showEditSecond = false; } }, showInputBox() { this.showInput = true; this.showEditFirst = true; }, showEditBox(){ }, //娓呴櫎鐢诲竷鏁版嵁 clear(){ this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height) this.existCanvas = false; }, show(){ this.canvas = this.$refs.canvas;//鎸囧畾canvas this.canvasTxt = this.canvas.getContext("2d");//璁剧疆2D娓叉煋鍖哄煙 this.canvasTxt.fillStyle = "#fff"; this.canvasTxt.fillRect(0,0,500,125); }, canvasDown(ev) { ev = ev || event ev.preventDefault() if (1) { let obj = { x: ev.offsetX, y: ev.offsetY } this.startX = obj.x this.startY = obj.y this.canvasTxt.beginPath() this.canvasTxt.moveTo(this.startX, this.startY) this.canvasTxt.lineTo(obj.x, obj.y) this.canvasTxt.stroke() this.canvasTxt.closePath() this.points.push(obj) this.isDown = true } }, canvasMove(ev) { ev = ev || event ev.preventDefault() if (this.isDown) { let obj = { x: ev.offsetX, y: ev.offsetY } this.moveY = obj.y this.moveX = obj.x this.canvasTxt.beginPath() this.canvasTxt.moveTo(this.startX, this.startY) this.canvasTxt.lineTo(obj.x, obj.y) this.canvasTxt.stroke() this.canvasTxt.closePath() this.startY = obj.y this.startX = obj.x this.points.push(obj) } }, canvasUp(ev) { ev = ev || event ev.preventDefault() if (1) { let obj = { x: ev.offsetX, y: ev.offsetY } this.canvasTxt.beginPath() this.canvasTxt.moveTo(this.startX, this.startY) this.canvasTxt.lineTo(obj.x, obj.y) this.canvasTxt.stroke() this.canvasTxt.closePath() this.points.push(obj) this.points.push({x: -1, y: -1}) this.isDown = false } }, canvasLeave(e) { console.log(e); this.existCanvas = true; this.canvasMoveUse = false; }, getSignImageData() { if (this.existCanvas) { //鍒ゆ柇鏄惁瀛樺湪鎵嬪啓绛惧悕 let pJson; let canvas = document.getElementById("canvas"); let signature = canvas.toDataURL("image/png"); let str = signature.replace("data:image/png;base64,", ""); pJson = { type: "image/png;base64", data: str }; return pJson; } else { return false; } }, //鎻愪氦 onSubmit() { if(this.selectData.length > 0 || this.act.workFlowType == 1) { if (this.firstSubmission) { //褰撴彁浜ゆ椂锛岀‘瀹氭寜閽姝㈠啀娆$偣鍑绘彁浜� this.firstSubmission = false; let status = ""; if (this.isToPerson) { //褰撹閫夋嫨鎸囧畾瀹℃壒浜烘椂 if (this.isSplit) { //澶氶€� if (this.nextNodeIds.length > 0) { for (let i = 0; i < this.nextNodeIds.length; i++) { for (let j = 0; j < this.selectData.length; j++) { if (this.nextNodeIds[i] == this.selectData[j].id) { if (this.selectData[j].type != "CompleteNode") { if (!this.selectData[j].submitTo) { if(this.selectData[j].isToPerson) { this.$emit("closePopup", status); return; } } } } } } } else if (this.nextNodeIds.length == 0) { this.$emit("closePopup", status); return; } } else { //鍗曢€� if (this.nextNodeIds) { for (let y = 0; y < this.selectData.length; y++) { if (this.nextNodeIds == this.selectData[y].id) { if (this.selectData[y].type != "CompleteNode") { if (!this.selectData[y].submitTo && !this.selectData[y].subFlowApproverData) { if(this.selectData[y].isToPerson) { this.$emit("closePopup", status); return; } } } } } } else { this.$emit("closePopup", status); return; } } } if (this.nextNodeIds instanceof Array) { //澶氶€変絾娌℃湁鎸囧畾瀹℃壒浜烘病鏈夐€夋嫨瀹℃壒浜烘椂 if(this.nextNodeIds.length < 1) { return; } } if (this.act.workFlowType == 1) { if (!this.nextUserId) { status = "ERROR"; this.$emit("closePopup", status); return; } } let pJson = this.getSignImageData(); //let formData = this.$parent.$parent.$parent.$parent.$parent.buildFormData(); let formData = this.buildFormData; formData.stateId = this.stateId; let docId = formData.id, id = formData.id; let formId = formData.formId; let document = { applicationId: this.$root.appid, currentNodeId: this.currentNodeId, docId: docId, document: formData, flowId: this.flowId, formId: formId, id: id, parentId: "", templateForm: "", viewId: "" }; if(this.isAppentCirculator) { //鍒ゆ柇鏄惁鎶勯€� if(this.isAppentData.circulatorInfo) { document.circulatorInfo = this.isAppentData.circulatorInfo; } } this.documentData = document; //淇濆瓨鍊兼斁鍒版墽琛屽悗鑴氭湰 let isRelate = ''; let _flowType = this.act.flowType; //鎻愪氦涓�80 this.$api.submitRunBeforeActionScript( this.$root.appid, this.act.id, document, docId, document.viewId, formId, document.templateForm, document.parentId, isRelate, _flowType, { onSucess: response => { if (response.data.errcode == 0) { if(response.data.data) { }else { this.submitFlowData(document, pJson); } } } } ); } } }, submitFlowData(allData, pJson) { //let formData = this.$parent.$parent.$parent.$parent.$parent.buildFormData(); let formData = this.buildFormData; let appId = this.$root.appid; let docId = formData.id; let document = allData; if (pJson) { //鎵嬪啓绛惧悕 document.signatureJson = JSON.stringify(pJson); } document.attitude = this.attitude; if (this.act.workFlowType == 1) { //鑷敱娴佺▼ document.nextUserId = this.nextUserId; delete document.currentNodeId; delete document.flowId; API.submitFreeFlow(appId, docId, document, { onSucess: response => { this.firstSubmission = true; let status; let prompt; if (response.data.errcode == 0) { status = "SUCCESS"; prompt = response.data.data; this.runAfterAction(status, prompt); } else if (response.data.errcode == 4001) { status = "ERROR"; this.$emit("closePopup", status); if (response.data.errors && response.data.errors.length > 0) { Toast({ message: response.data.errors[0].errmsg, iconClass: "fa fa-close fa-2x" }); } } } }); } else { //闈炶嚜鐢辨祦绋� document.subFlowApprover = []; //澶氱娴佺▼澶勭悊鏂瑰紡锛屾鏁版嵁涓哄畬鍠勬湭瀹屽杽 document.submitTo = []; //娴佺▼鍗曢€夋垨澶氶€� if (this.nextNodeIds instanceof Array) { //澶氶€� let checkArr = []; document.nextNodeIds = this.nextNodeIds; for (let j = 0; j < this.nextNodeIds.length; j++) { for (let y = 0; y < this.selectData.length; y++) { if ( this.nextNodeIds[j] == this.selectData[y].id && this.selectData[y].submitTo ) { console.log("this.selectData[y]-->",this.selectData[y]); delete this.selectData[y].submitTo.row; document.submitTo.push(this.selectData[y].submitTo); if (this.selectData[y].type == "SubFlow") { //涓诲瓙娴佺▼ let checkObj = Object.assign({}, this.selectData[y].submitTo); delete checkObj.isToPerson; checkArr.push(checkObj); } } } } document.subFlowApprover = checkArr; } else { // 鍗曢€� document.nextNodeIds = []; document.nextNodeIds.push(this.nextNodeIds); //let arr = []; let subArr = []; for (let i = 0; i < this.selectData.length; i++) { if ( this.selectData[i].submitTo && this.selectData[i].submitTo.nodeid == this.nextNodeIds ) { delete this.selectData[i].submitTo.row; subArr.push(this.selectData[i].submitTo); if (this.selectData[i].type == "SubFlow") { //涓诲瓙娴佺▼ let obj = Object.assign({}, this.selectData[i].submitTo); delete obj.isToPerson; obj.userids = obj.userids.replace(/^(\s|;)+|(\s|;)+$/g, ''); let useridData = obj.userids.split(";"); let approverObj = { position:1, userids: useridData, } let approverArr = []; approverArr.push(approverObj); //arr.push(obj); let subFlowObj = { approver: approverArr, nodeid:obj.nodeid, } document.subFlowApprover.push(subFlowObj); }else { document.submitTo = subArr } }else if ( //褰撴槸瀛愭祦绋嬫椂 this.selectData[i].subFlowApproverData && this.selectData[i].subFlowApproverData.nodeid == this.nextNodeIds ) { let subflowData = Object.assign({}, this.selectData[i].subFlowApproverData); for(let j=0; j<subflowData.approver.length; j++) { delete subflowData.approver[j].rows } document.subFlowApprover.push(subflowData); } } //document.subFlowApprover = arr; //document.submitTo = subArr; } API.submitFlow(appId, docId, document, { onSucess: response => { this.firstSubmission = true; let status; let prompt; if (response.data.errcode == 0) { status = "SUCCESS"; prompt = response.data.data; this.runAfterAction(status, prompt); } else if (response.data.errcode == 4001) { status = "ERROR"; this.$emit("closePopup", status); let prompt = response.data.errors[0].errmsg ? response.data.errors[0].errmsg : response.data.errmsg; } } }); } }, //鎵ц鑴氭湰鍚� runAfterAction(status, prompt) { let document = this.documentData; let isRelate = ''; let _flowType = this.act.flowType; //鎻愪氦涓�80 this.$api.submitRrunAfterActionScript( this.$root.appid, this.act.id, document, document.docId, document.viewId, document.formId, document.templateForm, document.parentId, isRelate, _flowType, { onSucess: response => { if (response.data.errcode == 0 && !response.data.data) { this.$notify({ title: this.$t('success'), message: prompt, type: 'success' }); this.$emit("closePopup", status); }else if(response.data.errcode == 0 && response.data.data) { let sta = "ERROR"; let isClose = true; this.$emit("closePopup", sta, isClose); } } } ); }, //闅愯棌灏忔剰瑙佹 hiddenSuggest() { console.log("闅愯棌灏忔剰瑙佹"); this.isOrSuggest = !this.isOrSuggest; }, changeDiv(){ this.currentAct = !this.currentAct; }, //鑾峰彇杩斿洖鐨勬暟鎹� getSuggest(){ let userId = this.$store.state.userId; const employeeId = localStorage.getItem("employeeId") || this.$root.user.id ; this.$api.getCommonOpinions(employeeId, { onSucess: response => { this.allSuggests = response.data.data; } }); }, //鑺傜偣鏁版嵁 getSubmission(){ if (this.act.workFlowType && this.act.workFlowType == 1) { console.log("鑷敱娴佺▼-->"); } else { console.log("鍏朵粬-->"); } let formData = this.buildFormData; formData.stateId = this.stateId; let appId = this.$root.appid; let docId = formData.id, id = formData.id; let formId = formData.formId; let document = { applicationId: appId, docId: docId, document: formData, formId: formId, id: id, parentId: "", templateForm: "", viewId: "" }; API.getFlowPanel(appId, docId, document, { onSucess: response => { let nodesArr = response.data.data.nextNodes; let min; for (let i = 0; i < nodesArr.length; i++) { for (var j = i; j < nodesArr.length; j++) { if (nodesArr[j].orderNum) { if (nodesArr[i].orderNum > nodesArr[j].orderNum) { min = nodesArr[j]; nodesArr[j] = nodesArr[i]; nodesArr[i] = min; } } } } this.selectData = nodesArr; this.selectData.forEach(item => { if (item.isToPerson) { this.isToPerson = item.isToPerson; } }); this.isSplit = response.data.data.isSplit; this.currentNodeId = response.data.data.currentNodeId; //褰撳墠鑺傜偣ID this.isAppentCirculator = response.data.data.isAppentCirculator; //鏄惁鎶勯€�; this.flowId = response.data.data.flowId; if (this.isSplit) { //澶嶉€� this.nextNodeIds = []; this.selectData.forEach(item => { if (item.checked == true) { this.nextNodeIds.push(item.id); } }); } else { //鍗曢€� this.selectData.every(item => { if (item.checked == true) { this.nextNodeIds = item.id; } return false; }); } } }); } } } </script>